From 62e62a9a8a512d1adab1adbfbf2da67c7d029f0c Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Tue, 9 Jul 2024 14:10:00 +0100
Subject: [PATCH] Add live filtering to chart page blocks

---
 .../src/components/PageBlocks/ChartBase.vue   | 201 +++++++++++++++++-
 .../PageBlocks/ChartConfigurator.vue          | 111 ++++++----
 .../src/components/PageBlocks/Wrap/Card.vue   |   1 +
 .../src/components/PageBlocks/Wrap/Plain.vue  |   2 +-
 .../src/components/PageBlocks/Wrap/base.vue   |   6 +
 lib/js/src/compose/types/page-block/chart.ts  |  10 +-
 locale/en/corteza-webapp-compose/block.yaml   |  16 ++
 7 files changed, 294 insertions(+), 53 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/ChartBase.vue b/client/web/compose/src/components/PageBlocks/ChartBase.vue
index 0958d6182..f876e11af 100644
--- a/client/web/compose/src/components/PageBlocks/ChartBase.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartBase.vue
@@ -1,6 +1,7 @@
 <template>
   <wrap
     v-bind="$props"
+    body-class="position-relative"
     v-on="$listeners"
     @refreshBlock="refresh"
   >
@@ -12,8 +13,117 @@
       :reporter="reporter"
       @drill-down="drillDown"
     />
+
+    <template v-if="options.liveFilterEnabled">
+      <b-button
+        variant="outline-light"
+        class="chart__livefilter-btn position-absolute d-flex d-print-none border-0 px-1"
+        :class="[!!liveFilterValue && !liveFilterModal.show ? 'text-primary' : 'text-secondary']"
+        @click="showFilterModal"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'filter']"
+        />
+      </b-button>
+
+      <b-modal
+        v-model="liveFilterModal.show"
+        :title="$t('chart.filter.modal.title')"
+        :ok-title="$t('general:label.saveAndClose')"
+        centered
+        size="lg"
+        cancel-variant="light"
+        no-fade
+        @ok="updateLiveFilter"
+        @hide="liveFilterModal.show = undefined"
+      >
+        <b-form-group
+          v-if="originalFilter"
+          :label="$t('chart.filter.modal.originalFilter.label')"
+          label-class="text-primary"
+        >
+          <b-form-textarea
+            :value="originalFilter"
+            readonly
+          />
+        </b-form-group>
+
+        <b-form-group
+          :label="$t('chart.filter.modal.liveFilter.label')"
+          label-class="text-primary"
+        >
+          <c-input-select
+            v-model="liveFilterModal.value"
+            :options="predefinedFilters"
+            label="text"
+            :reduce="filter => filter.value"
+            :placeholder="$t('chart.filter.modal.liveFilter.placeholder')"
+          />
+        </b-form-group>
+
+        <div v-if="originalFilter && liveFilterModal.value">
+          <hr class="my-3">
+
+          <b-form-group
+            :label="$t('chart.filter.modal.filterPreview.label')"
+            label-class="text-primary"
+          >
+            <b-form-textarea
+              :value="liveFilterPreview"
+              readonly
+            />
+          </b-form-group>
+
+          <b-form-group
+            :label="$t('chart.filter.modal.options.label')"
+            label-class="text-primary pb-0"
+          >
+            <b-form-radio
+              v-for="(option, ci) in filterOptions"
+              :key="ci"
+              v-model="liveFilterModal.option"
+              :value="option.value"
+            >
+              {{ $t(`chart.filter.modal.options.${option.label}`) }}
+            </b-form-radio>
+          </b-form-group>
+        </div>
+
+        <template #modal-footer="{ ok }">
+          <div
+            class="d-flex justify-content-between align-items-center w-100"
+          >
+            <b-button
+              type="button"
+              variant="light"
+              @click="resetLiveFilter()"
+            >
+              {{ $t('general:label.reset') }}
+            </b-button>
+
+            <div class="d-flex gap-1">
+              <b-button
+                variant="light"
+                type="button"
+                rounded
+                @click="cancelLiveFilter()"
+              >
+                {{ $t('general:label.cancel') }}
+              </b-button>
+              <b-button
+                variant="primary"
+                @click="ok()"
+              >
+                {{ $t('general:label.save') }}
+              </b-button>
+            </div>
+          </div>
+        </template>
+      </b-modal>
+    </template>
   </wrap>
 </template>
+
 <script>
 import { mapActions } from 'vuex'
 import base from './base'
@@ -22,10 +132,6 @@ import { NoID, compose } from '@cortezaproject/corteza-js'
 import { evaluatePrefilter, isFieldInFilter } from 'corteza-webapp-compose/src/lib/record-filter'
 
 export default {
-  i18nOptions: {
-    namespaces: 'notification',
-  },
-
   components: {
     ChartComponent,
   },
@@ -36,9 +142,41 @@ export default {
     return {
       chart: null,
 
+      originalFilter: undefined,
       filter: undefined,
 
       drillDownFilter: undefined,
+
+      liveFilterModal: {
+        show: false,
+        value: undefined,
+        option: 'AND',
+      },
+
+      predefinedFilters: [
+        ...compose.chartUtil.predefinedFilters.map(pf => ({ ...pf, text: this.$t(`chart:edit.filter.${pf.text}`) })),
+      ],
+
+      selectedFilter: undefined,
+
+      customDate: {
+        start: undefined,
+        end: undefined,
+      },
+
+      liveFilterValue: undefined,
+      liveFilterOption: 'AND',
+
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
+
+      filterOptions: [
+        { label: 'and', value: 'AND' },
+        { label: 'or', value: 'OR' },
+        { label: 'overwrite', value: '' },
+      ],
     }
   },
 
@@ -48,6 +186,10 @@ export default {
 
       return this.options.drillDown && this.options.drillDown.enabled
     },
+
+    liveFilterPreview () {
+      return this.getFilter(this.liveFilterModal.value, this.liveFilterModal.option)
+    },
   },
 
   watch: {
@@ -121,13 +263,16 @@ export default {
             this.filter.field = { name, label }
           })
         }
-      }).catch(this.toastErrorHandler(this.$t('chart.loadFailed')))
+      }).catch(this.toastErrorHandler(this.$t('notification:chart.loadFailed')))
     },
 
-    reporter (r) {
-      this.filter = r
+    reporter (r = {}) {
+      if (!this.originalFilter) {
+        this.originalFilter = r.filter
+        this.filter = r
+      }
 
-      let filter = r.filter
+      let filter = this.getFilter()
 
       if (filter) {
         // If we use ${record} or ${ownerID} and there is no record, resolve empty
@@ -152,6 +297,31 @@ export default {
       return this.$ComposeAPI.recordReport({ namespaceID, ...r, filter })
     },
 
+    getFilter (liveFilter = this.liveFilterValue, option = this.liveFilterOption) {
+      if (liveFilter) {
+        return this.originalFilter && option ? `(${this.originalFilter}) ${option} (${liveFilter})` : liveFilter
+      }
+
+      return this.originalFilter
+    },
+
+    updateLiveFilter () {
+      this.liveFilterValue = this.liveFilterModal.value
+      this.liveFilterOption = this.liveFilterModal.option
+
+      this.liveFilterModal.show = false
+      this.refresh()
+    },
+
+    resetLiveFilter () {
+      this.liveFilterModal.value = undefined
+      this.liveFilterModal.option = 'AND'
+    },
+
+    cancelLiveFilter () {
+      this.liveFilterModal.show = undefined
+    },
+
     refresh () {
       this.fetchChart({ force: true }).then(() => {
         this.chart.config.noAnimation = true
@@ -232,6 +402,13 @@ export default {
       }
     },
 
+    showFilterModal () {
+      this.liveFilterModal.value = this.liveFilterValue
+      this.liveFilterModal.option = this.liveFilterOption
+
+      this.liveFilterModal.show = true
+    },
+
     setDefaultValues () {
       this.chart = null
       this.filter = undefined
@@ -246,3 +423,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.chart__livefilter-btn {
+  right: 0.5rem;
+  top: 1.5rem;
+  z-index: 1;
+}
+</style>
diff --git a/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue b/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
index 032659a07..6e934ac7f 100644
--- a/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
@@ -30,51 +30,73 @@
       </b-input-group>
     </b-form-group>
 
-    <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"
+    <b-row v-if="selectedChart">
+      <b-col
+        cols="12"
+        lg="6"
       >
-        <template #label>
-          {{ $t('chart.drillDown.label') }}
+        <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"
+          >
+            <template #label>
+              {{ $t('chart.drillDown.label') }}
 
-          <c-input-checkbox
-            v-model="options.drillDown.enabled"
-            switch
-            class="ml-1"
-          />
+              <c-input-checkbox
+                v-model="options.drillDown.enabled"
+                switch
+                class="ml-1"
+              />
+            </template>
+
+            <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-col>
 
-        <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-col
+        cols="12"
+        lg="6"
+      >
+        <b-form-group
+          label-class="d-flex align-items-center text-primary"
+          :label="$t('chart.enableLiveFilter')"
+        >
+          <c-input-checkbox
+            v-model="options.liveFilterEnabled"
+            switch
+            :labels="checkboxLabel"
           />
-
-          <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-form-group>
+      </b-col>
+    </b-row>
   </b-tab>
 </template>
 <script>
@@ -96,6 +118,15 @@ export default {
 
   extends: base,
 
+  data () {
+    return {
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
+    }
+  },
+
   computed: {
     ...mapGetters({
       charts: 'chart/set',
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/Card.vue b/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
index 6a0e38029..c394b2333 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
+++ b/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
@@ -80,6 +80,7 @@
       </div>
 
       <b-card-body
+        :body-class="bodyClass"
         class="p-0 flex-fill"
         :class="{ 'overflow-auto': scrollableBody }"
       >
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue b/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
index 9f5f89729..b6da32c55 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
+++ b/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
@@ -78,7 +78,7 @@
 
       <div
         class="card-body p-0 flex-fill"
-        :class="{ 'overflow-auto': scrollableBody }"
+        :class="{ 'overflow-auto': scrollableBody, bodyClass }"
         style="flex-shrink: 10;"
       >
         <slot
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/base.vue b/client/web/compose/src/components/PageBlocks/Wrap/base.vue
index 91917f1a6..7259a93a0 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/base.vue
+++ b/client/web/compose/src/components/PageBlocks/Wrap/base.vue
@@ -31,6 +31,12 @@ export default {
       default: '',
     },
 
+    bodyClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
     headerClass: {
       type: String,
       required: false,
diff --git a/lib/js/src/compose/types/page-block/chart.ts b/lib/js/src/compose/types/page-block/chart.ts
index c0d6716b9..3fd968cb1 100644
--- a/lib/js/src/compose/types/page-block/chart.ts
+++ b/lib/js/src/compose/types/page-block/chart.ts
@@ -1,5 +1,5 @@
 import { PageBlock, PageBlockInput, Registry } from './base'
-import { Apply,NoID } from '../../../cast'
+import { Apply, NoID } from '../../../cast'
 import { Options as PageBlockRecordListOptions } from './record-list'
 import { cloneDeep, merge } from 'lodash'
 
@@ -17,6 +17,7 @@ interface Options {
   showRefresh: boolean;
   magnifyOption: string;
   drillDown: DrillDown;
+  liveFilterEnabled: boolean;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -24,13 +25,14 @@ const defaults: Readonly<Options> = Object.freeze({
   refreshRate: 0,
   showRefresh: false,
   magnifyOption: '',
+  liveFilterEnabled: false,
   drillDown: {
     enabled: false,
     blockID: '',
     recordListOptions: {
       fields: [],
     },
-  }
+  },
 })
 
 export class PageBlockChart extends PageBlock {
@@ -50,14 +52,14 @@ export class PageBlockChart extends PageBlock {
 
     Apply(this.options, o, String, 'chartID', 'magnifyOption')
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'showRefresh')
+    Apply(this.options, o, Boolean, 'showRefresh', 'liveFilterEnabled')
 
     if (o.drillDown) {
       this.options.drillDown = merge({}, defaults.drillDown, o.drillDown)
     }
   }
 
-  resetDrillDown(): void {
+  resetDrillDown (): void {
     this.options.drillDown = cloneDeep(defaults.drillDown)
   }
 }
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index f7630ae5e..548668f82 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -87,6 +87,7 @@ chart:
   addRadar: Radar chart
   addGeneric: Generic chart
   createFailed: Could not create a chart
+  enableLiveFilter: Enable live filter
   columns:
     name: Name
     handle: Handle
@@ -121,6 +122,21 @@ chart:
   searchPlaceholder: Type here to search all charts in this namespace
   openInBuilder: Open in chart builder
   openChartList: Open chart list
+  filter:
+    modal:
+      title: Chart Filter
+      originalFilter:
+        label: Original filter
+      liveFilter:
+        label: Live filter
+        placeholder: Select a filter
+      filterPreview:
+        label: Filter Preview
+      options:
+        label: Filter options
+        and: Join filters with AND
+        or: Join filters with OR
+        overwrite: Overwrite original filter
 content:
   ok: Ok
   label: Content