feat: Add option to disable auto filter apply

Added toggle button to toggle autofilter

closes #229

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue

@@ -101,6 +101,7 @@
       <v-icon small color="grey">mdi-plus</v-icon>
       Add Filter
     </v-btn>
+    <slot></slot>
   </div>
 </template>
 

packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue

@@ -17,7 +17,25 @@
       </v-badge>
     </template>
     <column-filter v-model="filters" :field-list="fieldList">
+      <div class="d-flex align-center mx-2" @click.stop>
+        <v-checkbox
+          hide-details
+          dense
+          id="col-filter-checkbox"
+          type="checkbox"
+          color="grey"
+          v-model="autosave">
+          <template v-slot:label>
+            <span class="grey--text caption">Auto apply</span>
+          </template>
 
+        </v-checkbox>
+
+        <v-spacer></v-spacer>
+        <v-btn v-show="!autosave" color="primary" @click="$emit('input', filters)" small class="caption ml-2">Apply
+          changes
+        </v-btn>
+      </div>
     </column-filter>
   </v-menu>
 </template>
@@ -32,19 +50,35 @@ export default {
   data: () => ({
     filters: [],
   }),
+  computed: {
+    autosave: {
+      set(v) {
+        this.$store.commit('windows/MutAutoApplyFilter', v)
+      }, get() {
+        return this.$store.state.windows.autoApplyFilter;
+      }
+    }
+  },
   methods: {},
   created() {
-    this.filters = this.value || [];
+    this.filters = this.autosave ? this.value || [] : JSON.parse(JSON.stringify(this.value || []));
   },
   watch: {
     filters: {
       handler(v) {
-        this.$emit('input', v)
+        if (this.autosave) {
+          this.$emit('input', v)
+        }
       },
       deep: true
     },
+    autosave(v) {
+      if (!v) {
+        this.filters = JSON.parse(JSON.stringify(this.value || []));
+      }
+    },
     value(v) {
-      this.filters = v || [];
+      this.filters = this.autosave ? v || [] : JSON.parse(JSON.stringify(v || []));
     }
   }
 }

packages/nc-gui/store/windows.js

@@ -44,10 +44,14 @@ export const state = () => ({
   metatables: false,
   nc: true,
   miniSponsorCard: 0,
-  screensaver: true
+  screensaver: true,
+  autoApplyFilter: true
 });
 
 export const mutations = {
+  MutAutoApplyFilter(state, v) {
+    state.autoApplyFilter = v;
+  },
   MutToggleLogWindow(state, show) {
     state.logWindow = !state.logWindow;
   }, MutScreensaver(state, show) {