Fix reports issues (#301)

Author: joanagmaia

frontend/src/modules/report/components/report-grid-layout.vue

@@ -62,12 +62,13 @@
           :is-resizable="editable"
           :is-mirrored="false"
           :vertical-compact="true"
-          :margin="[16, 16]"
+          :margin="[16, 22]"
           :use-css-transforms="true"
         >
           <grid-item
             v-for="item in layout"
             :key="item.i"
+            class="pb-8"
             :x="item.x"
             :y="item.y"
             :w="item.w"
@@ -91,6 +92,7 @@
             "
           >
             <app-widget-cube-renderer
+              class="panel"
               :editable="editable"
               :widget="widgets[item.i]"
               :chart-options="widgets[item.i]"
@@ -208,7 +210,10 @@ export default {
         x: (length * 6) % 12,
         y: length + 12, // puts it at the bottom
         w: 6,
-        h: widgetModel.settings.layout.h
+        h:
+          widgetModel.settings.chartType === 'number'
+            ? 6
+            : 21
       }
       return await WidgetService.create({
         title: duplicate
@@ -321,6 +326,19 @@ export default {
 .report-grid-layout {
   @apply min-h-40 relative;
 }
+.vue-grid-item > div {
+  overflow-y: auto;
+  height: 100%;
+
+  .widget-cube {
+    height: fit-content;
+  }
+
+  .widget-table {
+    overflow-y: auto;
+    height: calc(100% - 44px);
+  }
+}
 .vue-grid-item:not(.vue-grid-placeholder) {
   touch-action: none;
 }

frontend/src/modules/report/pages/report-view-page.vue

@@ -7,12 +7,12 @@
     ></div>
     <div v-else>
       <div
-        class="mb-4 h-24 flex items-center flex-shrink-0 fixed top-0 inset-x-0 z-10 bg-gray-50 shadow-sm transition-all ease-in-out duration-300"
+        class="mb-4 h-24 flex items-center flex-shrink-0 fixed top-0 inset-x-0 z-10 bg-gray-50 shadow-sm transition-all ease-in-out duration-300 justify-center"
         :style="
           menuCollapsed ? 'left: 64px' : 'left: 260px'
         "
       >
-        <div class="max-w-5xl mx-auto w-full">
+        <div class="max-w-5xl mx-5 w-full">
           <router-link
             class="text-gray-600 btn-link--md btn-link--secondary p-0 inline-flex items-center mb-2"
             :to="{ path: '/reports' }"

frontend/src/modules/widget/components/cube/_query_builder/DimensionSelect.vue

@@ -113,7 +113,7 @@ export default {
       get() {
         return this.translatedOptions(this.dimensions).map(
           (i) => i.label
-        )
+        )?.[0]
       },
       set(value) {
         return this.setDimensions([value])

frontend/src/modules/widget/components/cube/_query_builder/FilterComponent.vue

@@ -23,14 +23,22 @@
         :key="filter.id"
         class="flex -mx-2 mb-2 items-center"
       >
-        <div class="input-group mx-2">
+        <div class="flex items-center mx-2">
           <div class="grow">
             <el-select
               v-model="filter.select"
+              class="first-filter"
               clearable
               filterable
               placeholder="Measure/dimension"
-              @change="handleFilterChange"
+              @change="
+                (value) =>
+                  handleFilterChange(
+                    'first-option',
+                    value,
+                    index
+                  )
+              "
             >
               <el-option
                 v-for="item in computedFilters"
@@ -45,9 +53,17 @@
           <div class="grow">
             <el-select
               v-model="filter.operator"
+              class="second-filter"
               clearable
               placeholder="Condition"
-              @change="handleFilterChange"
+              @change="
+                (value) =>
+                  handleFilterChange(
+                    'second-option',
+                    value,
+                    index
+                  )
+              "
             >
               <el-option
                 v-for="actionItem in actionItems"
@@ -61,11 +77,73 @@
           </div>
 
           <div class="grow">
+            <el-select
+              v-if="filter.select === 'Activities.platform'"
+              v-model="filter.value"
+              class="third-filter"
+              placeholder="Value"
+              @change="
+                (value) =>
+                  handleFilterChange(
+                    'third-option',
+                    value,
+                    index
+                  )
+              "
+            >
+              <el-option
+                v-for="integration of Object.keys(
+                  activeIntegrationsList
+                )"
+                :key="platformDetails(integration).name"
+                :label="platformDetails(integration).name"
+                :value="integration"
+                @mouseleave="onSelectMouseLeave"
+              />
+            </el-select>
+            <el-select
+              v-else-if="
+                filter.select === 'Activities.type'
+              "
+              v-model="filter.value"
+              class="third-filter"
+              placeholder="Value"
+              @change="
+                (value) =>
+                  handleFilterChange(
+                    'third-option',
+                    value,
+                    index
+                  )
+              "
+            >
+              <el-option-group
+                v-for="group in computedActivityTypes"
+                :key="group.label.key"
+                :label="group.label.value"
+              >
+                <el-option
+                  v-for="item in group.nestedOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-option-group>
+            </el-select>
             <el-input
+              v-else
               v-model="filter.value"
+              class="third-filter"
               type="text"
               placeholder="Value"
-              @change="handleFilterChange"
+              @change="
+                (value) =>
+                  handleFilterChange(
+                    'third-option',
+                    value,
+                    index
+                  )
+              "
             ></el-input>
           </div>
         </div>
@@ -99,6 +177,11 @@
 <script>
 import { v4 as uuid } from 'uuid'
 import { onSelectMouseLeave } from '@/utils/select'
+import { mapGetters, mapActions } from 'vuex'
+import { CrowdIntegrations } from '@/integrations/integrations-config'
+import { ActivityModel } from '@/modules/activity/activity-model'
+
+const { fields } = ActivityModel
 
 export default {
   name: 'FilterComponent',
@@ -219,9 +302,25 @@ export default {
                   dimension
                 ].includes(d.name)
           })
+    },
+    computedActivityTypes() {
+      return fields.type
+        .dropdownOptions()
+        .filter((i) =>
+          Object.keys(this.activeIntegrationsList).includes(
+            i.label.key
+          )
+        )
+    },
+    ...mapGetters({
+      activeIntegrationsList: 'integration/activeList'
+    }),
+    fields() {
+      return fields
     }
   },
-  created() {
+  async created() {
+    await this.doFetchIntegrations()
     this.localFilters = this.initFilters() || []
   },
   methods: {
@@ -237,8 +336,8 @@ export default {
       this.localFilters.splice(index, 1)
       this.syncFilters()
     },
-    handleFilterChange() {
-      this.syncFilters()
+    handleFilterChange(option, value, index) {
+      this.syncFilters(option, value, index)
     },
     initFilters() {
       if (!this.filters.length) {
@@ -250,7 +349,7 @@ export default {
           const filter = f
 
           filter.value = f.values[0]
-          filter.select = f.member
+          filter.select = f.member.name
 
           delete filter.member
           delete filter.values
@@ -259,7 +358,11 @@ export default {
         }
       )
     },
-    syncFilters() {
+    syncFilters(option, value, index) {
+      const hasChangedFirstOption =
+        option === 'first-option' &&
+        this.filters?.[index]?.select !== value
+
       const newFilters = this.localFilters
         .filter((filter) => {
           return [
@@ -276,28 +379,37 @@ export default {
           }
         })
 
+      if (hasChangedFirstOption) {
+        this.localFilters[index].value = undefined
+      }
+
       this.setFilters(newFilters)
     },
 
-    onSelectMouseLeave
+    onSelectMouseLeave,
+    ...mapActions({
+      doFetchIntegrations: 'integration/doFetch'
+    }),
+
+    platformDetails(platform) {
+      return CrowdIntegrations.getConfig(platform)
+    }
   }
 }
 </script>
 
 <style lang="scss">
 .widget-filter-container {
-  .input-group {
-    @apply rounded border border-gray-200 flex items-center;
+  .first-filter .el-input__wrapper {
+    @apply rounded-r-none;
   }
-  .el-input,
-  .el-input:hover,
-  .el-input.is-focus {
-    .el-input__wrapper,
-    &:hover,
-    &:focus,
-    &.is-focus {
-      @apply border-l-0 border-r-0 rounded-none shadow-none outline-none ring-0;
-    }
+
+  .second-filter .el-input__wrapper {
+    @apply rounded-none;
+  }
+
+  .third-filter .el-input__wrapper {
+    @apply rounded-l-none;
   }
 }
 </style>

frontend/src/modules/widget/components/cube/_query_builder/Order.vue

@@ -21,19 +21,15 @@
             :model-value="element.order"
             size="small"
             class="radio-button-group"
-            @input="
+            @change="
               (value) =>
                 $emit('orderChange', element.id, value)
             "
           >
-            <el-radio-button
-              label="ascending"
-              :name="element.id"
+            <el-radio-button label="asc" :name="element.id"
               >Asc</el-radio-button
             >
-            <el-radio-button
-              label="descending"
-              :name="element.id"
+            <el-radio-button label="desc" :name="element.id"
               >Desc</el-radio-button
             >
             <el-radio-button label="none" :name="element.id"
@@ -88,7 +84,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .order-element {
   @apply flex justify-between items-center w-full;
 }