feat(client-portal) : portal front + client account admin (phases 1-2 front)
LST-69 (3.2) front. Client portal UI on the phase-1 backend. - New frontend/modules/client-portal/ layer: /portal (project cards from the client's allowedProjects via /me), /portal/projects/[id] (tickets list, detail modal, create modal with document upload), client-tickets service + DTO, CT-XXX formatting. - Front tenancy: auth.global.ts redirects a pure ROLE_CLIENT to /portal and blocks internal routes; portal pages open to any authenticated user. - Admin: UserDrawer manages client accounts (ROLE_CLIENT + client + allowedProjects); new "Tickets client" admin tab (list, filters, status change with required comment on reject, detail modal). - Kanban/my-tasks: client-ticket icon + tooltip when task.clientTicket is set (data via task:read, no extra call). TaskDocument upload generalized with a clientTicketId prop. getContent uses native fetch (text response). - i18n portal/clientTicket keys; sidebar /portal item (module client-portal). nuxt build passes; /portal routes present, existing routes intact.
This commit is contained in:
Matthieu
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<h2 class="text-lg font-bold text-neutral-900">{{ $t('clientTicket.adminTitle') }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<div class="mt-4 flex flex-wrap gap-3">
|
||||
<div class="[&>div]:!mt-0">
|
||||
<MalioSelect
|
||||
v-model="filters.project"
|
||||
:options="projectOptions"
|
||||
:label="$t('clientTicket.filterProject')"
|
||||
group-class="!w-48"
|
||||
empty-option-label="—"
|
||||
@update:model-value="load"
|
||||
/>
|
||||
</div>
|
||||
<div class="[&>div]:!mt-0">
|
||||
<MalioSelect
|
||||
v-model="filters.status"
|
||||
:options="statusOptions"
|
||||
:label="$t('clientTicket.filterStatus')"
|
||||
group-class="!w-48"
|
||||
empty-option-label="—"
|
||||
@update:model-value="load"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
class="mt-4"
|
||||
:columns="columns"
|
||||
:items="tickets"
|
||||
:loading="isLoading"
|
||||
:empty-message="$t('portal.noTickets')"
|
||||
@row-click="openDetail"
|
||||
>
|
||||
<template #cell-number="{ item }">
|
||||
<span class="font-mono font-semibold text-primary-500">
|
||||
{{ formatTicketNumber((item as ClientTicket).number) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #cell-type="{ item }">
|
||||
<ClientTicketTypeBadge :type="(item as ClientTicket).type" />
|
||||
</template>
|
||||
<template #cell-status="{ item }">
|
||||
<ClientTicketStatusBadge :status="(item as ClientTicket).status" />
|
||||
</template>
|
||||
<template #cell-project="{ item }">
|
||||
{{ projectName((item as ClientTicket).project) }}
|
||||
</template>
|
||||
<template #cell-submittedBy="{ item }">
|
||||
{{ submitterName((item as ClientTicket).submittedBy) }}
|
||||
</template>
|
||||
<template #cell-createdAt="{ item }">
|
||||
{{ formatDate((item as ClientTicket).createdAt) }}
|
||||
</template>
|
||||
<template #cell-actions="{ item }">
|
||||
<MalioButton
|
||||
:label="$t('clientTicket.changeStatus')"
|
||||
button-class="w-auto px-3 py-1 text-xs"
|
||||
@click.stop="openStatus(item as ClientTicket)"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<!-- Detail modal (read-only + documents) -->
|
||||
<ClientTicketDetailModal
|
||||
v-model="detailOpen"
|
||||
:ticket="selectedTicket"
|
||||
/>
|
||||
|
||||
<!-- Status change modal -->
|
||||
<AppModal v-model="statusOpen" :title="$t('clientTicket.changeStatus')" width="md">
|
||||
<div v-if="statusTicket" class="flex flex-col gap-4">
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{ formatTicketNumber(statusTicket.number) }} — {{ statusTicket.title }}
|
||||
</p>
|
||||
<MalioSelect
|
||||
v-model="statusForm.status"
|
||||
:options="statusEditOptions"
|
||||
:label="$t('clientTicket.status.label')"
|
||||
group-class="w-full"
|
||||
/>
|
||||
<MalioInputTextArea
|
||||
v-model="statusForm.statusComment"
|
||||
:label="$t('clientTicket.statusComment')"
|
||||
:rows="3"
|
||||
input-class="w-full"
|
||||
:error="statusError"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton
|
||||
:label="$t('common.cancel')"
|
||||
button-class="w-auto px-4"
|
||||
variant="secondary"
|
||||
@click="statusOpen = false"
|
||||
/>
|
||||
<MalioButton
|
||||
:label="$t('common.save')"
|
||||
button-class="w-auto px-6"
|
||||
:disabled="isSavingStatus"
|
||||
@click="saveStatus"
|
||||
/>
|
||||
</template>
|
||||
</AppModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
ClientTicket,
|
||||
ClientTicketStatus,
|
||||
} from '~/modules/client-portal/services/dto/client-ticket'
|
||||
import type { Project } from '~/modules/project-management/services/dto/project'
|
||||
import type { UserData } from '~/services/dto/user-data'
|
||||
import { useClientTicketService } from '~/modules/client-portal/services/client-tickets'
|
||||
import { useProjectService } from '~/modules/project-management/services/projects'
|
||||
import { useUserService } from '~/services/users'
|
||||
import { formatTicketNumber, iriToId } from '~/modules/client-portal/utils/ticket'
|
||||
import type { DataTableColumn } from '~/components/ui/DataTable.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { getAll, getById, updateStatus } = useClientTicketService()
|
||||
const { getAll: getProjects } = useProjectService()
|
||||
const { getAll: getUsers } = useUserService()
|
||||
|
||||
const columns: DataTableColumn[] = [
|
||||
{ key: 'number', label: 'N°', primary: true },
|
||||
{ key: 'type', label: t('clientTicket.typeLabel') },
|
||||
{ key: 'title', label: t('clientTicket.title') },
|
||||
{ key: 'status', label: t('clientTicket.status.label') },
|
||||
{ key: 'project', label: t('clientTicket.project') },
|
||||
{ key: 'submittedBy', label: t('clientTicket.submittedBy') },
|
||||
{ key: 'createdAt', label: t('clientTicket.date') },
|
||||
{ key: 'actions', label: '' },
|
||||
]
|
||||
|
||||
const STATUSES: ClientTicketStatus[] = ['new', 'in_progress', 'done', 'rejected']
|
||||
|
||||
const statusOptions = computed(() =>
|
||||
STATUSES.map((s) => ({ label: t(`clientTicket.status.${s}`), value: s })),
|
||||
)
|
||||
const statusEditOptions = statusOptions
|
||||
|
||||
const tickets = ref<ClientTicket[]>([])
|
||||
const projects = ref<Project[]>([])
|
||||
const users = ref<UserData[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
const filters = reactive({
|
||||
project: null as string | null,
|
||||
status: null as string | null,
|
||||
})
|
||||
|
||||
const projectOptions = computed(() =>
|
||||
projects.value.map((p) => ({
|
||||
label: p.name,
|
||||
value: p['@id'] ?? `/api/projects/${p.id}`,
|
||||
})),
|
||||
)
|
||||
|
||||
function projectName(iri: string): string {
|
||||
const id = iriToId(iri)
|
||||
return projects.value.find((p) => p.id === id)?.name ?? '—'
|
||||
}
|
||||
|
||||
function submitterName(iri: string | null): string {
|
||||
if (!iri) return '—'
|
||||
const id = iriToId(iri)
|
||||
return users.value.find((u) => u.id === id)?.username ?? '—'
|
||||
}
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleDateString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
// Detail modal
|
||||
const detailOpen = ref(false)
|
||||
const selectedTicket = ref<ClientTicket | null>(null)
|
||||
|
||||
async function openDetail(ticket: ClientTicket) {
|
||||
try {
|
||||
selectedTicket.value = await getById(ticket.id)
|
||||
} catch {
|
||||
selectedTicket.value = ticket
|
||||
}
|
||||
detailOpen.value = true
|
||||
}
|
||||
|
||||
// Status modal
|
||||
const statusOpen = ref(false)
|
||||
const statusTicket = ref<ClientTicket | null>(null)
|
||||
const isSavingStatus = ref(false)
|
||||
const statusForm = reactive({
|
||||
status: 'new' as ClientTicketStatus,
|
||||
statusComment: '',
|
||||
})
|
||||
|
||||
const statusError = computed(() => {
|
||||
if (statusForm.status === 'rejected' && !statusForm.statusComment.trim()) {
|
||||
return t('clientTicket.rejectionRequired')
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
function openStatus(ticket: ClientTicket) {
|
||||
statusTicket.value = ticket
|
||||
statusForm.status = ticket.status
|
||||
statusForm.statusComment = ticket.statusComment ?? ''
|
||||
statusOpen.value = true
|
||||
}
|
||||
|
||||
async function saveStatus() {
|
||||
if (!statusTicket.value) return
|
||||
if (statusForm.status === 'rejected' && !statusForm.statusComment.trim()) {
|
||||
return
|
||||
}
|
||||
isSavingStatus.value = true
|
||||
try {
|
||||
await updateStatus(statusTicket.value.id, {
|
||||
status: statusForm.status,
|
||||
statusComment: statusForm.statusComment.trim() || null,
|
||||
})
|
||||
statusOpen.value = false
|
||||
await load()
|
||||
} finally {
|
||||
isSavingStatus.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
tickets.value = await getAll({
|
||||
project: filters.project ?? undefined,
|
||||
status: filters.status ?? undefined,
|
||||
})
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const [proj, usr] = await Promise.all([getProjects(), getUsers()])
|
||||
projects.value = proj
|
||||
users.value = usr
|
||||
await load()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user