mirror of https://github.com/nocodb/nocodb
Ramesh Mane
9 months ago
committed by
GitHub
6 changed files with 341 additions and 24 deletions
@ -0,0 +1,79 @@
|
||||
<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 = (direction?: UsersSortType['direction']) => { |
||||
handleUserSort({ |
||||
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> |
||||
</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,177 @@
|
||||
import rfdc from 'rfdc' |
||||
import { OrgUserRoles, ProjectRoles, WorkspaceUserRoles } from 'nocodb-sdk' |
||||
import type { UsersSortType } from '~/lib' |
||||
import { useGlobal } from '#imports' |
||||
|
||||
/** |
||||
* Hook for managing user sorts and sort configurations. |
||||
* |
||||
* @param {string} roleType - The type of role for which user sorts are managed ('Workspace', 'Org', or 'Project'). |
||||
* @returns {object} An object containing reactive values and functions related to user sorts. |
||||
*/ |
||||
export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') { |
||||
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(() => { |
||||
if (sorts.value.field) { |
||||
return { [sorts.value.field]: sorts.value.direction } as Record<string, UsersSortType['direction']> |
||||
} |
||||
return {} 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) : ({} as Record<string, UsersSortType>) |
||||
|
||||
if (sortConfig && isValidSortConfig(sortConfig)) { |
||||
// Load user-specific sort configurations or default configurations
|
||||
sorts.value = user.value?.id ? sortConfig[user.value.id] || {} : sortConfig[defaultUserId] || {} |
||||
} else { |
||||
throw new Error('Invalid sort config stored in local storage') |
||||
} |
||||
} catch (error) { |
||||
console.error(error) |
||||
|
||||
// remove sortConfig from localStorage in case of error
|
||||
localStorage.removeItem(userSortConfigKey) |
||||
|
||||
// Set sorts to an empty obj 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 { |
||||
if (newSortConfig.field && newSortConfig.direction) { |
||||
sorts.value = { ...newSortConfig } |
||||
} else { |
||||
sorts.value = {} |
||||
} |
||||
|
||||
// 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.field) { |
||||
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 saving sort configuration into 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 object of sort configurations. |
||||
* @returns A new array containing sorted objects. |
||||
* @template T - The type of objects in the input array. |
||||
*/ |
||||
function handleGetSortedData<T extends Record<string, any>>(data: T[], sortsConfig: UsersSortType = sorts.value): T[] { |
||||
let userRoleOrder: string[] = [] |
||||
if (roleType === 'Workspace') { |
||||
userRoleOrder = Object.values(WorkspaceUserRoles) |
||||
} else if (roleType === 'Org') { |
||||
userRoleOrder = Object.values(OrgUserRoles) |
||||
} else if (roleType === 'Project') { |
||||
userRoleOrder = Object.values(ProjectRoles) |
||||
} |
||||
|
||||
data = clone(data) |
||||
|
||||
const superUserIndex = data.findIndex((user) => user?.roles?.includes('super')) |
||||
const superUser = sortsConfig.field === 'roles' && superUserIndex !== -1 ? data.splice(superUserIndex, 1) : null |
||||
|
||||
let sortedData = data.sort((a, b) => { |
||||
switch (sortsConfig.field) { |
||||
case 'roles': { |
||||
const roleA = a?.roles?.split(',')[0] |
||||
const roleB = b?.roles?.split(',')[0] |
||||
|
||||
if (sortsConfig.direction === 'asc') { |
||||
return userRoleOrder.indexOf(roleA) - userRoleOrder.indexOf(roleB) |
||||
} else { |
||||
return userRoleOrder.indexOf(roleB) - userRoleOrder.indexOf(roleA) |
||||
} |
||||
} |
||||
case 'email': { |
||||
if (sortsConfig.direction === 'asc') { |
||||
return a[sortsConfig.field]?.localeCompare(b[sortsConfig.field]) |
||||
} else { |
||||
return b[sortsConfig.field]?.localeCompare(a[sortsConfig.field]) |
||||
} |
||||
} |
||||
} |
||||
|
||||
return 0 |
||||
}) |
||||
|
||||
if (superUser && superUser.length) { |
||||
if (sortsConfig.direction === 'desc') { |
||||
sortedData = [...sortedData, superUser[0]] |
||||
} else { |
||||
sortedData = [superUser[0], ...sortedData] |
||||
} |
||||
} |
||||
|
||||
return sortedData |
||||
} |
||||
|
||||
/** |
||||
* Checks if the provided sort configuration has the expected structure. |
||||
* @param sortConfig - The sort configuration to validate. |
||||
* @param expectedStructure - The expected structure for the sort configuration. |
||||
* Defaults to { field: 'email', direction: 'asc' }. |
||||
* @returns `true` if the sort configuration is valid, otherwise `false`. |
||||
*/ |
||||
function isValidSortConfig( |
||||
sortConfig: Record<string, any>, |
||||
expectedStructure: UsersSortType = { field: 'email', direction: 'asc' }, |
||||
): boolean { |
||||
// Check if the sortConfig has the expected keys
|
||||
for (const key in sortConfig) { |
||||
const isValidConfig = Object.keys(sortConfig[key]).every((key) => |
||||
Object.prototype.hasOwnProperty.call(expectedStructure, key), |
||||
) |
||||
if (!isValidConfig) return false |
||||
} |
||||
return true |
||||
} |
||||
|
||||
return { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortedData } |
||||
} |
||||
Loading…
Reference in new issue