Browse Source

feat: use new role selector for invite part

pull/6378/head
mertmit 1 year ago
parent
commit
990a670996
  1. 37
      packages/nc-gui/components/project/InviteProjectCollabSection.vue
  2. 6
      packages/nc-gui/components/roles/Badge.vue
  3. 14
      packages/nc-gui/components/roles/Selector.vue
  4. 38
      packages/nc-gui/components/workspace/InviteSection.vue

37
packages/nc-gui/components/project/InviteProjectCollabSection.vue

@ -117,36 +117,13 @@ const copyUrl = async () => {
class="!max-w-130 !rounded"
/>
<NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
<template #suffixIcon>
<MdiChevronDown />
</template>
<a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
<!-- <div
class="flex flex-row h-full justify-start items-center"
:data-testid="`nc-share-invite-user-role-option-${role}`"
>
<div class="px-2 py-1 flex rounded-full text-xs capitalize">
{{ role }}
</div>
</div> -->
<NcBadge v-if="role === ProjectRoles.OWNER" color="purple">
<p class="badge-text">{{ role }}</p>
</NcBadge>
<NcBadge v-if="role === ProjectRoles.CREATOR" color="blue">
<p class="badge-text">{{ role }}</p>
</NcBadge>
<NcBadge v-if="role === ProjectRoles.EDITOR" color="green">
<p class="badge-text">{{ role }}</p>
</NcBadge>
<NcBadge v-if="role === ProjectRoles.COMMENTER" color="orange">
<p class="badge-text">{{ role }}</p>
</NcBadge>
<NcBadge v-if="role === ProjectRoles.VIEWER" color="yellow">
<p class="badge-text">{{ role }}</p>
</NcBadge>
</a-select-option>
</NcSelect>
<RolesSelector
class="px-1"
:role="inviteData.roles"
:roles="ProjectRoles"
:on-role-change="(role: ProjectRoles) => (inviteData.roles = role)"
:description="false"
/>
<a-button
type="primary"

6
packages/nc-gui/components/roles/Badge.vue

@ -36,13 +36,17 @@ const roleProperties = computed(() => {
descriptionText,
}
})
console.log('dummy')
</script>
<template>
<div
class="flex flex-col py-[6px] px-[8px] gap-[4px] w-[350px] rounded-md bg-gray-50"
class="flex flex-col py-[3px] px-[8px] gap-[4px] rounded-md bg-gray-50"
:class="{
'cursor-pointer hover:bg-gray-100': clickableRef,
'w-[350px]': descriptionRef,
'w-[140px] items-center': !descriptionRef,
}"
>
<div class="flex items-center">

14
packages/nc-gui/components/roles/Selector.vue

@ -2,20 +2,27 @@
import type { RoleLabels } from 'nocodb-sdk'
import { toRef } from '#imports'
const props = defineProps<{
const props = withDefaults(
defineProps<{
role: keyof typeof RoleLabels
roles: (keyof typeof RoleLabels)[]
description?: boolean
inherit?: string
onRoleChange: (role: keyof typeof RoleLabels) => void
}>()
}>(),
{
description: true,
},
)
const roleRef = toRef(props, 'role')
const inheritRef = toRef(props, 'inherit')
const descriptionRef = toRef(props, 'description')
</script>
<template>
<NcDropdown>
<RolesBadge class="border-1" :role="roleRef" clickable :inherit="inheritRef === role" />
<RolesBadge class="border-1" :role="roleRef" clickable :inherit="inheritRef === role" :description="descriptionRef" />
<template #overlay>
<div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1">
<div class="flex flex-col gap-[4px]">
@ -32,6 +39,7 @@ const inheritRef = toRef(props, 'inherit')
:class="`nc-role-select-${rl}`"
:role="rl"
:inherit="inheritRef === rl"
:description="descriptionRef"
/>
</div>
</div>

38
packages/nc-gui/components/workspace/InviteSection.vue

@ -10,7 +10,8 @@ const inviteData = reactive({
const workspaceStore = useWorkspace()
const { inviteCollaborator: _inviteCollaborator } = workspaceStore
const { isInvitingCollaborators, workspaceRole } = storeToRefs(workspaceStore)
const { isInvitingCollaborators } = storeToRefs(workspaceStore)
const { workspaceRoles } = useRoles()
const inviteCollaborator = async () => {
try {
@ -23,9 +24,19 @@ const inviteCollaborator = async () => {
}
// allow only lower roles to be assigned
const allowedRoles = computed<WorkspaceUserRoles[]>(() => {
const currentRoleIndex = OrderedWorkspaceRoles.findIndex((role) => role === workspaceRole.value)
return OrderedWorkspaceRoles.slice(currentRoleIndex + 1)
const allowedRoles = ref<WorkspaceUserRoles[]>([])
onMounted(async () => {
try {
const currentRoleIndex = OrderedWorkspaceRoles.findIndex(
(role) => workspaceRoles.value && Object.keys(workspaceRoles.value).includes(role),
)
if (currentRoleIndex !== -1) {
allowedRoles.value = OrderedWorkspaceRoles.slice(currentRoleIndex + 1).filter((r) => r)
}
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
})
</script>
@ -41,18 +52,13 @@ const allowedRoles = computed<WorkspaceUserRoles[]>(() => {
class="!max-w-130 !rounded"
/>
<NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
<template #suffixIcon>
<MdiChevronDown />
</template>
<template v-for="role of allowedRoles" :key="`role-option-${role}`">
<a-select-option v-if="role" :value="role">
<NcBadge :color="RoleColors[role]">
<p class="badge-text">{{ RoleLabels[role] }}</p>
</NcBadge>
</a-select-option>
</template>
</NcSelect>
<RolesSelector
class="px-1"
:role="inviteData.roles"
:roles="allowedRoles"
:on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
:description="false"
/>
<a-button
type="primary"

Loading…
Cancel
Save