ayanova/src/components/data-table-filter-control.vue

@@ -333,7 +333,7 @@ export default {
     reject: null,
     tableColumnData: {}, //from table
     fieldDefinitions: [],
-    editItem: {},
+    editItem: { filter: { items: [] } },
     activeFilter: null,
     selectLists: {
       dateFilterOperators: [],

ayanova/src/components/data-table-filter-manager-control.vue

@@ -0,0 +1,218 @@
+<template>
+  <v-dialog
+    max-width="600px"
+    v-model="isVisible"
+    @keydown.esc="close()"
+    data-cy="dataTableFilterManagerControl"
+  >
+    <v-card>
+      <v-card-title>{{ $ay.t("Filter") }} </v-card-title>
+      <v-card-subtitle class="mt-1"
+        >{{ activeFilterNameAtOpen }} {{ activeFilterCreator }}</v-card-subtitle
+      >
+      <!-- activefilter:{ "id": 2, "concurrency": 5029609, "userId": 1, "name": "-", 
+      "public": false, "defaultFilter": true, "listKey": "CustomerDataList", "filter": "[]" }  -->
+      <v-card-text>
+        <!-- <div>activefilter:{{ activeFilter }}</div> -->
+        <v-text-field
+          :readonly="formState.readOnly"
+          v-model="activeFilter.name"
+          :label="$ay.t('GridFilterName')"
+          required
+        ></v-text-field>
+        <v-checkbox
+          v-model="activeFilter.public"
+          :readonly="formState.readOnly"
+          :label="$ay.t('AnyUser')"
+          ref="public"
+          data-cy="public"
+        ></v-checkbox>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text @click="close()" color="primary">{{
+          $ay.t("Cancel")
+        }}</v-btn>
+        <v-spacer />
+        <template v-if="activeFilter.defaultFilter == false && isSelfOwned">
+          <v-btn text @click="deleteFilter()" color="primary">{{
+            $ay.t("Delete")
+          }}</v-btn>
+          <v-spacer />
+        </template>
+        <template v-if="activeFilter.defaultFilter == true">
+          <v-btn text @click="resetFilter()" color="primary">{{
+            $ay.t("Reset")
+          }}</v-btn>
+          <v-spacer />
+        </template>
+
+        <v-btn text @click="saveAndExit(true)" color="primary">{{
+          $ay.t("SaveCopy")
+        }}</v-btn>
+
+        <template v-if="activeFilter.defaultFilter == false && isSelfOwned">
+          <v-spacer />
+          <v-btn text @click="saveAndExit()" color="primary">{{
+            $ay.t("Save")
+          }}</v-btn>
+        </template>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+export default {
+  components: {},
+  async created() {
+    await initForm(this);
+  },
+  data: () => ({
+    isVisible: false,
+    resolve: null,
+    reject: null,
+    activeFilter: {
+      id: 0,
+      userId: 0,
+      name: null,
+      public: false,
+      defaultFilter: true,
+      listKey: null,
+      filter: "[]"
+    },
+    activeFilterNameAtOpen: null,
+    activeFilterCreator: "",
+    isSelfOwned: true,
+    formState: {
+      ready: false,
+      dirty: false,
+      valid: true,
+      readOnly: false,
+      loading: true,
+      errorBoxMessage: undefined,
+      appError: undefined,
+      serverError: {}
+    }
+  }),
+  props: {
+    dataListKey: String,
+    activeFilterId: Number
+  },
+  methods: {
+    async saveAndExit(saveAs) {
+      if (saveAs) {
+        //SAVE AS
+
+        //strip ID
+        delete this.activeFilter.id;
+        delete this.activeFilter.concurrency;
+
+        //save as can never save as default
+        this.activeFilter.defaultFilter = false;
+        //save as can never be same name as default -
+        if (
+          this.activeFilter.name == "-" ||
+          this.activeFilter.name == this.activeFilterNameAtOpen
+        ) {
+          this.activeFilter.name += " [" + this.$ay.t("Copy") + "]";
+        }
+        this.activeFilter.userId = window.$gz.store.state.userId;
+        let res = await window.$gz.api.post(
+          "data-list-filter",
+          this.activeFilter
+        );
+        if (res.error) {
+          //throw new Error(res.error);
+          throw new Error(window.$gz.errorHandler.errorToString(res, this));
+        } else {
+          this.close({ refresh: true });
+        }
+      } else {
+        //SAVE
+        let res = await window.$gz.api.put(
+          "data-list-filter",
+          this.activeFilter
+        );
+        if (res.error) {
+          //throw new Error(res.error);
+          throw new Error(window.$gz.errorHandler.errorToString(res, this));
+        } else {
+          this.close({ refresh: true });
+        }
+      }
+    },
+    async open(tableColumnData) {
+      this.tableColumnData = tableColumnData;
+
+      await fetchActiveFilter(this);
+      this.activeFilterNameAtOpen = this.activeFilter.name;
+      this.isSelfOwned =
+        this.activeFilter.userId == window.$gz.store.state.userId;
+
+      //Get owner name
+      if (!this.isSelfOwned) {
+        let res = await window.$gz.api.post("pick-list/list", {
+          ayaType: window.$gz.type.User,
+          inactive: true,
+          preselectedIds: [this.activeFilter.userId]
+        });
+
+        if (res.error) {
+          this.activeFilterCreator = " (creator: UNKNOWN / ERROR)";
+          throw new Error(window.$gz.errorHandler.errorToString(res, this));
+        } else {
+          this.activeFilterCreator = `(${res.data[0].name})`;
+        }
+      }
+
+      this.isVisible = true;
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+    },
+    close(ret) {
+      this.isVisible = false;
+
+      this.resolve(ret);
+    }
+  }
+};
+/////////////////////////////////
+//
+//
+async function initForm(vm) {
+  await fetchTranslatedText(vm);
+  //   populateSelectionLists(vm);
+  //   await populateFieldDefinitions(vm);
+  //   await fetchTranslatedFieldNames(vm);
+  //   await setEffectiveListView(vm);
+
+  //   await fetchEnums(vm);
+}
+
+////////////////////
+//
+async function fetchActiveFilter(vm) {
+  ///api/v8/data-list-filter/{id}
+  let res = await window.$gz.api.get(`data-list-filter/${vm.activeFilterId}`);
+  if (res.error) {
+    //throw new Error(res.error);
+    throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+  } else {
+    vm.activeFilter = res.data;
+  }
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText(vm) {
+  await window.$gz.translation.cacheTranslations([
+    "GridFilterName",
+    "AnyUser",
+    "Copy",
+    "SaveAs"
+  ]);
+}
+</script>

ayanova/src/components/data-table.vue

@@ -7,6 +7,12 @@
       ref="dataTableFilter"
     >
     </gz-data-table-filter>
+    <gz-data-table-filter-manager
+      :dataListKey="dataListKey"
+      :activeFilterId="activeFilterId"
+      ref="dataTableFilterManager"
+    >
+    </gz-data-table-filter-manager>
     <v-card>
       <!-- {{ dataTablePagingOptions }}
       {{ headers }} -->
@@ -18,6 +24,8 @@
           item-value="id"
           :label="$ay.t('Filter')"
           @input="savedFilterSelected"
+          prepend-icon="$ayiEdit"
+          @click:prepend="editFilter()"
           data-cy="selectSavedFilter"
         >
         </v-select>
@@ -521,6 +529,13 @@ export default {
       }
       return clr;
     },
+    async editFilter() {
+      let res = await this.$refs.dataTableFilterManager.open();
+      if (res && res.refresh == true) {
+        //refresh the filter picklist and get data from api
+        this.getDataFromApi();
+      }
+    },
     keyArrayFromSortByArray(sortBy) {
       return sortBy.map(sortItem => {
         let val = this.headers.find(z => z.value == sortItem);

ayanova/src/main.js

@@ -40,6 +40,7 @@ import tagPicker from "./components/tag-picker.vue";
 import pickList from "./components/pick-list.vue";
 import dataTable from "./components/data-table.vue";
 import dataTableFilterControl from "./components/data-table-filter-control.vue";
+import dataTableFilterManagerControl from "./components/data-table-filter-manager-control.vue";
 import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
@@ -188,6 +189,7 @@ Vue.component("gz-tag-picker", tagPicker);
 Vue.component("gz-pick-list", pickList);
 Vue.component("gz-data-table", dataTable);
 Vue.component("gz-data-table-filter", dataTableFilterControl);
+Vue.component("gz-data-table-filter-manager", dataTableFilterManagerControl);
 Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
 Vue.component("gz-decimal", decimalControl);