From 525ed41ea4b6bbea540d0679d7384b926e5894ce Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:47:47 +0530
Subject: [PATCH 1/3] feat(gui-v2): persist autosave option in localstorage

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilterMenu.vue     | 17 ++++++++++++++---
 .../nc-gui-v2/composables/useGlobal/state.ts    |  1 +
 .../nc-gui-v2/composables/useGlobal/types.ts    |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 2f5483407a..bf6e502f67 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 // todo: move to persisted state
 import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
@@ -9,10 +11,18 @@ import MdiMenuDownIcon from '~icons/mdi/menu-down'
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 
+const { $state } = useNuxtApp()
+
 // todo: emit from child
 const filtersLength = ref(0)
 // todo: sync with store
-const autosave = ref(true)
+const autosave = computed({
+  get() {
+    return $state.filterAutoSave.value
+  }, set(value: boolean) {
+    $state.filterAutoSave.value = value
+  },
+})
 
 const filterComp = ref<typeof ColumnFilter>()
 
@@ -42,7 +52,8 @@ const applyChanges = async () => {
         @update:filters-length="filtersLength = $event"
       >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
-          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>
+          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details
+                      dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
               <!-- Auto apply -->
@@ -50,7 +61,7 @@ const applyChanges = async () => {
           </a-checkbox>
 
           <div class="flex-1" />
-          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes </a-button>
+          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes</a-button>
         </div>
       </SmartsheetToolbarColumnFilter>
     </template>
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 344bcce2ab..51d365ccc0 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -56,6 +56,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
       createdAt: new Date('2020-01-01T00:00:00.000Z').toISOString(),
       isHidden: false,
     },
+    filterAutoSave: true,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 5a615a9179..62441d462a 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -17,6 +17,7 @@ export interface StoredState {
   lang: string
   darkMode: boolean
   feedbackForm: FeedbackForm
+  filterAutoSave :boolean
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {

From f0fff78f150f1e076388dfc815a1c937c9e66c89 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:51:29 +0530
Subject: [PATCH 2/3] fix(gui-v2): merge any missing default values with
 localstorage

- this to avoid missing properties when adding new state variables

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/ColumnFilterMenu.vue      | 6 +++---
 packages/nc-gui-v2/composables/useGlobal/state.ts           | 2 +-
 packages/nc-gui-v2/composables/useGlobal/types.ts           | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index bf6e502f67..295840cec2 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -19,7 +19,8 @@ const filtersLength = ref(0)
 const autosave = computed({
   get() {
     return $state.filterAutoSave.value
-  }, set(value: boolean) {
+  },
+  set(value: boolean) {
     $state.filterAutoSave.value = value
   },
 })
@@ -52,8 +53,7 @@ const applyChanges = async () => {
         @update:filters-length="filtersLength = $event"
       >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
-          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details
-                      dense>
+          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
               <!-- Auto apply -->
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 51d365ccc0..83f493fb0f 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -60,7 +60,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
-  const storage = useStorage<StoredState>(storageKey, initialState)
+  const storage = useStorage<StoredState>(storageKey, initialState, localStorage, { mergeDefaults: true })
 
   /** force turn off of dark mode, regardless of previously stored settings */
   storage.value.darkMode = false
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 62441d462a..e35310ad0d 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -17,7 +17,7 @@ export interface StoredState {
   lang: string
   darkMode: boolean
   feedbackForm: FeedbackForm
-  filterAutoSave :boolean
+  filterAutoSave: boolean
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {

From bcac0f860c65c4ac88366e00d3c4c0f10cce752a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 13:08:56 +0530
Subject: [PATCH 3/3] refactor(gui-v2): remove unnecessary computed

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilterMenu.vue   | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 295840cec2..4264c42ddc 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
-// todo: move to persisted state
 import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
 import { IsLockedInj } from '~/context'
@@ -11,19 +8,10 @@ import MdiMenuDownIcon from '~icons/mdi/menu-down'
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 
-const { $state } = useNuxtApp()
+const { filterAutoSave } = useGlobal()
 
 // todo: emit from child
 const filtersLength = ref(0)
-// todo: sync with store
-const autosave = computed({
-  get() {
-    return $state.filterAutoSave.value
-  },
-  set(value: boolean) {
-    $state.filterAutoSave.value = value
-  },
-})
 
 const filterComp = ref<typeof ColumnFilter>()
 
@@ -49,11 +37,11 @@ const applyChanges = async () => {
       <SmartsheetToolbarColumnFilter
         ref="filterComp"
         class="nc-table-toolbar-menu"
-        :auto-save="autosave"
+        :auto-save="filterAutoSave"
         @update:filters-length="filtersLength = $event"
       >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
-          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>
+          <a-checkbox id="col-filter-checkbox" v-model:checked="filterAutoSave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
               <!-- Auto apply -->
@@ -61,7 +49,7 @@ const applyChanges = async () => {
           </a-checkbox>
 
           <div class="flex-1" />
-          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes</a-button>
+          <a-button v-show="!filterAutoSave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes </a-button>
         </div>
       </SmartsheetToolbarColumnFilter>
     </template>