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

@@ -1,11 +1,23 @@
 <template>
   <v-dialog
+    max-width="600px"
     v-model="isVisible"
     @keydown.esc="close()"
     data-cy="dataTableFilterControl"
   >
-    {{ columnKey }}
+    <v-card>
-    {{ selectLists }}
+      <v-card-title>{{ columnItem.text }}</v-card-title>
+      <!-- <v-card-subtitle class="mt-1">sub title text</v-card-subtitle> -->
+      <v-card-text>
+        {{ columnItem }}
+        {{ fieldDefinitions }}
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text @click="close()" color="primary">{{
+          $ay.t("Close")
+        }}</v-btn>
+      </v-card-actions>
+    </v-card>
   </v-dialog>
 </template>
 <script>
@@ -18,7 +30,7 @@ export default {
     isVisible: false,
     resolve: null,
     reject: null,
-    columnKey: null,
+    columnItem: {},
     fieldDefinitions: [],
     selectLists: {
       dateFilterOperators: [],
@@ -31,9 +43,12 @@ export default {
       enumFilterOperators: []
     }
   }),
+  props: {
+    dataListKey: String
+  },
   methods: {
-    open(columnKey) {
+    open(columnItem) {
-      this.columnKey = columnKey;
+      this.columnItem = columnItem;
       this.isVisible = true;
       return new Promise((resolve, reject) => {
         this.resolve = resolve;
@@ -53,20 +68,46 @@ export default {
 async function initForm(vm) {
   await fetchTranslatedText(vm);
   populateSelectionLists(vm);
-  //   await populateFieldDefinitions(vm);
+  await populateFieldDefinitions(vm);
   //   await fetchTranslatedFieldNames(vm);
   //   await setEffectiveListView(vm);
   //   await initDataObject(vm);
   //   await fetchEnums(vm);
 }
 
+////////////////////
+//
+async function populateFieldDefinitions(vm) {
+  //get the field defs from cache or store them
+  //they are unchanging in a session so no need to fetch each time
+  //only a server update would modify them from last value
+  let storageKey = `dataListFields:${vm.dataListKey}`;
+
+  let ss = sessionStorage.getItem(storageKey);
+  if (ss) {
+    vm.fieldDefinitions = JSON.parse(ss);
+    return;
+  } else {
+    //http://localhost:7575/api/v8/data-list/listfields?DataListKey=TestWidgetDataList
+    let res = await window.$gz.api.get(
+      "data-list/listfields?DataListKey=" + vm.dataListKey
+    );
+    if (res.error) {
+      //throw new Error(res.error);
+      throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+    } else {
+      vm.fieldDefinitions = res.data;
+      sessionStorage.setItem(storageKey, JSON.stringify(res.data));
+    }
+  }
+}
+
 //////////////////////////////////////////////////////////
 //
 // Ensures UI translated text is available
 //
 async function fetchTranslatedText(vm) {
   await window.$gz.translation.cacheTranslations([
-   
     "GridFilterName",
     "Include",
     "AnyUser",

ayanova/src/components/data-table.vue

@@ -514,7 +514,7 @@ export default {
       return "";
     },
     async filter(item) {
-      let res = await this.$refs.dataTableFilter.open(item.fk);
+      let res = await this.$refs.dataTableFilter.open(item);
       if (res && res.refresh == true) {
         this.getDataFromApi();
       }