Remove customize filter checbox on compose charts

client/web/compose/src/components/Chart/Report/ReportEdit.vue

@@ -31,29 +31,31 @@
       >
         <b-form-select
           v-model="report.filter"
-          :disabled="customFilter"
           :options="predefinedFilters"
+          class="mb-2"
         >
           <template slot="first">
-            <option value="">
+            <b-form-select-option :value="defaultFilterOption">
               {{ $t('edit.filter.noFilter') }}
-            </option>
+            </b-form-select-option>
           </template>
         </b-form-select>
 
-        <b-form-checkbox
-          v-model="customFilter"
-          class="mt-3"
-        >
-          {{ $t('edit.filter.customize') }}
-        </b-form-checkbox>
-
         <b-form-textarea
-          v-if="customFilter"
           v-model="report.filter"
-          placeholder="a = 1 AND b > 2"
-          class="mt-2"
+          :placeholder="$t('edit.filter.placeholder')"
         />
+
+        <b-form-text>
+          <i18next
+            path="edit.filter.footnote"
+            tag="label"
+          >
+            <code>${recordID}</code>
+            <code>${ownerID}</code>
+            <code>${userID}</code>
+          </i18next>
+        </b-form-text>
       </b-form-group>
     </div>
 
@@ -316,8 +318,6 @@ export default {
 
   data () {
     return {
-      customFilter: false,
-
       metricAggregates: aggregateFunctions.map(af => ({ ...af, text: this.$t(`edit.metric.function.${af.text}`) })),
       dimensionModifiers: compose.chartUtil.dimensionFunctions.map(df => ({ ...df, text: this.$t(`edit.dimension.function.${df.text}`) })),
       predefinedFilters: compose.chartUtil.predefinedFilters.map(pf => ({ ...pf, text: this.$t(`edit.filter.${pf.text}`) })),
@@ -329,6 +329,10 @@ export default {
       return ({ field }) => (this.module.fields.filter(f => f.name === field)[0] || {}).kind === 'DateTime' ? 'date' : 'text'
     },
 
+    defaultFilterOption () {
+      return this.predefinedFilters.some(({ value }) => value === this.report.filter) ? '' : this.report.filter
+    },
+
     canAddMetric () {
       return (this.supportedMetrics < 0 || this.metrics.length < this.supportedMetrics) && this.moduleID
     },
@@ -408,17 +412,6 @@ export default {
     },
   },
 
-  watch: {
-    'report.filter': {
-      handler: function (v) {
-        // !! is required, since :disabled="..." marks the field as disabled if '' is provided
-        this.customFilter = (!!v && !!compose.chartUtil.predefinedFilters.find(({ value }) => value === v)) ||
-          (!!v)
-      },
-      immediate: true,
-    },
-  },
-
   methods: {
     hasRelativeDisplay: compose.chartUtil.hasRelativeDisplay,
 

locale/en/corteza-webapp-compose/chart.yaml

@@ -44,6 +44,8 @@ edit:
   filter:
     customize: Customize filter
     label: Filters
+    footnote: Simplified SQL condition (WHERE ...) syntax is supported. Variables like {{0}}, {{1}} and {{2}} are evaluated (when available)
+    placeholder: field1 = 1 AND field2 = 232
     noFilter: Select a predefined filter or make a custom one
     recordsCreatedLastMonth: Records created last month
     recordsCreatedLastQuarter: Records created last quarter