Browse Source

feat(gui-v2): persist autosave option in localstorage

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3037/head
Pranav C 2 years ago
parent
commit
525ed41ea4
  1. 17
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
  2. 1
      packages/nc-gui-v2/composables/useGlobal/state.ts
  3. 1
      packages/nc-gui-v2/composables/useGlobal/types.ts

17
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>

1
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 */

1
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'>> & {

Loading…
Cancel
Save