Add ability to configure columns in metric and chart blocks

Author: EmmyMay

client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="d-flex">
     <b-button
-      size="lg"
-      variant="light"
+      :size="size"
+      :variant="variant"
       class="flex-fill"
+      :disabled="disabled"
       @click="showModal = true"
     >
-      {{ $t('allRecords.columns.title') }}
+      <slot>
+        {{ $t('allRecords.columns.title') }}
+      </slot>
     </b-button>
 
     <b-modal
@@ -60,6 +63,21 @@ export default {
       required: true,
       default: () => [],
     },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    size: {
+      type: String,
+      default: 'lg',
+    },
+
+    variant: {
+      type: String,
+      default: 'light',
+    },
   },
 
   data () {
@@ -70,10 +88,10 @@ export default {
     }
   },
 
-  created () {
-    this.filteredFields = this.fields.map(f => {
-      return { ...f.moduleField }
-    })
+  watch: {
+    fields (fields) {
+      this.filteredFields = this.module.filterFields(fields)
+    },
   },
 
   beforeDestroy () {

client/web/compose/src/components/PageBlocks/ChartBase.vue

@@ -162,13 +162,15 @@ export default {
         this.$root.$emit(`drill-down-recordList:${recordListUniqueID}`, prefilter)
       } else {
         const { title } = this.block
+        const { fields = [] } = this.options.drillDown.recordListOptions || {}
 
         // Open in modal
         const block = new compose.PageBlockRecordList({
           title: title ? `${title} - "${drillDownValue}"` : drillDownValue,
           blockID: `drillDown-${chartID}`,
           options: {
             moduleID,
+            fields,
             prefilter,
             presort: 'createdAt DESC',
             hideRecordReminderButton: true,

client/web/compose/src/components/PageBlocks/ChartConfigurator.vue

@@ -18,11 +18,11 @@
 
         <b-input-group-append>
           <b-button
-            v-b-tooltip.noninteractive.hover="{ title: $t('chart.openInBuilder'), container: '#body' }"
-            :disabled="!selectedChart || (!selectedChart.canUpdateChart && !selectedChart.canDeleteChart)"
+            v-b-tooltip.hover="{ title: $t(chartSelectorTooltip), container: '#body' }"
+            :disabled="selectedChart && (!selectedChart.canUpdateChart && !selectedChart.canDeleteChart)"
             variant="extra-light"
             class="d-flex align-items-center"
-            :to="{ name: 'admin.charts.edit', params: { chartID: (selectedChart || {}).chartID }, query: null }"
+            :to="{ name: chartExternalLink, params: { chartID: (selectedChart || {}).chartID }, query: null }"
           >
             <font-awesome-icon :icon="['fas', 'external-link-alt']" />
           </b-button>
@@ -32,6 +32,7 @@
 
     <template v-if="isDrillDownAvailable">
       <b-form-group
+        :label="$t('chart.drillDown.label')"
         :description="$t('chart.drillDown.description')"
         label-class="d-flex align-items-center text-primary"
         class="mb-1"
@@ -43,16 +44,32 @@
           class="mb-2"
         />
 
-        <c-input-select
-          v-model="options.drillDown.blockID"
-          :options="drillDownOptions"
-          :get-option-key="getOptionKey"
-          :disabled="!options.drillDown.enabled"
-          :get-option-label="o => o.title || o.kind"
-          :reduce="option => option.blockID"
-          :clearable="true"
-          :placeholder="$t('chart.drillDown.openInModal')"
-        />
+        <b-input-group>
+          <c-input-select
+            v-model="options.drillDown.blockID"
+            :options="drillDownOptions"
+            :get-option-key="getOptionKey"
+            :disabled="!options.drillDown.enabled"
+            :get-option-label="o => o.title || o.kind"
+            :reduce="option => option.blockID"
+            :clearable="true"
+            :placeholder="$t('chart.drillDown.openInModal')"
+          />
+
+          <b-input-group-append>
+            <column-picker
+              ref="columnPicker"
+              :module="selectedChartModule"
+              :fields="selectedDrilldownFields"
+              :disabled="!!options.drillDown.blockID || !options.drillDown.enabled"
+              variant="extra-light"
+              size="md"
+              @updateFields="onUpdateFields"
+            >
+              <font-awesome-icon :icon="['fas', 'wrench']" />
+            </column-picker>
+          </b-input-group-append>
+        </b-input-group>
       </b-form-group>
     </template>
   </b-tab>
@@ -61,6 +78,7 @@
 import base from './base'
 import { mapGetters } from 'vuex'
 import { NoID } from '@cortezaproject/corteza-js'
+import ColumnPicker from 'corteza-webapp-compose/src/components/Admin/Module/Records/ColumnPicker'
 
 export default {
   i18nOptions: {
@@ -69,6 +87,10 @@ export default {
 
   name: 'Chart',
 
+  components: {
+    ColumnPicker,
+  },
+
   extends: base,
 
   data () {
@@ -83,6 +105,7 @@ export default {
   computed: {
     ...mapGetters({
       charts: 'chart/set',
+      getModuleByID: 'module/getByID',
     }),
 
     selectedChart () {
@@ -93,6 +116,14 @@ export default {
       return this.charts.find(({ chartID }) => chartID === this.options.chartID)
     },
 
+    chartExternalLink () {
+      return !this.selectedChart ? 'admin.charts' : 'admin.charts.edit'
+    },
+
+    chartSelectorTooltip () {
+      return !this.selectedChart ? 'chart.openChartList' : 'chart.openInBuilder'
+    },
+
     selectedChartModuleID () {
       if (!this.selectedChart) return
 
@@ -101,6 +132,18 @@ export default {
       return moduleID
     },
 
+    selectedChartModule () {
+      if (!this.selectedChartModuleID) return
+
+      return this.getModuleByID(this.selectedChartModuleID)
+    },
+
+    selectedDrilldownFields () {
+      if (!this.selectedChart) return []
+
+      return this.options.drillDown.recordListOptions.fields
+    },
+
     isDrillDownAvailable () {
       if (!this.selectedChart) return
 
@@ -116,15 +159,16 @@ export default {
 
   methods: {
     chartSelected () {
-      this.options.drillDown = {
-        enabled: false,
-        blockID: '',
-      }
+      this.block.resetDrillDown()
     },
 
     getOptionKey ({ chartID }) {
       return chartID
     },
+
+    onUpdateFields (fields) {
+      this.options.drillDown.recordListOptions.fields = fields.map(({ fieldID }) => fieldID)
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/MetricBase.vue

@@ -208,12 +208,14 @@ export default {
       } else {
         // Open in modal
         const metricID = `${this.block.blockID}-${name.replace(/\s+/g, '-').toLowerCase()}-${moduleID}-${metricIndex}`
+        const { fields = [] } = this.options.metrics[metricIndex].drillDown.recordListOptions || {}
 
         const block = new compose.PageBlockRecordList({
           title: name || this.$t('metric.metricDrillDown'),
           blockID: `drillDown-${metricID}`,
           options: {
             moduleID,
+            fields,
             prefilter: filter,
             presort: 'createdAt DESC',
             hideRecordReminderButton: true,

client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue

@@ -166,7 +166,7 @@
               </b-form-group>
             </fieldset>
 
-            <fieldset>
+            <fieldset v-if="selectedMetricModule">
               <h5>
                 {{ $t('metric.edit.metricLabel') }}
               </h5>
@@ -262,23 +262,39 @@
               >
                 <template #label>
                   {{ $t('metric.drillDown.label') }}
+
                   <b-form-checkbox
                     v-model="edit.drillDown.enabled"
                     switch
-                    class="ml-1"
+                    class="ml-1 mb-1"
                   />
                 </template>
 
-                <c-input-select
-                  v-model="edit.drillDown.blockID"
-                  :options="drillDownOptions"
-                  :disabled="!edit.drillDown.enabled"
-                  :get-option-label="o => o.title || o.kind"
-                  :reduce="option => option.blockID"
-                  :clearable="true"
-                  :placeholder="$t('metric.drillDown.openInModal')"
-                  append-to-body
-                />
+                <b-input-group>
+                  <c-input-select
+                    v-model="edit.drillDown.blockID"
+                    :options="drillDownOptions"
+                    :disabled="!edit.drillDown.enabled"
+                    :get-option-label="o => o.title || o.kind"
+                    :reduce="option => option.blockID"
+                    :clearable="true"
+                    :placeholder="$t('metric.drillDown.openInModal')"
+                    append-to-body
+                  />
+
+                  <b-input-group-append>
+                    <column-picker
+                      :module="selectedMetricModule"
+                      :disabled="!!edit.drillDown.blockID || !edit.drillDown.enabled"
+                      :fields="selectedDrilldownFields"
+                      variant="extra-light"
+                      size="md"
+                      @updateFields="onUpdateFields"
+                    >
+                      <font-awesome-icon :icon="['fas', 'wrench']" />
+                    </column-picker>
+                  </b-input-group-append>
+                </b-input-group>
               </b-form-group>
             </fieldset>
           </b-card>
@@ -332,6 +348,7 @@ import base from '../base'
 import MStyle from './MStyle'
 import { mapGetters } from 'vuex'
 import MetricBase from '../MetricBase'
+import ColumnPicker from 'corteza-webapp-compose/src/components/Admin/Module/Records/ColumnPicker'
 import { compose, NoID } from '@cortezaproject/corteza-js'
 
 export default {
@@ -343,6 +360,7 @@ export default {
   components: {
     MStyle,
     MetricBase,
+    ColumnPicker,
   },
   extends: base,
 
@@ -374,15 +392,21 @@ export default {
   computed: {
     ...mapGetters({
       modules: 'module/set',
-      moduleByID: 'module/getByID',
+      getModuleByID: 'module/getByID',
     }),
 
     fields () {
       if (!this.edit || !this.edit.moduleID) {
         return []
       }
 
-      return this.moduleByID(this.edit.moduleID).fields
+      return this.getModuleByID(this.edit.moduleID).fields
+    },
+
+    selectedDrilldownFields () {
+      if (!this.edit || !this.edit.drillDown.recordListOptions.fields) return []
+
+      return this.edit.drillDown.recordListOptions.fields
     },
 
     metricFields () {
@@ -405,6 +429,12 @@ export default {
     drillDownOptions () {
       return this.page.blocks.filter(({ blockID, kind, options = {} }) => kind === 'RecordList' && blockID !== NoID && options.moduleID === this.edit.moduleID)
     },
+
+    selectedMetricModule () {
+      if (!this.edit.moduleID) return undefined
+
+      return this.getModuleByID(this.edit.moduleID)
+    },
   },
 
   watch: {
@@ -466,6 +496,10 @@ export default {
       }
     },
 
+    onUpdateFields (fields) {
+      this.edit.drillDown.recordListOptions.fields = fields
+    },
+
     setDefaultValues () {
       this.edit = undefined
       this.dimensionModifiers = []