ayanova/src/components/data-table-mobile-filter-column-selector-control.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-dialog
+    max-width="600px"
+    v-model="isVisible"
+    @keydown.esc="close()"
+    data-cy="dataTableMobileFilterColumnSelectorControl"
+  >
+    <!-- <v-card>
+      <v-card-title>{{ $ay.t("Filter") }} </v-card-title>
+
+      <v-card-text>
+        <v-select
+          v-model="mobileSelectedFilterColumn"
+          :items="headers"
+          item-text="text"
+          item-value="fk"
+          prepend-outer-icon="$ayiEdit"
+        >
+        </v-select>
+      </v-card-text>
+      <v-card-actions> </v-card-actions>
+    </v-card> -->
+    <!-- {{ headers }} -->
+    <v-list>
+      <v-subheader>{{ $ay.t("Filter") }}</v-subheader>
+      <v-list-item-group v-model="mobileSelectedFilterColumn" color="primary">
+        <v-list-item v-for="(item, i) in headers" :key="i" @click="close(item)">
+          <v-list-item-icon>
+            <v-icon :color="filterColor(item)">$ayiFilter</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title v-text="item.text"></v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+  </v-dialog>
+</template>
+<script>
+export default {
+  data: () => ({
+    isVisible: false,
+    resolve: null,
+    reject: null,
+    filterColor: null,
+    mobileSelectedFilterColumn: null,
+    headers: []
+  }),
+
+  methods: {
+    open(headers, filterColor) {
+      this.headers = headers;
+      this.filterColor = filterColor;
+      this.isVisible = true;
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+    },
+    close(ret) {
+      this.isVisible = false;
+      this.resolve(ret);
+    }
+  }
+};
+</script>

ayanova/src/components/data-table.vue

@@ -13,6 +13,11 @@
       ref="dataTableFilterManager"
     >
     </gz-data-table-filter-manager>
+    <gz-data-table-mobile-filter-column-selector
+      :headers="headers"
+      ref="dataTableMobileFilterColumnSelector"
+    >
+    </gz-data-table-mobile-filter-column-selector>
     <v-card>
       <v-card-title>
         <v-select
@@ -42,19 +47,19 @@
             </div>
           </template> -->
         <v-spacer></v-spacer>
-        <div>
+        <div class="my-5 my-sm-1">
           <v-btn @click="refresh">
             <v-icon data-cy="refresh">$ayiSync</v-icon>
           </v-btn>
 
           <v-btn
             v-if="$vuetify.breakpoint.xs"
-            class="ml-6"
-            @click="refresh"
+            class="ml-12"
+            @click="mobileColumnFilterSelect"
           >
             <v-icon data-cy="refresh">$ayiFilter</v-icon>
           </v-btn>
-          <v-btn class="ml-6" @click="editColumnView">
+          <v-btn class="ml-12" @click="editColumnView">
             <v-icon data-cy="filter">$ayiColumns</v-icon>
           </v-btn>
         </div>
@@ -253,23 +258,6 @@
           class="elevation-1"
           data-cy="datatable"
         >
-          <!-- <template v-for="h in headers" v-slot:[`header.${h.value}`]>
-            <span :key="h.text">
-              <v-btn icon @click.stop="filter(h)" class="ml-n8 mr-1"
-                ><v-icon :color="filterColor(h)">$ayiFilter</v-icon></v-btn
-              >
-              {{ h.text }}
-            </span>
-          </template> -->
-          <!-- <template v-slot:top>
-            <div>
-              TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP
-              <br />
-              TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP
-            </div>
-          </template> -->
-          <!-- <template v-slot:header="{ props }"> -->
-
           <template v-slot:body="{ items }">
             <v-row>
               <v-col
@@ -435,7 +423,7 @@ export default {
       selectLists: {
         savedFilters: []
       },
-      mobileSelectedFilterColumn: null,
+
       headers: [],
       serverColumns: [],
       serverFilter: [],
@@ -608,6 +596,15 @@ export default {
         await this.getDataFromApi();
       }
     },
+    async mobileColumnFilterSelect() {
+      let resHeaderItem = await this.$refs.dataTableMobileFilterColumnSelector.open(
+        this.headers,
+        this.filterColor
+      );
+      if (resHeaderItem) {
+        await this.filter(resHeaderItem);
+      }
+    },
     keyArrayFromSortByArray(sortBy) {
       return sortBy.map(sortItem => {
         let val = this.headers.find(z => z.value == sortItem);

ayanova/src/main.js

@@ -41,6 +41,7 @@ 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 dataTableMobileFilterColumnSelectorControl from "./components/data-table-mobile-filter-column-selector-control.vue";
 import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
@@ -190,6 +191,10 @@ 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-data-table-mobile-filter-column-selector",
+  dataTableMobileFilterColumnSelectorControl
+);
 Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
 Vue.component("gz-decimal", decimalControl);