98 lines
2.8 KiB
Vue
98 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import InviteStatusBadge from '@/components/InviteStatusBadge.vue'
|
|
import RoleBadge from '@/components/RoleBadge.vue'
|
|
import UserRowAction from '@/components/UserRowAction.vue'
|
|
import UserEmailCell from '@/components/UserEmailCell.vue'
|
|
import { formatCreatedDate } from '@/lib/relativeDate'
|
|
import {
|
|
USER_SKELETON_ROWS,
|
|
userDisplayName,
|
|
userRole,
|
|
userRowKey,
|
|
type UserListItem,
|
|
} from '@/composables/useUsers'
|
|
|
|
const ROW_GRID =
|
|
'grid grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_84px_120px_110px_150px] items-center gap-3 px-3'
|
|
|
|
defineProps<{
|
|
items: UserListItem[]
|
|
loading: boolean
|
|
sessionUserId?: number
|
|
highlightedKey?: string
|
|
canManage?: boolean
|
|
busyKeys?: string[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
cancel: [item: UserListItem]
|
|
renew: [item: UserListItem]
|
|
}>()
|
|
|
|
function rowKey(item: UserListItem) {
|
|
return userRowKey(item.kind, item.id)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="border border-default bg-default" :aria-busy="loading ? 'true' : undefined">
|
|
<div :class="ROW_GRID" class="h-9 bg-elevated font-medium text-muted">
|
|
<span>Email</span>
|
|
<span>Display name</span>
|
|
<span>Role</span>
|
|
<span>Invite status</span>
|
|
<span class="flex items-center gap-1 text-highlighted">
|
|
Created
|
|
<UIcon name="i-lucide-arrow-down" class="size-3 shrink-0" />
|
|
</span>
|
|
<span></span>
|
|
</div>
|
|
<template v-if="loading">
|
|
<span role="status" class="sr-only">Loading users</span>
|
|
<div
|
|
v-for="n in USER_SKELETON_ROWS"
|
|
:key="n"
|
|
:class="ROW_GRID"
|
|
class="h-12 border-t border-default"
|
|
>
|
|
<USkeleton class="h-3 w-[60%] rounded-none bg-accented" />
|
|
<USkeleton class="h-3 w-[50%] rounded-none bg-accented" />
|
|
<USkeleton class="h-5 w-13 rounded-none bg-accented" />
|
|
<USkeleton class="h-5 w-19 rounded-none bg-accented" />
|
|
<USkeleton class="h-3 w-20 rounded-none bg-accented" />
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div
|
|
v-for="item in items"
|
|
:key="rowKey(item)"
|
|
data-testid="user-row"
|
|
:class="[ROW_GRID, { 'bg-elevated': rowKey(item) === highlightedKey }]"
|
|
class="h-12 border-t border-default"
|
|
>
|
|
<UserEmailCell
|
|
:email="item.email"
|
|
:is-you="item.kind === 'user' && item.id === sessionUserId"
|
|
/>
|
|
<span
|
|
class="truncate"
|
|
:class="userDisplayName(item) ? 'text-highlighted' : 'text-muted'"
|
|
>{{ userDisplayName(item) || '—' }}</span
|
|
>
|
|
<span><RoleBadge :role="userRole(item)" /></span>
|
|
<span><InviteStatusBadge :status="item.status" /></span>
|
|
<span class="text-muted">{{ formatCreatedDate(item.created_at) }}</span>
|
|
<span class="flex justify-end">
|
|
<UserRowAction
|
|
v-if="canManage"
|
|
:item="item"
|
|
:busy="busyKeys?.includes(rowKey(item))"
|
|
@cancel="emit('cancel', item)"
|
|
@renew="emit('renew', item)"
|
|
/>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|