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,132 @@
|
||||
<template>
|
||||
<AppModal
|
||||
:model-value="modelValue"
|
||||
width="lg"
|
||||
@update:model-value="$emit('update:modelValue', $event)"
|
||||
>
|
||||
<template #title>
|
||||
<span v-if="ticket" class="flex items-center gap-2">
|
||||
<span class="font-mono text-primary-500">{{ formatTicketNumber(ticket.number) }}</span>
|
||||
<ClientTicketTypeBadge :type="ticket.type" />
|
||||
</span>
|
||||
<span v-else>{{ $t('portal.ticketDetail') }}</span>
|
||||
</template>
|
||||
|
||||
<div v-if="ticket" class="flex flex-col gap-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<h3 class="text-lg font-bold text-neutral-900">{{ ticket.title }}</h3>
|
||||
<ClientTicketStatusBadge :status="ticket.status" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-semibold uppercase text-neutral-400">
|
||||
{{ $t('clientTicket.description') }}
|
||||
</p>
|
||||
<p class="whitespace-pre-wrap text-sm text-neutral-700">{{ ticket.description }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="ticket.url">
|
||||
<p class="mb-1 text-xs font-semibold uppercase text-neutral-400">
|
||||
{{ $t('clientTicket.url') }}
|
||||
</p>
|
||||
<a
|
||||
:href="ticket.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="break-all text-sm text-blue-600 hover:underline"
|
||||
>{{ ticket.url }}</a>
|
||||
</div>
|
||||
|
||||
<div v-if="ticket.statusComment">
|
||||
<p class="mb-1 text-xs font-semibold uppercase text-neutral-400">
|
||||
{{ $t('clientTicket.statusComment') }}
|
||||
</p>
|
||||
<p class="whitespace-pre-wrap rounded-lg bg-neutral-50 p-3 text-sm text-neutral-700">
|
||||
{{ ticket.statusComment }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-neutral-400">
|
||||
{{ $t('clientTicket.created') }} : {{ formatDate(ticket.createdAt) }}
|
||||
</div>
|
||||
|
||||
<!-- Documents -->
|
||||
<div class="border-t border-neutral-100 pt-2">
|
||||
<div v-if="loadingDocs" class="flex justify-center py-4">
|
||||
<Icon name="heroicons:arrow-path" class="h-5 w-5 animate-spin text-neutral-400" />
|
||||
</div>
|
||||
<TaskDocumentList
|
||||
v-else
|
||||
:documents="documents"
|
||||
:is-admin="false"
|
||||
@preview="previewDoc = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TaskDocumentPreview
|
||||
:document="previewDoc"
|
||||
:has-prev="false"
|
||||
:has-next="false"
|
||||
@close="previewDoc = null"
|
||||
/>
|
||||
</AppModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ClientTicket } from '~/modules/client-portal/services/dto/client-ticket'
|
||||
import type { TaskDocument } from '~/modules/project-management/services/dto/task-document'
|
||||
import { useTaskDocumentService } from '~/modules/project-management/services/task-documents'
|
||||
import { formatTicketNumber } from '~/modules/client-portal/utils/ticket'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
ticket: ClientTicket | null
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
const { getByClientTicket } = useTaskDocumentService()
|
||||
|
||||
const documents = ref<TaskDocument[]>([])
|
||||
const loadingDocs = ref(false)
|
||||
const previewDoc = ref<TaskDocument | null>(null)
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleDateString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
async function loadDocuments(ticketId: number) {
|
||||
loadingDocs.value = true
|
||||
try {
|
||||
documents.value = await getByClientTicket(ticketId)
|
||||
} catch {
|
||||
documents.value = []
|
||||
} finally {
|
||||
loadingDocs.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.modelValue, props.ticket?.id] as const,
|
||||
([open, id]) => {
|
||||
previewDoc.value = null
|
||||
if (open && id) {
|
||||
// Prefer documents embedded in the ticket, fall back to a dedicated fetch.
|
||||
if (props.ticket?.documents?.length) {
|
||||
documents.value = props.ticket.documents
|
||||
} else {
|
||||
documents.value = []
|
||||
loadDocuments(id)
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<AppModal
|
||||
:model-value="modelValue"
|
||||
width="lg"
|
||||
:title="$t('portal.newTicket')"
|
||||
@update:model-value="onModalUpdate"
|
||||
>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
|
||||
<MalioSelect
|
||||
v-model="form.type"
|
||||
:options="typeOptions"
|
||||
:label="$t('clientTicket.typeLabel')"
|
||||
group-class="w-full"
|
||||
/>
|
||||
|
||||
<MalioInputText
|
||||
v-model="form.title"
|
||||
:label="$t('clientTicket.title')"
|
||||
input-class="w-full"
|
||||
:error="touched.title && !form.title.trim() ? $t('clientTicket.titleRequired') : ''"
|
||||
@blur="touched.title = true"
|
||||
/>
|
||||
|
||||
<MalioInputTextArea
|
||||
v-model="form.description"
|
||||
:label="$t('clientTicket.description')"
|
||||
:rows="5"
|
||||
input-class="w-full"
|
||||
:error="touched.description && !form.description.trim() ? $t('clientTicket.descriptionRequired') : ''"
|
||||
@blur="touched.description = true"
|
||||
/>
|
||||
|
||||
<MalioInputText
|
||||
v-if="form.type === 'bug'"
|
||||
v-model="form.url"
|
||||
:label="$t('clientTicket.url')"
|
||||
input-class="w-full"
|
||||
/>
|
||||
|
||||
<!-- Documents : uploadable only once the ticket exists -->
|
||||
<div v-if="createdTicketId">
|
||||
<p class="text-sm font-semibold text-neutral-700">{{ $t('taskDocuments.title') }}</p>
|
||||
<TaskDocumentUpload :client-ticket-id="createdTicketId" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<template #footer>
|
||||
<MalioButton
|
||||
v-if="!createdTicketId"
|
||||
:label="$t('common.submit')"
|
||||
button-class="w-auto px-6"
|
||||
:disabled="isSubmitting"
|
||||
@click="handleSubmit"
|
||||
/>
|
||||
<MalioButton
|
||||
v-else
|
||||
:label="$t('common.close')"
|
||||
button-class="w-auto px-6"
|
||||
@click="finish"
|
||||
/>
|
||||
</template>
|
||||
</AppModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
ClientTicketCreate,
|
||||
ClientTicketType,
|
||||
} from '~/modules/client-portal/services/dto/client-ticket'
|
||||
import { useClientTicketService } from '~/modules/client-portal/services/client-tickets'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
projectIri: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
created: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { create } = useClientTicketService()
|
||||
|
||||
const typeOptions = computed(() => ([
|
||||
{ label: t('clientTicket.type.bug'), value: 'bug' },
|
||||
{ label: t('clientTicket.type.improvement'), value: 'improvement' },
|
||||
{ label: t('clientTicket.type.other'), value: 'other' },
|
||||
]))
|
||||
|
||||
const isSubmitting = ref(false)
|
||||
const createdTicketId = ref<number | null>(null)
|
||||
|
||||
const form = reactive({
|
||||
type: 'bug' as ClientTicketType,
|
||||
title: '',
|
||||
description: '',
|
||||
url: '',
|
||||
})
|
||||
|
||||
const touched = reactive({
|
||||
title: false,
|
||||
description: false,
|
||||
})
|
||||
|
||||
function resetForm() {
|
||||
form.type = 'bug'
|
||||
form.title = ''
|
||||
form.description = ''
|
||||
form.url = ''
|
||||
touched.title = false
|
||||
touched.description = false
|
||||
createdTicketId.value = null
|
||||
isSubmitting.value = false
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, (open) => {
|
||||
if (open) {
|
||||
resetForm()
|
||||
}
|
||||
})
|
||||
|
||||
function onModalUpdate(value: boolean) {
|
||||
emit('update:modelValue', value)
|
||||
if (!value && createdTicketId.value) {
|
||||
// A ticket was created before closing → refresh the list.
|
||||
emit('created')
|
||||
}
|
||||
}
|
||||
|
||||
function finish() {
|
||||
emit('update:modelValue', false)
|
||||
emit('created')
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
touched.title = true
|
||||
touched.description = true
|
||||
if (!form.title.trim() || !form.description.trim()) {
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
try {
|
||||
const payload: ClientTicketCreate = {
|
||||
type: form.type,
|
||||
title: form.title.trim(),
|
||||
description: form.description.trim(),
|
||||
url: form.type === 'bug' && form.url.trim() ? form.url.trim() : null,
|
||||
project: props.projectIri,
|
||||
}
|
||||
const ticket = await create(payload)
|
||||
createdTicketId.value = ticket.id
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold"
|
||||
:class="classes"
|
||||
>
|
||||
{{ $t(`clientTicket.status.${status}`) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ClientTicketStatus } from '~/modules/client-portal/services/dto/client-ticket'
|
||||
|
||||
const props = defineProps<{
|
||||
status: ClientTicketStatus
|
||||
}>()
|
||||
|
||||
const STATUS_CONFIG: Record<ClientTicketStatus, string> = {
|
||||
new: 'bg-sky-100 text-sky-700',
|
||||
in_progress: 'bg-amber-100 text-amber-700',
|
||||
done: 'bg-green-100 text-green-700',
|
||||
rejected: 'bg-neutral-200 text-neutral-600',
|
||||
}
|
||||
|
||||
const classes = computed(() => STATUS_CONFIG[props.status] ?? STATUS_CONFIG.new)
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold"
|
||||
:class="config.classes"
|
||||
>
|
||||
<Icon :name="config.icon" class="h-3 w-3" />
|
||||
{{ $t(`clientTicket.type.${type}`) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ClientTicketType } from '~/modules/client-portal/services/dto/client-ticket'
|
||||
|
||||
const props = defineProps<{
|
||||
type: ClientTicketType
|
||||
}>()
|
||||
|
||||
const TYPE_CONFIG: Record<ClientTicketType, { icon: string, classes: string }> = {
|
||||
bug: { icon: 'mdi:bug-outline', classes: 'bg-red-100 text-red-700' },
|
||||
improvement: { icon: 'mdi:lightbulb-on-outline', classes: 'bg-blue-100 text-blue-700' },
|
||||
other: { icon: 'mdi:dots-horizontal-circle-outline', classes: 'bg-neutral-100 text-neutral-700' },
|
||||
}
|
||||
|
||||
const config = computed(() => TYPE_CONFIG[props.type] ?? TYPE_CONFIG.other)
|
||||
</script>
|
||||
Reference in New Issue
Block a user