diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue index 6ed9a7a3ab..ddb661451c 100644 --- a/packages/nc-gui/components/account/UserList.vue +++ b/packages/nc-gui/components/account/UserList.vue @@ -12,6 +12,7 @@ import { useNuxtApp, useUserSorts, } from '#imports' +import rfdc from 'rfdc' const { api, isLoading } = useApi() @@ -33,6 +34,7 @@ const { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortsData } = us const users = ref([]) const sortedUsers = computed(() => { + console.log('users', users.value) return handleGetSortsData(users.value, sorts.value) as UserType[] }) @@ -54,6 +56,8 @@ const pagination = reactive({ position: ['bottomCenter'], }) +const clone = rfdc() + const loadUsers = useDebounceFn(async (page = currentPage.value, limit = currentLimit.value) => { currentPage.value = page try { @@ -89,10 +93,11 @@ const updateRole = async (userId: string, roles: string) => { } as OrgUserReqType) message.success(t('msg.success.roleUpdated')) - users.value.forEach((user) => { + users.value = clone(users.value).map((user) => { if (user.id === userId) { - user.roles = roles + user['roles'] = roles } + return user }) $e('a:org-user:role-updated', { role: roles }) diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue index c0540a4111..8600475d55 100644 --- a/packages/nc-gui/components/project/AccessSettings.vue +++ b/packages/nc-gui/components/project/AccessSettings.vue @@ -40,8 +40,7 @@ const isSearching = ref(false) const accessibleRoles = ref<(typeof ProjectRoles)[keyof typeof ProjectRoles][]>([]) const sortedCollaborators = computed(() => { - console.log('collaborator', sorts.value, collaborators.value) - return handleGetSortsData([...collaborators.value], sorts.value) + return handleGetSortsData(collaborators.value, sorts.value) }) const loadCollaborators = async () => { @@ -72,6 +71,28 @@ const loadCollaborators = async () => { } } +const loadListData = async ($state: any) => { + const prevUsersCount = collaborators.value?.length || 0 + if (collaborators.value?.length === totalCollaborators.value) { + $state.complete() + return + } + $state.loading() + // const oldPagesCount = currentPage.value || 0 + + await loadCollaborators() + + if (prevUsersCount === collaborators.value?.length) { + $state.complete() + return + } + $state.loaded() +} + +const updateCollaboratorLocalState = ()=>{ + +} + const updateCollaborator = async (collab: any, roles: ProjectRoles) => { const currentCollaborator = collaborators.value.find((coll) => coll.id === collab.id)! @@ -159,16 +180,15 @@ onMounted(async () => { {{ $t('objects.users') }} - + - +
{{ $t('title.dateJoined') }}
{{ $t('general.access') }} - +
-
{{ $t('title.dateJoined') }}
diff --git a/packages/nc-gui/composables/useUserSorts.ts b/packages/nc-gui/composables/useUserSorts.ts index a7410ebe1d..9287b8199b 100644 --- a/packages/nc-gui/composables/useUserSorts.ts +++ b/packages/nc-gui/composables/useUserSorts.ts @@ -12,7 +12,7 @@ export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') { const { user } = useGlobal() - const sorts = ref([]) + const sorts = ref({}) // Key for storing user sort configurations in local storage const userSortConfigKey = 'userSortConfig' @@ -25,10 +25,10 @@ export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') { * @type {ComputedRef>} */ const sortDirection: ComputedRef> = computed(() => { - return sorts.value.reduce((acc, curr) => { - acc = { ...acc, [curr.field]: curr.direction } - return acc - }, {} as Record) + if (sorts.value.field) { + return { [sorts.value.field]: sorts.value.direction } as Record + } + return {} as Record }) /** @@ -43,11 +43,11 @@ export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') { sorts.value = sortConfig // Load user-specific sort configurations or default configurations - sorts.value = user.value?.id ? sortConfig[user.value.id] || [] : sortConfig[defaultUserId] || [] + 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 = [] + // Set sorts to an empty obj in case of an error + sorts.value = {} } } @@ -57,29 +57,10 @@ export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') { */ 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 - }) - .filter((sort) => sort.field === newSortConfig.field), // For now it is only single level of sorting so remove another sort field - ] - } else { - // Add a new sort configuration - sorts.value = [newSortConfig] - } + if (newSortConfig.field && newSortConfig.direction) { + 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)] - } + sorts.value = {} } // Update local storage with the new sort configurations @@ -88,7 +69,7 @@ export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') { if (user.value?.id) { // Save or delete user-specific sort configurations - if (sorts.value.length) { + if (sorts.value.field) { sortConfig[user.value.id] = sorts.value } else { delete sortConfig[user.value.id] @@ -108,11 +89,11 @@ export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') { * 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. + * @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 handleGetSortsData>(data: T[], sortsConfig: UsersSortType[] = sorts.value): T[] { + function handleGetSortsData>(data: T[], sortsConfig: UsersSortType = sorts.value): T[] { let userRoleOrder: string[] = [] if (roleType === 'Workspace') { userRoleOrder = Object.values(WorkspaceUserRoles) @@ -121,51 +102,44 @@ export function useUserSorts(roleType: 'Workspace' | 'Org' | 'Project') { } else if (roleType === 'Project') { userRoleOrder = Object.values(ProjectRoles) } + data = clone(data) - // let superUserIndex = data.findIndex((user) => user?.roles?.includes('super')) - // let superUser = superUserIndex !== -1 ? data.splice(superUserIndex, 1) : null + + let superUserIndex = data.findIndex((user) => user?.roles?.includes('super')) + let superUser = superUserIndex !== -1 ? data.splice(superUserIndex, 1) : null // console.log('super', superUser) - const sortedData = data.sort((a, b) => { - let sortCondition = 0 - - for (const { field, direction } of sortsConfig) { - if (!a[field]) continue - - if (field === 'roles') { - for (const role of userRoleOrder) { - const indexA = a?.roles?.split(',')?.indexOf(role) ?? -1 - const indexB = b?.roles?.split(',')?.indexOf(role) ?? -1 - - // if (indexA === -1) { - // sortCondition = sortCondition || direction === 'asc' ? 1 : -1 // Role A is missing, so it should come last - // break - // } - - // if (indexB === -1) { - // sortCondition = sortCondition || direction === 'asc' ? -1 : 1 // Role B is missing, so it should come last - // break - // } - - if (direction === 'asc') { - sortCondition = sortCondition || indexA - indexB - break - } else if (direction === 'desc') { - sortCondition = sortCondition || indexB - indexA - break - } + 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 if (sortsConfig.direction === 'desc') { + return userRoleOrder.indexOf(roleB) - userRoleOrder.indexOf(roleA) } - } else { - if (direction === 'asc') { - sortCondition = sortCondition || a[field]?.localeCompare(b[field]) - } else if (direction === 'desc') { - sortCondition = sortCondition || b[field]?.localeCompare(a[field]) + } + case 'email': { + if (sortsConfig.direction === 'asc') { + return a[sortsConfig.field]?.localeCompare(b[sortsConfig.field]) + } else if (sortsConfig.direction === 'desc') { + return b[sortsConfig.field]?.localeCompare(a[sortsConfig.field]) } } } - return sortCondition + return 0 }) + if (superUser && superUser.length) { + if (sortsConfig.direction === 'desc') { + sortedData = [...sortedData, superUser[0]] + } else { + sortedData = [superUser[0], ...sortedData] + } + } + return sortedData } diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts index c246011cf3..eb653eb374 100644 --- a/packages/nc-gui/lib/types.ts +++ b/packages/nc-gui/lib/types.ts @@ -178,7 +178,7 @@ interface SidebarTableNode extends TableType { } interface UsersSortType { - field: string + field?: 'email' | 'roles' direction?: 'asc' | 'desc' }