nocodb/packages/nc-gui/components/account/UserList.vue

<script lang="ts" setup>
import { OrgUserRoles } from 'nocodb-sdk'
import type { OrgUserReqType, RequestParams, UserType } from 'nocodb-sdk'
import type { User } from '#imports'
import {
  extractSdkResponseErrorMsg,
  iconMap,
  useApi,
  useCopy,
  useDashboard,
  useDebounceFn,
  useNuxtApp,
  useUserSorts,
} from '#imports'

const { api, isLoading } = useApi()

// for loading screen
isLoading.value = true

const { $e } = useNuxtApp()

const { t } = useI18n()

const { dashboardUrl } = useDashboard()

const { user: loggedInUser } = useGlobal()

const { copy } = useCopy()

const { sorts, sortDirection, loadSorts, saveOrUpdate, handleGetSortedData } = useUserSorts('Org')

const users = ref<UserType[]>([])

const sortedUsers = computed(() => {
  return handleGetSortedData(users.value, sorts.value) as UserType[]
})

const currentPage = ref(1)

const currentLimit = ref(10)

const showUserModal = ref(false)

const userMadalKey = ref(0)

const isOpen = ref(false)

const searchText = ref<string>('')

const pagination = reactive({
  total: 0,
  pageSize: 10,
  position: ['bottomCenter'],
})

const loadUsers = useDebounceFn(async (page = currentPage.value, limit = currentLimit.value) => {
  currentPage.value = 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.value = response.list as UserType[]
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}, 500)

onMounted(() => {
  loadUsers()
  loadSorts()
})

const updateRole = async (userId: string, roles: string) => {
  try {
    await api.orgUsers.update(userId, {
      roles,
    } as OrgUserReqType)
    message.success(t('msg.success.roleUpdated'))

    users.value.forEach((user) => {
      if (user.id === userId) {
        user.roles = roles
      }
    })

    $e('a:org-user:role-updated', { role: roles })
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}

const deleteModalInfo = ref<UserType | null>(null)

const deleteUser = async () => {
  try {
    await api.orgUsers.delete(deleteModalInfo.value?.id as string)
    message.success(t('msg.success.userDeleted'))

    await loadUsers()

    if (!users.value.length && currentPage.value !== 1) {
      currentPage.value--
      loadUsers(currentPage.value)
    }
    $e('a:org-user:user-deleted')
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  } finally {
    // closing the modal
    isOpen.value = false
    deleteModalInfo.value = null
  }
}

const resendInvite = async (user: UserType) => {
  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 = async (user: User) => {
  if (!user.invite_token) return
  try {
    await copy(`${dashboardUrl.value}#/signup/${user.invite_token}`)

    // Invite URL copied to clipboard
    message.success(t('msg.success.inviteURLCopied'))
  } catch (e: any) {
    message.error(e.message)
  }
  $e('c:user:copy-url')
}

const copyPasswordResetUrl = async (user: UserType) => {
  try {
    const { reset_password_url } = await api.orgUsers.generatePasswordResetToken(user.id)

    await copy(reset_password_url!)

    // Invite URL copied to clipboard
    message.success(t('msg.success.passwordResetURLCopied'))
    $e('c:user:copy-url')
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}

const openInviteModal = () => {
  showUserModal.value = true
  userMadalKey.value++
}

const openDeleteModal = (user: UserType) => {
  deleteModalInfo.value = user
  isOpen.value = true
}
</script>

<template>
  <div data-testid="nc-super-user-list" class="h-full">
    <div class="max-w-195 mx-auto h-full">
      <div class="text-2xl text-left font-weight-bold mb-4" data-rec="true">{{ $t('title.userMgmt') }}</div>
      <div class="py-2 flex gap-4 items-center justify-between">
        <a-input v-model:value="searchText" class="!max-w-90 !rounded-md" placeholder="Search members" @change="loadUsers()">
          <template #prefix>
            <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
          </template>
        </a-input>
        <div class="flex gap-3 items-center justify-center">
          <component :is="iconMap.reload" class="cursor-pointer" @click="loadUsers(currentPage, currentLimit)" />
          <NcButton data-testid="nc-super-user-invite" size="small" type="primary" @click="openInviteModal">
            <div class="flex items-center gap-1" data-rec="true">
              <component :is="iconMap.plus" />
              {{ $t('activity.inviteUser') }}
            </div>
          </NcButton>
        </div>
      </div>
      <div class="w-full rounded-md max-w-250 h-[calc(100%-12rem)] rounded-md overflow-hidden mt-5">
        <div class="flex w-full bg-gray-50 border-1 rounded-t-md">
          <div
            class="py-3.5 text-gray-500 font-medium text-3.5 w-2/3 text-start pl-6 flex items-center space-x-2"
            data-rec="true"
          >
            <span>
              {{ $t('objects.users') }}
            </span>
            <LazyAccountUserMenu :direction="sortDirection.email" field="email" :handle-user-sort="saveOrUpdate" />
          </div>
          <div class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start flex items-center space-x-2" data-rec="true">
            <span>
              {{ $t('general.access') }}
            </span>
            <LazyAccountUserMenu :direction="sortDirection.roles" field="roles" :handle-user-sort="saveOrUpdate" />
          </div>
          <div class="flex py-3.5 text-gray-500 font-medium text-3.5 w-28 justify-end mr-4" data-rec="true">
            {{ $t('labels.action') }}
          </div>
        </div>
        <div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]">
          <GeneralLoader size="xlarge" />
        </div>
        <!-- if users are empty -->
        <div v-else-if="!users.length" class="flex items-center justify-center text-center h-full">
          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
        </div>
        <section v-else class="tbody h-[calc(100%-4rem)] nc-scrollbar-md border-t-0 !overflow-auto">
          <div
            v-for="el of sortedUsers"
            :key="el.id"
            data-testid="nc-token-list"
            class="user flex py-3 justify-around px-1 border-b-1 border-l-1 border-r-1"
            :class="{
              'py-4': el.roles?.includes('super'),
            }"
          >
            <div class="text-3.5 text-start w-2/3 pl-5 flex items-center">
              <NcTooltip v-if="el.display_name">
                <template #title>
                  {{ el.email }}
                </template>
                <GeneralTruncateText :length="29">
                  {{ el.display_name }}
                </GeneralTruncateText>
              </NcTooltip>
              <GeneralTruncateText v-else :length="29">
                {{ el.email }}
              </GeneralTruncateText>
            </div>
            <div class="text-3.5 text-start w-1/3">
              <div v-if="el?.roles?.includes('super')" class="font-weight-bold" data-rec="true">
                {{ $t('labels.superAdmin') }}
              </div>
              <NcSelect
                v-else-if="el.id !== loggedInUser?.id"
                v-model:value="el.roles"
                class="w-55 nc-user-roles"
                :dropdown-match-select-width="false"
                dropdown-class-name="max-w-64"
                @change="updateRole(el.id, el.roles as string)"
              >
                <a-select-option
                  class="nc-users-list-role-option"
                  :value="OrgUserRoles.CREATOR"
                  :label="$t(`objects.roleType.orgLevelCreator`)"
                >
                  <div class="flex items-center gap-1 justify-between">
                    <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
                    <GeneralIcon
                      v-if="el?.roles === OrgUserRoles.CREATOR"
                      id="nc-selected-item-icon"
                      icon="check"
                      class="w-4 h-4 text-primary"
                    />
                  </div>
                  <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                    {{ $t('msg.info.roles.orgCreator') }}
                  </div>
                </a-select-option>

                <a-select-option
                  class="nc-users-list-role-option"
                  :value="OrgUserRoles.VIEWER"
                  :label="$t(`objects.roleType.orgLevelViewer`)"
                >
                  <div class="flex items-center gap-1 justify-between">
                    <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
                    <GeneralIcon
                      v-if="el.roles === OrgUserRoles.VIEWER"
                      id="nc-selected-item-icon"
                      icon="check"
                      class="w-4 h-4 text-primary"
                    />
                  </div>
                  <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                    {{ $t('msg.info.roles.orgViewer') }}
                  </div>
                </a-select-option>
              </NcSelect>
              <div v-else class="font-weight-bold" data-rec="true">
                {{ $t(`objects.roleType.orgLevelCreator`) }}
              </div>
            </div>
            <span class="w-26 flex items-center justify-end mr-4">
              <div
                class="flex items-center gap-2"
                :class="{
                  'opacity-0 pointer-events-none': el.roles?.includes('super'),
                }"
              >
                <NcDropdown :trigger="['click']">
                  <NcButton size="xsmall" type="ghost">
                    <MdiDotsVertical
                      class="text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
                    />
                  </NcButton>

                  <template #overlay>
                    <NcMenu>
                      <template v-if="!el.roles?.includes('super')">
                        <!-- Resend invite Email -->
                        <NcMenuItem @click="resendInvite(el)">
                          <component :is="iconMap.email" class="flex text-gray-600" />
                          <div data-rec="true">{{ $t('activity.resendInvite') }}</div>
                        </NcMenuItem>
                        <NcMenuItem @click="copyInviteUrl(el)">
                          <component :is="iconMap.copy" class="flex text-gray-600" />
                          <div data-rec="true">{{ $t('activity.copyInviteURL') }}</div>
                        </NcMenuItem>
                        <NcMenuItem @click="copyPasswordResetUrl(el)">
                          <component :is="iconMap.copy" class="flex text-gray-600" />
                          <div>{{ $t('activity.copyPasswordResetURL') }}</div>
                        </NcMenuItem>
                      </template>
                      <template v-if="el.id !== loggedInUser?.id">
                        <NcDivider v-if="!el.roles?.includes('super')" />
                        <NcMenuItem data-rec="true" class="!text-red-500 !hover:bg-red-50" @click="openDeleteModal(el)">
                          <MaterialSymbolsDeleteOutlineRounded />
                          {{ $t('general.remove') }} {{ $t('objects.user') }}
                        </NcMenuItem>
                      </template>
                    </NcMenu>
                  </template>
                </NcDropdown>
              </div>
            </span>
          </div>
          <div
            v-if="sortedUsers.length === 1"
            class="user pt-12 pb-4 px-2 flex flex-col items-center gap-6 text-center border-b-1 border-l-1 border-r-1"
          >
            <div class="text-2xl text-gray-800 font-bold">
              {{ $t('placeholder.inviteYourTeam') }}
            </div>
            <div class="text-sm text-gray-700">
              {{ $t('placeholder.inviteYourTeamLabel') }}
            </div>
            <img src="~assets/img/placeholder/invite-team.png" class="!w-[30rem] flex-none" />
          </div>
        </section>
      </div>
      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
        <a-pagination
          v-model:current="currentPage"
          :total="pagination.total"
          show-less-items
          @change="loadUsers(currentPage, currentLimit)"
        />
      </div>
      <GeneralDeleteModal v-model:visible="isOpen" entity-name="User" :on-delete="() => deleteUser()">
        <template #entity-preview>
          <span>
            <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
              <GeneralIcon icon="account" class="nc-view-icon"></GeneralIcon>
              <div
                class="text-ellipsis overflow-hidden select-none w-full pl-1.75"
                :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
              >
                {{ deleteModalInfo?.email }}
              </div>
            </div>
          </span>
        </template>
      </GeneralDeleteModal>

      <LazyAccountUsersModal :key="userMadalKey" :show="showUserModal" @closed="showUserModal = false" @reload="loadUsers" />
    </div>
  </div>
</template>

<style scoped>
.user:last-child {
  @apply rounded-b-md;
}
</style>