Lesstime/frontend/modules/client-portal/components/ClientTicketFormModal.vue

<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>