Browse Source

feat(gui): implement sort option in column grid level

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4504/head
Pranav C 2 years ago
parent
commit
ca24809b7d
  1. 12
      packages/nc-gui/components/smartsheet/header/Menu.vue
  2. 9
      packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
  3. 6
      packages/nc-gui/composables/useSmartsheetStore.ts
  4. 7
      packages/nc-gui/lib/enums.ts

12
packages/nc-gui/components/smartsheet/header/Menu.vue

@ -6,6 +6,7 @@ import {
IsLockedInj,
MetaInj,
Modal,
ReloadViewDataHookInj,
extractSdkResponseErrorMsg,
inject,
message,
@ -13,14 +14,20 @@ import {
useMetas,
useNuxtApp,
} from '#imports'
import { useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
import { ActiveViewInj } from '~/context'
import { SmartsheetStoreEvents } from '~/lib'
const { virtual = false } = defineProps<{ virtual?: boolean }>()
const emit = defineEmits(['edit'])
const { eventBus } = useSmartsheetStoreOrThrow()
const column = inject(ColumnInj)
const reloadDataHook = inject(ReloadViewDataHookInj)
const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref())
@ -77,6 +84,8 @@ const sortCol = async (direction: 'asc' | 'desc') => {
try {
$e('a:sort:add', { from: 'column-menu' })
await $api.dbTableSort.create(view.value?.id as string, { fk_column_id: column!.value.id, direction })
eventBus.emit(SmartsheetStoreEvents.SORT_RELOAD)
reloadDataHook?.trigger()
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
@ -84,8 +93,7 @@ const sortCol = async (direction: 'asc' | 'desc') => {
</script>
<template>
<a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']"
overlay-class-name="nc-dropdown-column-operations">
<a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']" overlay-class-name="nc-dropdown-column-operations">
<MdiMenuDown class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
<template #overlay>

9
packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

@ -10,6 +10,7 @@ import {
inject,
ref,
useMenuCloseOnEsc,
useSmartsheetStoreOrThrow,
useViewSorts,
watch,
} from '#imports'
@ -19,8 +20,16 @@ const view = inject(ActiveViewInj, ref())
const isLocked = inject(IsLockedInj, ref(false))
const reloadDataHook = inject(ReloadViewDataHookInj)
const { eventBus } = useSmartsheetStoreOrThrow()
const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
eventBus.on((event) => {
if (event === SmartsheetStoreEvents.SORT_RELOAD) {
loadSorts()
}
})
const columns = computed(() => meta.value?.columns || [])
const columnByID = computed(() =>

6
packages/nc-gui/composables/useSmartsheetStore.ts

@ -1,7 +1,8 @@
import { ViewTypes } from 'nocodb-sdk'
import type { FilterType, KanbanType, SortType, TableType, ViewType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { computed, ref, unref, useFieldQuery, useInjectionState, useNuxtApp, useProject } from '#imports'
import { computed, ref, unref, useEventBus, useFieldQuery, useInjectionState, useNuxtApp, useProject } from '#imports'
import type { SmartsheetStoreEvents } from '~/lib'
const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
(
@ -19,6 +20,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
const { search } = useFieldQuery(view)
const eventBus = useEventBus<SmartsheetStoreEvents>(Symbol('SmartsheetStore'))
// getters
const isLocked = computed(() => view.value?.lock_type === 'locked')
const isPkAvail = computed(() => (meta.value as TableType)?.columns?.some((c) => c.pk))
@ -63,6 +66,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
sorts,
nestedFilters,
isSqlView,
eventBus,
}
},
'smartsheet-store',

7
packages/nc-gui/lib/enums.ts

@ -77,3 +77,10 @@ export enum TabType {
VIEW = 'view',
AUTH = 'auth',
}
export enum SmartsheetStoreEvents {
SORT_RELOAD = 'sort-reload',
FILTER_RELOAD = 'filter-reload',
DATA_RELOAD = 'data-reload',
FIELD_RELOAD = 'field-reload',
}

Loading…
Cancel
Save