✨ Can filter to value and to display by

Ref di/vue-formbuilder#66

src/components/fields/UsfDateTime/UsfDateTime.vue

@@ -160,8 +160,6 @@ export default Vue.extend({
       return undefined;
     },
     getDateOrTimeFormat(dateOrTime: string): string {
-      console.log(this.field);
-
       if (!dateOrTime) return dateOrTime;
 
       if (this.field.type === 'time') {

src/components/formbuilder/settings/tabs/data/UsfTabDataInput/UsfTabDataInput.vue

@@ -102,6 +102,7 @@
         :headers="optionsTableHeaders"
         :items="fieldOptions"
         :search="searchOption"
+        :custom-filter="customFilter"
       >
         <template v-slot:item.label="{ item }">
           <v-edit-dialog :return-value="item.label">
@@ -189,10 +190,11 @@
 import { UsfTabDataInputDisplayedBySelect } from '../UsfTabDataInputDisplayedBySelect';
 import { mapActions } from 'vuex';
 import Vue from 'vue';
-import { Field } from '../../../../../../../types/models/form';
+import { Field, Option } from '#form-plugin/models/form';
 import UsfTabDataInputSelectImportOptions
   from '../UsfTabDataInputSelectImportOptions/UsfTabDataInputSelectImportOptions.vue';
 import { Control } from '#form-plugin/models/control';
+import { DataTableHeader } from 'vuetify';
 
 export default Vue.extend({
   name: 'UsfTabDataInput',
@@ -275,8 +277,8 @@ export default Vue.extend({
     fieldOptions() {
       return this.field.options.map(optionId => this.$store.getters['form/getOptionByIdOrValue'](optionId));
     },
-    optionsTableHeaders() {
-      const optionsTableHeaders = [
+    optionsTableHeaders(): DataTableHeader[] {
+      const optionsTableHeaders: DataTableHeader[] = [
         {
           text: this._uct('builder.tabs.data.dataTable.headers.label'),
           value: 'label',
@@ -308,7 +310,6 @@ export default Vue.extend({
           text: this._uct('builder.tabs.data.dataTable.headers.displayBy'),
           value: 'displayedBy',
           sortable: false,
-          filterable: false,
         });
       }
       return optionsTableHeaders;
@@ -330,6 +331,21 @@ export default Vue.extend({
         this.newOption = Object.assign({}, this.newOptionDefault);
       }, 300);
     },
+    customFilter(itemLabel: string, search: string | null, item: Option): boolean {
+      if (search === null) return true;
+
+      if (item.displayedBy !== undefined && item.displayedBy.length) {
+        return itemLabel.includes(search) || item.displayedBy.some((optionId) => {
+          const option: Option | undefined = this.getOption(optionId);
+          if (option) {
+            return optionId.includes(search) || option.label.includes(search);
+          }
+          return false;
+        });
+      }
+
+      return itemLabel.includes(search)
+    },
     getOption(id) {
       return this.$store.getters['form/getOptionByIdOrValue'](id);
     },