|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { Modal, message } from 'ant-design-vue' |
|
|
|
|
import type { RequestParams, UserType } from 'nocodb-sdk' |
|
|
|
|
import { Role, extractSdkResponseErrorMsg, useApi, useDashboard, useNuxtApp , useCopy} from '#imports' |
|
|
|
|
import { Role, extractSdkResponseErrorMsg, useApi, useCopy, useDashboard, useNuxtApp } from '#imports' |
|
|
|
|
import type { User } from '~/lib' |
|
|
|
|
|
|
|
|
|
const { api, isLoading } = useApi() |
|
|
|
@ -108,9 +108,8 @@ const copyInviteUrl = (user: User) => {
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div class="h-full overflow-y-scroll scrollbar-thin-dull"> |
|
|
|
|
|
|
|
|
|
<a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs "> |
|
|
|
|
<a-tab-pane v-for="(tab, key) of [{label:'Users'},{label:'Settings'}]" :key="key" class="select-none"> |
|
|
|
|
<a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs"> |
|
|
|
|
<a-tab-pane v-for="(tab, key) of [{ label: 'Users' }, { label: 'Settings' }]" :key="key" class="select-none"> |
|
|
|
|
<template #tab> |
|
|
|
|
<span> |
|
|
|
|
{{ tab.label }} |
|
|
|
@ -119,141 +118,142 @@ const copyInviteUrl = (user: User) => {
|
|
|
|
|
</a-tab-pane> |
|
|
|
|
</a-tabs> |
|
|
|
|
<template v-if="selectedTabKey === 0"> |
|
|
|
|
<!-- <div class="text-xl mt-4">User Management</div>--> |
|
|
|
|
<!-- <a-divider class="!my-3" />--> |
|
|
|
|
<div class="max-w-[700px] mx-auto p-4"> |
|
|
|
|
<div class="py-2 flex"> |
|
|
|
|
<a-input-search |
|
|
|
|
v-model:value="searchText" |
|
|
|
|
<!-- <div class="text-xl mt-4">User Management</div> --> |
|
|
|
|
<!-- <a-divider class="!my-3" /> --> |
|
|
|
|
<div class="max-w-[900px] mx-auto p-4"> |
|
|
|
|
<div class="py-2 flex gap-4 items-center"> |
|
|
|
|
<a-input-search |
|
|
|
|
v-model:value="searchText" |
|
|
|
|
size="small" |
|
|
|
|
class="max-w-[300px]" |
|
|
|
|
placeholder="Filter by email" |
|
|
|
|
@blur="loadUsers" |
|
|
|
|
@keydown.enter="loadUsers" |
|
|
|
|
> |
|
|
|
|
</a-input-search> |
|
|
|
|
<div class="flex-grow"></div> |
|
|
|
|
<MdiReload @click="loadUsers" class="cursor-pointer"/> |
|
|
|
|
<a-button size="small" @click="showUserModal = true"> |
|
|
|
|
<div class="flex items-center gap-1"> |
|
|
|
|
<MdiAdd /> |
|
|
|
|
Invite new user |
|
|
|
|
</div> |
|
|
|
|
</a-button> |
|
|
|
|
</div> |
|
|
|
|
<a-table |
|
|
|
|
:row-key="(record) => record.id" |
|
|
|
|
:data-source="users" |
|
|
|
|
:pagination="{ position: ['bottomCenter'] }" |
|
|
|
|
:loading="isLoading" |
|
|
|
|
size="small" |
|
|
|
|
class="max-w-[300px]" |
|
|
|
|
placeholder="Filter by email" |
|
|
|
|
@blur="loadUsers" |
|
|
|
|
@keydown.enter="loadUsers" |
|
|
|
|
@change="loadUsers($event.current)" |
|
|
|
|
> |
|
|
|
|
</a-input-search> |
|
|
|
|
<div class="flex-grow"></div> |
|
|
|
|
<a-button size="small" @click="showUserModal = true"> |
|
|
|
|
<div class="flex items-center gap-1"> |
|
|
|
|
<MdiAdd /> |
|
|
|
|
Invite new user |
|
|
|
|
</div> |
|
|
|
|
</a-button> |
|
|
|
|
</div> |
|
|
|
|
<a-table |
|
|
|
|
:row-key="(record) => record.id" |
|
|
|
|
:data-source="users" |
|
|
|
|
:pagination="{ position: ['bottomCenter'] }" |
|
|
|
|
:loading="isLoading" |
|
|
|
|
@change="loadUsers($event.current)" |
|
|
|
|
size="small" |
|
|
|
|
> |
|
|
|
|
<template #emptyText> |
|
|
|
|
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<!-- Email --> |
|
|
|
|
<a-table-column key="email" :title="$t('labels.email')" data-index="email"> |
|
|
|
|
<template #default="{ text }"> |
|
|
|
|
<div> |
|
|
|
|
{{ text }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</a-table-column> |
|
|
|
|
|
|
|
|
|
<!-- Role --> |
|
|
|
|
<a-table-column key="roles" :title="$t('objects.role')" data-index="roles"> |
|
|
|
|
<template #default="{ record }"> |
|
|
|
|
<div> |
|
|
|
|
<div v-if="record.roles.includes('super')" class="font-weight-bold">Super Admin</div> |
|
|
|
|
<a-select |
|
|
|
|
v-else |
|
|
|
|
v-model:value="record.roles" |
|
|
|
|
class="w-[220px]" |
|
|
|
|
:dropdown-match-select-width="false" |
|
|
|
|
@change="updateRole(record.id, record.roles)" |
|
|
|
|
> |
|
|
|
|
<a-select-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)"> |
|
|
|
|
<div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div> |
|
|
|
|
<span class="text-gray-500 text-xs whitespace-normal" |
|
|
|
|
>Creator can create new projects and access any invited project.</span |
|
|
|
|
> |
|
|
|
|
</a-select-option> |
|
|
|
|
|
|
|
|
|
<a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)"> |
|
|
|
|
<div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div> |
|
|
|
|
<span class="text-gray-500 text-xs whitespace-normal" |
|
|
|
|
>Viewer is not allowed to create new projects but they can access any invited project.</span |
|
|
|
|
> |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</div> |
|
|
|
|
<template #emptyText> |
|
|
|
|
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> |
|
|
|
|
</template> |
|
|
|
|
</a-table-column> |
|
|
|
|
|
|
|
|
|
<!-- <!– Projects –> |
|
|
|
|
<!-- Email --> |
|
|
|
|
<a-table-column key="email" :title="$t('labels.email')" data-index="email"> |
|
|
|
|
<template #default="{ text }"> |
|
|
|
|
<div> |
|
|
|
|
{{ text }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</a-table-column> |
|
|
|
|
|
|
|
|
|
<!-- Role --> |
|
|
|
|
<a-table-column key="roles" :title="$t('objects.role')" data-index="roles"> |
|
|
|
|
<template #default="{ record }"> |
|
|
|
|
<div> |
|
|
|
|
<div v-if="record.roles.includes('super')" class="font-weight-bold">Super Admin</div> |
|
|
|
|
<a-select |
|
|
|
|
v-else |
|
|
|
|
v-model:value="record.roles" |
|
|
|
|
class="w-[220px]" |
|
|
|
|
:dropdown-match-select-width="false" |
|
|
|
|
@change="updateRole(record.id, record.roles)" |
|
|
|
|
> |
|
|
|
|
<a-select-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)"> |
|
|
|
|
<div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div> |
|
|
|
|
<span class="text-gray-500 text-xs whitespace-normal" |
|
|
|
|
>Creator can create new projects and access any invited project.</span |
|
|
|
|
> |
|
|
|
|
</a-select-option> |
|
|
|
|
|
|
|
|
|
<a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)"> |
|
|
|
|
<div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div> |
|
|
|
|
<span class="text-gray-500 text-xs whitespace-normal" |
|
|
|
|
>Viewer is not allowed to create new projects but they can access any invited project.</span |
|
|
|
|
> |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</a-table-column> |
|
|
|
|
|
|
|
|
|
<!-- <!– Projects –> |
|
|
|
|
<a-table-column key="projectsCount" :title="$t('objects.projects')" data-index="projectsCount"> |
|
|
|
|
<template #default="{ text }"> |
|
|
|
|
<div> |
|
|
|
|
{{ text }} |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</a-table-column>--> |
|
|
|
|
|
|
|
|
|
<!-- Actions --> |
|
|
|
|
|
|
|
|
|
<a-table-column key="id" :title="$t('labels.actions')" data-index="id"> |
|
|
|
|
<template #default="{ text, record }"> |
|
|
|
|
<div class="flex items-center gap-2" v-if="!record.roles.includes('super')"> |
|
|
|
|
<MdiDeleteOutline class="nc-action-btn cursor-pointer" @click="deleteUser(text)" /> |
|
|
|
|
|
|
|
|
|
<a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-user-mgmt"> |
|
|
|
|
<div class="flex flex-row items-center"> |
|
|
|
|
<a-button type="text" class="!px-0"> |
|
|
|
|
<div class="flex flex-row items-center h-[1.2rem]"> |
|
|
|
|
<IcBaselineMoreVert /> |
|
|
|
|
</div> |
|
|
|
|
</a-button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu> |
|
|
|
|
<a-menu-item> |
|
|
|
|
<!-- Resend invite Email --> |
|
|
|
|
<div class="flex flex-row items-center py-3" @click="resendInvite(record)"> |
|
|
|
|
<MdiEmailArrowRightOutline class="flex h-[1rem] text-gray-500" /> |
|
|
|
|
<div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div> |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
<a-menu-item> |
|
|
|
|
<div class="flex flex-row items-center py-3" @click="copyInviteUrl(record)"> |
|
|
|
|
<MdiContentCopy class="flex h-[1rem] text-gray-500" /> |
|
|
|
|
<div class="text-xs pl-2">{{ $t('activity.copyInviteURL') }}</div> |
|
|
|
|
</a-table-column> --> |
|
|
|
|
|
|
|
|
|
<!-- Actions --> |
|
|
|
|
|
|
|
|
|
<a-table-column key="id" :title="$t('labels.actions')" data-index="id"> |
|
|
|
|
<template #default="{ text, record }"> |
|
|
|
|
<div v-if="!record.roles.includes('super')" class="flex items-center gap-2"> |
|
|
|
|
<MdiDeleteOutline class="nc-action-btn cursor-pointer" @click="deleteUser(text)" /> |
|
|
|
|
|
|
|
|
|
<a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-user-mgmt"> |
|
|
|
|
<div class="flex flex-row items-center"> |
|
|
|
|
<a-button type="text" class="!px-0"> |
|
|
|
|
<div class="flex flex-row items-center h-[1.2rem]"> |
|
|
|
|
<IcBaselineMoreVert /> |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
<!-- <a-menu-item> |
|
|
|
|
</a-button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu> |
|
|
|
|
<a-menu-item> |
|
|
|
|
<!-- Resend invite Email --> |
|
|
|
|
<div class="flex flex-row items-center py-3" @click="resendInvite(record)"> |
|
|
|
|
<MdiEmailArrowRightOutline class="flex h-[1rem] text-gray-500" /> |
|
|
|
|
<div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div> |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
<a-menu-item> |
|
|
|
|
<div class="flex flex-row items-center py-3" @click="copyInviteUrl(record)"> |
|
|
|
|
<MdiContentCopy class="flex h-[1rem] text-gray-500" /> |
|
|
|
|
<div class="text-xs pl-2">{{ $t('activity.copyInviteURL') }}</div> |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
<!-- <a-menu-item> |
|
|
|
|
<div class="flex flex-row items-center py-3" @click="copyInviteUrl(user)"> |
|
|
|
|
<MdiContentCopy class="flex h-[1rem] text-gray-500" /> |
|
|
|
|
<div class="text-xs pl-2">{{ $t('activity.copyPasswordResetURL') }}</div> |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> --> |
|
|
|
|
</a-menu> |
|
|
|
|
</template> |
|
|
|
|
</a-dropdown> |
|
|
|
|
</div> |
|
|
|
|
<span v-else></span> |
|
|
|
|
</template> |
|
|
|
|
</a-table-column> |
|
|
|
|
</a-table> |
|
|
|
|
|
|
|
|
|
<LazyAdminUsersModal :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" /> |
|
|
|
|
</div> |
|
|
|
|
</a-menu> |
|
|
|
|
</template> |
|
|
|
|
</a-dropdown> |
|
|
|
|
</div> |
|
|
|
|
<span v-else></span> |
|
|
|
|
</template> |
|
|
|
|
</a-table-column> |
|
|
|
|
</a-table> |
|
|
|
|
|
|
|
|
|
<LazyAdminUsersModal :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<!-- <div class="text-xl mt-4">Settings</div>--> |
|
|
|
|
<!-- <a-divider class="!my-3" />--> |
|
|
|
|
<!-- <div class="text-xl mt-4">Settings</div> --> |
|
|
|
|
<!-- <a-divider class="!my-3" /> --> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-checkbox name="virtual">Enable user signup</a-checkbox> |
|
|
|
|
<a-checkbox name="virtual">Enable user signup</a-checkbox> |
|
|
|
|
</a-form-item> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|