mirror of https://github.com/nocodb/nocodb
Ramesh Mane
1 year ago
5 changed files with 263 additions and 8 deletions
@ -0,0 +1,89 @@
|
||||
<script lang="ts" setup> |
||||
import { iconMap } from '#imports' |
||||
import type { UsersSortType } from '~/lib' |
||||
|
||||
const { field, direction, handleUserSort } = defineProps<{ |
||||
field: UsersSortType['field'] |
||||
direction: UsersSortType['direction'] |
||||
handleUserSort: Function |
||||
}>() |
||||
|
||||
const isOpen = ref(false) |
||||
|
||||
const sortUserBy = async (direction?: UsersSortType['direction']) => { |
||||
handleUserSort({ |
||||
field: field, |
||||
direction, |
||||
}) |
||||
isOpen.value = false |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-dropdown |
||||
v-model:visible="isOpen" |
||||
:trigger="['click']" |
||||
placement="bottomLeft" |
||||
overlay-class-name="nc-user-menu-column-operations !border-1 rounded-lg !shadow-xl" |
||||
@click.stop="isOpen = !isOpen" |
||||
> |
||||
<div> |
||||
<GeneralIcon |
||||
:icon="direction === 'asc' || direction === 'desc' ? 'sortDesc' : 'arrowDown'" |
||||
class="text-grey h-full text-grey nc-user-menu-trigger cursor-pointer outline-0 mr-2 transition-none" |
||||
:style="{ transform: direction === 'asc' ? 'rotate(180deg)' : undefined }" |
||||
/> |
||||
</div> |
||||
<template #overlay> |
||||
<NcMenu class="flex flex-col gap-1 border-gray-200 nc-user-menu-column-options"> |
||||
<NcMenuItem @click="sortUserBy('asc')"> |
||||
<div class="nc-column-insert-after nc-user-menu-item"> |
||||
<component |
||||
:is="iconMap.sortDesc" |
||||
class="text-gray-700 !rotate-180 !w-4.25 !h-4.25" |
||||
:style="{ |
||||
transform: 'rotate(180deg)', |
||||
}" |
||||
/> |
||||
|
||||
<!-- Sort Ascending --> |
||||
{{ $t('general.sortAsc') }} |
||||
</div> |
||||
</NcMenuItem> |
||||
<NcMenuItem @click="sortUserBy('desc')"> |
||||
<div class="nc-column-insert-before nc-user-menu-item"> |
||||
<component :is="iconMap.sortDesc" class="text-gray-700 !w-4.25 !h-4.25 ml-0.5 mr-0.25" /> |
||||
<!-- Sort Descending --> |
||||
{{ $t('general.sortDesc') }} |
||||
</div> |
||||
</NcMenuItem> |
||||
|
||||
<a-divider class="!my-0" /> |
||||
|
||||
<NcMenuItem @click="sortUserBy()"> |
||||
<div class="nc-column-delete nc-user-menu-item text-gray-700"> |
||||
<component :is="iconMap.close" /> |
||||
<!-- Reset --> |
||||
{{ $t('general.resetSort') }} |
||||
</div> |
||||
</NcMenuItem> |
||||
</NcMenu> |
||||
</template> |
||||
</a-dropdown> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.nc-user-menu-item { |
||||
@apply flex items-center gap-2; |
||||
} |
||||
|
||||
.nc-user-menu-column-options { |
||||
.nc-icons { |
||||
@apply !w-5 !h-5; |
||||
} |
||||
} |
||||
|
||||
:deep(.ant-dropdown-menu-item) { |
||||
@apply !hover:text-black text-gray-700; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,133 @@
|
||||
import rfdc from 'rfdc' |
||||
import type { UsersSortType } from '~/lib' |
||||
import { useGlobal } from '#imports' |
||||
|
||||
/** |
||||
* Hook for managing user sorts and sort configurations. |
||||
* @returns An object containing reactive values and functions related to user sorts. |
||||
*/ |
||||
export function useUserSorts() { |
||||
const clone = rfdc() |
||||
|
||||
const { user } = useGlobal() |
||||
|
||||
const sorts = ref<UsersSortType[]>([]) |
||||
|
||||
// Key for storing user sort configurations in local storage
|
||||
const userSortConfigKey = 'userSortConfig' |
||||
|
||||
// Default user ID if no user found (fallback)
|
||||
const defaultUserId = 'default' |
||||
|
||||
/** |
||||
* Computed property that returns a record of sort directions based on the current sort configurations. |
||||
* @type {ComputedRef<Record<string, UsersSortType['direction']>>} |
||||
*/ |
||||
const sortDirection: ComputedRef<Record<string, UsersSortType['direction']>> = computed(() => { |
||||
return sorts.value.reduce((acc, curr) => { |
||||
acc = { ...acc, [curr.field]: curr.direction } |
||||
return acc |
||||
}, {} as Record<string, UsersSortType['direction']>) |
||||
}) |
||||
|
||||
/** |
||||
* Loads user sort configurations from local storage based on the current user ID. |
||||
*/ |
||||
function loadSorts(): void { |
||||
try { |
||||
// Retrieve sort configuration from local storage
|
||||
const storedConfig = localStorage.getItem(userSortConfigKey) |
||||
|
||||
const sortConfig = storedConfig ? JSON.parse(storedConfig) : {} |
||||
sorts.value = sortConfig |
||||
|
||||
// Load user-specific sort configurations or default configurations
|
||||
sorts.value = user.value?.id ? sortConfig[user.value.id] || [] : sortConfig[defaultUserId] || [] |
||||
} catch (error) { |
||||
console.error('Error while retrieving sort configuration from local storage:', error) |
||||
// Set sorts to an empty array in case of an error
|
||||
sorts.value = [] |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Saves or updates a user sort configuration and updates local storage. |
||||
* @param {UsersSortType} newSortConfig - The new sort configuration to save or update. |
||||
*/ |
||||
function saveOrUpdate(newSortConfig: UsersSortType): void { |
||||
try { |
||||
const fieldIndex = sorts.value.findIndex((sort) => sort.field === newSortConfig.field) |
||||
if (newSortConfig.direction) { |
||||
if (fieldIndex !== -1) { |
||||
// Update the direction if the field exists
|
||||
sorts.value = [ |
||||
...clone(sorts.value).map((sort) => { |
||||
if (sort.field === newSortConfig.field) { |
||||
sort.direction = newSortConfig.direction |
||||
} |
||||
return sort |
||||
}), |
||||
] |
||||
} else { |
||||
// Add a new sort configuration if the field does not exist
|
||||
sorts.value = [...clone(sorts.value), newSortConfig] |
||||
} |
||||
} else { |
||||
if (fieldIndex !== -1) { |
||||
// Remove the sort configuration if the field exists and direction is not present
|
||||
sorts.value = [...clone(sorts.value).filter((sort) => sort.field !== newSortConfig.field)] |
||||
} |
||||
} |
||||
|
||||
// Update local storage with the new sort configurations
|
||||
const storedConfig = localStorage.getItem(userSortConfigKey) |
||||
const sortConfig = storedConfig ? JSON.parse(storedConfig) : {} |
||||
|
||||
if (user.value?.id) { |
||||
// Save or delete user-specific sort configurations
|
||||
if (sorts.value.length) { |
||||
sortConfig[user.value.id] = sorts.value |
||||
} else { |
||||
delete sortConfig[user.value.id] |
||||
} |
||||
} else { |
||||
// Save or delete default user sort configurations
|
||||
sortConfig[defaultUserId] = sorts.value |
||||
} |
||||
|
||||
localStorage.setItem(userSortConfigKey, JSON.stringify(sortConfig)) |
||||
} catch (error) { |
||||
console.error('Error while retrieving sort configuration from local storage:', error) |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Sorts and returns a deep copy of an array of objects based on the provided sort configurations. |
||||
* |
||||
* @param data - The array of objects to be sorted. |
||||
* @param sortsConfig - The array of sort configurations. |
||||
* @returns A new array containing sorted objects. |
||||
* @template T - The type of objects in the input array. |
||||
*/ |
||||
function handleGetSortsData<T extends Record<string, any>>(data: T[], sortsConfig: UsersSortType[] = sorts.value): T[] { |
||||
const sortedData = clone(data).sort((a, b) => { |
||||
let sortCondition = 0 |
||||
|
||||
for (const { field, direction } of sortsConfig) { |
||||
if (a[field]) continue |
||||
|
||||
if (direction === 'asc') { |
||||
sortCondition = sortCondition || a[field]?.localeCompare(b[field]) |
||||
} else if (direction === 'desc') { |
||||
sortCondition = sortCondition || b[field]?.localeCompare(a[field]) |
||||
} |
||||
} |
||||
|
||||
return sortCondition |
||||
}) |
||||
|
||||
return sortedData |
||||
} |
||||
|
||||
return { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortsData } |
||||
} |
||||
Loading…
Reference in new issue