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);