mirror of https://github.com/nocodb/nocodb
Ramesh Mane
10 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