feat: update UI
This commit is contained in:
+1
-1
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<router-view />
|
||||
<Toast position="bottom-right" />
|
||||
<ConfirmDialog />
|
||||
<ConfirmDialog style="width: min(500px, 92vw)" />
|
||||
</template>
|
||||
Vendored
+9
-3
@@ -13,13 +13,15 @@ declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Avatar: typeof import('primevue/avatar')['default']
|
||||
Button: typeof import('primevue/button')['default']
|
||||
Card: typeof import('primevue/card')['default']
|
||||
Checkbox: typeof import('primevue/checkbox')['default']
|
||||
Column: typeof import('primevue/column')['default']
|
||||
ConfirmDialog: typeof import('primevue/confirmdialog')['default']
|
||||
DataTable: typeof import('primevue/datatable')['default']
|
||||
DatePicker: typeof import('primevue/datepicker')['default']
|
||||
Dialog: typeof import('primevue/dialog')['default']
|
||||
IconField: typeof import('primevue/iconfield')['default']
|
||||
InputIcon: typeof import('primevue/inputicon')['default']
|
||||
InputNumber: typeof import('primevue/inputnumber')['default']
|
||||
InputText: typeof import('primevue/inputtext')['default']
|
||||
Menu: typeof import('primevue/menu')['default']
|
||||
Message: typeof import('primevue/message')['default']
|
||||
@@ -28,11 +30,15 @@ declare module 'vue' {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Select: typeof import('primevue/select')['default']
|
||||
Splitter: typeof import('primevue/splitter')['default']
|
||||
SplitterPanel: typeof import('primevue/splitterpanel')['default']
|
||||
Tab: typeof import('primevue/tab')['default']
|
||||
TabList: typeof import('primevue/tablist')['default']
|
||||
TabPanel: typeof import('primevue/tabpanel')['default']
|
||||
TabPanels: typeof import('primevue/tabpanels')['default']
|
||||
Tabs: typeof import('primevue/tabs')['default']
|
||||
Tag: typeof import('primevue/tag')['default']
|
||||
Textarea: typeof import('primevue/textarea')['default']
|
||||
Toast: typeof import('primevue/toast')['default']
|
||||
ToggleSwitch: typeof import('primevue/toggleswitch')['default']
|
||||
TreeTable: typeof import('primevue/treetable')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<DataTable
|
||||
v-bind="$attrs"
|
||||
scrollable
|
||||
scrollHeight="flex"
|
||||
:rowsPerPageOptions="rowsPerPageOptions"
|
||||
class="min-h-0 flex-1"
|
||||
>
|
||||
<slot />
|
||||
</DataTable>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
rowsPerPageOptions?: number[]
|
||||
}>(),
|
||||
{ rowsPerPageOptions: () => [10, 20, 50] },
|
||||
)
|
||||
</script>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div v-if="doc" class="flex h-full flex-col">
|
||||
<div class="flex items-start gap-2 border-b border-slate-200 px-4 py-3 dark:border-slate-700 lg:gap-3 lg:px-5">
|
||||
<Button
|
||||
icon="pi pi-arrow-left"
|
||||
rounded
|
||||
text
|
||||
severity="secondary"
|
||||
class="lg:hidden"
|
||||
aria-label="Back to documents"
|
||||
@click="$emit('back')"
|
||||
/>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-lg font-semibold">{{ doc.title }}</div>
|
||||
<div class="flex items-center gap-1 text-[0.8rem] text-slate-500 dark:text-slate-400">
|
||||
<i class="pi pi-history"></i> Updated {{ formatDate(doc.updatedAt) }}
|
||||
<span v-if="saveState === 'saved'" class="text-[0.75rem] text-emerald-500">Saved</span>
|
||||
<span v-else-if="saveState === 'saving'" class="text-[0.75rem] text-amber-500">Saving…</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-actions flex gap-2">
|
||||
<Button v-if="canEdit" icon="pi pi-pencil" severity="secondary" outlined size="small" label="Rename" @click="$emit('rename')" />
|
||||
<Button v-if="canEdit" icon="pi pi-folder-open" severity="secondary" outlined size="small" label="Move" @click="$emit('move')" />
|
||||
<Button v-if="canDelete" icon="pi pi-trash" severity="danger" outlined size="small" label="Delete" @click="$emit('delete')" />
|
||||
</div>
|
||||
</div>
|
||||
<RichTextEditor
|
||||
:model-value="modelValue"
|
||||
class="flex-1 overflow-auto px-5 py-4"
|
||||
@update:model-value="$emit('update:modelValue', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex h-full flex-col items-center justify-center gap-2">
|
||||
<i class="pi pi-file dark:text-slate-600" style="font-size: 2.5rem; color: #cbd5e1"></i>
|
||||
<p class="text-slate-500 dark:text-slate-400">Select a document from the tree to start editing</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import RichTextEditor from './RichTextEditor.vue'
|
||||
import type { DocumentItem } from '../types'
|
||||
|
||||
defineProps<{
|
||||
doc: DocumentItem | null
|
||||
modelValue: string
|
||||
saveState: 'idle' | 'saving' | 'saved'
|
||||
canEdit: boolean
|
||||
canDelete: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
rename: []
|
||||
move: []
|
||||
delete: []
|
||||
back: []
|
||||
}>()
|
||||
|
||||
function formatDate(value: string) {
|
||||
return new Date(value).toLocaleString()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media (max-width: 1023px) {
|
||||
.editor-actions :deep(.p-button-label) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="flex cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-md px-1.5 py-1 hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
:class="{ 'bg-blue-100 dark:bg-blue-900/50': isSelected }"
|
||||
@click="onRowClick"
|
||||
>
|
||||
<span class="tree-chevron" @click.stop="onToggle">
|
||||
<i :class="isFolder && expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'" class="text-[0.7rem] text-slate-500 dark:text-slate-400"></i>
|
||||
</span>
|
||||
<i
|
||||
:class="isFolder ? (expanded ? 'pi pi-folder-open' : 'pi pi-folder') : 'pi pi-file'"
|
||||
:style="{ color: isFolder ? '#3b82f6' : '#94a3b8' }"
|
||||
></i>
|
||||
<span>{{ node.title }}</span>
|
||||
</div>
|
||||
<div v-if="expanded && node.children.length" class="ml-[18px] border-l border-slate-200 pl-2 dark:border-slate-700">
|
||||
<TreeNode
|
||||
v-for="child in node.children"
|
||||
:key="child.id"
|
||||
:node="child"
|
||||
:selected-id="selectedId"
|
||||
@select="$emit('select', $event)"
|
||||
@toggle="$emit('toggle', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { DocumentNode } from '../types'
|
||||
|
||||
defineOptions({ name: 'TreeNode' })
|
||||
|
||||
const props = defineProps<{
|
||||
node: DocumentNode
|
||||
selectedId: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [id: string]
|
||||
toggle: [id: string]
|
||||
}>()
|
||||
|
||||
const expanded = ref(false)
|
||||
|
||||
const isFolder = computed(() => props.node.type === 'Folder')
|
||||
const isSelected = computed(() => props.node.id === props.selectedId)
|
||||
|
||||
function onRowClick() {
|
||||
if (isFolder.value) {
|
||||
expanded.value = !expanded.value
|
||||
emit('toggle', props.node.id)
|
||||
} else {
|
||||
emit('select', props.node.id)
|
||||
}
|
||||
}
|
||||
|
||||
function onToggle() {
|
||||
if (isFolder.value) {
|
||||
expanded.value = !expanded.value
|
||||
emit('toggle', props.node.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,44 +1,85 @@
|
||||
<template>
|
||||
<div class="flex h-full flex-col overflow-hidden p-3">
|
||||
<div>
|
||||
<InputText
|
||||
:model-value="searchTerm"
|
||||
placeholder="Search documents..."
|
||||
class="w-full"
|
||||
@update:model-value="onSearch"
|
||||
/>
|
||||
<div v-if="canCreate" class="mt-2 flex gap-2">
|
||||
<Button label="Doc" icon="pi pi-plus" severity="secondary" size="small" @click="$emit('create', 'Document')" />
|
||||
<Button label="Folder" icon="pi pi-plus" severity="secondary" size="small" @click="$emit('create', 'Folder')" />
|
||||
</div>
|
||||
<div class="mt-2 text-[0.8rem] text-slate-500 dark:text-slate-400">
|
||||
{{ creatingLabel }}
|
||||
<div class="panel flex h-full flex-col overflow-hidden">
|
||||
<div class="flex flex-col gap-3 border-b p-3 sm:flex-row sm:items-center" style="border-color: var(--hairline)">
|
||||
<IconField class="min-w-0 flex-1">
|
||||
<InputIcon class="pi pi-search" />
|
||||
<InputText
|
||||
:model-value="searchTerm"
|
||||
placeholder="Search documents"
|
||||
class="search-input w-full"
|
||||
@update:model-value="onSearch"
|
||||
/>
|
||||
</IconField>
|
||||
<div v-if="canCreate" class="flex shrink-0 gap-2">
|
||||
<Button label="Document" icon="pi pi-plus" size="small" @click="$emit('create', 'Document')" />
|
||||
<Button label="Folder" icon="pi pi-folder-open" severity="secondary" outlined size="small" @click="$emit('create', 'Folder')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex-1 overflow-auto">
|
||||
<TreeNode
|
||||
v-for="root in tree"
|
||||
:key="root.id"
|
||||
:node="root"
|
||||
:selected-id="selectedId"
|
||||
@select="$emit('select', $event)"
|
||||
/>
|
||||
<div v-if="!tree.length && !loading" class="p-4 text-center text-slate-500 dark:text-slate-400">No documents yet</div>
|
||||
|
||||
<p v-if="canCreate" class="muted-note border-b px-3 py-2" style="border-color: var(--hairline)">
|
||||
{{ creatingLabel }}
|
||||
</p>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-auto">
|
||||
<TreeTable
|
||||
v-model:selectionKeys="selectionKeys"
|
||||
:value="nodes"
|
||||
:loading="loading"
|
||||
selectionMode="single"
|
||||
@node-select="onNodeSelect"
|
||||
>
|
||||
<Column field="title" header="Name" expander style="min-width: 240px">
|
||||
<template #body="{ node }">
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<i
|
||||
class="pi"
|
||||
:class="node.data.type === 'Folder' ? 'pi-folder text-fuchsia-500' : 'pi-file'"
|
||||
:style="node.data.type === 'Folder' ? undefined : { color: 'var(--ink-muted)' }"
|
||||
></i>
|
||||
<span :class="node.key === selectedId ? 'font-semibold' : ''">{{ node.data.title }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Owner" style="width: 160px" class="hidden lg:table-cell">
|
||||
<template #body="{ node }">
|
||||
<span class="muted-note">{{ resolveUserName(node.data.createdBy) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Last edited by" style="width: 160px" class="hidden xl:table-cell">
|
||||
<template #body="{ node }">
|
||||
<span class="muted-note">{{ node.data.updatedBy ? resolveUserName(node.data.updatedBy) : '—' }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Updated" style="width: 130px" class="hidden sm:table-cell">
|
||||
<template #body="{ node }">
|
||||
<span class="muted-note">{{ formatDate(node.data.updatedAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<template #empty>
|
||||
<div class="grid place-items-center gap-2 px-4 py-14 text-center">
|
||||
<i class="pi pi-file-edit text-2xl" style="color: var(--ink-muted)"></i>
|
||||
<p class="font-semibold" style="color: var(--ink)">No documents yet</p>
|
||||
<p class="muted-note max-w-[280px]">
|
||||
{{ canCreate ? 'Create a document to start writing, or a folder to group them.' : 'Ask a project owner for document access.' }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</TreeTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TreeNode from './DocumentTreeNode.vue'
|
||||
import type { DocumentNode, DocumentType } from '../types'
|
||||
import type { DocumentNode, DocumentType, ProjectMember } from '../types'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
tree: DocumentNode[]
|
||||
loading: boolean
|
||||
selectedId: string | null
|
||||
searchTerm: string
|
||||
creatingLabel: string
|
||||
canCreate: boolean
|
||||
members: ProjectMember[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -50,4 +91,30 @@ const emit = defineEmits<{
|
||||
function onSearch(value: unknown) {
|
||||
emit('update:searchTerm', typeof value === 'string' ? value.trim() : '')
|
||||
}
|
||||
|
||||
interface DocumentTreeTableNode {
|
||||
key: string
|
||||
data: DocumentNode
|
||||
children: DocumentTreeTableNode[]
|
||||
}
|
||||
|
||||
function toTreeTableNode(node: DocumentNode): DocumentTreeTableNode {
|
||||
return { key: node.id, data: node, children: node.children.map(toTreeTableNode) }
|
||||
}
|
||||
|
||||
const nodes = computed(() => props.tree.map(toTreeTableNode))
|
||||
const selectionKeys = ref<Record<string, boolean>>({})
|
||||
|
||||
function resolveUserName(userId: string) {
|
||||
return props.members.find((m) => m.userId === userId)?.displayName ?? '—'
|
||||
}
|
||||
|
||||
function formatDate(v?: string | null) {
|
||||
const date = new Date(v ?? '')
|
||||
return Number.isNaN(date.valueOf()) ? '—' : date.toLocaleDateString()
|
||||
}
|
||||
|
||||
function onNodeSelect(node: { key?: string; data?: DocumentNode }) {
|
||||
if (node.key && node.data?.type === 'Document') emit('select', node.key)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:visible="visible"
|
||||
:modal="true"
|
||||
:dismissable-mask="false"
|
||||
:pt="{ root: { class: 'doc-dialog' }, content: { class: 'doc-dialog-content' } }"
|
||||
@update:visible="onClose"
|
||||
>
|
||||
<template #container>
|
||||
<header class="flex shrink-0 items-start gap-3 border-b px-5 py-3" style="border-color: var(--hairline)">
|
||||
<i
|
||||
class="mt-1 pi"
|
||||
:class="doc?.type === 'Folder' ? 'pi-folder text-fuchsia-500' : 'pi-file-edit'"
|
||||
:style="doc?.type === 'Folder' ? undefined : { color: 'var(--primary)' }"
|
||||
></i>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h2 class="truncate font-display text-[19px] font-extrabold leading-tight" style="color: var(--ink)">
|
||||
{{ doc?.title }}
|
||||
</h2>
|
||||
<p class="muted-note mt-0.5">
|
||||
Updated {{ formatDate(doc?.updatedAt) }}
|
||||
<span v-if="saveState === 'saved'" class="ml-2 font-semibold text-green-600 dark:text-green-400">Saved</span>
|
||||
<span v-else-if="saveState === 'saving'" class="ml-2 font-semibold" style="color: var(--ink-muted)">Saving…</span>
|
||||
<span v-else-if="editing" class="ml-2 font-semibold" style="color: var(--magenta)">Editing</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<template v-if="editing">
|
||||
<Button label="Cancel" severity="secondary" text size="small" @click="$emit('cancel-edit')" />
|
||||
<Button
|
||||
label="Save"
|
||||
icon="pi pi-check"
|
||||
size="small"
|
||||
:loading="saveState === 'saving'"
|
||||
:disabled="saveState === 'saving'"
|
||||
@click="$emit('save')"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Button v-if="canEdit" icon="pi pi-pencil" label="Edit" size="small" @click="$emit('edit')" />
|
||||
<Button v-if="canEdit" icon="pi pi-folder-open" text severity="secondary" size="small" aria-label="Move to folder" @click="$emit('move')" />
|
||||
<Button v-if="canDelete" icon="pi pi-trash" text severity="danger" size="small" aria-label="Delete" @click="$emit('delete')" />
|
||||
<Button
|
||||
v-if="canEdit"
|
||||
icon="pi pi-ellipsis-h"
|
||||
text
|
||||
severity="secondary"
|
||||
size="small"
|
||||
aria-label="More actions"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
<Menu ref="menu" :model="menuItems" popup />
|
||||
</template>
|
||||
<Button icon="pi pi-times" text severity="secondary" size="small" aria-label="Close" @click="onClose(false)" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-hidden" style="background: var(--panel)">
|
||||
<RichTextEditor
|
||||
v-if="editing"
|
||||
class="h-full"
|
||||
:model-value="modelValue"
|
||||
@update:model-value="onContentChange"
|
||||
/>
|
||||
<div v-else-if="doc?.type === 'Document'" class="h-full overflow-auto p-4">
|
||||
<article class="ck-content document-content" v-html="displayHtml"></article>
|
||||
</div>
|
||||
<div v-else class="grid h-full place-items-center">
|
||||
<p class="muted-note">Folder — open a document inside it to read or edit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import RichTextEditor from './RichTextEditor.vue'
|
||||
import type { DocumentItem } from '../types'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
doc: DocumentItem | null
|
||||
modelValue: string
|
||||
editing: boolean
|
||||
saveState: 'idle' | 'saving' | 'saved'
|
||||
canEdit: boolean
|
||||
canDelete: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [value: boolean]
|
||||
'update:modelValue': [value: string]
|
||||
edit: []
|
||||
'cancel-edit': []
|
||||
save: []
|
||||
rename: []
|
||||
move: []
|
||||
delete: []
|
||||
}>()
|
||||
|
||||
const menu = ref()
|
||||
|
||||
function toggleMenu(event: Event) {
|
||||
menu.value?.toggle(event)
|
||||
}
|
||||
|
||||
const menuItems = computed(() => {
|
||||
const items: Record<string, unknown>[] = []
|
||||
if (props.canEdit) {
|
||||
items.push({ label: 'Rename', icon: 'pi pi-pencil', command: () => emit('rename') })
|
||||
}
|
||||
return items
|
||||
})
|
||||
|
||||
function onClose(value: unknown) {
|
||||
emit('update:visible', typeof value === 'boolean' ? value : false)
|
||||
}
|
||||
|
||||
function onContentChange(value: string) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
const displayHtml = computed(() => props.doc?.content || '<p></p>')
|
||||
|
||||
function formatDate(value?: string) {
|
||||
return value ? new Date(value).toLocaleString() : '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Near-fullscreen writing surface — the editor is the point of this screen */
|
||||
.doc-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 96vw;
|
||||
max-width: 1440px;
|
||||
height: 94dvh;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--hairline);
|
||||
box-shadow: rgba(10, 13, 58, 0.28) 0 18px 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.document-content {
|
||||
min-height: 100%;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<Ckeditor
|
||||
:editor="Editor"
|
||||
:model-value="modelValue ?? ''"
|
||||
:config="editorConfig"
|
||||
@update:model-value="onUpdate"
|
||||
/>
|
||||
<div class="editor-shell">
|
||||
<Ckeditor
|
||||
:editor="Editor"
|
||||
:model-value="modelValue ?? ''"
|
||||
:config="editorConfig"
|
||||
@update:model-value="onUpdate"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -101,4 +103,17 @@ const editorConfig = {
|
||||
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-shell {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.editor-shell :deep(.ck.ck-editor) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
+113
-45
@@ -1,27 +1,40 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex h-dvh flex-col lg:grid"
|
||||
:class="sidebarOpen ? 'lg:grid-cols-[250px_1fr]' : 'lg:grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
class="flex h-dvh flex-col lg:grid"
|
||||
:class="sidebarOpen ? 'lg:grid-cols-[236px_1fr]' : 'lg:grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
v-if="sidebarOpen"
|
||||
class="fixed inset-0 z-30 bg-black/40 lg:hidden"
|
||||
class="fixed inset-0 z-30 bg-slate-950/60 backdrop-blur-sm lg:hidden"
|
||||
@click="sidebarOpen = false"
|
||||
></div>
|
||||
|
||||
<aside
|
||||
class="fixed inset-y-0 left-0 z-40 flex w-[250px] transform flex-col gap-2 bg-slate-800 p-4 text-slate-200 transition-transform duration-200 lg:static"
|
||||
class="fixed inset-y-0 left-0 z-40 flex w-[236px] transform flex-col border-r px-3 py-4 transition-transform duration-200 lg:static"
|
||||
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:hidden'"
|
||||
style="background: var(--panel); border-color: var(--hairline)"
|
||||
>
|
||||
<div class="mb-4 flex items-center justify-between text-xl font-bold text-white">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-briefcase"></i>
|
||||
MWS
|
||||
</div>
|
||||
<button class="lg:hidden" aria-label="Close menu" @click="sidebarOpen = false">
|
||||
<i class="pi pi-times text-lg"></i>
|
||||
<div class="mb-5 flex items-center justify-between px-2">
|
||||
<router-link to="/dashboard" class="flex items-center gap-2.5">
|
||||
<span
|
||||
class="grid h-8 w-8 place-items-center rounded-[10px] font-display text-[15px] font-extrabold text-white"
|
||||
style="background: var(--primary)"
|
||||
>M</span
|
||||
>
|
||||
<span class="font-display text-[15px] font-extrabold tracking-[-0.01em]" style="color: var(--ink)">
|
||||
Workspace
|
||||
</span>
|
||||
</router-link>
|
||||
<button
|
||||
class="text-slate-400 transition-colors hover:text-slate-900 dark:hover:text-white lg:hidden"
|
||||
aria-label="Close menu"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<i class="pi pi-times text-base"></i>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-1">
|
||||
|
||||
<nav class="flex flex-col gap-0.5">
|
||||
<router-link
|
||||
v-for="item in visibleNavItems"
|
||||
:key="item.key"
|
||||
@@ -35,45 +48,76 @@
|
||||
<i class="pi pi-cog"></i> Settings
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex items-center gap-2 text-slate-300">
|
||||
<Avatar :label="initials" style="background: #3b82f6; color: #fff" size="normal" />
|
||||
<span>{{ auth.user?.displayName ?? auth.user?.username }}</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b border-slate-200 bg-white px-4 py-2.5 dark:border-slate-800 dark:bg-slate-900 lg:px-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<header
|
||||
class="flex items-center justify-between gap-3 border-b px-4 py-2.5 lg:px-6"
|
||||
style="background: var(--panel); border-color: var(--hairline)"
|
||||
>
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<Button
|
||||
icon="pi pi-bars"
|
||||
rounded
|
||||
text
|
||||
severity="secondary"
|
||||
:aria-label="sidebarOpen ? 'Close menu' : 'Open menu'"
|
||||
@click="sidebarOpen = !sidebarOpen"
|
||||
/>
|
||||
<span class="truncate text-slate-500 dark:text-slate-400">{{ currentProject?.name ?? 'My Workspace' }}</span>
|
||||
<nav class="flex min-w-0 items-center gap-1.5 text-[13px]" aria-label="Breadcrumb">
|
||||
<span class="shrink-0 font-medium" style="color: var(--ink-muted)">
|
||||
{{ pageTitle }}
|
||||
</span>
|
||||
<template v-if="currentProject">
|
||||
<span style="color: var(--ink-muted)">/</span>
|
||||
<router-link
|
||||
:to="{ name: 'project-overview', params: { id: currentProject.id } }"
|
||||
class="truncate font-medium transition-colors hover:text-slate-900 dark:hover:text-white"
|
||||
style="color: var(--ink-muted)"
|
||||
>
|
||||
{{ currentProject.name }}
|
||||
</router-link>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<span class="hidden shrink-0 text-[13px] font-semibold sm:block" style="color: var(--ink)">
|
||||
Welcome back, {{ auth.user?.displayName ?? auth.user?.username }}
|
||||
</span>
|
||||
<Button
|
||||
:icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
|
||||
rounded
|
||||
text
|
||||
severity="secondary"
|
||||
:aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
@click="theme.toggle"
|
||||
/>
|
||||
<Menu ref="menu" :model="menuItems" popup />
|
||||
<Button
|
||||
icon="pi pi-ellipsis-v"
|
||||
rounded
|
||||
text
|
||||
aria-label="Options"
|
||||
<button
|
||||
class="flex w-auto items-center gap-2.5 rounded-xl border px-2.5 py-1.5 text-left transition-colors hover:bg-slate-50 dark:hover:bg-white/5"
|
||||
style="border-color: var(--hairline)"
|
||||
aria-haspopup="true"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<main class="flex-1 overflow-auto p-4 lg:p-6">
|
||||
<router-view />
|
||||
>
|
||||
<Avatar :label="initials" :style="{ background: 'var(--primary)', color: '#fff' }" size="normal" />
|
||||
<span class="hidden min-w-0 sm:block">
|
||||
<span class="block truncate text-[13px] font-semibold" style="color: var(--ink)">
|
||||
{{ auth.user?.displayName ?? auth.user?.username }}
|
||||
</span>
|
||||
<span class="block truncate text-[11px]" style="color: var(--ink-muted)">
|
||||
@{{ auth.user?.username }}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<Menu ref="menu" :model="menuItems" popup />
|
||||
</header>
|
||||
|
||||
<main class="flex-1 overflow-auto">
|
||||
<div class="mx-auto h-full w-full max-w-[1280px] p-4 sm:p-6 lg:px-8 lg:py-7">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,11 +132,11 @@ import type { Project } from '../types'
|
||||
const auth = useAuthStore()
|
||||
const route = useRoute()
|
||||
const menu = ref()
|
||||
const sidebarOpen = ref(false)
|
||||
const theme = useTheme()
|
||||
|
||||
const desktopMq = window.matchMedia('(min-width: 1024px)')
|
||||
const isDesktop = ref(desktopMq.matches)
|
||||
const sidebarOpen = ref(isDesktop.value)
|
||||
desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
|
||||
|
||||
function handleNavClick() {
|
||||
@@ -102,11 +146,12 @@ function handleNavClick() {
|
||||
const navItems = [
|
||||
{ key: 'dashboard', label: 'Dashboard', icon: 'pi pi-home', to: '/dashboard' },
|
||||
{ key: 'projects', label: 'Projects', icon: 'pi pi-folder-open', to: '/projects' },
|
||||
{ key: 'accounts', label: 'Accounts', icon: 'pi pi-users', to: '/accounts' },
|
||||
{ key: 'roles', label: 'Roles', icon: 'pi pi-shield', to: '/roles' },
|
||||
{ key: 'users', label: 'Users', icon: 'pi pi-users', to: '/users' },
|
||||
]
|
||||
const visibleNavItems = computed(() => navItems.filter((item) => auth.canView(item.key)))
|
||||
|
||||
const pageTitle = computed(() => (route.meta.title as string | undefined) ?? 'Projects')
|
||||
|
||||
const currentProject = ref<Project | null>(null)
|
||||
|
||||
async function loadCurrentProject(id: string | string[]) {
|
||||
@@ -142,6 +187,7 @@ const menuItems = computed(() => [
|
||||
{
|
||||
label: auth.user?.displayName ?? auth.user?.username,
|
||||
items: [
|
||||
{ label: 'Profile', icon: 'pi pi-user', command: () => router.push('/profile') },
|
||||
{
|
||||
label: 'Logout',
|
||||
icon: 'pi pi-sign-out',
|
||||
@@ -154,6 +200,8 @@ const menuItems = computed(() => [
|
||||
},
|
||||
])
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function toggleMenu(event: Event) {
|
||||
menu.value?.toggle(event)
|
||||
}
|
||||
@@ -161,22 +209,42 @@ function toggleMenu(event: Event) {
|
||||
|
||||
<style scoped>
|
||||
.nav-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
gap: 0.65rem;
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem 0.875rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #cbd5e1;
|
||||
color: var(--ink-muted);
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.nav-link i {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.nav-link:hover {
|
||||
background-color: #334155;
|
||||
color: #fff;
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav-link.router-link-active {
|
||||
background-color: #3b82f6;
|
||||
color: #fff;
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-dark .nav-link.router-link-active {
|
||||
color: #9ba6f8;
|
||||
}
|
||||
/* Active marker: a magenta rail, the one place the second accent shows in the shell */
|
||||
.nav-link.router-link-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--magenta);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,48 @@
|
||||
<template>
|
||||
<div class="project-layout">
|
||||
<div class="mb-5 flex gap-1 overflow-x-auto border-b border-slate-200 dark:border-slate-700">
|
||||
<router-link
|
||||
class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-exact-active]:border-blue-500 [&.router-link-exact-active]:text-blue-500"
|
||||
:to="{ name: 'project-overview' }"
|
||||
>Overview</router-link>
|
||||
<router-link
|
||||
class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
|
||||
:to="{ name: 'documents' }"
|
||||
>Documents</router-link>
|
||||
<router-link
|
||||
class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
|
||||
:to="{ name: 'tasks' }"
|
||||
>Tasks</router-link>
|
||||
<router-link
|
||||
class="-mb-px whitespace-nowrap border-b-2 border-transparent px-4 py-2.5 font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 [&.router-link-active]:border-blue-500 [&.router-link-active]:text-blue-500"
|
||||
:to="{ name: 'members' }"
|
||||
>Members</router-link>
|
||||
</div>
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<nav class="mb-5 flex shrink-0 gap-1 overflow-x-auto border-b pb-px" style="border-color: var(--hairline)">
|
||||
<router-link class="tab tab-exact" :to="{ name: 'project-overview' }">Overview</router-link>
|
||||
<router-link class="tab" :to="{ name: 'documents' }">Documents</router-link>
|
||||
<router-link class="tab" :to="{ name: 'tasks' }">Tasks</router-link>
|
||||
<router-link class="tab" :to="{ name: 'members' }">Members</router-link>
|
||||
</nav>
|
||||
|
||||
<router-view />
|
||||
<div class="min-h-0 flex-1">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tab {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 0.9rem 0.7rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--ink-muted);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.tab:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
.tab.router-link-active:not(.tab-exact),
|
||||
.tab-exact.router-link-exact-active {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-dark .tab.router-link-active:not(.tab-exact),
|
||||
.app-dark .tab-exact.router-link-exact-active {
|
||||
color: #9ba6f8;
|
||||
}
|
||||
.tab.router-link-active:not(.tab-exact)::after,
|
||||
.tab-exact.router-link-exact-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline: 0.4rem;
|
||||
bottom: -1px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
+2
-2
@@ -3,7 +3,7 @@ import { createPinia } from 'pinia'
|
||||
import PrimeVue from 'primevue/config'
|
||||
import ToastService from 'primevue/toastservice'
|
||||
import ConfirmationService from 'primevue/confirmationservice'
|
||||
import Aura from '@primevue/themes/aura'
|
||||
import KrakenPreset from './theme'
|
||||
|
||||
import 'primeicons/primeicons.css'
|
||||
|
||||
@@ -17,7 +17,7 @@ app.use(createPinia())
|
||||
app.use(router)
|
||||
app.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: Aura,
|
||||
preset: KrakenPreset,
|
||||
options: { darkModeSelector: '.app-dark' },
|
||||
},
|
||||
})
|
||||
|
||||
+10
-7
@@ -5,6 +5,7 @@ declare module 'vue-router' {
|
||||
interface RouteMeta {
|
||||
public?: boolean
|
||||
screenKey?: string
|
||||
title?: string
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,10 +23,9 @@ const router = createRouter({
|
||||
component: () => import('../layouts/MainLayout.vue'),
|
||||
children: [
|
||||
{ path: '', redirect: '/projects' },
|
||||
{ path: 'dashboard', name: 'dashboard', component: () => import('../views/DashboardView.vue'), meta: { screenKey: 'dashboard' } },
|
||||
{ path: 'projects', name: 'projects', component: () => import('../views/projects/ProjectsListView.vue'), meta: { screenKey: 'projects' } },
|
||||
{ path: 'accounts', name: 'accounts', component: () => import('../views/AccountsView.vue'), meta: { screenKey: 'accounts' } },
|
||||
{ path: 'roles', name: 'roles', component: () => import('../views/RolesView.vue'), meta: { screenKey: 'roles' } },
|
||||
{ path: 'dashboard', name: 'dashboard', component: () => import('../views/dashboard/DashboardView.vue'), meta: { screenKey: 'dashboard', title: 'Dashboard' } },
|
||||
{ path: 'projects', name: 'projects', component: () => import('../views/projects/ProjectsListView.vue'), meta: { screenKey: 'projects', title: 'Projects' } },
|
||||
{ path: 'users', name: 'users', component: () => import('../views/users/UsersView.vue'), meta: { screenKey: 'users', title: 'Users' } },
|
||||
{
|
||||
path: 'projects/:id',
|
||||
component: () => import('../layouts/ProjectLayout.vue'),
|
||||
@@ -38,7 +38,8 @@ const router = createRouter({
|
||||
{ path: 'members', name: 'members', component: () => import('../views/projects/MembersView.vue') },
|
||||
],
|
||||
},
|
||||
{ path: 'settings', name: 'settings', component: () => import('../views/SettingsView.vue') },
|
||||
{ path: 'settings', name: 'settings', component: () => import('../views/settings/SettingsView.vue'), meta: { title: 'Settings' } },
|
||||
{ path: 'profile', name: 'profile', component: () => import('../views/profile/ProfileView.vue'), meta: { title: 'Profile' } },
|
||||
],
|
||||
},
|
||||
{ path: '/:pathMatch(.*)*', redirect: '/projects' },
|
||||
@@ -51,13 +52,15 @@ router.beforeEach(async (to) => {
|
||||
return { name: 'login', query: { redirect: to.fullPath } }
|
||||
}
|
||||
if (to.name === 'login' && auth.isAuthenticated) {
|
||||
return { path: '/projects' }
|
||||
return { path: '/dashboard' }
|
||||
}
|
||||
if (auth.isAuthenticated) {
|
||||
await auth.ensureMenu()
|
||||
}
|
||||
if (to.meta.screenKey && !auth.canView(to.meta.screenKey)) {
|
||||
return { path: '/projects' }
|
||||
if (to.path !== '/dashboard') {
|
||||
return { path: '/dashboard' }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
+109
-29
@@ -1,5 +1,19 @@
|
||||
import { api } from './api'
|
||||
import type { LoginResponse, Project, ProjectMember, MemberRole, Account, MenuItem, Role, SaveRoleRequest } from '../types'
|
||||
import type {
|
||||
LoginResponse,
|
||||
Project,
|
||||
ProjectMember,
|
||||
MemberRole,
|
||||
UserListItem,
|
||||
MenuItem,
|
||||
Role,
|
||||
SaveRoleRequest,
|
||||
MasterDataItem,
|
||||
SaveMasterDataRequest,
|
||||
PagedResult,
|
||||
UserRoleDetail,
|
||||
User,
|
||||
} from '../types'
|
||||
|
||||
export async function login(username: string, password: string): Promise<LoginResponse> {
|
||||
const { data } = await api.post<LoginResponse>('/api/auth/login', { username, password })
|
||||
@@ -7,36 +21,65 @@ export async function login(username: string, password: string): Promise<LoginRe
|
||||
}
|
||||
|
||||
export async function getMenu(): Promise<MenuItem[]> {
|
||||
const { data } = await api.get<MenuItem[]>('/api/menu')
|
||||
const { data } = await api.get<MenuItem[]>('/api/settings/permission/menu')
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getRoles(): Promise<Role[]> {
|
||||
const { data } = await api.get<Role[]>('/api/roles')
|
||||
export async function getRoles(page = 1, pageSize = 20): Promise<PagedResult<Role>> {
|
||||
const { data } = await api.get<PagedResult<Role>>('/api/settings/permission', { params: { page, pageSize } })
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getRole(id: string): Promise<Role> {
|
||||
const { data } = await api.get<Role>(`/api/roles/${id}`)
|
||||
const { data } = await api.get<Role>(`/api/settings/permission/${id}`)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function createRole(payload: SaveRoleRequest): Promise<Role> {
|
||||
const { data } = await api.post<Role>('/api/roles', payload)
|
||||
const { data } = await api.post<Role>('/api/settings/permission', payload)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function updateRole(id: string, payload: SaveRoleRequest): Promise<Role> {
|
||||
const { data } = await api.put<Role>(`/api/roles/${id}`, payload)
|
||||
const { data } = await api.put<Role>(`/api/settings/permission/${id}`, payload)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function deleteRole(id: string): Promise<void> {
|
||||
await api.delete(`/api/roles/${id}`)
|
||||
await api.delete(`/api/settings/permission/${id}`)
|
||||
}
|
||||
|
||||
export async function getProjects(): Promise<Project[]> {
|
||||
const { data } = await api.get<Project[]>('/api/projects')
|
||||
export async function getMasterDataList(group?: string, page = 1, pageSize = 20): Promise<PagedResult<MasterDataItem>> {
|
||||
const { data } = await api.get<PagedResult<MasterDataItem>>('/api/masterdata', { params: { group, page, pageSize } })
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getMasterDataByGroup(group: string): Promise<MasterDataItem[]> {
|
||||
const { data } = await api.get<MasterDataItem[]>(`/api/masterdata/groups/${group}`)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getMasterDataOptions(group: string): Promise<{ label: string; value: string }[]> {
|
||||
const items = await getMasterDataByGroup(group)
|
||||
return items.map((i) => ({ label: i.label, value: i.value }))
|
||||
}
|
||||
|
||||
export async function createMasterData(payload: SaveMasterDataRequest): Promise<MasterDataItem> {
|
||||
const { data } = await api.post<MasterDataItem>('/api/masterdata', payload)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function updateMasterData(id: string, payload: SaveMasterDataRequest): Promise<MasterDataItem> {
|
||||
const { data } = await api.put<MasterDataItem>(`/api/masterdata/${id}`, payload)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function deleteMasterData(id: string): Promise<void> {
|
||||
await api.delete(`/api/masterdata/${id}`)
|
||||
}
|
||||
|
||||
export async function getProjects(page = 1, pageSize = 20): Promise<PagedResult<Project>> {
|
||||
const { data } = await api.get<PagedResult<Project>>('/api/projects', { params: { page, pageSize } })
|
||||
return data
|
||||
}
|
||||
|
||||
@@ -72,8 +115,8 @@ export async function deleteProject(id: string): Promise<void> {
|
||||
await api.delete(`/api/projects/${id}`)
|
||||
}
|
||||
|
||||
export async function getMembers(projectId: string): Promise<ProjectMember[]> {
|
||||
const { data } = await api.get<ProjectMember[]>(`/api/projects/${projectId}/members`)
|
||||
export async function getMembers(projectId: string, page = 1, pageSize = 20): Promise<PagedResult<ProjectMember>> {
|
||||
const { data } = await api.get<PagedResult<ProjectMember>>(`/api/projects/${projectId}/members`, { params: { page, pageSize } })
|
||||
return data
|
||||
}
|
||||
|
||||
@@ -90,38 +133,75 @@ export async function removeMember(projectId: string, userId: string): Promise<v
|
||||
await api.delete(`/api/projects/${projectId}/members/${userId}`)
|
||||
}
|
||||
|
||||
export async function getUsers(q?: string) {
|
||||
const { data } = await api.get('/api/users', { params: { q } })
|
||||
export async function updateMemberDocumentPermissions(
|
||||
projectId: string,
|
||||
userId: string,
|
||||
payload: {
|
||||
canViewDocuments: boolean
|
||||
canCreateDocuments: boolean
|
||||
canEditDocuments: boolean
|
||||
canDeleteDocuments: boolean
|
||||
},
|
||||
): Promise<ProjectMember> {
|
||||
const { data } = await api.put<ProjectMember>(`/api/projects/${projectId}/members/${userId}/document-permissions`, payload)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getAccounts(q?: string): Promise<Account[]> {
|
||||
const { data } = await api.get<Account[]>('/api/accounts', { params: { q } })
|
||||
export async function getProfile(): Promise<User> {
|
||||
const { data } = await api.get<User>('/api/auth/me')
|
||||
return data
|
||||
}
|
||||
|
||||
export async function createAccount(payload: {
|
||||
export async function getUsers(q?: string): Promise<User[]> {
|
||||
const { data } = await api.get<User[]>('/api/users/list', { params: { q } })
|
||||
return data
|
||||
}
|
||||
|
||||
export async function getUsersPaged(q?: string, page = 1, pageSize = 20): Promise<PagedResult<UserListItem>> {
|
||||
const { data } = await api.get<PagedResult<UserListItem>>('/api/users', { params: { q, page, pageSize } })
|
||||
return data
|
||||
}
|
||||
|
||||
export async function createUser(payload: {
|
||||
username: string
|
||||
displayName: string
|
||||
password: string
|
||||
roleId: string
|
||||
}): Promise<Account> {
|
||||
const { data } = await api.post<Account>('/api/accounts', payload)
|
||||
roleId?: string
|
||||
}): Promise<UserListItem> {
|
||||
const { data } = await api.post<UserListItem>('/api/users', payload)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function updateAccount(
|
||||
export async function updateUser(
|
||||
id: string,
|
||||
payload: { displayName: string; roleId: string; isActive: boolean },
|
||||
): Promise<Account> {
|
||||
const { data } = await api.put<Account>(`/api/accounts/${id}`, payload)
|
||||
payload: { displayName: string; roleId?: string; isActive: boolean },
|
||||
): Promise<UserListItem> {
|
||||
const { data } = await api.put<UserListItem>(`/api/users/${id}`, payload)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function deleteAccount(id: string): Promise<void> {
|
||||
await api.delete(`/api/accounts/${id}`)
|
||||
export async function deleteUser(id: string): Promise<void> {
|
||||
await api.delete(`/api/users/${id}`)
|
||||
}
|
||||
|
||||
export async function resetAccountPassword(id: string, newPassword: string): Promise<void> {
|
||||
await api.post(`/api/accounts/${id}/reset-password`, { newPassword })
|
||||
}
|
||||
export async function resetUserPassword(id: string, newPassword: string): Promise<void> {
|
||||
await api.post(`/api/users/${id}/reset-password`, { newPassword })
|
||||
}
|
||||
|
||||
export async function getUserRoles(userId: string): Promise<UserRoleDetail> {
|
||||
const { data } = await api.get<UserRoleDetail>(`/api/users/${userId}/roles`)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function assignUserRole(userId: string, roleId: string): Promise<void> {
|
||||
await api.post(`/api/users/${userId}/roles`, { roleId })
|
||||
}
|
||||
|
||||
export async function unassignUserRole(userId: string, roleId: string): Promise<void> {
|
||||
await api.delete(`/api/users/${userId}/roles/${roleId}`)
|
||||
}
|
||||
|
||||
export async function getUserPermissions(userId: string): Promise<MenuItem[]> {
|
||||
const { data } = await api.get<MenuItem[]>(`/api/users/${userId}/permissions`)
|
||||
return data
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { api } from './api'
|
||||
import type { DocumentItem, DocumentNode, DocumentType, Task, TaskPriority, TaskStatus } from '../types'
|
||||
import type { DocumentItem, DocumentNode, DocumentType, PagedResult, Task, TaskPriority, TaskStatus } from '../types'
|
||||
|
||||
export async function getDocumentTree(projectId: string): Promise<DocumentNode[]> {
|
||||
const { data } = await api.get<DocumentNode[]>(`/api/projects/${projectId}/documents`)
|
||||
@@ -44,8 +44,10 @@ export async function searchDocuments(q: string): Promise<DocumentNode[]> {
|
||||
export async function getTasks(
|
||||
projectId: string,
|
||||
filters?: { status?: string; priority?: string; assigneeId?: string },
|
||||
): Promise<Task[]> {
|
||||
const { data } = await api.get<Task[]>(`/api/projects/${projectId}/tasks`, { params: filters })
|
||||
page = 1,
|
||||
pageSize = 20,
|
||||
): Promise<PagedResult<Task>> {
|
||||
const { data } = await api.get<PagedResult<Task>>(`/api/projects/${projectId}/tasks`, { params: { ...filters, page, pageSize } })
|
||||
return data
|
||||
}
|
||||
|
||||
@@ -91,4 +93,4 @@ export async function deleteTask(id: string): Promise<void> {
|
||||
export async function searchTasks(q: string): Promise<Task[]> {
|
||||
const { data } = await api.get<Task[]>('/api/tasks/search', { params: { q } })
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
+7
-1
@@ -1,5 +1,5 @@
|
||||
import type { MenuItem, User } from '../types'
|
||||
import { login as apiLogin, getMenu } from '../services/backend'
|
||||
import { login as apiLogin, getMenu, getProfile } from '../services/backend'
|
||||
|
||||
function loadUser(): User | null {
|
||||
try {
|
||||
@@ -41,6 +41,12 @@ export const useAuthStore = defineStore('auth', {
|
||||
this.menu = await getMenu()
|
||||
this.menuLoaded = true
|
||||
},
|
||||
async fetchProfile() {
|
||||
if (this.token) {
|
||||
this.user = await getProfile()
|
||||
localStorage.setItem('mws_user', JSON.stringify(this.user))
|
||||
}
|
||||
},
|
||||
async ensureMenu() {
|
||||
if (!this.menuLoaded) await this.loadMenu()
|
||||
},
|
||||
|
||||
+221
-32
@@ -2,29 +2,166 @@
|
||||
|
||||
@custom-variant dark (&:where(.app-dark, .app-dark *));
|
||||
|
||||
@theme {
|
||||
/* Display = heavy geometric grotesque (DESIGN.md substitute for ABC Ginto Nord) */
|
||||
--font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--font-display: 'Hanken Grotesk', 'Inter', Helvetica, Arial, sans-serif;
|
||||
|
||||
/* Blurple — brand primary, remaps every indigo-* utility */
|
||||
--color-indigo-50: #eef0fe;
|
||||
--color-indigo-100: #dfe3fd;
|
||||
--color-indigo-200: #c3cafb;
|
||||
--color-indigo-300: #9ba6f8;
|
||||
--color-indigo-400: #7b88f5;
|
||||
--color-indigo-500: #5865f2;
|
||||
--color-indigo-600: #4551e0;
|
||||
--color-indigo-700: #3742b8;
|
||||
--color-indigo-800: #29328c;
|
||||
--color-indigo-900: #1e2353;
|
||||
--color-indigo-950: #0a0d3a;
|
||||
|
||||
/* Legacy purple-* aliases → Blurple, so untouched views follow the brand */
|
||||
--color-purple-50: #eef0fe;
|
||||
--color-purple-100: #dfe3fd;
|
||||
--color-purple-200: #c3cafb;
|
||||
--color-purple-300: #9ba6f8;
|
||||
--color-purple-400: #7b88f5;
|
||||
--color-purple-500: #5865f2;
|
||||
--color-purple-600: #4551e0;
|
||||
--color-purple-700: #3742b8;
|
||||
--color-purple-800: #29328c;
|
||||
--color-purple-900: #1e2353;
|
||||
--color-purple-950: #0a0d3a;
|
||||
|
||||
/* Magenta — the playful counterweight (badges, folder marks, focus art) */
|
||||
--color-fuchsia-400: #f26bcb;
|
||||
--color-fuchsia-500: #ec48bd;
|
||||
--color-fuchsia-600: #d32ba1;
|
||||
|
||||
/* Electric green — highest-intent only */
|
||||
--color-green-50: #e8fdf1;
|
||||
--color-green-100: #c7f9dd;
|
||||
--color-green-200: #8df3bb;
|
||||
--color-green-300: #56ef9c;
|
||||
--color-green-400: #35ed7e;
|
||||
--color-green-500: #1cc963;
|
||||
--color-green-600: #14a151;
|
||||
--color-green-700: #0f7c3f;
|
||||
--color-green-800: #0b562d;
|
||||
--color-green-900: #073a1f;
|
||||
--color-green-950: #042313;
|
||||
|
||||
/* Cool indigo-tinted neutrals — remaps every slate-* utility */
|
||||
--color-slate-50: #f6f7fb;
|
||||
--color-slate-100: #eef0f7;
|
||||
--color-slate-200: #dde0ed;
|
||||
--color-slate-300: #c1c6dd;
|
||||
--color-slate-400: #8e95b5;
|
||||
--color-slate-500: #666d92;
|
||||
--color-slate-600: #4a5177;
|
||||
--color-slate-700: #2d3358;
|
||||
--color-slate-800: #1e2353;
|
||||
--color-slate-900: #141840;
|
||||
--color-slate-950: #0a0d3a;
|
||||
|
||||
--shadow-subtle: rgba(69, 42, 124, 0.1) 0px 3px 34px;
|
||||
--shadow-micro: rgba(20, 24, 64, 0.06) 0px 1px 3px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-family: var(--font-sans);
|
||||
--ink: #141840;
|
||||
--ink-muted: #666d92;
|
||||
--primary: #5865f2;
|
||||
--magenta: #ec48bd;
|
||||
--canvas: #f6f7fb;
|
||||
--panel: #ffffff;
|
||||
--hairline: #dde0ed;
|
||||
--primary-soft: rgba(88, 101, 242, 0.12);
|
||||
}
|
||||
|
||||
.app-dark {
|
||||
--ink: #ffffff;
|
||||
--ink-muted: #8e95b5;
|
||||
--canvas: #0a0d3a;
|
||||
--panel: #141840;
|
||||
--hairline: #2d3358;
|
||||
--primary-soft: rgba(123, 136, 245, 0.2);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
font-family: var(--font-family, Inter, 'Segoe UI', Roboto, Arial, sans-serif);
|
||||
background: #f5f7fa;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.app-dark body {
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
font-family: var(--font-family);
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3b82f6;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* CKEditor: fill its container, no fixed height */
|
||||
.ck.ck-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ck.ck-editor__main {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ck-editor__editable {
|
||||
min-height: 400px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable_inline {
|
||||
width: 100% !important;
|
||||
padding: 20px !important;
|
||||
border: 1px solid var(--hairline) !important;
|
||||
border-radius: 0 0 12px 12px !important;
|
||||
}
|
||||
|
||||
.ck.ck-toolbar {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable_inline.ck-focused {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* No max-width here: CKEditor puts this class on the live editable too — capping
|
||||
it would re-center and narrow the edit area. Read-view width lives on .document-content. */
|
||||
.ck-content {
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.ck-content h2 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ck-content h3,
|
||||
.ck-content h4 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ck-content ol,
|
||||
@@ -37,26 +174,26 @@
|
||||
}
|
||||
|
||||
.app-dark .ck.ck-editor {
|
||||
--ck-color-base-background: #0f172a;
|
||||
--ck-color-base-border: #334155;
|
||||
--ck-color-base-text: #e2e8f0;
|
||||
--ck-color-text: #e2e8f0;
|
||||
--ck-color-focus-border: #3b82f6;
|
||||
--ck-color-toolbar-background: #1e293b;
|
||||
--ck-color-toolbar-border: #334155;
|
||||
--ck-color-dropdown-panel-background: #1e293b;
|
||||
--ck-color-panel-background: #1e293b;
|
||||
--ck-color-panel-border: #334155;
|
||||
--ck-color-button-default-hover-background: #334155;
|
||||
--ck-color-button-default-active-background: #334155;
|
||||
--ck-color-button-on-background: #334155;
|
||||
--ck-color-input-background: #0f172a;
|
||||
--ck-color-input-border: #334155;
|
||||
--ck-color-input-text: #e2e8f0;
|
||||
--ck-color-tooltip-background: #334155;
|
||||
--ck-color-tooltip-text: #e2e8f0;
|
||||
--ck-color-table-border: #475569;
|
||||
--ck-color-link-default: #60a5fa;
|
||||
--ck-color-base-background: #0a0d3a;
|
||||
--ck-color-base-border: #2d3358;
|
||||
--ck-color-base-text: #ffffff;
|
||||
--ck-color-text: #ffffff;
|
||||
--ck-color-focus-border: #5865f2;
|
||||
--ck-color-toolbar-background: #141840;
|
||||
--ck-color-toolbar-border: #2d3358;
|
||||
--ck-color-dropdown-panel-background: #141840;
|
||||
--ck-color-panel-background: #141840;
|
||||
--ck-color-panel-border: #2d3358;
|
||||
--ck-color-button-default-hover-background: #2d3358;
|
||||
--ck-color-button-default-active-background: #2d3358;
|
||||
--ck-color-button-on-background: #2d3358;
|
||||
--ck-color-input-background: #0a0d3a;
|
||||
--ck-color-input-border: #2d3358;
|
||||
--ck-color-input-text: #ffffff;
|
||||
--ck-color-tooltip-background: #2d3358;
|
||||
--ck-color-tooltip-text: #ffffff;
|
||||
--ck-color-table-border: #4a5177;
|
||||
--ck-color-link-default: #9ba6f8;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,6 +203,58 @@
|
||||
}
|
||||
|
||||
.field > label {
|
||||
@apply mb-1.5 block text-sm font-medium;
|
||||
@apply mb-1.5 block text-[13px] font-semibold uppercase tracking-[0.06em];
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 3vw, 38px);
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.muted-note {
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* Eyebrow: small caps label above a title */
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* Surface card used outside PrimeVue <Card> */
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.search-input.p-inputtext,
|
||||
.search-input.p-select {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
+219
@@ -0,0 +1,219 @@
|
||||
import { definePreset } from '@primevue/themes'
|
||||
import Aura from '@primevue/themes/aura'
|
||||
|
||||
// Blurple — DESIGN.md brand primary (#5865f2)
|
||||
const blurple = {
|
||||
50: '#eef0fe',
|
||||
100: '#dfe3fd',
|
||||
200: '#c3cafb',
|
||||
300: '#9ba6f8',
|
||||
400: '#7b88f5',
|
||||
500: '#5865f2',
|
||||
600: '#4551e0',
|
||||
700: '#3742b8',
|
||||
800: '#29328c',
|
||||
900: '#1e2353',
|
||||
950: '#0a0d3a',
|
||||
}
|
||||
|
||||
const green = {
|
||||
50: '#e8fdf1',
|
||||
100: '#c7f9dd',
|
||||
200: '#8df3bb',
|
||||
300: '#56ef9c',
|
||||
400: '#35ed7e',
|
||||
500: '#1cc963',
|
||||
600: '#14a151',
|
||||
700: '#0f7c3f',
|
||||
800: '#0b562d',
|
||||
900: '#073a1f',
|
||||
950: '#042313',
|
||||
}
|
||||
|
||||
const lightSurface = {
|
||||
0: '#ffffff',
|
||||
50: '#f6f7fb',
|
||||
100: '#eef0f7',
|
||||
200: '#dde0ed',
|
||||
300: '#c1c6dd',
|
||||
400: '#8e95b5',
|
||||
500: '#666d92',
|
||||
600: '#4a5177',
|
||||
700: '#2d3358',
|
||||
800: '#1e2353',
|
||||
900: '#141840',
|
||||
950: '#0a0d3a',
|
||||
}
|
||||
|
||||
const darkSurface = {
|
||||
0: '#ffffff',
|
||||
50: '#f6f7fb',
|
||||
100: '#dde0ed',
|
||||
200: '#c1c6dd',
|
||||
300: '#8e95b5',
|
||||
400: '#666d92',
|
||||
500: '#4a5177',
|
||||
600: '#2d3358',
|
||||
700: '#242a4d',
|
||||
800: '#1e2353',
|
||||
900: '#141840',
|
||||
950: '#0a0d3a',
|
||||
}
|
||||
|
||||
export default definePreset(Aura, {
|
||||
primitive: {
|
||||
borderRadius: {
|
||||
none: '0',
|
||||
xs: '6px',
|
||||
sm: '10px',
|
||||
md: '12px',
|
||||
lg: '16px',
|
||||
xl: '20px',
|
||||
},
|
||||
blurple,
|
||||
green,
|
||||
},
|
||||
semantic: {
|
||||
primary: blurple,
|
||||
success: green,
|
||||
focusRing: {
|
||||
width: '2px',
|
||||
style: 'solid',
|
||||
color: '{primary.500}',
|
||||
offset: '2px',
|
||||
shadow: 'none',
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
surface: lightSurface,
|
||||
primary: {
|
||||
color: '{primary.500}',
|
||||
contrastColor: '#ffffff',
|
||||
hoverColor: '{primary.600}',
|
||||
activeColor: '{primary.700}',
|
||||
},
|
||||
text: {
|
||||
color: '{surface.900}',
|
||||
hoverColor: '{surface.950}',
|
||||
mutedColor: '{surface.500}',
|
||||
hoverMutedColor: '{surface.600}',
|
||||
},
|
||||
formField: {
|
||||
borderColor: '{surface.200}',
|
||||
hoverBorderColor: '{surface.300}',
|
||||
focusBorderColor: '{primary.500}',
|
||||
color: '{surface.900}',
|
||||
},
|
||||
content: {
|
||||
background: '#ffffff',
|
||||
borderColor: '{surface.200}',
|
||||
},
|
||||
overlay: {
|
||||
modal: {
|
||||
background: '#ffffff',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{text.color}',
|
||||
shadow: 'rgba(69, 42, 124, 0.14) 0px 12px 48px',
|
||||
},
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
surface: darkSurface,
|
||||
text: {
|
||||
color: '#ffffff',
|
||||
hoverColor: '#ffffff',
|
||||
mutedColor: '{surface.300}',
|
||||
hoverMutedColor: '{surface.200}',
|
||||
},
|
||||
primary: {
|
||||
color: '{primary.400}',
|
||||
contrastColor: '#0a0d3a',
|
||||
hoverColor: '{primary.300}',
|
||||
activeColor: '{primary.200}',
|
||||
},
|
||||
content: {
|
||||
background: '#141840',
|
||||
borderColor: '{surface.600}',
|
||||
},
|
||||
overlay: {
|
||||
modal: {
|
||||
background: '#141840',
|
||||
borderColor: '{surface.600}',
|
||||
color: '#ffffff',
|
||||
shadow: 'rgba(0, 0, 0, 0.5) 0px 12px 48px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
button: {
|
||||
root: {
|
||||
borderRadius: '12px',
|
||||
paddingX: '1.05rem',
|
||||
label: { fontWeight: '600' },
|
||||
},
|
||||
},
|
||||
card: {
|
||||
root: {
|
||||
background: '{content.background}',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid {content.border.color}',
|
||||
shadow: 'none',
|
||||
},
|
||||
body: { gap: '0.75rem' },
|
||||
title: { fontSize: '0.95rem', fontWeight: '700' },
|
||||
},
|
||||
dialog: {
|
||||
root: { borderRadius: '16px' },
|
||||
header: { padding: '1.25rem 1.5rem 0.75rem' },
|
||||
content: { padding: '0 1.5rem 0.5rem' },
|
||||
footer: { padding: '0.75rem 1.5rem 1.25rem' },
|
||||
title: { fontWeight: '700', fontSize: '1.05rem' },
|
||||
},
|
||||
datatable: {
|
||||
header: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{text.muted.color}',
|
||||
},
|
||||
headerCell: {
|
||||
background: 'transparent',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{text.muted.color}',
|
||||
fontWeight: '600',
|
||||
padding: '0.7rem 1rem',
|
||||
},
|
||||
bodyCell: { padding: '0.8rem 1rem' },
|
||||
row: { borderColor: '{content.border.color}' },
|
||||
},
|
||||
treetable: {
|
||||
headerCell: {
|
||||
background: 'transparent',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{text.muted.color}',
|
||||
fontWeight: '600',
|
||||
},
|
||||
bodyCell: { padding: '0.55rem 0.85rem' },
|
||||
row: { borderColor: '{content.border.color}' },
|
||||
},
|
||||
tag: {
|
||||
root: { borderRadius: '999px', fontWeight: '600', padding: '0.2rem 0.6rem' },
|
||||
},
|
||||
inputtext: {
|
||||
root: { borderRadius: '12px' },
|
||||
},
|
||||
select: {
|
||||
root: { borderRadius: '12px' },
|
||||
},
|
||||
textarea: {
|
||||
root: { borderRadius: '12px' },
|
||||
},
|
||||
toast: {
|
||||
root: { borderRadius: '16px' },
|
||||
},
|
||||
menu: {
|
||||
root: { borderRadius: '14px' },
|
||||
},
|
||||
},
|
||||
})
|
||||
+45
-2
@@ -1,3 +1,10 @@
|
||||
export interface PagedResult<T> {
|
||||
items: T[]
|
||||
totalCount: number
|
||||
page: number
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string
|
||||
username: string
|
||||
@@ -6,7 +13,7 @@ export interface User {
|
||||
roleName: string
|
||||
}
|
||||
|
||||
export interface Account {
|
||||
export interface UserListItem {
|
||||
id: string
|
||||
username: string
|
||||
displayName: string
|
||||
@@ -51,6 +58,23 @@ export interface SaveRoleRequest {
|
||||
permissions: PermissionEntry[]
|
||||
}
|
||||
|
||||
export interface MasterDataItem {
|
||||
id: string
|
||||
group: string
|
||||
label: string
|
||||
value: string
|
||||
sortOrder: number
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
export interface SaveMasterDataRequest {
|
||||
group: string
|
||||
label: string
|
||||
value: string
|
||||
sortOrder: number
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
export type ProjectStatus = 'Active' | 'Archived'
|
||||
export type MemberRole = 'Owner' | 'Member'
|
||||
export type DocumentType = 'Folder' | 'Document'
|
||||
@@ -62,7 +86,11 @@ export interface Project {
|
||||
name: string
|
||||
description: string | null
|
||||
status: ProjectStatus
|
||||
createdBy: string
|
||||
createdByName: string
|
||||
createdAt: string
|
||||
updatedBy: string | null
|
||||
updatedByName: string | null
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
@@ -71,6 +99,10 @@ export interface ProjectMember {
|
||||
username: string
|
||||
displayName: string
|
||||
role: MemberRole
|
||||
canViewDocuments: boolean
|
||||
canCreateDocuments: boolean
|
||||
canEditDocuments: boolean
|
||||
canDeleteDocuments: boolean
|
||||
}
|
||||
|
||||
export interface ProjectOverview {
|
||||
@@ -100,7 +132,10 @@ export interface DocumentNode {
|
||||
parentId: string | null
|
||||
title: string
|
||||
type: DocumentType
|
||||
createdAt: string
|
||||
createdBy: string
|
||||
updatedAt: string
|
||||
updatedBy: string | null
|
||||
children: DocumentNode[]
|
||||
}
|
||||
|
||||
@@ -131,6 +166,14 @@ export interface Task {
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface UserRoleDetail {
|
||||
userId: string
|
||||
username: string
|
||||
displayName: string
|
||||
assignedRoles: Role[]
|
||||
unassignedRoles: Role[]
|
||||
}
|
||||
|
||||
export interface TaskCounts {
|
||||
[status: string]: number
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="m-0 text-2xl font-semibold">Dashboard</h1>
|
||||
<p class="mt-1 text-slate-500 dark:text-slate-400">
|
||||
Welcome back, {{ auth.user?.displayName ?? auth.user?.username }}.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-3">
|
||||
<Card class="[&_.p-card-body]:pt-3">
|
||||
<template #content>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Projects</div>
|
||||
<div class="text-[1.8rem] font-bold">{{ projects.length }}</div>
|
||||
</template>
|
||||
</Card>
|
||||
<Card class="[&_.p-card-body]:pt-3">
|
||||
<template #content>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Active</div>
|
||||
<div class="text-[1.8rem] font-bold">{{ activeCount }}</div>
|
||||
</template>
|
||||
</Card>
|
||||
<Card class="[&_.p-card-body]:pt-3">
|
||||
<template #content>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Archived</div>
|
||||
<div class="text-[1.8rem] font-bold">{{ archivedCount }}</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card class="mb-6">
|
||||
<template #title>Recent Projects</template>
|
||||
<template #content>
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="recentProjects" :loading="loading" emptyMessage="No projects yet">
|
||||
<Column field="name" header="Name">
|
||||
<template #body="{ data }">
|
||||
<router-link
|
||||
:to="{ name: 'project-overview', params: { id: data.id } }"
|
||||
class="font-medium text-blue-600 hover:underline dark:text-blue-400"
|
||||
>
|
||||
{{ data.name }}
|
||||
</router-link>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" style="width: 140px">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.status" :severity="data.status === 'Archived' ? 'warning' : 'success'" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Updated" style="width: 160px">
|
||||
<template #body="{ data }">
|
||||
<span class="text-slate-500 dark:text-slate-400">{{ formatDate(data.updatedAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button icon="pi pi-plus" label="New Project" :to="{ name: 'projects' }" />
|
||||
<Button icon="pi pi-cog" label="Settings" outlined :to="{ name: 'settings' }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getProjects } from '../services/backend'
|
||||
import { errorMessage } from '../services/api'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import type { Project } from '../types'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const toast = useToast()
|
||||
|
||||
const projects = ref<Project[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const activeCount = computed(() => projects.value.filter((p) => p.status === 'Active').length)
|
||||
const archivedCount = computed(() => projects.value.filter((p) => p.status === 'Archived').length)
|
||||
const recentProjects = computed(() => projects.value.slice(0, 8))
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
projects.value = await getProjects()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(value: string) {
|
||||
return new Date(value).toLocaleDateString()
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
@@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="m-0 text-2xl font-semibold">Roles</h1>
|
||||
<Button v-if="auth.can('roles', 'create')" label="New Role" icon="pi pi-plus" @click="openCreate" />
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="roles" :loading="loading" emptyMessage="No roles" class="min-w-[480px]">
|
||||
<Column field="name" header="Name" style="width: 40%" />
|
||||
<Column header="Type" style="width: 20%">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.isSystem ? 'System' : 'Custom'" :severity="data.isSystem ? 'warn' : 'secondary'" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="" style="width: 40%">
|
||||
<template #body="{ data }">
|
||||
<div class="flex justify-end gap-1">
|
||||
<Button v-if="auth.can('roles', 'edit')" icon="pi pi-pencil" text @click="openEdit(data)" />
|
||||
<Button
|
||||
v-if="auth.can('roles', 'delete')"
|
||||
icon="pi pi-trash"
|
||||
text
|
||||
severity="danger"
|
||||
:disabled="data.isSystem"
|
||||
@click="confirmDelete(data)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="formDialog" :header="editTarget ? 'Edit Role' : 'New Role'" :modal="true" style="width: min(640px, 92vw)">
|
||||
<div class="field">
|
||||
<label for="role-name">Name</label>
|
||||
<InputText id="role-name" v-model.trim="form.name" class="w-full" autofocus />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Permissions</label>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full min-w-[420px] border-collapse text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-slate-200 dark:border-slate-700">
|
||||
<th class="py-2 text-left font-medium">Screen</th>
|
||||
<th class="w-16 text-center font-medium">View</th>
|
||||
<th class="w-16 text-center font-medium">Create</th>
|
||||
<th class="w-16 text-center font-medium">Edit</th>
|
||||
<th class="w-16 text-center font-medium">Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in form.permissions" :key="row.screen" class="border-b border-slate-100 dark:border-slate-800">
|
||||
<td class="py-2">{{ screenLabel(row.screen) }}</td>
|
||||
<td class="text-center"><Checkbox v-model="row.canView" binary /></td>
|
||||
<td class="text-center"><Checkbox v-model="row.canCreate" binary /></td>
|
||||
<td class="text-center"><Checkbox v-model="row.canEdit" binary /></td>
|
||||
<td class="text-center"><Checkbox v-model="row.canDelete" binary /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="Cancel" severity="secondary" text @click="formDialog = false" />
|
||||
<Button label="Save" :loading="saving" @click="onSave" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getRoles, createRole, updateRole, deleteRole } from '../services/backend'
|
||||
import { errorMessage } from '../services/api'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import type { PermissionEntry, Role } from '../types'
|
||||
|
||||
const toast = useToast()
|
||||
const confirm = useConfirm()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const roles = ref<Role[]>([])
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
|
||||
const formDialog = ref(false)
|
||||
const editTarget = ref<Role | null>(null)
|
||||
const form = ref<{ name: string; permissions: PermissionEntry[] }>({ name: '', permissions: [] })
|
||||
|
||||
function emptyPermissions(): PermissionEntry[] {
|
||||
return auth.menu.map((m) => ({ screen: m.key, canView: false, canCreate: false, canEdit: false, canDelete: false }))
|
||||
}
|
||||
|
||||
function screenLabel(key: string) {
|
||||
return auth.menu.find((m) => m.key === key)?.label ?? key
|
||||
}
|
||||
|
||||
async function loadRoles() {
|
||||
loading.value = true
|
||||
try {
|
||||
roles.value = await getRoles()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editTarget.value = null
|
||||
form.value = { name: '', permissions: emptyPermissions() }
|
||||
formDialog.value = true
|
||||
}
|
||||
|
||||
function openEdit(role: Role) {
|
||||
editTarget.value = role
|
||||
const permissions = emptyPermissions().map((row) => {
|
||||
const existing = role.permissions.find((p) => p.screen === row.screen)
|
||||
return existing ? { ...existing } : row
|
||||
})
|
||||
form.value = { name: role.name, permissions }
|
||||
formDialog.value = true
|
||||
}
|
||||
|
||||
async function onSave() {
|
||||
if (!form.value.name) {
|
||||
toast.add({ severity: 'warn', summary: 'Name is required', life: 3000 })
|
||||
return
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
if (editTarget.value) {
|
||||
await updateRole(editTarget.value.id, form.value)
|
||||
} else {
|
||||
await createRole(form.value)
|
||||
}
|
||||
formDialog.value = false
|
||||
toast.add({ severity: 'success', summary: 'Role saved', life: 3000 })
|
||||
await loadRoles()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(role: Role) {
|
||||
confirm.require({
|
||||
message: `Delete role "${role.name}"?`,
|
||||
header: 'Delete',
|
||||
accept: async () => {
|
||||
try {
|
||||
await deleteRole(role.id)
|
||||
toast.add({ severity: 'success', summary: 'Role deleted', life: 2000 })
|
||||
await loadRoles()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(loadRoles)
|
||||
</script>
|
||||
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<div class="max-w-xl">
|
||||
<div class="mb-6">
|
||||
<h1 class="m-0 text-2xl font-semibold">Settings</h1>
|
||||
</div>
|
||||
|
||||
<Card class="mb-4">
|
||||
<template #title>Profile</template>
|
||||
<template #content>
|
||||
<div class="flex items-center gap-3">
|
||||
<Avatar :label="initials" style="background: #3b82f6; color: #fff" size="large" />
|
||||
<div>
|
||||
<div class="font-semibold">{{ auth.user?.displayName }}</div>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">@{{ auth.user?.username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4">
|
||||
<template #title>Appearance</template>
|
||||
<template #content>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="font-medium">Dark mode</div>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Switch between light and dark theme</div>
|
||||
</div>
|
||||
<Button
|
||||
:icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
|
||||
:label="theme.isDark.value ? 'Light' : 'Dark'"
|
||||
severity="secondary"
|
||||
outlined
|
||||
@click="theme.toggle"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<template #title>Account</template>
|
||||
<template #content>
|
||||
<Button icon="pi pi-sign-out" label="Logout" severity="danger" outlined @click="onLogout" />
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useTheme } from '../composables/useTheme'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const theme = useTheme()
|
||||
|
||||
const initials = computed(() => {
|
||||
const name = auth.user?.displayName ?? auth.user?.username ?? '?'
|
||||
return name.slice(0, 2).toUpperCase()
|
||||
})
|
||||
|
||||
function onLogout() {
|
||||
auth.logout()
|
||||
window.location.href = '/login'
|
||||
}
|
||||
</script>
|
||||
@@ -1,41 +1,63 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen items-center justify-center bg-slate-100 p-4 dark:bg-slate-900">
|
||||
<div class="grid min-h-dvh lg:grid-cols-[1.05fr_1fr]">
|
||||
<Button
|
||||
:icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
|
||||
rounded
|
||||
text
|
||||
style="position: fixed; right: 1rem; top: 1rem; z-index: 10"
|
||||
severity="secondary"
|
||||
class="!fixed !right-4 !top-4 z-10"
|
||||
:aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
@click="theme.toggle"
|
||||
/>
|
||||
<Card class="w-full max-w-[380px]">
|
||||
<template #title>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-briefcase" style="color: #3b82f6"></i>
|
||||
MWS — My Workspace
|
||||
|
||||
<!-- Signature: the indigo canvas with the brand gradient mesh -->
|
||||
<section class="brand-panel relative hidden overflow-hidden p-12 lg:flex lg:flex-col lg:justify-between">
|
||||
<span class="font-display text-[15px] font-extrabold tracking-[-0.01em] text-white">Workspace</span>
|
||||
<div class="relative z-10 max-w-[440px]">
|
||||
<h1 class="font-display text-[clamp(40px,4.4vw,62px)] font-extrabold uppercase leading-[0.98] text-white">
|
||||
Projects,<br />docs, tasks.<br />One place.
|
||||
</h1>
|
||||
<p class="mt-5 text-[17px] leading-relaxed text-white/70">
|
||||
Write documents, track work, and keep your team in sync — without switching tools.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative z-10 flex gap-6 text-white/60">
|
||||
<span class="text-[13px]">Documents</span>
|
||||
<span class="text-[13px]">Tasks</span>
|
||||
<span class="text-[13px]">Members</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex items-center justify-center p-6" style="background: var(--canvas)">
|
||||
<div class="w-full max-w-[360px]">
|
||||
<div class="mb-7">
|
||||
<span class="eyebrow">My Workspace</span>
|
||||
<h2 class="page-title mt-2">Sign in</h2>
|
||||
<p class="page-subtitle mt-1.5">Use the account your workspace owner set up for you.</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
|
||||
<form @submit.prevent="submit">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" v-model.trim="username" class="w-full" autocomplete="username" />
|
||||
<InputText id="username" v-model.trim="username" class="w-full" autocomplete="username" autofocus />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<InputText
|
||||
<Password
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="w-full"
|
||||
inputClass="w-full"
|
||||
toggleMask
|
||||
:feedback="false"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<Message v-if="error" severity="error" variant="simple" class="mb-2 w-full">{{ error }}</Message>
|
||||
<Message v-if="error" severity="error" variant="simple" class="mb-3 w-full">{{ error }}</Message>
|
||||
<Button type="submit" label="Sign in" class="w-full" :loading="loading" />
|
||||
</form>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -57,7 +79,7 @@ const error = ref('')
|
||||
async function submit() {
|
||||
error.value = ''
|
||||
if (!username.value || !password.value) {
|
||||
error.value = 'Username and password are required'
|
||||
error.value = 'Enter your username and password'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
@@ -72,3 +94,13 @@ async function submit() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Blurple → magenta mesh over the deep-indigo canvas (DESIGN.md brand gradient) */
|
||||
.brand-panel {
|
||||
background:
|
||||
radial-gradient(120% 90% at 12% 8%, rgba(88, 101, 242, 0.85) 0%, transparent 58%),
|
||||
radial-gradient(95% 85% at 88% 92%, rgba(236, 72, 189, 0.6) 0%, transparent 62%),
|
||||
#0a0d3a;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-6 grid gap-3 sm:grid-cols-3">
|
||||
<div v-for="stat in stats" :key="stat.label" class="panel px-5 py-4">
|
||||
<div class="muted-note">{{ stat.label }}</div>
|
||||
<div class="mt-1 font-display text-[34px] font-extrabold leading-none" style="color: var(--ink)">
|
||||
{{ stat.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="panel mb-6 overflow-hidden">
|
||||
<div class="flex items-center justify-between border-b px-5 py-3.5" style="border-color: var(--hairline)">
|
||||
<h2 class="font-display text-[15px] font-bold" style="color: var(--ink)">Recent projects</h2>
|
||||
<Button label="All projects" icon="pi pi-arrow-right" iconPos="right" text size="small" @click="router.push({ name: 'projects' })" />
|
||||
</div>
|
||||
<DataTable :value="recentProjects" :loading="loading" class="min-w-0">
|
||||
<template #empty>
|
||||
<div class="grid place-items-center gap-2 px-4 py-12 text-center">
|
||||
<p class="font-semibold" style="color: var(--ink)">No projects yet</p>
|
||||
<p class="muted-note">Create a project to start collecting documents and tasks.</p>
|
||||
<Button label="New project" icon="pi pi-plus" size="small" class="mt-1" @click="router.push({ name: 'projects' })" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="name" header="Name">
|
||||
<template #body="{ data }">
|
||||
<router-link
|
||||
:to="{ name: 'project-overview', params: { id: data.id } }"
|
||||
class="font-semibold hover:underline"
|
||||
>
|
||||
{{ data.name }}
|
||||
</router-link>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" style="width: 140px">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.status" :severity="data.status === 'Archived' ? 'warn' : 'success'" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Updated" style="width: 150px">
|
||||
<template #body="{ data }">
|
||||
<span class="muted-note">{{ formatDate(data.updatedAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getProjects } from '../../services/backend'
|
||||
import { errorMessage } from '../../services/api'
|
||||
import type { Project } from '../../types'
|
||||
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
|
||||
const projects = ref<Project[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const stats = computed(() => [
|
||||
{ label: 'Projects', value: projects.value.length },
|
||||
{ label: 'Active', value: projects.value.filter((p) => p.status === 'Active').length },
|
||||
{ label: 'Archived', value: projects.value.filter((p) => p.status === 'Archived').length },
|
||||
])
|
||||
const recentProjects = computed(() => projects.value.slice(0, 8))
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getProjects(1, 100)
|
||||
projects.value = res.items
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(value: string) {
|
||||
return new Date(value).toLocaleDateString()
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
@@ -1,60 +1,36 @@
|
||||
<template>
|
||||
<Splitter v-if="isDesktop" class="h-[calc(100vh-170px)]">
|
||||
<SplitterPanel :size="30" :minSize="20">
|
||||
<DocumentTreePanel
|
||||
:tree="tree"
|
||||
:loading="loading"
|
||||
:selected-id="selectedId"
|
||||
v-model:search-term="searchTerm"
|
||||
:creating-label="creatingLabel"
|
||||
:can-create="auth.can('documents', 'create')"
|
||||
@select="selectDocument"
|
||||
@create="openCreate"
|
||||
/>
|
||||
</SplitterPanel>
|
||||
|
||||
<SplitterPanel>
|
||||
<DocumentEditorPanel
|
||||
:doc="doc"
|
||||
:model-value="contentModel"
|
||||
:save-state="saveState"
|
||||
:can-edit="auth.can('documents', 'edit')"
|
||||
:can-delete="auth.can('documents', 'delete')"
|
||||
@update:model-value="onContentChange"
|
||||
@rename="openRename"
|
||||
@move="openMove"
|
||||
@delete="confirmDelete"
|
||||
/>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
|
||||
<div v-else>
|
||||
<div class="h-full min-h-[420px]">
|
||||
<DocumentTreePanel
|
||||
v-if="!doc"
|
||||
:tree="tree"
|
||||
:loading="loading"
|
||||
:selected-id="selectedId"
|
||||
v-model:search-term="searchTerm"
|
||||
:creating-label="creatingLabel"
|
||||
:can-create="auth.can('documents', 'create')"
|
||||
:can-create="canCreate"
|
||||
:members="members"
|
||||
@select="selectDocument"
|
||||
@create="openCreate"
|
||||
/>
|
||||
<DocumentEditorPanel
|
||||
v-else
|
||||
:doc="doc"
|
||||
:model-value="contentModel"
|
||||
:save-state="saveState"
|
||||
:can-edit="auth.can('documents', 'edit')"
|
||||
:can-delete="auth.can('documents', 'delete')"
|
||||
@update:model-value="onContentChange"
|
||||
@rename="openRename"
|
||||
@move="openMove"
|
||||
@delete="confirmDelete"
|
||||
@back="closeDocument"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DocumentViewerModal
|
||||
:visible="viewerVisible"
|
||||
:doc="doc"
|
||||
:model-value="contentModel"
|
||||
:editing="editing"
|
||||
:save-state="saveState"
|
||||
:can-edit="canEdit"
|
||||
:can-delete="canDelete"
|
||||
@update:visible="onViewerClose"
|
||||
@update:model-value="onContentChange"
|
||||
@edit="startEdit"
|
||||
@cancel-edit="cancelEdit"
|
||||
@save="onSave"
|
||||
@rename="openRename"
|
||||
@move="openMove"
|
||||
@delete="confirmDelete"
|
||||
/>
|
||||
|
||||
<Dialog v-model:visible="createDialog" :header="`New ${createType}`" :modal="true" style="width: min(420px, 92vw)">
|
||||
<div class="field">
|
||||
<label>Title</label>
|
||||
@@ -95,7 +71,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import DocumentTreePanel from '../../components/DocumentTreePanel.vue'
|
||||
import DocumentEditorPanel from '../../components/DocumentEditorPanel.vue'
|
||||
import DocumentViewerModal from '../../components/DocumentViewerModal.vue'
|
||||
import {
|
||||
getDocumentTree,
|
||||
getDocument,
|
||||
@@ -105,9 +81,10 @@ import {
|
||||
deleteDocument,
|
||||
searchDocuments,
|
||||
} from '../../services/modules'
|
||||
import { getMembers } from '../../services/backend'
|
||||
import { errorMessage } from '../../services/api'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import type { DocumentItem, DocumentNode, DocumentType } from '../../types'
|
||||
import type { DocumentItem, DocumentNode, DocumentType, ProjectMember } from '../../types'
|
||||
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
@@ -121,6 +98,10 @@ const selectedId = ref<string | null>(null)
|
||||
const doc = ref<DocumentItem | null>(null)
|
||||
const contentModel = ref('')
|
||||
const saveState = ref<'idle' | 'saving' | 'saved'>('idle')
|
||||
const editing = ref(false)
|
||||
const viewerVisible = ref(false)
|
||||
|
||||
const members = ref<ProjectMember[]>([])
|
||||
|
||||
const searchTerm = ref('')
|
||||
const searchMode = ref(false)
|
||||
@@ -133,14 +114,15 @@ const renameTitle = ref('')
|
||||
const moveDialog = ref(false)
|
||||
const moveTarget = ref<string | null>(null)
|
||||
|
||||
const isDesktop = ref(false)
|
||||
let mediaQuery: MediaQueryList | null = null
|
||||
|
||||
let saveTimer: ReturnType<typeof setTimeout> | undefined
|
||||
let searchTimer: ReturnType<typeof setTimeout> | undefined
|
||||
|
||||
const currentMember = computed(() => members.value.find((m) => m.userId === auth.user?.id))
|
||||
const canCreate = computed(() => currentMember.value?.canCreateDocuments ?? false)
|
||||
const canEdit = computed(() => currentMember.value?.canEditDocuments ?? false)
|
||||
const canDelete = computed(() => currentMember.value?.canDeleteDocuments ?? false)
|
||||
|
||||
const creatingLabel = computed(() =>
|
||||
doc.value?.type === 'Folder' ? `New items go inside: ${doc.value.title}` : 'New items are created at root',
|
||||
doc.value?.type === 'Folder' ? `New items go inside "${doc.value.title}"` : 'New items are created at the root',
|
||||
)
|
||||
|
||||
const folderOptions = computed(() => {
|
||||
@@ -163,8 +145,15 @@ async function loadTree() {
|
||||
tree.value = searchMode.value ? await searchDocuments(searchTerm.value) : await getDocumentTree(projectId)
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMembers() {
|
||||
try {
|
||||
const res = await getMembers(projectId, 1, 100)
|
||||
members.value = res.items
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -178,19 +167,55 @@ watch(searchTerm, () => {
|
||||
|
||||
async function selectDocument(id: string) {
|
||||
selectedId.value = id
|
||||
clearTimeout(saveTimer)
|
||||
try {
|
||||
doc.value = await getDocument(id)
|
||||
contentModel.value = doc.value.content ?? ''
|
||||
editing.value = false
|
||||
saveState.value = 'idle'
|
||||
viewerVisible.value = true
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
}
|
||||
|
||||
function closeDocument() {
|
||||
doc.value = null
|
||||
selectedId.value = null
|
||||
function onViewerClose(value: boolean) {
|
||||
viewerVisible.value = value
|
||||
if (!value) {
|
||||
editing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit() {
|
||||
editing.value = true
|
||||
saveState.value = 'idle'
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editing.value = false
|
||||
contentModel.value = doc.value?.content ?? ''
|
||||
saveState.value = 'idle'
|
||||
}
|
||||
|
||||
function onContentChange(value: string) {
|
||||
contentModel.value = value
|
||||
saveState.value = 'idle'
|
||||
}
|
||||
|
||||
async function onSave() {
|
||||
if (!doc.value) return
|
||||
saveState.value = 'saving'
|
||||
try {
|
||||
const updated = await updateDocument(doc.value.id, { title: doc.value.title, content: contentModel.value })
|
||||
doc.value = updated
|
||||
contentModel.value = updated.content ?? ''
|
||||
editing.value = false
|
||||
saveState.value = 'saved'
|
||||
toast.add({ severity: 'success', summary: 'Saved', life: 2000 })
|
||||
await loadTree()
|
||||
} catch (e) {
|
||||
saveState.value = 'idle'
|
||||
toast.add({ severity: 'error', summary: 'Save failed', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate(type: DocumentType) {
|
||||
@@ -264,11 +289,14 @@ function confirmDelete() {
|
||||
confirm.require({
|
||||
message: `Delete "${doc.value.title}"?`,
|
||||
header: 'Delete',
|
||||
acceptProps: { severity: 'danger' },
|
||||
rejectProps: { severity: 'secondary', outlined: true },
|
||||
accept: async () => {
|
||||
try {
|
||||
await deleteDocument(doc.value!.id)
|
||||
doc.value = null
|
||||
selectedId.value = null
|
||||
viewerVisible.value = false
|
||||
toast.add({ severity: 'success', summary: 'Deleted', life: 2000 })
|
||||
await loadTree()
|
||||
} catch (e) {
|
||||
@@ -278,36 +306,10 @@ function confirmDelete() {
|
||||
})
|
||||
}
|
||||
|
||||
function onContentChange(value: string) {
|
||||
if (!doc.value) return
|
||||
contentModel.value = value
|
||||
saveState.value = 'saving'
|
||||
clearTimeout(saveTimer)
|
||||
saveTimer = setTimeout(async () => {
|
||||
try {
|
||||
const updated = await updateDocument(doc.value!.id, { title: doc.value!.title, content: contentModel.value })
|
||||
doc.value = updated
|
||||
saveState.value = 'saved'
|
||||
} catch (e) {
|
||||
saveState.value = 'idle'
|
||||
toast.add({ severity: 'error', summary: 'Save failed', detail: errorMessage(e), life: 5000 })
|
||||
}
|
||||
}, 800)
|
||||
}
|
||||
|
||||
function syncDesktop() {
|
||||
isDesktop.value = mediaQuery?.matches ?? false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
mediaQuery = window.matchMedia('(min-width: 1024px)')
|
||||
syncDesktop()
|
||||
mediaQuery.addEventListener('change', syncDesktop)
|
||||
loading.value = true
|
||||
void loadTree()
|
||||
Promise.all([loadTree(), loadMembers()]).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
mediaQuery?.removeEventListener('change', syncDesktop)
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="page-title m-0">Profile</h1>
|
||||
</div>
|
||||
|
||||
<div class="panel max-w-[480px] p-5">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<Avatar :label="initials" size="xlarge" :style="{ background: 'var(--primary)', color: '#fff' }" />
|
||||
<div>
|
||||
<div class="text-[15px] font-semibold" style="color: var(--ink)">
|
||||
{{ auth.user?.displayName ?? auth.user?.username }}
|
||||
</div>
|
||||
<div class="text-[13px]" style="color: var(--ink-muted)">@{{ auth.user?.username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="onSave">
|
||||
<div class="field">
|
||||
<label for="prof-username">Username</label>
|
||||
<InputText id="prof-username" :model-value="auth.user?.username" disabled class="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="prof-displayname">Display name</label>
|
||||
<InputText id="prof-displayname" v-model.trim="displayName" class="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="prof-role">Role</label>
|
||||
<InputText id="prof-role" :model-value="auth.user?.roleName" disabled class="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="prof-status">Status</label>
|
||||
<InputText id="prof-status" value="Active" disabled class="w-full" />
|
||||
</div>
|
||||
<div class="mt-5 flex justify-end">
|
||||
<Button type="submit" label="Save" :loading="saving" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import { updateUser } from '../../services/backend'
|
||||
import { errorMessage } from '../../services/api'
|
||||
|
||||
const toast = useToast()
|
||||
const auth = useAuthStore()
|
||||
|
||||
onMounted(() => {
|
||||
auth.fetchProfile()
|
||||
})
|
||||
|
||||
const displayName = ref(auth.user?.displayName ?? '')
|
||||
const saving = ref(false)
|
||||
|
||||
watch(
|
||||
() => auth.user?.displayName,
|
||||
(val) => {
|
||||
if (val !== undefined) displayName.value = val
|
||||
}
|
||||
)
|
||||
|
||||
const initials = computed(() => {
|
||||
const name = displayName.value || auth.user?.username || '?'
|
||||
return name.slice(0, 2).toUpperCase()
|
||||
})
|
||||
|
||||
async function onSave() {
|
||||
if (!auth.user?.id) return
|
||||
if (!displayName.value) {
|
||||
toast.add({ severity: 'warn', summary: 'Display name required', life: 3000 })
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const updated = await updateUser(auth.user.id, {
|
||||
displayName: displayName.value,
|
||||
isActive: true,
|
||||
})
|
||||
if (auth.user) {
|
||||
auth.user.displayName = updated.displayName
|
||||
localStorage.setItem('mws_user', JSON.stringify(auth.user))
|
||||
}
|
||||
toast.add({ severity: 'success', summary: 'Profile updated', life: 3000 })
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,39 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<InputText v-model.trim="userSearch" placeholder="Search users..." class="w-full sm:w-[320px]" @input="debouncedUsers" />
|
||||
<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="overflow-x-auto">
|
||||
<DataTable :value="members" :loading="loading" emptyMessage="No members" class="min-w-[480px]">
|
||||
<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: #3b82f6; color: #fff" />
|
||||
style="background: var(--primary); color: #fff" />
|
||||
<span>{{ data.displayName }}</span>
|
||||
<span class="text-slate-500 dark:text-slate-400">@{{ data.username }}</span>
|
||||
<span class="muted-note">@{{ data.username }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="role" header="Role" style="width: 20%">
|
||||
<Column field="role" header="Role" style="width: 16%">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.role" :severity="data.role === 'Owner' ? 'warn' : 'secondary'" />
|
||||
<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 }">
|
||||
<Button
|
||||
v-if="isOwner && data.role !== 'Owner'"
|
||||
icon="pi pi-trash"
|
||||
text
|
||||
severity="danger"
|
||||
@click="onRemove(data.userId)"
|
||||
/>
|
||||
<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>
|
||||
</DataTable>
|
||||
</AppDataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="addDialog" header="Add Member" :modal="true" style="width: min(460px, 92vw)">
|
||||
@@ -53,14 +96,40 @@
|
||||
<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 } from '../../services/backend'
|
||||
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()
|
||||
@@ -71,17 +140,30 @@ 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 = [
|
||||
{ label: 'Member', value: 'Member' },
|
||||
{ label: 'Owner', value: 'Owner' },
|
||||
]
|
||||
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
|
||||
@@ -89,7 +171,9 @@ let timer: ReturnType<typeof setTimeout> | undefined
|
||||
async function loadMembers() {
|
||||
loading.value = true
|
||||
try {
|
||||
members.value = await getMembers(projectId)
|
||||
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 })
|
||||
@@ -98,6 +182,12 @@ async function loadMembers() {
|
||||
}
|
||||
}
|
||||
|
||||
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})`,
|
||||
@@ -139,7 +229,32 @@ async function onRemove(userId: string) {
|
||||
}
|
||||
}
|
||||
|
||||
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()
|
||||
})
|
||||
|
||||
@@ -1,63 +1,52 @@
|
||||
<template>
|
||||
<div v-if="overview">
|
||||
<div class="mb-4 flex items-center gap-3">
|
||||
<h1 class="m-0 text-2xl font-bold">{{ overview.project.name }}</h1>
|
||||
<Tag v-if="overview.project.status === 'Archived'" value="Archived" severity="warning" />
|
||||
</div>
|
||||
<p v-if="overview.project.description" class="-mt-3 mb-4 text-slate-500 dark:text-slate-400">{{ overview.project.description }}</p>
|
||||
|
||||
<div class="mb-3 grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-3">
|
||||
<Card class="[&_.p-card-body]:pt-3">
|
||||
<template #content>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Members</div>
|
||||
<div class="text-[1.8rem] font-bold">{{ overview.memberCount }}</div>
|
||||
</template>
|
||||
</Card>
|
||||
<Card class="[&_.p-card-body]:pt-3">
|
||||
<template #content>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">Documents</div>
|
||||
<div class="text-[1.8rem] font-bold">{{ overview.documentCount }}</div>
|
||||
</template>
|
||||
</Card>
|
||||
<Card v-for="(count, status) in taskCounts" :key="status" class="[&_.p-card-body]:pt-3">
|
||||
<template #content>
|
||||
<div class="text-sm text-slate-500 dark:text-slate-400">{{ statusLabel(status) }}</div>
|
||||
<div class="text-[1.8rem] font-bold">{{ count }}</div>
|
||||
</template>
|
||||
</Card>
|
||||
<div class="mb-6 flex items-center gap-3">
|
||||
<h1 class="page-title m-0">{{ overview.project.name }}</h1>
|
||||
<Tag v-if="overview.project.status === 'Archived'" value="Archived" severity="warn" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex flex-col gap-3 lg:flex-row">
|
||||
<Card class="min-w-0 flex-1">
|
||||
<template #title>Recent Tasks</template>
|
||||
<template #content>
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="overview.recentTasks" emptyMessage="No tasks">
|
||||
<Column field="title" header="Title" />
|
||||
<Column field="status" header="Status" style="width: 120px">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.status" :severity="statusSeverity(data.status)" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<Card class="min-w-0 flex-1">
|
||||
<template #title>Recent Documents</template>
|
||||
<template #content>
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="overview.recentDocuments" emptyMessage="No documents">
|
||||
<Column field="title" header="Title" />
|
||||
<Column header="Updated" style="width: 150px">
|
||||
<template #body="{ data }">
|
||||
<span class="text-slate-500 dark:text-slate-400">{{ formatDate(data.updatedAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<div class="mb-4 grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-3">
|
||||
<div class="panel px-4 py-3">
|
||||
<div class="muted-note mb-1">Members</div>
|
||||
<div class="font-display text-[28px] font-extrabold" style="color: var(--ink)">{{ overview.memberCount }}</div>
|
||||
</div>
|
||||
<div class="panel px-4 py-3">
|
||||
<div class="muted-note mb-1">Documents</div>
|
||||
<div class="font-display text-[28px] font-extrabold" style="color: var(--ink)">{{ overview.documentCount }}</div>
|
||||
</div>
|
||||
<div v-for="(count, status) in taskCounts" :key="status" class="panel px-4 py-3">
|
||||
<div class="muted-note mb-1">{{ statusLabel(status) }}</div>
|
||||
<div class="font-display text-[28px] font-extrabold" style="color: var(--ink)">{{ count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 flex flex-col gap-3 lg:flex-row">
|
||||
<div class="panel min-w-0 flex-1 overflow-hidden">
|
||||
<div class="border-b px-4 py-3 font-semibold" style="border-color: var(--hairline); color: var(--ink)">Recent Tasks</div>
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="overview.recentTasks" emptyMessage="No tasks yet">
|
||||
<Column field="title" header="Title" />
|
||||
<Column field="status" header="Status" style="width: 120px">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.status" :severity="statusSeverity(data.status)" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel min-w-0 flex-1 overflow-hidden">
|
||||
<div class="border-b px-4 py-3 font-semibold" style="border-color: var(--hairline); color: var(--ink)">Recent Documents</div>
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="overview.recentDocuments" emptyMessage="No documents yet">
|
||||
<Column field="title" header="Title" />
|
||||
<Column header="Updated" style="width: 150px">
|
||||
<template #body="{ data }">
|
||||
<span class="muted-note">{{ formatDate(data.updatedAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@@ -66,7 +55,7 @@
|
||||
v-if="auth.can('projects', 'delete') && overview.project.status !== 'Archived'"
|
||||
icon="pi pi-archive"
|
||||
label="Archive project"
|
||||
severity="warning"
|
||||
severity="warn"
|
||||
outlined
|
||||
@click="confirmArchive"
|
||||
/>
|
||||
@@ -167,6 +156,8 @@ function confirmArchive() {
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
acceptLabel: 'Archive',
|
||||
rejectLabel: 'Cancel',
|
||||
acceptProps: { severity: 'danger' },
|
||||
rejectProps: { severity: 'secondary', outlined: true },
|
||||
accept: async () => {
|
||||
try {
|
||||
await deleteProject(overview.value!.project.id)
|
||||
|
||||
@@ -1,47 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="m-0 text-2xl font-semibold">Projects</h1>
|
||||
<div class="flex h-full flex-col">
|
||||
<header class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="page-title m-0">Projects</h1>
|
||||
<Button v-if="auth.can('projects', 'create')" label="New Project" icon="pi pi-plus" @click="createDialog = true" />
|
||||
</header>
|
||||
|
||||
<div class="mb-4 sm:w-[320px]">
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-search" />
|
||||
<InputText
|
||||
v-model.trim="searchTerm"
|
||||
placeholder="Search projects..."
|
||||
class="search-input w-full"
|
||||
@input="debouncedSearch"
|
||||
/>
|
||||
</IconField>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<InputText
|
||||
v-model.trim="searchTerm"
|
||||
placeholder="Search projects..."
|
||||
icon="pi pi-search"
|
||||
class="w-full sm:w-[320px]"
|
||||
@input="debouncedSearch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="projects" :loading="loading" v-model:selection="selectedProject" selectionMode="single"
|
||||
dataKey="id" @row-select="onRowSelect" emptyMessage="No projects found" class="min-w-[600px]">
|
||||
<Column field="name" header="Name" style="width: 30%">
|
||||
<div class="panel flex min-h-0 flex-1 flex-col overflow-hidden">
|
||||
<AppDataTable
|
||||
:value="projects"
|
||||
:loading="loading"
|
||||
:lazy="true"
|
||||
:paginator="true"
|
||||
:rows="pageSize"
|
||||
:totalRecords="totalCount"
|
||||
:first="first"
|
||||
@page="onPageChange"
|
||||
v-model:selection="selectedProject"
|
||||
selectionMode="single"
|
||||
dataKey="id"
|
||||
@row-select="onRowSelect"
|
||||
scrollable
|
||||
scrollHeight="flex"
|
||||
class="min-h-0 flex-1 min-w-[900px]"
|
||||
>
|
||||
<template #empty>
|
||||
<div class="grid place-items-center gap-2 px-4 py-14 text-center">
|
||||
<i class="pi pi-folder-open text-2xl" style="color: var(--ink-muted)"></i>
|
||||
<p class="font-semibold" style="color: var(--ink)">No projects found</p>
|
||||
<p class="muted-note">Try a different search, or create your first project.</p>
|
||||
</div>
|
||||
</template>
|
||||
<Column field="name" header="Name" style="width: 22%">
|
||||
<template #body="{ data }">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-folder" style="color: #3b82f6"></i>
|
||||
<span style="font-weight: 600">{{ data.name }}</span>
|
||||
<i class="pi pi-folder text-fuchsia-500"></i>
|
||||
<span class="font-medium">{{ data.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="description" header="Description" style="width: 40%">
|
||||
<Column field="description" header="Description" style="width: 22%">
|
||||
<template #body="{ data }">
|
||||
<span class="text-slate-500 dark:text-slate-400">{{ data.description }}</span>
|
||||
<span class="muted-note">{{ data.description || '—' }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" style="width: 15%">
|
||||
<Column field="status" header="Status" style="width: 10%">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.status" :severity="data.status === 'Archived' ? 'warning' : 'success'" />
|
||||
<Tag :value="data.status" :severity="data.status === 'Archived' ? 'warn' : 'success'" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Updated" style="width: 15%">
|
||||
<Column header="Created" style="width: 12%">
|
||||
<template #body="{ data }">
|
||||
<span class="text-slate-500 dark:text-slate-400">{{ formatDate(data.updatedAt) }}</span>
|
||||
<span class="muted-note">{{ formatDate(data.createdAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
<Column header="Created by" style="width: 12%">
|
||||
<template #body="{ data }">
|
||||
<span class="muted-note">{{ data.createdByName || '—' }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Updated" style="width: 12%">
|
||||
<template #body="{ data }">
|
||||
<span class="muted-note">{{ formatDate(data.updatedAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Updated by" style="width: 12%">
|
||||
<template #body="{ data }">
|
||||
<span class="muted-note">{{ data.updatedByName || '—' }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</AppDataTable>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="createDialog" header="New Project" :modal="true" style="width: min(480px, 92vw)">
|
||||
@@ -65,7 +104,9 @@
|
||||
import { createProject, getProjects, searchProjects } from '../../services/backend'
|
||||
import { errorMessage } from '../../services/api'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import AppDataTable from '../../components/AppDataTable.vue'
|
||||
import type { Project } from '../../types'
|
||||
import type { DataTablePageEvent } from 'primevue/datatable'
|
||||
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
@@ -76,6 +117,11 @@ const loading = ref(false)
|
||||
const searchTerm = ref('')
|
||||
const selectedProject = ref<Project | null>(null)
|
||||
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const totalCount = ref(0)
|
||||
const first = computed(() => (page.value - 1) * pageSize.value)
|
||||
|
||||
const createDialog = ref(false)
|
||||
const newName = ref('')
|
||||
const newDescription = ref('')
|
||||
@@ -86,9 +132,14 @@ let searchTimer: ReturnType<typeof setTimeout> | undefined
|
||||
async function loadProjects() {
|
||||
loading.value = true
|
||||
try {
|
||||
projects.value = searchTerm.value
|
||||
? await searchProjects(searchTerm.value)
|
||||
: await getProjects()
|
||||
if (searchTerm.value) {
|
||||
projects.value = await searchProjects(searchTerm.value)
|
||||
totalCount.value = projects.value.length
|
||||
} else {
|
||||
const res = await getProjects(page.value, pageSize.value)
|
||||
projects.value = res.items
|
||||
totalCount.value = res.totalCount
|
||||
}
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
@@ -96,9 +147,18 @@ async function loadProjects() {
|
||||
}
|
||||
}
|
||||
|
||||
function onPageChange(event: DataTablePageEvent) {
|
||||
page.value = event.page + 1
|
||||
pageSize.value = event.rows
|
||||
void loadProjects()
|
||||
}
|
||||
|
||||
function debouncedSearch() {
|
||||
clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(loadProjects, 300)
|
||||
searchTimer = setTimeout(() => {
|
||||
page.value = 1
|
||||
void loadProjects()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function onRowSelect() {
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="flex h-full flex-col">
|
||||
<Tabs value="masterdata" class="flex min-h-0 flex-1 flex-col">
|
||||
<TabList>
|
||||
<Tab v-if="auth.canView('masterdata')" value="masterdata">Master Data</Tab>
|
||||
<Tab v-if="auth.canView('permissions')" value="roles">Role</Tab>
|
||||
<Tab v-if="auth.canView('permissions')" value="permissions">Permission</Tab>
|
||||
</TabList>
|
||||
<TabPanels class="min-h-0 flex-1">
|
||||
<TabPanel value="masterdata" class="flex h-full min-h-0 flex-col">
|
||||
<MasterDataView v-if="auth.canView('masterdata')" />
|
||||
</TabPanel>
|
||||
<TabPanel value="roles" class="flex h-full min-h-0 flex-col">
|
||||
<RolesView v-if="auth.canView('permissions')" />
|
||||
</TabPanel>
|
||||
<TabPanel value="permissions" class="flex h-full min-h-0 flex-col">
|
||||
<PermissionsView v-if="auth.canView('permissions')" />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import MasterDataView from './masterdata/MasterDataView.vue'
|
||||
import RolesView from './roles/RolesView.vue'
|
||||
import PermissionsView from './permissions/PermissionsView.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
</script>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="flex h-full flex-col">
|
||||
<div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="page-title m-0">Master Data</h1>
|
||||
<Button v-if="auth.can('masterdata', 'create')" label="New Entry" icon="pi pi-plus" @click="openCreate" />
|
||||
</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="entries"
|
||||
:loading="loading"
|
||||
:lazy="true"
|
||||
:paginator="true"
|
||||
:rows="pageSize"
|
||||
:totalRecords="totalCount"
|
||||
:first="first"
|
||||
@page="onPageChange"
|
||||
emptyMessage="No master data yet"
|
||||
class="min-h-0 flex-1 min-w-[640px]"
|
||||
>
|
||||
<Column field="group" header="Group" style="width: 20%" />
|
||||
<Column field="label" header="Label" style="width: 25%" />
|
||||
<Column field="value" header="Value" style="width: 20%" />
|
||||
<Column field="sortOrder" header="Sort" style="width: 10%" />
|
||||
<Column header="Status" style="width: 15%">
|
||||
<template #body="{ data }">
|
||||
<ToggleSwitch
|
||||
v-model="data.isActive"
|
||||
:disabled="!auth.can('masterdata', 'edit')"
|
||||
:aria-label="data.isActive ? 'Deactivate entry' : 'Activate entry'"
|
||||
@change="onToggleActive(data)"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="" style="width: 10%">
|
||||
<template #body="{ data }">
|
||||
<div class="flex justify-end gap-1">
|
||||
<Button v-if="auth.can('masterdata', 'edit')" icon="pi pi-pencil" text @click="openEdit(data)" />
|
||||
<Button
|
||||
v-if="auth.can('masterdata', 'delete')"
|
||||
icon="pi pi-trash"
|
||||
text
|
||||
severity="danger"
|
||||
@click="confirmDelete(data)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</AppDataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="formDialog" :header="editTarget ? 'Edit Entry' : 'New Entry'" :modal="true" style="width: min(480px, 92vw)">
|
||||
<div class="field">
|
||||
<label for="md-group">Group</label>
|
||||
<InputText id="md-group" v-model.trim="form.group" class="w-full" autofocus />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="md-label">Label</label>
|
||||
<InputText id="md-label" v-model.trim="form.label" class="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="md-value">Value</label>
|
||||
<InputText id="md-value" v-model.trim="form.value" class="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="md-sort">Sort order</label>
|
||||
<InputNumber id="md-sort" v-model="form.sortOrder" class="w-full" />
|
||||
</div>
|
||||
<div class="field flex items-center gap-2">
|
||||
<ToggleSwitch v-model="form.isActive" inputId="md-active" />
|
||||
<label for="md-active">Active</label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="Cancel" severity="secondary" text @click="formDialog = false" />
|
||||
<Button label="Save" :loading="saving" @click="onSave" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getMasterDataList, createMasterData, updateMasterData, deleteMasterData } from '../../../services/backend'
|
||||
import { errorMessage } from '../../../services/api'
|
||||
import { useAuthStore } from '../../../stores/auth'
|
||||
import AppDataTable from '../../../components/AppDataTable.vue'
|
||||
import type { MasterDataItem, SaveMasterDataRequest } from '../../../types'
|
||||
import type { DataTablePageEvent } from 'primevue/datatable'
|
||||
|
||||
const toast = useToast()
|
||||
const confirm = useConfirm()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const entries = ref<MasterDataItem[]>([])
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const totalCount = ref(0)
|
||||
const first = computed(() => (page.value - 1) * pageSize.value)
|
||||
|
||||
const formDialog = ref(false)
|
||||
const editTarget = ref<MasterDataItem | null>(null)
|
||||
const form = ref<SaveMasterDataRequest>({ group: '', label: '', value: '', sortOrder: 0, isActive: true })
|
||||
|
||||
async function loadEntries() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getMasterDataList(undefined, page.value, pageSize.value)
|
||||
entries.value = res.items
|
||||
totalCount.value = res.totalCount
|
||||
} 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 loadEntries()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editTarget.value = null
|
||||
form.value = { group: '', label: '', value: '', sortOrder: 0, isActive: true }
|
||||
formDialog.value = true
|
||||
}
|
||||
|
||||
function openEdit(entry: MasterDataItem) {
|
||||
editTarget.value = entry
|
||||
form.value = { group: entry.group, label: entry.label, value: entry.value, sortOrder: entry.sortOrder, isActive: entry.isActive }
|
||||
formDialog.value = true
|
||||
}
|
||||
|
||||
async function onToggleActive(entry: MasterDataItem) {
|
||||
const prev = entry.isActive
|
||||
try {
|
||||
await updateMasterData(entry.id, {
|
||||
group: entry.group,
|
||||
label: entry.label,
|
||||
value: entry.value,
|
||||
sortOrder: entry.sortOrder,
|
||||
isActive: entry.isActive,
|
||||
})
|
||||
toast.add({ severity: 'success', summary: entry.isActive ? 'Entry activated' : 'Entry deactivated', life: 2000 })
|
||||
} catch (e) {
|
||||
entry.isActive = prev
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
}
|
||||
|
||||
async function onSave() {
|
||||
if (!form.value.group || !form.value.label || !form.value.value) {
|
||||
toast.add({ severity: 'warn', summary: 'Group, label and value are required', life: 3000 })
|
||||
return
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
if (editTarget.value) {
|
||||
await updateMasterData(editTarget.value.id, form.value)
|
||||
} else {
|
||||
await createMasterData(form.value)
|
||||
}
|
||||
formDialog.value = false
|
||||
toast.add({ severity: 'success', summary: 'Entry saved', life: 3000 })
|
||||
await loadEntries()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(entry: MasterDataItem) {
|
||||
confirm.require({
|
||||
message: `Delete entry "${entry.label}"?`,
|
||||
header: 'Delete',
|
||||
acceptProps: { severity: 'danger' },
|
||||
rejectProps: { severity: 'secondary', outlined: true },
|
||||
accept: async () => {
|
||||
try {
|
||||
await deleteMasterData(entry.id)
|
||||
toast.add({ severity: 'success', summary: 'Entry deleted', life: 2000 })
|
||||
await loadEntries()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(loadEntries)
|
||||
</script>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-12">
|
||||
<!-- Left: Role List -->
|
||||
<div class="panel flex flex-col p-4 md:col-span-4" style="height: 620px;">
|
||||
<div class="mb-3">
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-search text-xs" />
|
||||
<InputText
|
||||
v-model.trim="roleSearchTerm"
|
||||
placeholder="Search roles..."
|
||||
class="search-input w-full text-sm"
|
||||
/>
|
||||
</IconField>
|
||||
</div>
|
||||
|
||||
<div v-if="loadingRoles" class="flex flex-1 items-center justify-center">
|
||||
<ProgressSpinner style="width: 32px; height: 32px;" />
|
||||
</div>
|
||||
<div v-else-if="filteredRoles.length === 0" class="muted-note p-4 text-center">
|
||||
No roles found
|
||||
</div>
|
||||
<div v-else class="flex-1 overflow-y-auto pr-1 space-y-1">
|
||||
<div
|
||||
v-for="r in filteredRoles"
|
||||
:key="r.id"
|
||||
class="flex cursor-pointer items-center justify-between rounded-xl p-3 transition-colors"
|
||||
:class="selectedRoleId === r.id
|
||||
? 'bg-indigo-500/10 text-indigo-500 dark:bg-indigo-500/20 font-semibold'
|
||||
: 'hover:bg-slate-100 dark:hover:bg-slate-800/60'"
|
||||
@click="selectRole(r.id)"
|
||||
>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="text-sm leading-tight">{{ r.name }}</span>
|
||||
<Tag :value="r.isSystem ? 'System' : 'Custom'" :severity="r.isSystem ? 'warn' : 'secondary'" class="text-xs" />
|
||||
</div>
|
||||
<i v-if="selectedRoleId === r.id" class="pi pi-chevron-right text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Role Screen Permissions Matrix -->
|
||||
<div class="panel md:col-span-8 flex flex-col overflow-hidden p-4" style="height: 620px;">
|
||||
<div v-if="!selectedRoleId" class="flex flex-1 items-center justify-center muted-note">
|
||||
Select a role from the left list to view/edit permissions
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<div class="eyebrow">Screen Permissions ({{ selectedRole?.name }})</div>
|
||||
<Button
|
||||
label="Save Changes"
|
||||
icon="pi pi-check"
|
||||
size="small"
|
||||
:loading="savingRolePermissions"
|
||||
@click="handleSaveRolePermissions"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="loadingRoleDetail" class="flex flex-1 items-center justify-center">
|
||||
<ProgressSpinner style="width: 32px; height: 32px;" />
|
||||
</div>
|
||||
<div v-else class="flex-1 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr class="border-b" style="border-color: var(--hairline)">
|
||||
<th class="py-2.5 text-left font-medium">Screen</th>
|
||||
<th class="w-20 text-center font-medium">View</th>
|
||||
<th class="w-20 text-center font-medium">Create</th>
|
||||
<th class="w-20 text-center font-medium">Edit</th>
|
||||
<th class="w-20 text-center font-medium">Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in rolePermissions" :key="item.screen" class="border-b" style="border-color: var(--hairline)">
|
||||
<td class="py-3 font-medium">{{ screenLabel(item.screen) }}</td>
|
||||
<td class="text-center">
|
||||
<Checkbox v-model="item.canView" :binary="true" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<Checkbox v-model="item.canCreate" :binary="true" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<Checkbox v-model="item.canEdit" :binary="true" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<Checkbox v-model="item.canDelete" :binary="true" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getRoles, getRole, updateRole } from '../../../services/backend'
|
||||
import { errorMessage } from '../../../services/api'
|
||||
import type { Role, PermissionEntry } from '../../../types'
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const roles = ref<Role[]>([])
|
||||
const loadingRoles = ref(false)
|
||||
const roleSearchTerm = ref('')
|
||||
const selectedRoleId = ref<string | null>(null)
|
||||
const selectedRole = ref<Role | null>(null)
|
||||
const rolePermissions = ref<PermissionEntry[]>([])
|
||||
const loadingRoleDetail = ref(false)
|
||||
const savingRolePermissions = ref(false)
|
||||
|
||||
const ALL_SCREENS = [
|
||||
{ key: 'dashboard', label: 'Dashboard' },
|
||||
{ key: 'projects', label: 'Projects' },
|
||||
{ key: 'documents', label: 'Documents' },
|
||||
{ key: 'tasks', label: 'Tasks' },
|
||||
{ key: 'users', label: 'Users' },
|
||||
{ key: 'permissions', label: 'Permissions' },
|
||||
{ key: 'masterdata', label: 'Master Data' },
|
||||
]
|
||||
|
||||
const filteredRoles = computed(() => {
|
||||
if (!roleSearchTerm.value) return roles.value
|
||||
const term = roleSearchTerm.value.toLowerCase()
|
||||
return roles.value.filter((r) => r.name.toLowerCase().includes(term))
|
||||
})
|
||||
|
||||
async function fetchRoles() {
|
||||
loadingRoles.value = true
|
||||
try {
|
||||
const res = await getRoles(1, 100)
|
||||
roles.value = res.items
|
||||
if (roles.value.length > 0 && !selectedRoleId.value) {
|
||||
selectRole(roles.value[0].id)
|
||||
}
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
loadingRoles.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function selectRole(roleId: string) {
|
||||
selectedRoleId.value = roleId
|
||||
loadingRoleDetail.value = true
|
||||
try {
|
||||
const data = await getRole(roleId)
|
||||
selectedRole.value = data
|
||||
rolePermissions.value = ALL_SCREENS.map((s) => {
|
||||
const existing = data.permissions.find((p) => p.screen === s.key)
|
||||
return {
|
||||
screen: s.key,
|
||||
canView: existing?.canView ?? false,
|
||||
canCreate: existing?.canCreate ?? false,
|
||||
canEdit: existing?.canEdit ?? false,
|
||||
canDelete: existing?.canDelete ?? false,
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
loadingRoleDetail.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function screenLabel(key: string): string {
|
||||
return ALL_SCREENS.find((s) => s.key === key)?.label ?? key
|
||||
}
|
||||
|
||||
async function handleSaveRolePermissions() {
|
||||
if (!selectedRoleId.value || !selectedRole.value) return
|
||||
savingRolePermissions.value = true
|
||||
try {
|
||||
await updateRole(selectedRoleId.value, {
|
||||
name: selectedRole.value.name,
|
||||
permissions: rolePermissions.value,
|
||||
})
|
||||
toast.add({ severity: 'success', summary: 'Permissions saved', life: 2000 })
|
||||
await fetchRoles()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
savingRolePermissions.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void fetchRoles()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-12">
|
||||
<!-- Left: User List -->
|
||||
<div class="panel flex flex-col p-4 md:col-span-4" style="height: 620px;">
|
||||
<div class="mb-3">
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-search text-xs" />
|
||||
<InputText
|
||||
v-model.trim="userSearchTerm"
|
||||
placeholder="Search users..."
|
||||
class="search-input w-full text-sm"
|
||||
@input="onUserSearch"
|
||||
/>
|
||||
</IconField>
|
||||
</div>
|
||||
|
||||
<div v-if="loadingUsers" class="flex flex-1 items-center justify-center">
|
||||
<ProgressSpinner style="width: 32px; height: 32px;" />
|
||||
</div>
|
||||
<div v-else-if="users.length === 0" class="muted-note p-4 text-center">
|
||||
No users found
|
||||
</div>
|
||||
<div v-else class="flex-1 overflow-y-auto pr-1">
|
||||
<div
|
||||
v-for="u in users"
|
||||
:key="u.id"
|
||||
class="flex cursor-pointer items-center justify-between rounded-xl p-3 transition-colors mb-1"
|
||||
:class="selectedUserId === u.id
|
||||
? 'bg-indigo-500/10 text-indigo-500 dark:bg-indigo-500/20 font-semibold'
|
||||
: 'hover:bg-slate-100 dark:hover:bg-slate-800/60'"
|
||||
@click="selectUser(u.id)"
|
||||
>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<Avatar
|
||||
:label="(u.displayName || u.username).slice(0, 2).toUpperCase()"
|
||||
style="background: var(--primary); color: #fff"
|
||||
shape="circle"
|
||||
size="normal"
|
||||
/>
|
||||
<div>
|
||||
<div class="text-sm leading-tight">{{ u.displayName }}</div>
|
||||
<div class="muted-note text-xs">@{{ u.username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<i v-if="selectedUserId === u.id" class="pi pi-chevron-right text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Top & Bottom: Roles (Unassigned / Assigned) -->
|
||||
<div class="flex flex-col gap-4 md:col-span-8">
|
||||
<div v-if="!selectedUserId" class="panel flex items-center justify-center p-8 muted-note" style="height: 620px;">
|
||||
Select a user from the left list to manage roles
|
||||
</div>
|
||||
<template v-else>
|
||||
<!-- Top Right: Unassigned Roles -->
|
||||
<div class="panel flex flex-col p-4" style="height: 300px;">
|
||||
<div class="eyebrow mb-3 flex items-center gap-2">
|
||||
<i class="pi pi-plus-circle text-indigo-500 text-sm"></i> Unassigned Roles
|
||||
</div>
|
||||
<div v-if="loadingUserRoles" class="flex flex-1 items-center justify-center">
|
||||
<ProgressSpinner style="width: 32px; height: 32px;" />
|
||||
</div>
|
||||
<div v-else-if="unassignedRoles.length === 0" class="flex flex-1 items-center justify-center muted-note">
|
||||
All available roles assigned
|
||||
</div>
|
||||
<div v-else class="flex-1 overflow-y-auto space-y-2 pr-1">
|
||||
<div
|
||||
v-for="r in unassignedRoles"
|
||||
:key="r.id"
|
||||
class="flex items-center justify-between rounded-xl border p-3"
|
||||
style="border-color: var(--hairline)"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-medium text-sm">{{ r.name }}</span>
|
||||
<Tag :value="r.isSystem ? 'System' : 'Custom'" :severity="r.isSystem ? 'warn' : 'secondary'" class="text-xs" />
|
||||
</div>
|
||||
<Button
|
||||
label="Assign"
|
||||
icon="pi pi-plus"
|
||||
size="small"
|
||||
:loading="assigningRoleId === r.id"
|
||||
@click="handleAssignRole(r.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Right: Assigned Roles -->
|
||||
<div class="panel flex flex-col p-4" style="height: 304px;">
|
||||
<div class="eyebrow mb-3 flex items-center gap-2">
|
||||
<i class="pi pi-check-circle text-green-500 text-sm"></i> Assigned Roles
|
||||
</div>
|
||||
<div v-if="loadingUserRoles" class="flex flex-1 items-center justify-center">
|
||||
<ProgressSpinner style="width: 32px; height: 32px;" />
|
||||
</div>
|
||||
<div v-else-if="assignedRoles.length === 0" class="flex flex-1 items-center justify-center muted-note">
|
||||
No roles assigned yet
|
||||
</div>
|
||||
<div v-else class="flex-1 overflow-y-auto space-y-2 pr-1">
|
||||
<div
|
||||
v-for="r in assignedRoles"
|
||||
:key="r.id"
|
||||
class="flex items-center justify-between rounded-xl border p-3"
|
||||
style="border-color: var(--hairline)"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-medium text-sm">{{ r.name }}</span>
|
||||
<Tag :value="r.isSystem ? 'System' : 'Custom'" :severity="r.isSystem ? 'warn' : 'secondary'" class="text-xs" />
|
||||
</div>
|
||||
<Button
|
||||
label="Unassign"
|
||||
icon="pi pi-times"
|
||||
severity="danger"
|
||||
text
|
||||
size="small"
|
||||
:loading="unassigningRoleId === r.id"
|
||||
@click="handleUnassignRole(r.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getUsers, getUserRoles, assignUserRole, unassignUserRole } from '../../../services/backend'
|
||||
import { errorMessage } from '../../../services/api'
|
||||
import type { User, Role } from '../../../types'
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const users = ref<User[]>([])
|
||||
const loadingUsers = ref(false)
|
||||
const userSearchTerm = ref('')
|
||||
|
||||
const selectedUserId = ref<string | null>(null)
|
||||
const assignedRoles = ref<Role[]>([])
|
||||
const unassignedRoles = ref<Role[]>([])
|
||||
const loadingUserRoles = ref(false)
|
||||
const assigningRoleId = ref<string | null>(null)
|
||||
const unassigningRoleId = ref<string | null>(null)
|
||||
|
||||
let userSearchTimer: ReturnType<typeof setTimeout> | undefined
|
||||
|
||||
async function fetchUsers(q?: string) {
|
||||
loadingUsers.value = true
|
||||
try {
|
||||
users.value = await getUsers(q)
|
||||
if (users.value.length > 0 && !selectedUserId.value) {
|
||||
selectUser(users.value[0].id)
|
||||
}
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
loadingUsers.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onUserSearch() {
|
||||
clearTimeout(userSearchTimer)
|
||||
userSearchTimer = setTimeout(() => void fetchUsers(userSearchTerm.value), 300)
|
||||
}
|
||||
|
||||
async function selectUser(userId: string) {
|
||||
selectedUserId.value = userId
|
||||
loadingUserRoles.value = true
|
||||
try {
|
||||
const data = await getUserRoles(userId)
|
||||
assignedRoles.value = data.assignedRoles
|
||||
unassignedRoles.value = data.unassignedRoles
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
loadingUserRoles.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAssignRole(roleId: string) {
|
||||
if (!selectedUserId.value) return
|
||||
assigningRoleId.value = roleId
|
||||
try {
|
||||
await assignUserRole(selectedUserId.value, roleId)
|
||||
toast.add({ severity: 'success', summary: 'Role assigned', life: 2000 })
|
||||
await selectUser(selectedUserId.value)
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
assigningRoleId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUnassignRole(roleId: string) {
|
||||
if (!selectedUserId.value) return
|
||||
unassigningRoleId.value = roleId
|
||||
try {
|
||||
await unassignUserRole(selectedUserId.value, roleId)
|
||||
toast.add({ severity: 'success', summary: 'Role unassigned', life: 2000 })
|
||||
await selectUser(selectedUserId.value)
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
unassigningRoleId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void fetchUsers()
|
||||
})
|
||||
</script>
|
||||
@@ -66,6 +66,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { createTask, updateTask, deleteTask } from '../../services/modules'
|
||||
import { getMasterDataOptions } from '../../services/backend'
|
||||
import { errorMessage } from '../../services/api'
|
||||
import type { Task, TaskPriority, TaskStatus } from '../../types'
|
||||
|
||||
@@ -88,18 +89,17 @@ const toast = useToast()
|
||||
const saving = ref(false)
|
||||
const savingError = ref('')
|
||||
|
||||
const statusOptions = [
|
||||
{ label: 'To Do', value: 'Todo' as TaskStatus },
|
||||
{ label: 'In Progress', value: 'InProgress' as TaskStatus },
|
||||
{ label: 'Done', value: 'Done' as TaskStatus },
|
||||
{ label: 'Cancelled', value: 'Cancelled' as TaskStatus },
|
||||
]
|
||||
const statusOptions = ref<{ label: string; value: TaskStatus }[]>([])
|
||||
const priorityOptions = ref<{ label: string; value: TaskPriority }[]>([])
|
||||
|
||||
const priorityOptions = [
|
||||
{ label: 'Low', value: 'Low' as TaskPriority },
|
||||
{ label: 'Medium', value: 'Medium' as TaskPriority },
|
||||
{ label: 'High', value: 'High' as TaskPriority },
|
||||
]
|
||||
onMounted(async () => {
|
||||
const [status, priority] = await Promise.all([
|
||||
getMasterDataOptions('task_status'),
|
||||
getMasterDataOptions('task_priority'),
|
||||
])
|
||||
statusOptions.value = status as { label: string; value: TaskStatus }[]
|
||||
priorityOptions.value = priority as { label: string; value: TaskPriority }[]
|
||||
})
|
||||
|
||||
const assigneeOptions = computed(() => props.members.map((m) => ({ label: m.displayName, value: m.userId })))
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div
|
||||
v-for="col in columns"
|
||||
:key="col.status"
|
||||
class="min-w-[260px] flex-1 rounded-lg bg-slate-100 p-2 dark:bg-slate-800"
|
||||
class="min-w-[260px] flex-1 rounded-2xl p-2" style="background: var(--canvas)"
|
||||
@dragover.prevent="dragOverStatus = col.status"
|
||||
@dragleave="dragOverStatus = null"
|
||||
@drop.prevent="onDrop(col.status)"
|
||||
@@ -30,7 +30,8 @@
|
||||
<div
|
||||
v-for="task in tasksIn(col.status)"
|
||||
:key="task.id"
|
||||
class="mb-2 cursor-pointer rounded-lg border border-slate-200 bg-white p-3 hover:border-blue-500 dark:border-slate-700 dark:bg-slate-900"
|
||||
class="task-card mb-2 cursor-pointer rounded-xl border p-3"
|
||||
:style="{ background: 'var(--panel)', borderColor: 'var(--hairline)' }"
|
||||
:class="{ 'opacity-40': draggingId === task.id }"
|
||||
:draggable="auth.can('tasks', 'edit')"
|
||||
@dragstart="onDragStart(task)"
|
||||
@@ -38,11 +39,11 @@
|
||||
@click="openEdit(task)"
|
||||
>
|
||||
<div style="font-weight: 500">{{ task.title }}</div>
|
||||
<div v-if="task.description" class="mt-1 truncate text-[0.8rem] text-slate-500 dark:text-slate-400">{{ task.description }}</div>
|
||||
<div v-if="task.description" class="muted-note mt-1 truncate">{{ task.description }}</div>
|
||||
<div class="mt-2 flex items-center gap-2 text-[0.8rem]">
|
||||
<Tag :value="task.priority" :severity="prioritySeverity(task.priority)" />
|
||||
<span class="text-slate-500 dark:text-slate-400">{{ task.assigneeName ?? 'Unassigned' }}</span>
|
||||
<span v-if="task.dueDate" class="text-slate-500 dark:text-slate-400">{{ formatDate(task.dueDate) }}</span>
|
||||
<span class="muted-note">{{ task.assigneeName ?? 'Unassigned' }}</span>
|
||||
<span v-if="task.dueDate" class="muted-note">{{ formatDate(task.dueDate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,7 +97,8 @@ function tasksIn(status: TaskStatus) {
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
tasks.value = await getTasks(projectId)
|
||||
const res = await getTasks(projectId, undefined, 1, 100)
|
||||
tasks.value = res.items
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
@@ -104,7 +106,8 @@ async function load() {
|
||||
|
||||
async function loadMembers() {
|
||||
try {
|
||||
members.value = (await getMembers(projectId)).map((m) => ({
|
||||
const res = await getMembers(projectId, 1, 100)
|
||||
members.value = res.items.map((m) => ({
|
||||
userId: m.userId,
|
||||
displayName: m.displayName,
|
||||
}))
|
||||
@@ -182,3 +185,9 @@ onMounted(async () => {
|
||||
await load()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task-card:hover {
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex h-full flex-col">
|
||||
<div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Select
|
||||
@@ -39,13 +39,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="filteredTasks" :loading="loading" dataKey="id" emptyMessage="No tasks"
|
||||
@row-click="openEdit" class="min-w-[700px]">
|
||||
<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="tasks"
|
||||
:loading="loading"
|
||||
:lazy="true"
|
||||
:paginator="true"
|
||||
:rows="pageSize"
|
||||
:totalRecords="totalCount"
|
||||
:first="first"
|
||||
@page="onPageChange"
|
||||
dataKey="id"
|
||||
emptyMessage="No tasks yet"
|
||||
@row-click="openEdit"
|
||||
scrollable
|
||||
scrollHeight="flex"
|
||||
class="min-h-0 flex-1 min-w-[700px]"
|
||||
>
|
||||
<Column field="title" header="Title" style="width: 35%">
|
||||
<template #body="{ data }">
|
||||
<div style="font-weight: 500">{{ data.title }}</div>
|
||||
<div v-if="data.description" class="max-w-[400px] truncate text-[0.8rem] text-slate-500 dark:text-slate-400">{{ data.description }}</div>
|
||||
<div v-if="data.description" class="muted-note max-w-[400px] truncate">{{ data.description }}</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" style="width: 12%">
|
||||
@@ -70,10 +85,11 @@
|
||||
</Column>
|
||||
<Column header="Updated" style="width: 12%">
|
||||
<template #body="{ data }">
|
||||
<span class="text-slate-500 dark:text-slate-400">{{ formatDate(data.updatedAt) }}</span>
|
||||
<span class="muted-note">{{ formatDate(data.updatedAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</AppDataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TaskDetailDialog
|
||||
@@ -92,10 +108,12 @@
|
||||
<script setup lang="ts">
|
||||
import TaskDetailDialog from './TaskDetailDialog.vue'
|
||||
import { getTasks } from '../../services/modules'
|
||||
import { getMembers } from '../../services/backend'
|
||||
import { getMembers, getMasterDataOptions } from '../../services/backend'
|
||||
import { errorMessage } from '../../services/api'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import AppDataTable from '../../components/AppDataTable.vue'
|
||||
import type { Task, TaskPriority, TaskStatus } from '../../types'
|
||||
import type { DataTablePageEvent } from 'primevue/datatable'
|
||||
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
@@ -106,6 +124,11 @@ const tasks = ref<Task[]>([])
|
||||
const loading = ref(false)
|
||||
const members = ref<{ userId: string; displayName: string }[]>([])
|
||||
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const totalCount = ref(0)
|
||||
const first = computed(() => (page.value - 1) * pageSize.value)
|
||||
|
||||
const filterStatus = ref<string | null>(null)
|
||||
const filterPriority = ref<string | null>(null)
|
||||
const filterAssignee = ref<string | null>(null)
|
||||
@@ -115,36 +138,24 @@ const editingTask = ref<Task | null>(null)
|
||||
|
||||
const boardMode = computed(() => route.name === 'tasks-board')
|
||||
|
||||
const statusOptions = [
|
||||
{ label: 'Todo', value: 'Todo' },
|
||||
{ label: 'In Progress', value: 'InProgress' },
|
||||
{ label: 'Done', value: 'Done' },
|
||||
{ label: 'Cancelled', value: 'Cancelled' },
|
||||
]
|
||||
|
||||
const priorityOptions = [
|
||||
{ label: 'Low', value: 'Low' },
|
||||
{ label: 'Medium', value: 'Medium' },
|
||||
{ label: 'High', value: 'High' },
|
||||
]
|
||||
const statusOptions = ref<{ label: string; value: string }[]>([])
|
||||
const priorityOptions = ref<{ label: string; value: string }[]>([])
|
||||
|
||||
const assigneeOptions = computed(() =>
|
||||
members.value.map((m) => ({ label: m.displayName, value: m.userId })),
|
||||
)
|
||||
|
||||
const filteredTasks = computed(() => {
|
||||
return tasks.value.filter((t) => {
|
||||
if (filterStatus.value && t.status !== filterStatus.value) return false
|
||||
if (filterPriority.value && t.priority !== filterPriority.value) return false
|
||||
if (filterAssignee.value && t.assigneeId !== filterAssignee.value) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
tasks.value = await getTasks(projectId)
|
||||
const filters = {
|
||||
status: filterStatus.value || undefined,
|
||||
priority: filterPriority.value || undefined,
|
||||
assigneeId: filterAssignee.value || undefined,
|
||||
}
|
||||
const res = await getTasks(projectId, filters, page.value, pageSize.value)
|
||||
tasks.value = res.items
|
||||
totalCount.value = res.totalCount
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
@@ -152,9 +163,16 @@ async function load() {
|
||||
}
|
||||
}
|
||||
|
||||
function onPageChange(event: DataTablePageEvent) {
|
||||
page.value = event.page + 1
|
||||
pageSize.value = event.rows
|
||||
void load()
|
||||
}
|
||||
|
||||
async function loadMembers() {
|
||||
try {
|
||||
members.value = (await getMembers(projectId)).map((m) => ({
|
||||
const res = await getMembers(projectId, 1, 100)
|
||||
members.value = res.items.map((m) => ({
|
||||
userId: m.userId,
|
||||
displayName: m.displayName,
|
||||
}))
|
||||
@@ -163,9 +181,9 @@ async function loadMembers() {
|
||||
}
|
||||
}
|
||||
|
||||
watch(filterStatus, load)
|
||||
watch(filterPriority, load)
|
||||
watch(filterAssignee, load)
|
||||
watch(filterStatus, () => { page.value = 1; void load() })
|
||||
watch(filterPriority, () => { page.value = 1; void load() })
|
||||
watch(filterAssignee, () => { page.value = 1; void load() })
|
||||
|
||||
function openCreate() {
|
||||
editingTask.value = null
|
||||
@@ -208,6 +226,12 @@ function formatDate(v: string) {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const [status, priority] = await Promise.all([
|
||||
getMasterDataOptions('task_status'),
|
||||
getMasterDataOptions('task_priority'),
|
||||
])
|
||||
statusOptions.value = status
|
||||
priorityOptions.value = priority
|
||||
await loadMembers()
|
||||
await load()
|
||||
})
|
||||
|
||||
@@ -1,48 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="m-0 text-2xl font-semibold">Accounts</h1>
|
||||
<Button v-if="auth.can('accounts', 'create')" label="New Account" icon="pi pi-plus" @click="openCreate" />
|
||||
<div class="flex h-full flex-col">
|
||||
<div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="page-title m-0">Users</h1>
|
||||
<Button v-if="auth.can('users', 'create')" label="New User" icon="pi pi-plus" @click="openCreate" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<InputText v-model.trim="searchTerm" placeholder="Search accounts..." class="w-full sm:w-[320px]" @input="debouncedSearch" />
|
||||
<div class="mb-4 sm:w-[320px]">
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-search" />
|
||||
<InputText v-model.trim="searchTerm" placeholder="Search users..." class="search-input w-full" @input="debouncedSearch" />
|
||||
</IconField>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<DataTable :value="accounts" :loading="loading" emptyMessage="No accounts" class="min-w-[640px]">
|
||||
<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="users"
|
||||
:loading="loading"
|
||||
:lazy="true"
|
||||
:paginator="true"
|
||||
:rows="pageSize"
|
||||
:totalRecords="totalCount"
|
||||
:first="first"
|
||||
@page="onPageChange"
|
||||
emptyMessage="No users yet"
|
||||
scrollable
|
||||
scrollHeight="flex"
|
||||
class="min-h-0 flex-1 min-w-[640px]"
|
||||
>
|
||||
<Column header="User" style="width: 35%">
|
||||
<template #body="{ data }">
|
||||
<div class="flex items-center gap-2">
|
||||
<Avatar :label="(data.displayName || data.username).slice(0, 2).toUpperCase()"
|
||||
style="background: #3b82f6; color: #fff" />
|
||||
style="background: var(--primary); color: #fff" />
|
||||
<span>{{ data.displayName }}</span>
|
||||
<span class="text-slate-500 dark:text-slate-400">@{{ data.username }}</span>
|
||||
<span class="muted-note">@{{ data.username }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="roleName" header="Role" style="width: 15%">
|
||||
<Column field="isActive" header="Status" style="width: 25%">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.roleName" severity="secondary" />
|
||||
<ToggleSwitch
|
||||
v-model="data.isActive"
|
||||
:disabled="!auth.can('users', 'edit')"
|
||||
:aria-label="data.isActive ? 'Deactivate user' : 'Activate user'"
|
||||
@change="onToggleActive(data)"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="isActive" header="Status" style="width: 15%">
|
||||
<Column header="Created" style="width: 20%">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.isActive ? 'Active' : 'Disabled'" :severity="data.isActive ? 'success' : 'danger'" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Created" style="width: 15%">
|
||||
<template #body="{ data }">
|
||||
<span class="text-slate-500 dark:text-slate-400">{{ formatDate(data.createdAt) }}</span>
|
||||
<span class="muted-note">{{ formatDate(data.createdAt) }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="" style="width: 20%">
|
||||
<template #body="{ data }">
|
||||
<div class="flex justify-end gap-1">
|
||||
<Button v-if="auth.can('accounts', 'edit')" icon="pi pi-key" text severity="secondary" aria-label="Reset password" @click="openReset(data)" />
|
||||
<Button v-if="auth.can('accounts', 'edit')" icon="pi pi-pencil" text @click="openEdit(data)" />
|
||||
<Button v-if="auth.can('users', 'edit')" icon="pi pi-key" text severity="secondary" aria-label="Reset password" @click="openReset(data)" />
|
||||
<Button v-if="auth.can('users', 'edit')" icon="pi pi-pencil" text @click="openEdit(data)" />
|
||||
<Button
|
||||
v-if="auth.can('accounts', 'delete') && data.id !== auth.user?.id"
|
||||
v-if="auth.can('users', 'delete') && data.id !== auth.user?.id"
|
||||
icon="pi pi-trash"
|
||||
text
|
||||
severity="danger"
|
||||
@@ -51,10 +68,11 @@
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</AppDataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="createDialog" header="New Account" :modal="true" style="width: min(460px, 92vw)">
|
||||
<Dialog v-model:visible="createDialog" header="New User" :modal="true" style="width: min(460px, 92vw)">
|
||||
<div class="field">
|
||||
<label for="acc-username">Username</label>
|
||||
<InputText id="acc-username" v-model.trim="createForm.username" class="w-full" autofocus />
|
||||
@@ -67,25 +85,17 @@
|
||||
<label for="acc-pass">Password</label>
|
||||
<Password id="acc-pass" v-model="createForm.password" class="w-full" inputClass="w-full" toggleMask :feedback="false" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="acc-role">Role</label>
|
||||
<Select id="acc-role" v-model="createForm.roleId" :options="roleOptions" optionLabel="label" optionValue="value" class="w-full" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="Cancel" severity="secondary" text @click="createDialog = false" />
|
||||
<Button label="Create" :loading="saving" @click="onCreate" />
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:visible="editDialog" header="Edit Account" :modal="true" style="width: min(460px, 92vw)">
|
||||
<Dialog v-model:visible="editDialog" header="Edit User" :modal="true" style="width: min(460px, 92vw)">
|
||||
<div class="field">
|
||||
<label for="edit-name">Display name</label>
|
||||
<InputText id="edit-name" v-model.trim="editForm.displayName" class="w-full" autofocus />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="edit-role">Role</label>
|
||||
<Select id="edit-role" v-model="editForm.roleId" :options="roleOptions" optionLabel="label" optionValue="value" class="w-full" />
|
||||
</div>
|
||||
<div class="field flex items-center gap-2">
|
||||
<ToggleSwitch v-model="editForm.isActive" inputId="edit-active" />
|
||||
<label for="edit-active">Active</label>
|
||||
@@ -110,39 +120,46 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getAccounts, createAccount, updateAccount, deleteAccount, resetAccountPassword, getRoles } from '../services/backend'
|
||||
import { errorMessage } from '../services/api'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import type { Account } from '../types'
|
||||
import { getUsersPaged, createUser, updateUser, deleteUser, resetUserPassword } from '../../services/backend'
|
||||
import { errorMessage } from '../../services/api'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import AppDataTable from '../../components/AppDataTable.vue'
|
||||
import type { UserListItem } from '../../types'
|
||||
import type { DataTablePageEvent } from 'primevue/datatable'
|
||||
|
||||
const toast = useToast()
|
||||
const confirm = useConfirm()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const accounts = ref<Account[]>([])
|
||||
const users = ref<UserListItem[]>([])
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const searchTerm = ref('')
|
||||
|
||||
const roleOptions = ref<{ label: string; value: string }[]>([])
|
||||
const page = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const totalCount = ref(0)
|
||||
const first = computed(() => (page.value - 1) * pageSize.value)
|
||||
|
||||
const createDialog = ref(false)
|
||||
const createForm = ref({ username: '', displayName: '', password: '', roleId: '' })
|
||||
const createForm = ref({ username: '', displayName: '', password: '' })
|
||||
|
||||
const editDialog = ref(false)
|
||||
const editTarget = ref<Account | null>(null)
|
||||
const editForm = ref({ displayName: '', roleId: '', isActive: true })
|
||||
const editTarget = ref<UserListItem | null>(null)
|
||||
const editForm = ref({ displayName: '', isActive: true })
|
||||
|
||||
const resetDialog = ref(false)
|
||||
const resetTarget = ref<Account | null>(null)
|
||||
const resetTarget = ref<UserListItem | null>(null)
|
||||
const resetPassword = ref('')
|
||||
|
||||
let searchTimer: ReturnType<typeof setTimeout> | undefined
|
||||
|
||||
async function loadAccounts() {
|
||||
async function loadUsers() {
|
||||
loading.value = true
|
||||
try {
|
||||
accounts.value = await getAccounts(searchTerm.value || undefined)
|
||||
const res = await getUsersPaged(searchTerm.value || undefined, page.value, pageSize.value)
|
||||
users.value = res.items
|
||||
totalCount.value = res.totalCount
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
@@ -150,21 +167,22 @@ async function loadAccounts() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRoles() {
|
||||
try {
|
||||
roleOptions.value = (await getRoles()).map((r) => ({ label: r.name, value: r.id }))
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
function onPageChange(event: DataTablePageEvent) {
|
||||
page.value = event.page + 1
|
||||
pageSize.value = event.rows
|
||||
void loadUsers()
|
||||
}
|
||||
|
||||
function debouncedSearch() {
|
||||
clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(loadAccounts, 300)
|
||||
searchTimer = setTimeout(() => {
|
||||
page.value = 1
|
||||
void loadUsers()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
createForm.value = { username: '', displayName: '', password: '', roleId: roleOptions.value[0]?.value ?? '' }
|
||||
createForm.value = { username: '', displayName: '', password: '' }
|
||||
createDialog.value = true
|
||||
}
|
||||
|
||||
@@ -175,10 +193,10 @@ async function onCreate() {
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
await createAccount(createForm.value)
|
||||
await createUser(createForm.value)
|
||||
createDialog.value = false
|
||||
toast.add({ severity: 'success', summary: 'Account created', life: 3000 })
|
||||
await loadAccounts()
|
||||
toast.add({ severity: 'success', summary: 'User created', life: 3000 })
|
||||
await loadUsers()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
@@ -186,9 +204,9 @@ async function onCreate() {
|
||||
}
|
||||
}
|
||||
|
||||
function openEdit(account: Account) {
|
||||
editTarget.value = account
|
||||
editForm.value = { displayName: account.displayName, roleId: account.roleId, isActive: account.isActive }
|
||||
function openEdit(user: UserListItem) {
|
||||
editTarget.value = user
|
||||
editForm.value = { displayName: user.displayName, isActive: user.isActive }
|
||||
editDialog.value = true
|
||||
}
|
||||
|
||||
@@ -196,10 +214,10 @@ async function onEdit() {
|
||||
if (!editTarget.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
await updateAccount(editTarget.value.id, editForm.value)
|
||||
await updateUser(editTarget.value.id, editForm.value)
|
||||
editDialog.value = false
|
||||
toast.add({ severity: 'success', summary: 'Account updated', life: 3000 })
|
||||
await loadAccounts()
|
||||
toast.add({ severity: 'success', summary: 'User updated', life: 3000 })
|
||||
await loadUsers()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
} finally {
|
||||
@@ -207,8 +225,8 @@ async function onEdit() {
|
||||
}
|
||||
}
|
||||
|
||||
function openReset(account: Account) {
|
||||
resetTarget.value = account
|
||||
function openReset(user: UserListItem) {
|
||||
resetTarget.value = user
|
||||
resetPassword.value = ''
|
||||
resetDialog.value = true
|
||||
}
|
||||
@@ -220,7 +238,7 @@ async function onReset() {
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
await resetAccountPassword(resetTarget.value.id, resetPassword.value)
|
||||
await resetUserPassword(resetTarget.value.id, resetPassword.value)
|
||||
resetDialog.value = false
|
||||
toast.add({ severity: 'success', summary: 'Password reset', life: 3000 })
|
||||
} catch (e) {
|
||||
@@ -230,15 +248,17 @@ async function onReset() {
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(account: Account) {
|
||||
function confirmDelete(user: UserListItem) {
|
||||
confirm.require({
|
||||
message: `Delete account "${account.displayName}"?`,
|
||||
message: `Delete user "${user.displayName}"?`,
|
||||
header: 'Delete',
|
||||
acceptProps: { severity: 'danger' },
|
||||
rejectProps: { severity: 'secondary', outlined: true },
|
||||
accept: async () => {
|
||||
try {
|
||||
await deleteAccount(account.id)
|
||||
toast.add({ severity: 'success', summary: 'Account deleted', life: 2000 })
|
||||
await loadAccounts()
|
||||
await deleteUser(user.id)
|
||||
toast.add({ severity: 'success', summary: 'User deleted', life: 2000 })
|
||||
await loadUsers()
|
||||
} catch (e) {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
@@ -250,7 +270,18 @@ function formatDate(value: string) {
|
||||
return new Date(value).toLocaleDateString()
|
||||
}
|
||||
|
||||
async function onToggleActive(user: UserListItem) {
|
||||
const prev = user.isActive
|
||||
try {
|
||||
await updateUser(user.id, { displayName: user.displayName, isActive: user.isActive })
|
||||
toast.add({ severity: 'success', summary: user.isActive ? 'User activated' : 'User disabled', life: 2000 })
|
||||
} catch (e) {
|
||||
user.isActive = prev
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: errorMessage(e), life: 4000 })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadAccounts(), loadRoles()])
|
||||
await loadUsers()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user