mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
7 changed files with 383 additions and 24 deletions
@ -0,0 +1,238 @@
|
||||
<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 type { User } from '~/lib' |
||||
|
||||
const { api, isLoading } = useApi() |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const { dashboardUrl } = $(useDashboard()) |
||||
|
||||
const { copy } = useCopy() |
||||
|
||||
let users = $ref<UserType[]>([]) |
||||
|
||||
let currentPage = $ref(1) |
||||
|
||||
const currentLimit = $ref(10) |
||||
|
||||
const showUserModal = ref(false) |
||||
|
||||
const searchText = ref<string>('') |
||||
|
||||
const pagination = reactive({ |
||||
total: 0, |
||||
pageSize: 10, |
||||
}) |
||||
const loadUsers = async (page = currentPage, limit = currentLimit) => { |
||||
currentPage = page |
||||
try { |
||||
const response: any = await api.orgUsers.list({ |
||||
query: { |
||||
limit, |
||||
offset: searchText.value.length === 0 ? (page - 1) * limit : 0, |
||||
query: searchText.value, |
||||
}, |
||||
} as RequestParams) |
||||
if (!response) return |
||||
|
||||
pagination.total = response.pageInfo.totalRows ?? 0 |
||||
pagination.pageSize = 10 |
||||
|
||||
users = response.list as UserType[] |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
loadUsers() |
||||
|
||||
const updateRole = async (userId: string, roles: Role) => { |
||||
try { |
||||
await api.orgUsers.update(userId, { |
||||
roles, |
||||
} as unknown as UserType) |
||||
message.success('Role updated successfully') |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
const deleteUser = async (userId: string) => { |
||||
Modal.confirm({ |
||||
title: 'Are you sure you want to delete this user?', |
||||
type: 'warn', |
||||
content: |
||||
'On deleting, user will remove from from organization and any sync source(Airtable) created by user will get removed', |
||||
onOk: async () => { |
||||
try { |
||||
await api.orgUsers.delete(userId) |
||||
message.success('User deleted successfully') |
||||
await loadUsers() |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
}, |
||||
}) |
||||
} |
||||
|
||||
const resendInvite = async (user: User) => { |
||||
try { |
||||
await api.orgUsers.resendInvite(user.id) |
||||
|
||||
// Invite email sent successfully |
||||
message.success(t('msg.success.inviteEmailSent')) |
||||
await loadUsers() |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
|
||||
$e('a:org-user:resend-invite') |
||||
} |
||||
|
||||
const copyInviteUrl = (user: User) => { |
||||
if (!user.invite_token) return |
||||
|
||||
copy(`${dashboardUrl}#/signup/${user.invite_token}`) |
||||
|
||||
// Invite URL copied to clipboard |
||||
message.success(t('msg.success.inviteURLCopied')) |
||||
$e('c:user:copy-url') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="h-full overflow-y-scroll scrollbar-thin-dull"> |
||||
<div class="max-w-[700px] mx-auto p-4"> |
||||
<div class="py-2 flex"> |
||||
<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> |
||||
<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> |
||||
</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"> |
||||
<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> |
||||
</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> |
||||
</template> |
||||
</a-table-column> |
||||
</a-table> |
||||
|
||||
<LazyOrgUserUsersModal :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped></style> |
||||
@ -0,0 +1,49 @@
|
||||
<template> |
||||
<a-layout class="mt-3 h-[75vh] overflow-y-auto flex"> |
||||
<!-- Side tabs --> |
||||
<a-layout-sider> |
||||
<a-menu :selected-keys="selectedTabKeys" class="tabs-menu h-full" :open-keys="[]"> |
||||
<a-menu-item |
||||
key="users" |
||||
@click="navigateTo('/org/users')" |
||||
class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)" |
||||
> |
||||
<div class="flex items-center space-x-2"> |
||||
<MdiAccountSupervisorOutline/> |
||||
|
||||
<div class="select-none"> |
||||
Users |
||||
</div> |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item |
||||
key="tokens" |
||||
@click="navigateTo('/org/tokens')" |
||||
class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)" |
||||
> |
||||
<div class="flex items-center space-x-2"> |
||||
<MdiShieldKeyOutline/> |
||||
|
||||
<div class="select-none"> |
||||
Tokens |
||||
</div> |
||||
</div> |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</a-layout-sider> |
||||
|
||||
<!-- Sub Tabs --> |
||||
<a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500"> |
||||
|
||||
<OrgUser v-if="$route.params.page === 'users'" /> |
||||
<OrgToken v-else-if="$route.params.page === 'tokens'" /> |
||||
</a-layout-content> |
||||
</a-layout> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { navigateTo } from '#imports' |
||||
|
||||
const $route = useRoute() |
||||
const selectedTabKeys = computed(() => [$route.params.page]) |
||||
</script> |
||||
Loading…
Reference in new issue