nocodb/packages/nc-gui/components/workspace/CollaboratorsList.vue

<script lang="ts" setup>
import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
import { storeToRefs, stringToColour, timeAgo, useWorkspace } from '#imports'

const { workspaceRoles, loadRoles } = useRoles()

const workspaceStore = useWorkspace()

const { removeCollaborator, updateCollaborator: _updateCollaborator } = workspaceStore

const { collaborators } = storeToRefs(workspaceStore)
const userSearchText = ref('')

const filterCollaborators = computed(() => {
  if (!userSearchText.value) return collaborators.value ?? []

  if (!collaborators.value) return []

  return collaborators.value.filter((collab) => collab.email!.includes(userSearchText.value))
})

const updateCollaborator = async (collab: any, roles: WorkspaceUserRoles) => {
  collab.roles = roles
  try {
    await _updateCollaborator(collab.id, collab.roles)
    message.success('Successfully updated user role')
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}

const accessibleRoles = computed<WorkspaceUserRoles[]>(() => {
  const currentRoleIndex = OrderedWorkspaceRoles.findIndex(
    (role) => workspaceRoles.value && Object.keys(workspaceRoles.value).includes(role),
  )
  if (currentRoleIndex === -1) return []
  return OrderedWorkspaceRoles.slice(currentRoleIndex + 1).filter((r) => r)
})

onMounted(async () => {
  await loadRoles()
})
</script>

<template>
  <div class="nc-collaborator-table-container mt-4 mx-6">
    <WorkspaceInviteSection v-if="workspaceRoles !== WorkspaceUserRoles.VIEWER" />
    <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div>
    <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
      <div class="text-xl">Members</div>
      <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search collaborators">
        <template #prefix>
          <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
        </template>
      </a-input>
    </div>
    <div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36">
      <Empty description="No Members found" />
    </div>
    <table v-else class="nc-collaborators-list-table !nc-scrollbar-md">
      <thead>
        <tr>
          <th class="w-1/5">Users</th>
          <th class="w-1/5">Date Joined</th>
          <th class="w-1/5">Access</th>
          <th class="w-1/5"></th>
          <th class="w-1/5"></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(collab, i) of filterCollaborators" :key="i" class="relative w-full nc-collaborators">
          <td class="!py-0 w-1/5 email">
            <div class="flex items-center gap-2">
              <span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{
                collab.email.slice(0, 2)
              }}</span>
              {{ collab.email }}
            </div>
          </td>
          <td class="text-gray-500 text-xs w-1/5 created-at">
            {{ timeAgo(collab.created_at) }}
          </td>
          <td class="w-1/5 roles">
            <div class="nc-collaborator-role-select">
              <template v-if="accessibleRoles.includes(collab.roles)">
                <RolesSelector
                  :role="collab.roles"
                  :roles="accessibleRoles"
                  :description="false"
                  :on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)"
                />
              </template>
              <template v-else>
                <RolesBadge class="!bg-white" :role="collab.roles" />
              </template>
            </div>
          </td>
          <td class="w-1/5">
            <div class="-left-2.5 top-5">
              <a-dropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
                <MdiDotsVertical
                  class="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)"
                />
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="removeCollaborator(collab.id)">
                      <div class="flex flex-row items-center py-2 text-s gap-1.5 text-red-500 cursor-pointer">
                        <MaterialSymbolsDeleteOutlineRounded />
                        Remove user
                      </div>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </td>
          <td class="w-1/5 padding"></td>
          <td class="w-1/5 padding"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped lang="scss">
.badge-text {
  @apply text-[14px] pt-1 text-center;
}

.nc-collaborators-list-table {
  @apply min-w-[700px] !w-full border-gray-100 mt-1;

  th {
    @apply .font-normal !text-gray-400 pb-4;
    border-bottom: 1px solid #e3e3e3;
  }

  td {
    @apply .font-normal pb-4;
    border-bottom: 1px solid #f5f5f5;
  }

  th,
  td {
    @apply text-left p-4;
  }

  th:first-child,
  td:first-child {
    @apply pl-6;
  }

  th:last-child,
  td:last-child {
    @apply pr-1 w-5;
  }
}

.color-band {
  @apply w-6 h-6 left-0 top-[10px] rounded-full flex justify-center uppercase text-white font-weight-bold text-xs items-center;
}

:deep(.nc-collaborator-role-select .ant-select-selector) {
  @apply !rounded;
}

table {
  display: block;
  width: 100%;
}
thead {
  display: block;
  width: 100%;
}
tr {
  display: block;
  width: 100%;
}
tbody {
  display: block;
  width: 100%;
  height: calc(100vh - calc(var(--topbar-height) + 25rem));
  overflow-y: overlay;

  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    background: #f6f6f600 !important;
  }
  &::-webkit-scrollbar-thumb {
    background: #f6f6f600;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #f6f6f600;
  }
}
tbody {
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    background: #f6f6f600 !important;
  }
  &::-webkit-scrollbar-thumb {
    background: rgb(215, 215, 215);
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgb(203, 203, 203);
  }
}

:deep(.ant-select-selection-item) {
  @apply mt-0.75;
}
</style>