262 lines
9.5 KiB
Vue
262 lines
9.5 KiB
Vue
<template>
|
|
<div class="flex h-full flex-col">
|
|
<div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="sm:w-[320px]">
|
|
<IconField>
|
|
<InputIcon class="pi pi-search" />
|
|
<InputText v-model.trim="userSearch" placeholder="Search users..." class="search-input w-full" @input="debouncedUsers" />
|
|
</IconField>
|
|
</div>
|
|
<Button v-if="isOwner" label="Add Member" icon="pi pi-plus" @click="addDialog = true" />
|
|
</div>
|
|
|
|
<div class="panel flex min-h-0 flex-1 flex-col overflow-hidden">
|
|
<div class="flex min-h-0 flex-1 flex-col overflow-x-auto">
|
|
<AppDataTable
|
|
:value="members"
|
|
:loading="loading"
|
|
:lazy="true"
|
|
:paginator="true"
|
|
:rows="pageSize"
|
|
:totalRecords="totalCount"
|
|
:first="first"
|
|
@page="onPageChange"
|
|
emptyMessage="No members yet"
|
|
scrollable
|
|
scrollHeight="flex"
|
|
class="min-h-0 flex-1 min-w-[480px]"
|
|
>
|
|
<Column header="User" style="width: 50%">
|
|
<template #body="{ data }">
|
|
<div class="flex items-center gap-2">
|
|
<Avatar :label="(data.displayName || data.username).slice(0, 2).toUpperCase()"
|
|
style="background: var(--primary); color: #fff" />
|
|
<span>{{ data.displayName }}</span>
|
|
<span class="muted-note">@{{ data.username }}</span>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
<Column field="role" header="Role" style="width: 16%">
|
|
<template #body="{ data }">
|
|
<Tag :value="data.role" :severity="data.role === 'Owner' ? 'primary' : 'secondary'" />
|
|
</template>
|
|
</Column>
|
|
<Column header="Document Access" style="width: 34%">
|
|
<template #body="{ data }">
|
|
<div v-if="data.role === 'Owner'" class="flex flex-wrap gap-1">
|
|
<Tag value="Full Access" severity="primary" />
|
|
</div>
|
|
<div v-else class="flex flex-wrap gap-1">
|
|
<Tag v-if="data.canViewDocuments" value="View" severity="secondary" />
|
|
<Tag v-if="data.canCreateDocuments" value="Create" severity="secondary" />
|
|
<Tag v-if="data.canEditDocuments" value="Edit" severity="secondary" />
|
|
<Tag v-if="data.canDeleteDocuments" value="Delete" severity="secondary" />
|
|
<Tag v-if="!data.canViewDocuments" value="No access" severity="danger" />
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
<Column header="" style="width: 10%">
|
|
<template #body="{ data }">
|
|
<div v-if="isOwner && data.role !== 'Owner'" class="flex justify-end gap-1">
|
|
<Button
|
|
icon="pi pi-sliders-h"
|
|
text
|
|
severity="secondary"
|
|
:aria-label="`Set document permissions for ${data.displayName}`"
|
|
@click="openPermissions(data)"
|
|
/>
|
|
<Button
|
|
icon="pi pi-trash"
|
|
text
|
|
severity="danger"
|
|
:aria-label="`Remove ${data.displayName}`"
|
|
@click="onRemove(data.userId)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
</AppDataTable>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog v-model:visible="addDialog" header="Add Member" :modal="true" style="width: min(460px, 92vw)">
|
|
<Select
|
|
v-model="selectedUserId"
|
|
:options="userOptions"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
placeholder="Select user"
|
|
filter
|
|
class="w-full"
|
|
/>
|
|
<Select v-model="newRole" :options="roleOptions" optionLabel="label" optionValue="value"
|
|
placeholder="Role" class="mt-2 w-full" />
|
|
<template #footer>
|
|
<Button label="Cancel" severity="secondary" text @click="addDialog = false" />
|
|
<Button label="Add" :loading="adding" @click="onAdd" />
|
|
</template>
|
|
</Dialog>
|
|
|
|
<Dialog v-model:visible="permDialog" header="Document Access" :modal="true" style="width: min(440px, 92vw)">
|
|
<div class="muted-note mb-3">
|
|
Permissions for <span class="font-medium" style="color: var(--ink)">{{ permTarget?.displayName }}</span>
|
|
@{{ permTarget?.username }}
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<label
|
|
v-for="opt in permOptions"
|
|
:key="opt.key"
|
|
class="flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2" style="border-color: var(--hairline)"
|
|
>
|
|
<Checkbox v-model="permForm[opt.key]" binary />
|
|
<div>
|
|
<div class="text-sm font-medium">{{ opt.label }}</div>
|
|
<div class="muted-note">{{ opt.hint }}</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<template #footer>
|
|
<Button label="Cancel" severity="secondary" text @click="permDialog = false" />
|
|
<Button label="Save" :loading="savingPerms" @click="savePermissions" />
|
|
</template>
|
|
</Dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getMembers, addMember, removeMember, getUsers, updateMemberDocumentPermissions, getMasterDataOptions } from '../../services/backend'
|
|
import { errorMessage } from '../../services/api'
|
|
import { useAuthStore } from '../../stores/auth'
|
|
import AppDataTable from '../../components/AppDataTable.vue'
|
|
import type { ProjectMember } from '../../types'
|
|
import type { DataTablePageEvent } from 'primevue/datatable'
|
|
|
|
const route = useRoute()
|
|
const toast = useToast()
|
|
const auth = useAuthStore()
|
|
|
|
const projectId = String(route.params.id)
|
|
const members = ref<ProjectMember[]>([])
|
|
const loading = ref(false)
|
|
const isOwner = ref(false)
|
|
|
|
const page = ref(1)
|
|
const pageSize = ref(20)
|
|
const totalCount = ref(0)
|
|
const first = computed(() => (page.value - 1) * pageSize.value)
|
|
|
|
const addDialog = ref(false)
|
|
const userSearch = ref('')
|
|
const users = ref<{ label: string; value: string }[]>([])
|
|
const selectedUserId = ref<string | null>(null)
|
|
const newRole = ref<'Owner' | 'Member'>('Member')
|
|
const roleOptions = ref<{ label: string; value: string }[]>([])
|
|
const adding = ref(false)
|
|
|
|
const permDialog = ref(false)
|
|
const permTarget = ref<ProjectMember | null>(null)
|
|
const permForm = reactive({ canViewDocuments: false, canCreateDocuments: false, canEditDocuments: false, canDeleteDocuments: false })
|
|
const savingPerms = ref(false)
|
|
const permOptions = [
|
|
{ key: 'canViewDocuments' as const, label: 'View', hint: 'See documents in the project' },
|
|
{ key: 'canCreateDocuments' as const, label: 'Create', hint: 'Create new documents and folders' },
|
|
{ key: 'canEditDocuments' as const, label: 'Edit', hint: 'Edit content, rename and move' },
|
|
{ key: 'canDeleteDocuments' as const, label: 'Delete', hint: 'Delete documents and folders' },
|
|
]
|
|
|
|
const userOptions = computed(() => users.value.filter((u) => !members.value.some((m) => m.userId === u.value)))
|
|
|
|
let timer: ReturnType<typeof setTimeout> | undefined
|
|
|
|
async function loadMembers() {
|
|
loading.value = true
|
|
try {
|
|
const res = await getMembers(projectId, page.value, pageSize.value)
|
|
members.value = res.items
|
|
totalCount.value = res.totalCount
|
|
isOwner.value = members.value.some((m) => m.userId === auth.user?.id && m.role === 'Owner')
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function onPageChange(event: DataTablePageEvent) {
|
|
page.value = event.page + 1
|
|
pageSize.value = event.rows
|
|
void loadMembers()
|
|
}
|
|
|
|
async function loadUsers() {
|
|
users.value = (await getUsers(userSearch.value || undefined)).map((u: { id: string; username: string; displayName: string }) => ({
|
|
label: `${u.displayName} (@${u.username})`,
|
|
value: u.id,
|
|
}))
|
|
}
|
|
|
|
function debouncedUsers() {
|
|
clearTimeout(timer)
|
|
timer = setTimeout(loadUsers, 300)
|
|
}
|
|
|
|
async function onAdd() {
|
|
if (!selectedUserId.value) {
|
|
toast.add({ severity: 'warn', summary: 'Select a user', life: 3000 })
|
|
return
|
|
}
|
|
adding.value = true
|
|
try {
|
|
await addMember(projectId, selectedUserId.value, newRole.value)
|
|
addDialog.value = false
|
|
selectedUserId.value = null
|
|
toast.add({ severity: 'success', summary: 'Member added', life: 3000 })
|
|
await loadMembers()
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
} finally {
|
|
adding.value = false
|
|
}
|
|
}
|
|
|
|
async function onRemove(userId: string) {
|
|
try {
|
|
await removeMember(projectId, userId)
|
|
toast.add({ severity: 'success', summary: 'Member removed', life: 3000 })
|
|
await loadMembers()
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
}
|
|
}
|
|
|
|
function openPermissions(member: ProjectMember) {
|
|
permTarget.value = member
|
|
permForm.canViewDocuments = member.canViewDocuments
|
|
permForm.canCreateDocuments = member.canCreateDocuments
|
|
permForm.canEditDocuments = member.canEditDocuments
|
|
permForm.canDeleteDocuments = member.canDeleteDocuments
|
|
permDialog.value = true
|
|
}
|
|
|
|
async function savePermissions() {
|
|
if (!permTarget.value) return
|
|
savingPerms.value = true
|
|
try {
|
|
await updateMemberDocumentPermissions(projectId, permTarget.value.userId, { ...permForm })
|
|
permDialog.value = false
|
|
toast.add({ severity: 'success', summary: 'Permissions updated', life: 3000 })
|
|
await loadMembers()
|
|
} catch (e) {
|
|
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
|
} finally {
|
|
savingPerms.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
roleOptions.value = await getMasterDataOptions('member_role')
|
|
await loadMembers()
|
|
await loadUsers()
|
|
})
|
|
</script>
|