Kingsmai/dticket.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(users): add drag-and-drop reordering for PICs

Browse Source 
Introduce pic_sort_order to persist custom user ordering
Replace data table with a custom draggable grid layout
Add API endpoint to handle bulk order updates
This commit is contained in:
xiaomai
2026-05-04 14:07:43 +08:00
parent 30753fdc61
commit 4e40bfd804
6 changed files with 355 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

338
app/pages/management/users/index.vue
View File

@@ -49,92 +49,121 @@
</template>
<div class="overflow-x-auto">
<UTable
:data="filteredUsers"
:columns="columns"
:loading="loadingUsers"
:empty="searchQuery.trim() ? 'No matching users found.' : 'No users available.'"
sticky="header"
caption="Users"
class="min-w-[820px]"
>
<template #fullName-cell="{ row }">
<div class="min-w-0 space-y-0.5 py-1">
<div class="font-semibold leading-tight text-highlighted">
{{ row.original.fullName }}
<div class="min-w-[900px]" aria-label="Users">
<div class="grid grid-cols-[56px_minmax(190px,1.4fr)_minmax(150px,1fr)_120px_minmax(190px,1.2fr)_150px_minmax(230px,auto)] items-center gap-3 border-b border-default bg-muted px-4 py-2 text-xs font-semibold uppercase text-muted">
<div>Order</div>
<div>Display Name</div>
<div>PIC Phone</div>
<div>Role</div>
<div>Status</div>
<div>Last Login</div>
<div class="text-right">Actions</div>
</div>
<TransitionGroup tag="div" name="user-list" class="divide-y divide-default">
<div
v-for="user in filteredUsers"
:key="user.id"
:draggable="canReorderUsers"
class="grid grid-cols-[56px_minmax(190px,1.4fr)_minmax(150px,1fr)_120px_minmax(190px,1.2fr)_150px_minmax(230px,auto)] items-center gap-3 bg-default px-4 py-3 transition-[background,box-shadow,transform,opacity] duration-200"
:class="{
'cursor-grab hover:bg-muted/60': canReorderUsers,
'cursor-not-allowed opacity-70': !canReorderUsers,
'scale-[0.99] opacity-60 shadow-lg': draggedUserId === user.id,
'bg-muted': dragOverUserId === user.id
}"
@dragstart="startUserDrag($event, user)"
@dragover.prevent="overUserDrag($event, user)"
@drop.prevent="dropUserDrag"
@dragend="endUserDrag"
>
<div class="flex items-center">
<UTooltip :text="canReorderUsers ? 'Drag to reorder' : 'Clear search to reorder'">
<button
type="button"
class="inline-flex size-9 items-center justify-center rounded-md border border-default bg-default text-muted transition hover:text-default focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
:class="canReorderUsers ? 'cursor-grab active:cursor-grabbing' : 'cursor-not-allowed opacity-50'"
:aria-label="`Drag ${user.fullName} to reorder PIC list`"
:disabled="!canReorderUsers"
>
<UIcon name="i-lucide-grip-vertical" class="size-4" />
</button>
</UTooltip>
</div>
<div class="text-xs text-muted">
@{{ row.original.username }}
<div class="min-w-0 space-y-0.5 py-1">
<div class="font-semibold leading-tight text-highlighted">
{{ user.fullName }}
</div>
<div class="text-xs text-muted">
@{{ user.username }}
</div>
</div>
</div>
</template>
<template #phoneNumber-cell="{ row }">
<span class="text-sm" :class="row.original.phoneNumber ? 'text-default' : 'text-muted'">
{{ row.original.phoneNumber || 'Not set' }}
</span>
</template>
<span class="text-sm" :class="user.phoneNumber ? 'text-default' : 'text-muted'">
{{ user.phoneNumber || 'Not set' }}
</span>
<template #role-cell="{ row }">
<UBadge
:label="row.original.role === 'super_admin' ? 'Super Admin' : 'Staff'"
:color="row.original.role === 'super_admin' ? 'primary' : 'neutral'"
variant="soft"
/>
</template>
<template #status-cell="{ row }">
<div class="space-y-1.5 py-1">
<div class="flex flex-wrap gap-1.5">
<div>
<UBadge
:label="row.original.mustChangePassword ? 'Password reset' : 'Password ready'"
:color="row.original.mustChangePassword ? 'warning' : 'success'"
:label="user.role === 'super_admin' ? 'Super Admin' : 'Staff'"
:color="user.role === 'super_admin' ? 'primary' : 'neutral'"
variant="soft"
size="sm"
/>
<UBadge
:label="row.original.passkeyCount > 0 ? 'Passkey ready' : 'No passkey'"
:color="row.original.passkeyCount > 0 ? 'success' : 'neutral'"
variant="soft"
size="sm"
/>
</div>
<div class="text-xs text-muted">
{{ row.original.passkeyCount }} passkey{{ row.original.passkeyCount === 1 ? '' : 's' }}
<div class="space-y-1.5 py-1">
<div class="flex flex-wrap gap-1.5">
<UBadge
:label="user.mustChangePassword ? 'Password reset' : 'Password ready'"
:color="user.mustChangePassword ? 'warning' : 'success'"
variant="soft"
size="sm"
/>
<UBadge
:label="user.passkeyCount > 0 ? 'Passkey ready' : 'No passkey'"
:color="user.passkeyCount > 0 ? 'success' : 'neutral'"
variant="soft"
size="sm"
/>
</div>
<div class="text-xs text-muted">
{{ user.passkeyCount }} passkey{{ user.passkeyCount === 1 ? '' : 's' }}
</div>
</div>
<span class="text-xs text-muted sm:text-sm">
{{ formatDateTime(user.lastLoginAt, 'Never') }}
</span>
<div class="flex flex-wrap justify-end gap-1.5 py-1">
<UButton
label="Edit"
color="neutral"
variant="outline"
icon="i-lucide-pencil-line"
size="sm"
@click="openEditModal(user)"
/>
<UButton
label="Reset Password"
color="neutral"
variant="outline"
icon="i-lucide-key-round"
size="sm"
:loading="resettingUserId === user.id"
@click="resetPassword(user)"
/>
</div>
</div>
</template>
</TransitionGroup>
<template #lastLoginAt-cell="{ row }">
<span class="text-xs text-muted sm:text-sm">
{{ formatDateTime(row.original.lastLoginAt, 'Never') }}
</span>
</template>
<template #actions-cell="{ row }">
<div class="flex flex-wrap justify-end gap-1.5 py-1">
<UButton
label="Edit"
color="neutral"
variant="outline"
icon="i-lucide-pencil-line"
size="sm"
@click="openEditModal(row.original)"
/>
<UButton
label="Reset Password"
color="neutral"
variant="outline"
icon="i-lucide-key-round"
size="sm"
:loading="resettingUserId === row.original.id"
@click="resetPassword(row.original)"
/>
</div>
</template>
</UTable>
<div v-if="!filteredUsers.length" class="px-4 py-10 text-center text-sm text-muted">
{{ searchQuery.trim() ? 'No matching users found.' : 'No users available.' }}
</div>
</div>
</div>
</UCard>
@@ -233,12 +262,17 @@ const auth = useAuth()
const users = ref<ManagedUser[]>([])
const loadingUsers = ref(false)
const savingUser = ref(false)
const savingPicOrder = ref(false)
const resettingUserId = ref<string | null>(null)
const issuedPasswordMessage = ref('')
const searchQuery = ref('')
const editorOpen = ref(false)
const editorMode = ref<'create' | 'edit'>('create')
const editingUserId = ref<string | null>(null)
const draggedUserId = ref<string | null>(null)
const dragOverUserId = ref<string | null>(null)
const dragSaveStarted = ref(false)
let usersBeforeDrag: ManagedUser[] = []
const userForm = reactive({
fullName: '',
@@ -252,19 +286,13 @@ const roleOptions = [
{ label: 'Super Admin', value: 'super_admin' }
]
const columns = [
{ accessorKey: 'fullName', header: 'Display Name' },
{ accessorKey: 'phoneNumber', header: 'PIC Phone' },
{ accessorKey: 'role', header: 'Role' },
{ id: 'status', header: 'Status' },
{ accessorKey: 'lastLoginAt', header: 'Last Login' },
{ id: 'actions', header: 'Actions' }
]
const isEditMode = computed(() => editorMode.value === 'edit')
const isEditingCurrentUser = computed(() => {
return isEditMode.value && editingUserId.value === auth.user.value?.id
})
const canReorderUsers = computed(() => {
return !searchQuery.value.trim() && !loadingUsers.value && !savingPicOrder.value
})
const filteredUsers = computed(() => {
const keyword = searchQuery.value.trim().toLowerCase()
@@ -358,6 +386,131 @@ async function refreshUsers() {
}
}
function moveUserNearTarget(sourceUserId: string, targetUserId: string, insertAfterTarget: boolean) {
if (sourceUserId === targetUserId) {
return
}
const sourceIndex = users.value.findIndex((user) => user.id === sourceUserId)
const currentUserIds = users.value.map((user) => user.id)
if (sourceIndex === -1 || !currentUserIds.includes(targetUserId)) {
return
}
const reorderedUsers = [...users.value]
const [movedUser] = reorderedUsers.splice(sourceIndex, 1)
const targetIndex = reorderedUsers.findIndex((user) => user.id === targetUserId)
if (targetIndex === -1) {
return
}
reorderedUsers.splice(insertAfterTarget ? targetIndex + 1 : targetIndex, 0, movedUser)
const nextUserIds = reorderedUsers.map((user) => user.id)
if (nextUserIds.join('|') === currentUserIds.join('|')) {
return
}
users.value = reorderedUsers
}
function resetDragState() {
draggedUserId.value = null
dragOverUserId.value = null
dragSaveStarted.value = false
usersBeforeDrag = []
}
function startUserDrag(event: DragEvent, user: ManagedUser) {
if (!canReorderUsers.value) {
event.preventDefault()
return
}
draggedUserId.value = user.id
dragOverUserId.value = user.id
dragSaveStarted.value = false
usersBeforeDrag = [...users.value]
event.dataTransfer?.setData('text/plain', user.id)
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = 'move'
}
}
function overUserDrag(event: DragEvent, user: ManagedUser) {
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move'
}
if (!canReorderUsers.value || !draggedUserId.value || draggedUserId.value === user.id) {
return
}
const target = event.currentTarget
if (!(target instanceof HTMLElement)) {
return
}
const rect = target.getBoundingClientRect()
const insertAfterTarget = event.clientY > rect.top + rect.height / 2
dragOverUserId.value = user.id
moveUserNearTarget(draggedUserId.value, user.id, insertAfterTarget)
}
async function dropUserDrag() {
if (!draggedUserId.value || savingPicOrder.value) {
return
}
dragSaveStarted.value = true
savingPicOrder.value = true
try {
const response = await apiClient<{ users: ManagedUser[] }>('/api/admin/users/order', {
method: 'PATCH',
body: {
userIds: users.value.map((user) => user.id)
}
})
users.value = response.users
toast.add({
title: 'PIC order saved',
color: 'success',
icon: 'i-lucide-check-circle-2'
})
} catch (error: any) {
users.value = usersBeforeDrag
toast.add({
title: 'PIC order could not be saved',
description: getErrorMessage(error, 'Please try again in a moment.'),
color: 'error',
icon: 'i-lucide-circle-alert'
})
} finally {
savingPicOrder.value = false
resetDragState()
}
}
function endUserDrag() {
if (dragSaveStarted.value) {
return
}
if (draggedUserId.value && usersBeforeDrag.length) {
users.value = usersBeforeDrag
}
resetDragState()
}
async function saveUser(event: FormSubmitEvent<typeof userForm>) {
event.preventDefault()
@@ -466,3 +619,22 @@ async function resetPassword(user: ManagedUser) {
}
}
</script>
<style scoped>
.user-list-move,
.user-list-enter-active,
.user-list-leave-active {
transition: transform 180ms ease, opacity 160ms ease, background-color 160ms ease;
}
.user-list-enter-from,
.user-list-leave-to {
opacity: 0;
transform: translateY(6px);
}
.user-list-leave-active {
position: absolute;
width: 100%;
}
</style>

24
server/api/admin/users/order.patch.ts Normal file
View File

@@ -0,0 +1,24 @@
import { requireRole } from '../../../utils/auth'
import { assertBadRequest } from '../../../utils/http'
import { listUsers, reorderUsers } from '../../../utils/user-repository'
import { parseUserOrderInput } from '../../../utils/users'
export default defineEventHandler(async (event) => {
await requireRole(event, 'super_admin')
const body = await readBody<{
userIds?: unknown
}>(event)
const { userIds } = parseUserOrderInput(body)
const users = await listUsers()
const existingIds = new Set(users.map((user) => user.id))
assertBadRequest(userIds.length === users.length, 'User order must include every user')
assertBadRequest(userIds.every((userId) => existingIds.has(userId)), 'User order contains an unknown user')
await reorderUsers(userIds)
return {
users: await listUsers()
}
})

23
server/utils/db-init.ts
View File

@@ -41,6 +41,29 @@ async function initializeDatabase() {
add column if not exists phone_number text
`
await sql`
alter table users
add column if not exists pic_sort_order integer not null default 0
`
await sql`
update users
set pic_sort_order = seed.sort_order
from (
select
id,
row_number() over (
order by
case when role = 'super_admin' then 0 else 1 end,
created_at asc,
full_name asc
) as sort_order
from users
) as seed
where users.id = seed.id
and users.pic_sort_order = 0
`
await sql`
create table if not exists user_passkeys (
id text primary key,

43
server/utils/user-repository.ts
View File

@@ -15,6 +15,7 @@ type DbUserRow = {
full_name: string
phone_number: string | null
role: UserRole
pic_sort_order: number | string
password_hash: string
must_change_password: boolean
is_active: boolean
@@ -83,6 +84,7 @@ function mapAuthUser(row: DbUserRow): AuthUser {
fullName: row.full_name,
phoneNumber: row.phone_number ? normalizePhoneNumber(row.phone_number) : null,
role: row.role,
picSortOrder: parseInteger(row.pic_sort_order),
isActive: row.is_active,
mustChangePassword: row.must_change_password,
needsPasskeySetup: passkeyCount === 0,
@@ -147,6 +149,7 @@ export async function getUserById(userId: string): Promise<UserAuthRecord | null
users.full_name,
users.phone_number,
users.role,
users.pic_sort_order,
users.password_hash,
users.must_change_password,
users.is_active,
@@ -178,6 +181,7 @@ export async function getUserByUsername(username: string): Promise<UserAuthRecor
users.full_name,
users.phone_number,
users.role,
users.pic_sort_order,
users.password_hash,
users.must_change_password,
users.is_active,
@@ -209,6 +213,7 @@ export async function listUsers(): Promise<ManagedUser[]> {
users.full_name,
users.phone_number,
users.role,
users.pic_sort_order,
users.password_hash,
users.must_change_password,
users.is_active,
@@ -223,7 +228,7 @@ export async function listUsers(): Promise<ManagedUser[]> {
group by user_id
) as passkey_totals on passkey_totals.user_id = users.id
order by
case when users.role = 'super_admin' then 0 else 1 end,
users.pic_sort_order asc,
users.created_at asc
`
@@ -234,18 +239,19 @@ export async function listPublicContacts(): Promise<PublicContact[]> {
await ensureDatabaseReady()
const sql = getSqlClient()
const rows = await sql<Pick<DbUserRow, 'id' | 'full_name' | 'phone_number' | 'role'>[]>`
const rows = await sql<Pick<DbUserRow, 'id' | 'full_name' | 'phone_number' | 'role' | 'pic_sort_order'>[]>`
select
users.id,
users.full_name,
users.phone_number,
users.role
users.role,
users.pic_sort_order
from users
where users.is_active = true
and users.phone_number is not null
and users.phone_number <> ''
order by
case when users.role = 'super_admin' then 0 else 1 end,
users.pic_sort_order asc,
users.full_name asc
`
@@ -253,7 +259,8 @@ export async function listPublicContacts(): Promise<PublicContact[]> {
id: row.id,
fullName: row.full_name,
phoneNumber: normalizePhoneNumber(row.phone_number || ''),
role: row.role
role: row.role,
picSortOrder: parseInteger(row.pic_sort_order)
}))
}
@@ -261,12 +268,13 @@ export async function getPublicContactById(contactId: string): Promise<PublicCon
await ensureDatabaseReady()
const sql = getSqlClient()
const [row] = await sql<Pick<DbUserRow, 'id' | 'full_name' | 'phone_number' | 'role'>[]>`
const [row] = await sql<Pick<DbUserRow, 'id' | 'full_name' | 'phone_number' | 'role' | 'pic_sort_order'>[]>`
select
users.id,
users.full_name,
users.phone_number,
users.role
users.role,
users.pic_sort_order
from users
where users.id = ${contactId}
and users.is_active = true
@@ -283,7 +291,8 @@ export async function getPublicContactById(contactId: string): Promise<PublicCon
id: row.id,
fullName: row.full_name,
phoneNumber: normalizePhoneNumber(row.phone_number || ''),
role: row.role
role: row.role,
picSortOrder: parseInteger(row.pic_sort_order)
}
}
@@ -305,6 +314,7 @@ export async function createUser(input: {
full_name,
phone_number,
role,
pic_sort_order,
password_hash,
must_change_password,
is_active,
@@ -316,6 +326,7 @@ export async function createUser(input: {
${input.fullName},
${input.phoneNumber},
${input.role},
(select coalesce(max(pic_sort_order), 0) + 1 from users),
${input.passwordHash},
true,
true,
@@ -327,6 +338,7 @@ export async function createUser(input: {
full_name,
phone_number,
role,
pic_sort_order,
password_hash,
must_change_password,
is_active,
@@ -361,6 +373,21 @@ export async function updateUserProfile(input: {
return getUserById(input.userId)
}
export async function reorderUsers(userIds: string[]) {
await ensureDatabaseReady()
const sql = getSqlClient()
for (const [index, userId] of userIds.entries()) {
await sql`
update users
set
pic_sort_order = ${index + 1},
updated_at = now()
where id = ${userId}
`
}
}
export async function updateUserPassword(input: {
userId: string
passwordHash: string

16
server/utils/users.ts
View File

@@ -73,3 +73,19 @@ export function parseUserProfileInput(body: {
role
}
}
export function parseUserOrderInput(body: {
userIds?: unknown
}) {
assertBadRequest(Array.isArray(body.userIds), 'User ids must be an array')
assertBadRequest(body.userIds.every((value) => typeof value === 'string' && value.trim()), 'Every user id is required')
const userIds = body.userIds.map((value) => value.trim())
const uniqueUserIds = new Set(userIds)
assertBadRequest(uniqueUserIds.size === userIds.length, 'User ids must be unique')
return {
userIds
}
}

2
shared/auth.ts
View File

@@ -64,6 +64,7 @@ export interface AuthUser {
fullName: string
phoneNumber: string | null
role: UserRole
picSortOrder: number
isActive: boolean
mustChangePassword: boolean
needsPasskeySetup: boolean
@@ -81,6 +82,7 @@ export interface PublicContact {
fullName: string
phoneNumber: string
role: UserRole
picSortOrder: number
}
export interface PasskeySummary {