feat: update UI
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user