tristan
4d20583e1b
Le passage d'un tiers de LCR vers virement (ou autre) supprimait ses RIB en base via le front (DELETE differe). Le RIB est une coordonnee bancaire du tiers, decouplee du mode de reglement : on le conserve desormais pour un eventuel retour en LCR. Clients ET fournisseurs (new.vue / [id]/edit.vue) : - onPaymentTypeChange ne marque plus les RIB existants pour suppression et ne vide plus la saisie ; les RIB sont seulement masques (visibleRibs) et reapparaissent tels quels au retour LCR. - submitAccounting ne (re)soumet les RIB que sous LCR ; seules les suppressions EXPLICITES (corbeille d'un bloc) restent en DELETE. Consultation ([id]/index.vue) : RIB dormants totalement masques hors-LCR, via le helper pur type-safe paymentTypeCodeOf (clientConsultation / supplierConsultation) + tests Vitest. Aucune modification back (RG LCR -> >=1 RIB deja correcte, rien n'interdit un RIB sur un tiers non-LCR) ni migration.
1026 lines
47 KiB
Vue
1026 lines
47 KiB
Vue
<template>
|
|
<div>
|
|
<!-- En-tete : retour vers le repertoire + titre. -->
|
|
<div class="flex items-center gap-3 pt-11">
|
|
<MalioButtonIcon
|
|
icon="mdi:arrow-left-bold"
|
|
icon-size="24"
|
|
variant="ghost"
|
|
v-bind="{ ariaLabel: t('commercial.clients.form.back') }"
|
|
@click="goBack"
|
|
/>
|
|
<h1 class="text-[30px] font-semibold text-m-primary">{{ t('commercial.clients.form.title') }}</h1>
|
|
</div>
|
|
|
|
<!-- ── Formulaire principal (pre-onglets) ─────────────────────────────
|
|
Sans validation de ce bloc, les onglets restent inaccessibles. Au
|
|
succes du POST, les champs passent en lecture seule et on bascule
|
|
automatiquement sur l'onglet Information. -->
|
|
<div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
|
|
<MalioInputText
|
|
v-model="main.companyName"
|
|
:label="t('commercial.clients.form.main.companyName')"
|
|
:required="true"
|
|
:readonly="mainLocked"
|
|
:error="mainErrors.errors.companyName"
|
|
/>
|
|
<MalioSelectCheckbox
|
|
:model-value="main.categoryIris"
|
|
:options="referentials.categories.value"
|
|
:label="t('commercial.clients.form.main.categories')"
|
|
:display-tag="true"
|
|
:readonly="mainLocked"
|
|
:required="true"
|
|
:error="mainErrors.errors.categories"
|
|
@update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
|
|
/>
|
|
<MalioSelect
|
|
v-if="showRelationAndTriage"
|
|
:model-value="main.relationType"
|
|
:options="relationOptions"
|
|
:label="t('commercial.clients.form.main.relation')"
|
|
:empty-option-label="t('commercial.clients.form.main.relationNone')"
|
|
:readonly="mainLocked"
|
|
@update:model-value="onRelationChange"
|
|
/>
|
|
<MalioSelect
|
|
v-if="showRelationAndTriage && main.relationType === 'courtier'"
|
|
:model-value="main.brokerIri"
|
|
:options="referentials.brokers.value"
|
|
:label="t('commercial.clients.form.main.brokerName')"
|
|
:readonly="mainLocked"
|
|
:required="true"
|
|
:error="mainErrors.errors.broker"
|
|
@update:model-value="(v: string | number | null) => main.brokerIri = v === null ? null : String(v)"
|
|
/>
|
|
<MalioSelect
|
|
v-if="showRelationAndTriage && main.relationType === 'distributeur'"
|
|
:model-value="main.distributorIri"
|
|
:options="referentials.distributors.value"
|
|
:label="t('commercial.clients.form.main.distributorName')"
|
|
:readonly="mainLocked"
|
|
:required="true"
|
|
:error="mainErrors.errors.distributor"
|
|
@update:model-value="(v: string | number | null) => main.distributorIri = v === null ? null : String(v)"
|
|
/>
|
|
<MalioCheckbox
|
|
v-if="showRelationAndTriage"
|
|
v-model="main.triageService"
|
|
:label="t('commercial.clients.form.main.triageService')"
|
|
group-class="self-center"
|
|
:readonly="mainLocked"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="!mainLocked" class="mt-12 flex justify-center">
|
|
<MalioButton
|
|
variant="primary"
|
|
:label="t('commercial.clients.form.submit')"
|
|
:disabled="mainSubmitting"
|
|
@click="submitMain"
|
|
/>
|
|
</div>
|
|
|
|
<!-- ── Onglets a validation incrementale ─────────────────────────────-->
|
|
<MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
|
|
<!-- Onglet Information -->
|
|
<template #information>
|
|
<div class="mt-12 grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
|
|
<!-- pt-1/pb-1 alignent le textarea (h-full) sur les inputs, dont
|
|
le champ de 40px est centre dans un conteneur h-12 (~4px de
|
|
coussin en HAUT et en BAS). Sans pb-1, le textarea descend ~4px
|
|
plus bas que les champs voisins. -->
|
|
<MalioInputTextArea
|
|
v-model="information.description"
|
|
:label="t('commercial.clients.form.information.description')"
|
|
resize="none"
|
|
group-class="row-span-2 pt-1 pb-1"
|
|
text-input="h-full text-lg"
|
|
:readonly="isValidated('information')"
|
|
:error="informationErrors.errors.description"
|
|
/>
|
|
<MalioInputText
|
|
v-model="information.competitors"
|
|
:label="t('commercial.clients.form.information.competitors')"
|
|
:readonly="isValidated('information')"
|
|
:error="informationErrors.errors.competitors"
|
|
/>
|
|
<MalioDate
|
|
v-model="information.foundedAt"
|
|
:label="t('commercial.clients.form.information.foundedAt')"
|
|
:readonly="isValidated('information')"
|
|
:editable="true"
|
|
:error="informationErrors.errors.foundedAt"
|
|
/>
|
|
<MalioInputText
|
|
v-model="information.employeesCount"
|
|
:label="t('commercial.clients.form.information.employeesCount')"
|
|
:mask="EMPLOYEES_MASK"
|
|
:readonly="isValidated('information')"
|
|
:error="informationErrors.errors.employeesCount"
|
|
/>
|
|
<MalioInputAmount
|
|
v-model="information.revenueAmount"
|
|
:label="t('commercial.clients.form.information.revenueAmount')"
|
|
:readonly="isValidated('information')"
|
|
:error="informationErrors.errors.revenueAmount"
|
|
/>
|
|
<MalioInputText
|
|
v-model="information.directorName"
|
|
:label="t('commercial.clients.form.information.directorName')"
|
|
:readonly="isValidated('information')"
|
|
:error="informationErrors.errors.directorName"
|
|
/>
|
|
<MalioInputAmount
|
|
v-model="information.profitAmount"
|
|
:label="t('commercial.clients.form.information.profitAmount')"
|
|
:readonly="isValidated('information')"
|
|
:error="informationErrors.errors.profitAmount"
|
|
/>
|
|
</div>
|
|
<div v-if="!isValidated('information')" class="mt-12 flex justify-center">
|
|
<!-- Desactive tant que le client n'est pas cree (evite un PATCH
|
|
avant le POST si clic trop tot, Information etant l'onglet
|
|
actif par defaut). Onglet facultatif : un enregistrement a
|
|
vide reste possible, c'est le back qui valide. -->
|
|
<MalioButton
|
|
variant="primary"
|
|
:label="t('commercial.clients.form.submit')"
|
|
:disabled="tabSubmitting || clientId === null"
|
|
@click="submitInformation"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Onglet Contact -->
|
|
<template #contact>
|
|
<div class="mt-12 flex flex-col gap-6">
|
|
<ClientContactBlock
|
|
v-for="(contact, index) in contacts"
|
|
:key="index"
|
|
:model-value="contact"
|
|
:title="t('commercial.clients.form.contact.title', { n: index + 1 })"
|
|
:removable="index > 0"
|
|
:readonly="isValidated('contact')"
|
|
:errors="contactErrors[index]"
|
|
@update:model-value="(v) => contacts[index] = v"
|
|
@remove="askRemoveContact(index)"
|
|
/>
|
|
<div v-if="!isValidated('contact')" class="flex justify-center gap-6">
|
|
<MalioButton
|
|
variant="secondary"
|
|
icon-name="mdi:add-bold"
|
|
icon-position="left"
|
|
:label="t('commercial.clients.form.contact.add')"
|
|
:disabled="!canAddContact"
|
|
@click="addContact"
|
|
/>
|
|
<MalioButton
|
|
variant="primary"
|
|
:label="t('commercial.clients.form.submit')"
|
|
:disabled="tabSubmitting"
|
|
@click="submitContacts"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Onglet Adresse -->
|
|
<template #address>
|
|
<div class="mt-12 flex flex-col gap-6">
|
|
<ClientAddressBlock
|
|
v-for="(address, index) in addresses"
|
|
:key="index"
|
|
:model-value="address"
|
|
:title="t('commercial.clients.form.address.title', { n: index + 1 })"
|
|
:category-options="addressCategoryOptions"
|
|
:site-options="referentials.sites.value"
|
|
:contact-options="contactOptions"
|
|
:country-options="countryOptions"
|
|
:removable="index > 0"
|
|
:readonly="isValidated('address')"
|
|
:errors="addressErrors[index]"
|
|
@update:model-value="(v) => addresses[index] = v"
|
|
@remove="askRemoveAddress(index)"
|
|
@degraded="onAddressDegraded"
|
|
/>
|
|
<div v-if="!isValidated('address')" class="flex justify-center gap-6">
|
|
<MalioButton
|
|
variant="secondary"
|
|
icon-name="mdi:add-bold"
|
|
icon-position="left"
|
|
:label="t('commercial.clients.form.address.add')"
|
|
:disabled="!canAddAddress"
|
|
@click="addAddress"
|
|
/>
|
|
<MalioButton
|
|
variant="primary"
|
|
:label="t('commercial.clients.form.submit')"
|
|
:disabled="tabSubmitting"
|
|
@click="submitAddresses"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Onglet Comptabilite (present uniquement si accounting.view) -->
|
|
<template v-if="canAccountingView" #accounting>
|
|
<div class="mt-12 flex flex-col gap-6">
|
|
<div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
|
|
<div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
|
|
<MalioInputText
|
|
v-model="accounting.siren"
|
|
:label="t('commercial.clients.form.accounting.siren')"
|
|
:mask="SIREN_MASK"
|
|
:readonly="accountingReadonly"
|
|
:required="true"
|
|
:error="accountingErrors.errors.siren"
|
|
/>
|
|
<MalioInputText
|
|
v-model="accounting.accountNumber"
|
|
:label="t('commercial.clients.form.accounting.accountNumber')"
|
|
:readonly="accountingReadonly"
|
|
:required="true"
|
|
:error="accountingErrors.errors.accountNumber"
|
|
/>
|
|
<MalioSelect
|
|
:model-value="accounting.tvaModeIri"
|
|
:options="referentials.tvaModes.value"
|
|
:label="t('commercial.clients.form.accounting.tvaMode')"
|
|
:readonly="accountingReadonly"
|
|
empty-option-label=""
|
|
:required="true"
|
|
:error="accountingErrors.errors.tvaMode"
|
|
@update:model-value="(v: string | number | null) => accounting.tvaModeIri = v === null ? null : String(v)"
|
|
/>
|
|
<MalioInputText
|
|
v-model="accounting.nTva"
|
|
:label="t('commercial.clients.form.accounting.nTva')"
|
|
:readonly="accountingReadonly"
|
|
:required="true"
|
|
:error="accountingErrors.errors.nTva"
|
|
/>
|
|
<MalioSelect
|
|
:model-value="accounting.paymentDelayIri"
|
|
:options="referentials.paymentDelays.value"
|
|
:label="t('commercial.clients.form.accounting.paymentDelay')"
|
|
:readonly="accountingReadonly"
|
|
empty-option-label=""
|
|
:required="true"
|
|
:error="accountingErrors.errors.paymentDelay"
|
|
@update:model-value="(v: string | number | null) => accounting.paymentDelayIri = v === null ? null : String(v)"
|
|
/>
|
|
<MalioSelect
|
|
:model-value="accounting.paymentTypeIri"
|
|
:options="referentials.paymentTypes.value"
|
|
:label="t('commercial.clients.form.accounting.paymentType')"
|
|
:readonly="accountingReadonly"
|
|
empty-option-label=""
|
|
:required="true"
|
|
:error="accountingErrors.errors.paymentType"
|
|
@update:model-value="onPaymentTypeChange"
|
|
/>
|
|
<MalioSelect
|
|
v-if="isBankRequired"
|
|
:model-value="accounting.bankIri"
|
|
:options="referentials.banks.value"
|
|
:label="t('commercial.clients.form.accounting.bank')"
|
|
:readonly="accountingReadonly"
|
|
empty-option-label=""
|
|
:required="true"
|
|
:error="accountingErrors.errors.bank"
|
|
@update:model-value="(v: string | number | null) => accounting.bankIri = v === null ? null : String(v)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-1.13). -->
|
|
<div
|
|
v-for="(rib, index) in visibleRibs"
|
|
:key="index"
|
|
class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
|
|
>
|
|
<!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
|
|
<MalioButtonIcon
|
|
v-if="!accountingReadonly && visibleRibs.length > 1"
|
|
icon="mdi:delete-outline"
|
|
variant="ghost"
|
|
button-class="absolute top-3 right-3"
|
|
v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
|
|
@click="askRemoveRib(index)"
|
|
/>
|
|
<div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
|
|
<MalioInputText
|
|
v-model="rib.label"
|
|
:label="t('commercial.clients.form.accounting.ribLabel')"
|
|
:readonly="accountingReadonly"
|
|
:required="isRibRequired"
|
|
:error="ribErrors[index]?.label"
|
|
/>
|
|
<MalioInputText
|
|
v-model="rib.bic"
|
|
:label="t('commercial.clients.form.accounting.ribBic')"
|
|
:readonly="accountingReadonly"
|
|
:required="isRibRequired"
|
|
:error="ribErrors[index]?.bic"
|
|
/>
|
|
<MalioInputText
|
|
v-model="rib.iban"
|
|
:label="t('commercial.clients.form.accounting.ribIban')"
|
|
:readonly="accountingReadonly"
|
|
:required="isRibRequired"
|
|
:error="ribErrors[index]?.iban"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!accountingReadonly" class="flex justify-center gap-6">
|
|
<MalioButton
|
|
v-if="isRibRequired"
|
|
variant="secondary"
|
|
icon-name="mdi:add-bold"
|
|
icon-position="left"
|
|
:label="t('commercial.clients.form.accounting.addRib')"
|
|
:disabled="!canAddRib"
|
|
@click="addRib"
|
|
/>
|
|
<MalioButton
|
|
variant="primary"
|
|
:label="t('commercial.clients.form.submit')"
|
|
:disabled="tabSubmitting"
|
|
@click="submitAccounting"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Onglet non encore implemente : frame vide, passage automatique.
|
|
Statistiques / Rapports / Echanges sont edit-only (absents a la
|
|
creation) — cf. buildClientFormTabKeys. -->
|
|
<template #transport><ComingSoonPlaceholder /></template>
|
|
</MalioTabList>
|
|
|
|
<!-- Modal de confirmation generique (suppression contact/adresse/RIB). -->
|
|
<MalioModal v-model="confirmModal.open" modal-class="max-w-md">
|
|
<template #header>
|
|
<h2 class="text-[24px] font-bold">{{ t('commercial.clients.form.confirmDelete.title') }}</h2>
|
|
</template>
|
|
<p>{{ confirmModal.message }}</p>
|
|
<template #footer>
|
|
<MalioButton
|
|
variant="secondary"
|
|
button-class="flex-1"
|
|
:label="t('commercial.clients.form.confirmDelete.cancel')"
|
|
@click="confirmModal.open = false"
|
|
/>
|
|
<MalioButton
|
|
variant="danger"
|
|
button-class="flex-1"
|
|
:label="t('commercial.clients.form.confirmDelete.confirm')"
|
|
@click="runConfirm"
|
|
/>
|
|
</template>
|
|
</MalioModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
|
import { useClientReferentials, type RefOption } from '~/modules/commercial/composables/useClientReferentials'
|
|
import { useClientFormErrors } from '~/modules/commercial/composables/useClientFormErrors'
|
|
import {
|
|
buildClientFormTabKeys,
|
|
CLIENT_FORM_PLACEHOLDER_TABS,
|
|
isAddressValid,
|
|
isBankRequiredForPaymentType,
|
|
isBillingEmailRequired,
|
|
isContactBlank,
|
|
isContactNamed,
|
|
isRibBlank,
|
|
isRibComplete,
|
|
isRibRequiredForPaymentType,
|
|
lastFillableTabKey,
|
|
showsRelationAndTriageFields,
|
|
} from '~/modules/commercial/utils/clientFormRules'
|
|
import {
|
|
buildAddressPayload,
|
|
buildMainPayload,
|
|
buildRibPayload,
|
|
} from '~/modules/commercial/utils/clientEdit'
|
|
import {
|
|
emptyAddress,
|
|
emptyContact,
|
|
emptyRib,
|
|
type AddressFormDraft,
|
|
type ContactFormDraft,
|
|
type RibFormDraft,
|
|
} from '~/modules/commercial/types/clientForm'
|
|
import { extractApiErrorMessage } from '~/shared/utils/api'
|
|
|
|
// Masques de saisie (la normalisation finale reste serveur).
|
|
const SIREN_MASK = '#########'
|
|
// Masque « nombre » du champ Nombre de salaries : chiffres uniquement (max 7).
|
|
const EMPLOYEES_MASK = '#######'
|
|
|
|
// Codes de categorie interdits sur une adresse (RG-1.29, ERP-78).
|
|
const FORBIDDEN_ADDRESS_CATEGORY_CODES = ['DISTRIBUTEUR', 'COURTIER']
|
|
|
|
const { t } = useI18n()
|
|
const api = useApi()
|
|
const toast = useToast()
|
|
const router = useRouter()
|
|
const { can } = usePermissions()
|
|
|
|
/** Retour vers le repertoire clients (fleche d'en-tete). */
|
|
function goBack(): void {
|
|
router.push('/clients')
|
|
}
|
|
|
|
/**
|
|
* Message d'erreur a afficher dans un toast a partir d'une erreur d'API.
|
|
* Retourne TOUJOURS une chaine (le composant de toast plante sur `undefined`) :
|
|
* le message de validation renvoye par le serveur (violations 422 / detail),
|
|
* sinon un libelle generique.
|
|
*/
|
|
function apiErrorMessage(error: unknown): string {
|
|
const data = (error as { data?: unknown })?.data
|
|
return extractApiErrorMessage(data) || t('commercial.clients.toast.error')
|
|
}
|
|
|
|
// ── Erreurs de validation par champ (ERP-101) ───────────────────────────────
|
|
// Etat d'erreurs factorise entre creation et edition (cf. useClientFormErrors) :
|
|
// un `useFormErrors` par groupe scalaire (Principal / Information / Comptabilite)
|
|
// + un tableau d'erreurs par ligne pour chaque collection (contacts/adresses/RIB).
|
|
// `mapRowError` mappe une 422 inline et retourne true ; il ne toaste pas, le
|
|
// fallback reste local a la creation (cf. catch des submits de collection).
|
|
const {
|
|
mainErrors,
|
|
informationErrors,
|
|
accountingErrors,
|
|
contactErrors,
|
|
addressErrors,
|
|
ribErrors,
|
|
submitRows,
|
|
} = useClientFormErrors()
|
|
|
|
useHead({ title: t('commercial.clients.form.title') })
|
|
|
|
// Gating de la route : la creation est reservee a `manage`. Compta (accounting
|
|
// seul) et Usine sont rediriges vers le repertoire (cf. §0 du ticket).
|
|
if (!can('commercial.clients.manage')) {
|
|
await navigateTo('/clients')
|
|
}
|
|
|
|
const canAccountingView = computed(() => can('commercial.clients.accounting.view'))
|
|
const canAccountingManage = computed(() => can('commercial.clients.accounting.manage'))
|
|
|
|
const referentials = useClientReferentials()
|
|
|
|
// ── Etat du client cree ────────────────────────────────────────────────────
|
|
const clientId = ref<number | null>(null)
|
|
const mainLocked = ref(false)
|
|
const mainSubmitting = ref(false)
|
|
const tabSubmitting = ref(false)
|
|
|
|
// ── Formulaire principal ────────────────────────────────────────────────────
|
|
const main = reactive({
|
|
companyName: null as string | null,
|
|
categoryIris: [] as string[],
|
|
relationType: null as 'distributeur' | 'courtier' | null,
|
|
distributorIri: null as string | null,
|
|
brokerIri: null as string | null,
|
|
triageService: false,
|
|
})
|
|
|
|
// Pas d'option « Aucun » : le select est vide par defaut (relationType = null).
|
|
const relationOptions = computed<RefOption[]>(() => [
|
|
{ value: 'distributeur', label: t('commercial.clients.form.main.relationDistributor') },
|
|
{ value: 'courtier', label: t('commercial.clients.form.main.relationBroker') },
|
|
])
|
|
|
|
// Codes des categories selectionnees (resolus depuis les IRI du brouillon).
|
|
const selectedCategoryCodes = computed(() =>
|
|
main.categoryIris
|
|
.map(iri => referentials.categories.value.find(c => c.value === iri)?.code)
|
|
.filter((code): code is string => code !== undefined),
|
|
)
|
|
|
|
// « Relation » + « Prestation de triage » masques par defaut, reveles des qu'une
|
|
// categorie ordinaire (autre que Distributeur/Courtier) est selectionnee.
|
|
const showRelationAndTriage = computed(() => showsRelationAndTriageFields(selectedCategoryCodes.value))
|
|
|
|
// Masquer ces champs reinitialise leurs valeurs : pas de relation/triage fantome
|
|
// soumis pour un client Distributeur/Courtier.
|
|
watch(showRelationAndTriage, (visible) => {
|
|
if (!visible) {
|
|
main.relationType = null
|
|
main.distributorIri = null
|
|
main.brokerIri = null
|
|
main.triageService = false
|
|
}
|
|
})
|
|
|
|
async function onRelationChange(value: string | number | null): Promise<void> {
|
|
const relation = (value === null || value === '')
|
|
? null
|
|
: (String(value) as 'distributeur' | 'courtier')
|
|
main.relationType = relation
|
|
// Reinitialise la FK non concernee (une seule remplie a la fois, RG-1.03).
|
|
if (relation !== 'distributeur') main.distributorIri = null
|
|
if (relation !== 'courtier') main.brokerIri = null
|
|
|
|
if (relation === 'distributeur') await referentials.loadDistributors()
|
|
if (relation === 'courtier') await referentials.loadBrokers()
|
|
}
|
|
|
|
/** POST /clients (groupe client:write:main). Au succes : verrouille + bascule Information. */
|
|
async function submitMain(): Promise<void> {
|
|
if (mainSubmitting.value) return
|
|
mainSubmitting.value = true
|
|
mainErrors.clearErrors()
|
|
try {
|
|
// Payload partage avec l'edition (buildMainPayload) : meme logique
|
|
// d'omission des requis vides et meme envoi de relationType (ERP-119).
|
|
const created = await api.post<ClientResponse>('/clients', buildMainPayload(main), {
|
|
headers: { Accept: 'application/ld+json' },
|
|
toast: false,
|
|
})
|
|
|
|
clientId.value = created.id
|
|
// Reaffiche la valeur normalisee renvoyee par le serveur.
|
|
main.companyName = created.companyName ?? main.companyName
|
|
|
|
mainLocked.value = true
|
|
// Information est facultatif : on deverrouille jusqu'a Contact (index 1)
|
|
// pour que l'utilisateur puisse y aller directement sans valider Information.
|
|
unlockedIndex.value = tabIndex('contact')
|
|
activeTab.value = 'information'
|
|
toast.success({ title: t('commercial.clients.toast.createSuccess') })
|
|
}
|
|
catch (error) {
|
|
// 409 = doublon nom de societe (RG d'unicite) → erreur inline sur le
|
|
// champ + toast explicite ; 422 → mapping inline par champ (pas de
|
|
// toast) ; autre → toast de fallback. Cf. ERP-101.
|
|
const status = (error as { response?: { status?: number } })?.response?.status
|
|
if (status === 409) {
|
|
const message = t('commercial.clients.form.duplicateCompany')
|
|
mainErrors.setError('companyName', message)
|
|
toast.error({ title: t('commercial.clients.toast.error'), message })
|
|
}
|
|
else {
|
|
mainErrors.handleApiError(error, { fallbackMessage: t('commercial.clients.toast.error') })
|
|
}
|
|
}
|
|
finally {
|
|
mainSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// ── Onglets : ordre + gating progressif ─────────────────────────────────────
|
|
const activeTab = ref('information')
|
|
// Index du dernier onglet deverrouille (-1 tant que le client n'est pas cree).
|
|
const unlockedIndex = ref(-1)
|
|
// Onglets valides (passent en lecture seule).
|
|
const validated = reactive<Record<string, boolean>>({})
|
|
|
|
const tabKeys = computed(() => buildClientFormTabKeys(canAccountingView.value))
|
|
|
|
// Dernier onglet REMPLISSABLE par le role (cf. lastFillableTabKey) : deja role-aware
|
|
// via tabKeys (accounting present ssi accounting.view, et a la creation « present » =
|
|
// « editable » : aucun role createur n'a la Compta en lecture seule). Sa validation
|
|
// cloture l'ajout -> redirection vers la liste.
|
|
const lastFillableTab = computed(() => lastFillableTabKey(tabKeys.value))
|
|
|
|
// Icone (Iconify) affichee dans l'onglet, par cle. A ajuster librement.
|
|
const TAB_ICONS: Record<string, string> = {
|
|
information: 'mdi:account-outline',
|
|
contact: 'mdi:account-box-plus-outline',
|
|
address: 'mdi:map-marker-outline',
|
|
transport: 'mdi:truck-delivery-outline',
|
|
accounting: 'mdi:bank-circle-outline',
|
|
statistics: 'mdi:finance',
|
|
reports: 'mdi:file-document-edit-outline',
|
|
exchanges: 'mdi:account-group-outline',
|
|
}
|
|
|
|
const tabs = computed(() => tabKeys.value.map((key, index) => ({
|
|
key,
|
|
label: t(`commercial.clients.tab.${key}`),
|
|
icon: TAB_ICONS[key],
|
|
disabled: index > unlockedIndex.value,
|
|
})))
|
|
|
|
function isValidated(key: string): boolean {
|
|
return validated[key] === true
|
|
}
|
|
|
|
function tabIndex(key: string): number {
|
|
return tabKeys.value.indexOf(key)
|
|
}
|
|
|
|
/**
|
|
* Marque l'onglet valide. Si c'est le dernier onglet remplissable, l'ajout est
|
|
* termine : toast final + redirection vers la liste, et on retourne true pour que
|
|
* l'appelant n'affiche pas son toast « mis a jour ». Sinon, deverrouille et avance
|
|
* a l'onglet suivant, et retourne false.
|
|
*/
|
|
function completeTab(key: string): boolean {
|
|
validated[key] = true
|
|
if (key === lastFillableTab.value) {
|
|
toast.success({ title: t('commercial.clients.toast.addComplete') })
|
|
router.push('/clients')
|
|
return true
|
|
}
|
|
const next = tabKeys.value[tabIndex(key) + 1]
|
|
unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
|
|
if (next) activeTab.value = next
|
|
return false
|
|
}
|
|
|
|
// Passage automatique sur les onglets coquille (Transport, Stats, Rapports, Echanges).
|
|
watch(activeTab, (key) => {
|
|
if ((CLIENT_FORM_PLACEHOLDER_TABS as readonly string[]).includes(key)) {
|
|
const next = tabKeys.value[tabIndex(key) + 1]
|
|
unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
|
|
if (next) activeTab.value = next
|
|
}
|
|
})
|
|
|
|
// ── Onglet Information ──────────────────────────────────────────────────────
|
|
const information = reactive({
|
|
description: null as string | null,
|
|
competitors: null as string | null,
|
|
foundedAt: null as string | null,
|
|
employeesCount: null as string | null,
|
|
revenueAmount: null as string | null,
|
|
profitAmount: null as string | null,
|
|
directorName: null as string | null,
|
|
})
|
|
|
|
/** PATCH /clients/{id} — mode strict : uniquement les champs du groupe information. */
|
|
async function submitInformation(): Promise<void> {
|
|
if (clientId.value === null || tabSubmitting.value) return
|
|
tabSubmitting.value = true
|
|
informationErrors.clearErrors()
|
|
try {
|
|
await api.patch(`/clients/${clientId.value}`, {
|
|
description: information.description || null,
|
|
competitors: information.competitors || null,
|
|
foundedAt: information.foundedAt || null,
|
|
employeesCount: information.employeesCount ? Number(information.employeesCount) : null,
|
|
revenueAmount: information.revenueAmount || null,
|
|
profitAmount: information.profitAmount || null,
|
|
directorName: information.directorName || null,
|
|
}, { toast: false })
|
|
if (completeTab('information')) return
|
|
toast.success({ title: t('commercial.clients.toast.updateSuccess') })
|
|
}
|
|
catch (error) {
|
|
informationErrors.handleApiError(error, { fallbackMessage: t('commercial.clients.toast.error') })
|
|
}
|
|
finally {
|
|
tabSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// ── Onglet Contact ──────────────────────────────────────────────────────────
|
|
// Au moins un bloc Contact vide au depart : c'est desormais le seul point de
|
|
// saisie des coordonnees (le bloc principal ne porte plus de contact inline).
|
|
const contacts = ref<ContactFormDraft[]>([emptyContact()])
|
|
|
|
// « + Nouveau contact » desactive tant que le dernier bloc n'a ni nom ni prenom.
|
|
const canAddContact = computed(() => {
|
|
const last = contacts.value[contacts.value.length - 1]
|
|
return last !== undefined && isContactNamed(last)
|
|
})
|
|
|
|
function addContact(): void {
|
|
if (canAddContact.value) contacts.value.push(emptyContact())
|
|
}
|
|
|
|
function askRemoveContact(index: number): void {
|
|
askConfirm(t('commercial.clients.form.confirmDelete.contact'), () => {
|
|
contacts.value.splice(index, 1)
|
|
contactErrors.value.splice(index, 1)
|
|
})
|
|
}
|
|
|
|
/** POST/PATCH des contacts sur la sous-ressource /clients/{id}/contacts. */
|
|
async function submitContacts(): Promise<void> {
|
|
if (clientId.value === null || tabSubmitting.value) return
|
|
tabSubmitting.value = true
|
|
try {
|
|
// RG-1.14 : au moins un contact requis. Si l'onglet ne contient QUE des
|
|
// amorces neuves vides, on ne les skippe pas -> le bloc vide est POSTe et
|
|
// le back renvoie la 422 RG-1.05 « prénom ou nom obligatoire » inline (la
|
|
// RG-1.14 n'a pas d'equivalent back au POST, on la materialise via RG-1.05).
|
|
const hasSubmittableContact = contacts.value.some(c => c.id !== null || !isContactBlank(c))
|
|
// On tente TOUS les blocs (collecte des erreurs par index, ERP-110). Seuls
|
|
// les blocs TOTALEMENT vides sont ignores : un bloc partiellement rempli
|
|
// sans nom (email seul) est soumis -> 422 RG-1.05 inline sous le bloc.
|
|
const hasError = await submitRows(
|
|
contacts.value,
|
|
contactErrors,
|
|
async (contact) => {
|
|
const body = {
|
|
firstName: contact.firstName || null,
|
|
lastName: contact.lastName || null,
|
|
jobTitle: contact.jobTitle || null,
|
|
phonePrimary: contact.phonePrimary || null,
|
|
phoneSecondary: contact.hasSecondaryPhone ? (contact.phoneSecondary || null) : null,
|
|
email: contact.email || null,
|
|
}
|
|
if (contact.id === null) {
|
|
const created = await api.post<ContactResponse>(
|
|
`/clients/${clientId.value}/contacts`,
|
|
body,
|
|
{ headers: { Accept: 'application/ld+json' }, toast: false },
|
|
)
|
|
contact.id = created.id
|
|
contact.iri = created['@id'] ?? null
|
|
}
|
|
else {
|
|
await api.patch(`/client_contacts/${contact.id}`, body, { toast: false })
|
|
}
|
|
},
|
|
error => toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) }),
|
|
// On ne saute une amorce neuve (id null) totalement vide QUE si un autre
|
|
// bloc sera soumis : sinon on la soumet pour declencher la 422 RG-1.05
|
|
// (un onglet Contact vide ne doit pas passer en faux succes).
|
|
contact => hasSubmittableContact && contact.id === null && isContactBlank(contact),
|
|
)
|
|
// Tant qu'un bloc reste en erreur : pas de validation d'onglet ni de toast succes.
|
|
if (hasError) return
|
|
if (completeTab('contact')) return
|
|
toast.success({ title: t('commercial.clients.toast.updateSuccess') })
|
|
}
|
|
finally {
|
|
tabSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// ── Onglet Adresse ──────────────────────────────────────────────────────────
|
|
const addresses = ref<AddressFormDraft[]>([emptyAddress()])
|
|
const addressDegradedNotified = ref(false)
|
|
|
|
// Categories autorisees sur une adresse : toutes SAUF DISTRIBUTEUR/COURTIER (RG-1.29).
|
|
const addressCategoryOptions = computed(() =>
|
|
referentials.categories.value.filter(c => !FORBIDDEN_ADDRESS_CATEGORY_CODES.includes(c.code)),
|
|
)
|
|
|
|
// Contacts deja crees, rattachables a une adresse (M2M, via leur IRI).
|
|
const contactOptions = computed<RefOption[]>(() =>
|
|
contacts.value
|
|
.filter(c => c.iri !== null)
|
|
.map(c => ({
|
|
value: c.iri as string,
|
|
label: [c.firstName, c.lastName].filter(Boolean).join(' ') || (c.email ?? ''),
|
|
})),
|
|
)
|
|
|
|
// Pays disponibles : referentiel `country` charge via l'API (ERP-116), en
|
|
// remplacement de l'ancienne liste codee en dur. France reste preselectionnee
|
|
// par defaut sur chaque adresse (cf. valeur initiale du draft d'adresse) : on
|
|
// garantit donc sa presence en fallback si `/countries` echoue (resilience
|
|
// ERP-102), pour ne pas afficher un select vide sur une valeur deja soumise.
|
|
const countryOptions = computed<RefOption[]>(() => {
|
|
const list = referentials.countries.value
|
|
return list.some(c => c.value === 'France')
|
|
? list
|
|
: [{ value: 'France', label: 'France' }, ...list]
|
|
})
|
|
|
|
// « + Adresse » desactive tant que la derniere adresse n'est pas valide.
|
|
const canAddAddress = computed(() => {
|
|
const last = addresses.value[addresses.value.length - 1]
|
|
return last !== undefined && isAddressValid(last)
|
|
})
|
|
|
|
function addAddress(): void {
|
|
if (canAddAddress.value) addresses.value.push(emptyAddress())
|
|
}
|
|
|
|
function askRemoveAddress(index: number): void {
|
|
askConfirm(t('commercial.clients.form.confirmDelete.address'), () => {
|
|
addresses.value.splice(index, 1)
|
|
addressErrors.value.splice(index, 1)
|
|
})
|
|
}
|
|
|
|
/** Avertit une seule fois quand l'autocompletion d'adresse bascule en degrade. */
|
|
function onAddressDegraded(): void {
|
|
if (addressDegradedNotified.value) return
|
|
addressDegradedNotified.value = true
|
|
toast.warning({
|
|
title: t('commercial.clients.toast.error'),
|
|
message: t('commercial.clients.form.address.degraded'),
|
|
})
|
|
}
|
|
|
|
/** POST des adresses sur la sous-ressource /clients/{id}/addresses. */
|
|
async function submitAddresses(): Promise<void> {
|
|
if (clientId.value === null || tabSubmitting.value) return
|
|
tabSubmitting.value = true
|
|
try {
|
|
// On tente TOUS les blocs d'adresse (collecte des erreurs par index, ERP-110).
|
|
const hasError = await submitRows(
|
|
addresses.value,
|
|
addressErrors,
|
|
async (address) => {
|
|
// Payload partage avec l'edition (buildAddressPayload, ERP-119).
|
|
const body = buildAddressPayload(address, isBillingEmailRequired(address))
|
|
if (address.id === null) {
|
|
const created = await api.post<{ id: number }>(
|
|
`/clients/${clientId.value}/addresses`,
|
|
body,
|
|
{ headers: { Accept: 'application/ld+json' }, toast: false },
|
|
)
|
|
address.id = created.id
|
|
}
|
|
else {
|
|
await api.patch(`/client_addresses/${address.id}`, body, { toast: false })
|
|
}
|
|
},
|
|
error => toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) }),
|
|
)
|
|
if (hasError) return
|
|
if (completeTab('address')) return
|
|
toast.success({ title: t('commercial.clients.toast.updateSuccess') })
|
|
}
|
|
finally {
|
|
tabSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// ── Onglet Comptabilite ─────────────────────────────────────────────────────
|
|
const accounting = reactive({
|
|
siren: null as string | null,
|
|
accountNumber: null as string | null,
|
|
tvaModeIri: null as string | null,
|
|
nTva: null as string | null,
|
|
paymentDelayIri: null as string | null,
|
|
paymentTypeIri: null as string | null,
|
|
bankIri: null as string | null,
|
|
})
|
|
const ribs = ref<RibFormDraft[]>([])
|
|
|
|
// L'onglet est editable seulement avec accounting.manage (sinon lecture seule).
|
|
const accountingReadonly = computed(() => isValidated('accounting') || !canAccountingManage.value)
|
|
|
|
// Code du type de reglement selectionne (pour RG-1.12 / RG-1.13).
|
|
const selectedPaymentTypeCode = computed(() =>
|
|
referentials.paymentTypes.value.find(p => p.value === accounting.paymentTypeIri)?.code ?? null,
|
|
)
|
|
const isBankRequired = computed(() => isBankRequiredForPaymentType(selectedPaymentTypeCode.value))
|
|
const isRibRequired = computed(() => isRibRequiredForPaymentType(selectedPaymentTypeCode.value))
|
|
|
|
// Les blocs RIB ne sont affiches que pour une LCR (RG-1.13).
|
|
const visibleRibs = computed(() => isRibRequired.value ? ribs.value : [])
|
|
|
|
function onPaymentTypeChange(value: string | number | null): void {
|
|
accounting.paymentTypeIri = value === null ? null : String(value)
|
|
// La banque n'a de sens que pour un virement : on la vide sinon (RG-1.12).
|
|
if (!isBankRequired.value) accounting.bankIri = null
|
|
// ERP-121 : on ne jette plus la saisie RIB au passage hors-LCR. Les blocs sont
|
|
// masques (visibleRibs = []) mais conserves, et reapparaissent si l'on repasse
|
|
// en LCR. Ils ne sont persistes qu'a la validation SOUS LCR (cf. submitAccounting),
|
|
// donc une saisie abandonnee hors-LCR ne cree aucun RIB orphelin.
|
|
if (isRibRequired.value) {
|
|
if (ribs.value.length === 0) ribs.value.push(emptyRib())
|
|
}
|
|
else {
|
|
ribErrors.value = []
|
|
}
|
|
}
|
|
|
|
// « + RIB » desactive tant que le dernier bloc RIB n'est pas complet.
|
|
const canAddRib = computed(() => {
|
|
const last = ribs.value[ribs.value.length - 1]
|
|
return last !== undefined && isRibComplete(last)
|
|
})
|
|
|
|
function addRib(): void {
|
|
if (canAddRib.value) ribs.value.push(emptyRib())
|
|
}
|
|
|
|
function askRemoveRib(index: number): void {
|
|
askConfirm(t('commercial.clients.form.confirmDelete.rib'), () => {
|
|
ribs.value.splice(index, 1)
|
|
ribErrors.value.splice(index, 1)
|
|
// Garde au moins un bloc RIB visible (cf. amorce au montage).
|
|
if (ribs.value.length === 0) ribs.value.push(emptyRib())
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Valide l'onglet Comptabilite : POST/PATCH des RIB sur /clients/{id}/ribs PUIS
|
|
* PATCH des scalaires (groupe client:write:accounting). Les RIB d'abord : le back
|
|
* valide RG-1.13 (LCR => au moins un RIB persiste) sur le PATCH scalaires, les RIB
|
|
* doivent donc exister en base AVANT (sinon 422 « Au moins un RIB est obligatoire
|
|
* pour le type de reglement LCR »). Deux appels distincts (mode strict RG-1.28 :
|
|
* il n'existe pas d'endpoint /accounting, cf. recon back).
|
|
*/
|
|
async function submitAccounting(): Promise<void> {
|
|
if (clientId.value === null || tabSubmitting.value) return
|
|
tabSubmitting.value = true
|
|
accountingErrors.clearErrors()
|
|
try {
|
|
// 1) POST/PATCH des RIB d'abord — UNIQUEMENT sous LCR (erreurs inline par
|
|
// ligne, tous les blocs tentes). Le back exige >=1 RIB persiste pour valider
|
|
// une LCR a l'etape 2. Hors-LCR (ERP-121), une saisie RIB eventuellement
|
|
// restee dans le brouillon est masquee et n'est PAS persistee (pas de RIB
|
|
// orphelin sur un client en virement).
|
|
// On ne saute une amorce neuve vide QUE s'il reste un autre RIB soumettable :
|
|
// sinon (LCR sans aucun RIB rempli) on la soumet -> 422 NotBlank inline.
|
|
if (isRibRequired.value) {
|
|
const hasSubmittableRib = ribs.value.some(r => r.id !== null || !isRibBlank(r))
|
|
const ribHasError = await submitRows(
|
|
ribs.value,
|
|
ribErrors,
|
|
async (rib) => {
|
|
// Payload partage avec l'edition (buildRibPayload, ERP-119).
|
|
const body = buildRibPayload(rib)
|
|
if (rib.id === null) {
|
|
const created = await api.post<{ id: number }>(
|
|
`/clients/${clientId.value}/ribs`,
|
|
body,
|
|
{ headers: { Accept: 'application/ld+json' }, toast: false },
|
|
)
|
|
rib.id = created.id
|
|
}
|
|
else {
|
|
await api.patch(`/client_ribs/${rib.id}`, body, { toast: false })
|
|
}
|
|
},
|
|
error => toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) }),
|
|
// On ne saute une amorce neuve (id null) totalement vide que si un autre RIB
|
|
// est soumettable. Un RIB existant vide est toujours soumis -> 422 NotBlank
|
|
// inline (sinon la modif serait perdue en silence avec un faux toast succes).
|
|
rib => hasSubmittableRib && rib.id === null && isRibBlank(rib),
|
|
)
|
|
if (ribHasError) return
|
|
}
|
|
|
|
// 2) PATCH des scalaires comptables (erreurs inline sur leurs champs).
|
|
try {
|
|
await api.patch(`/clients/${clientId.value}`, {
|
|
siren: accounting.siren || null,
|
|
accountNumber: accounting.accountNumber || null,
|
|
tvaMode: accounting.tvaModeIri,
|
|
nTva: accounting.nTva || null,
|
|
paymentDelay: accounting.paymentDelayIri,
|
|
paymentType: accounting.paymentTypeIri,
|
|
bank: isBankRequired.value ? accounting.bankIri : null,
|
|
}, { toast: false })
|
|
}
|
|
catch (error) {
|
|
accountingErrors.handleApiError(error, { fallbackMessage: t('commercial.clients.toast.error') })
|
|
return
|
|
}
|
|
|
|
if (completeTab('accounting')) return
|
|
toast.success({ title: t('commercial.clients.toast.updateSuccess') })
|
|
}
|
|
finally {
|
|
tabSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// ── Modal de confirmation generique ─────────────────────────────────────────
|
|
const confirmModal = reactive({
|
|
open: false,
|
|
message: '',
|
|
action: null as null | (() => void),
|
|
})
|
|
|
|
function askConfirm(message: string, action: () => void): void {
|
|
confirmModal.message = message
|
|
confirmModal.action = action
|
|
confirmModal.open = true
|
|
}
|
|
|
|
function runConfirm(): void {
|
|
confirmModal.action?.()
|
|
confirmModal.action = null
|
|
confirmModal.open = false
|
|
}
|
|
|
|
// ── Types de reponse API ────────────────────────────────────────────────────
|
|
interface ClientResponse {
|
|
id: number
|
|
companyName: string | null
|
|
}
|
|
|
|
interface ContactResponse {
|
|
'@id'?: string
|
|
id: number
|
|
}
|
|
|
|
onMounted(() => {
|
|
// Echec du chargement des referentiels non bloquant : les selects restent vides.
|
|
referentials.loadCommon().catch(() => {})
|
|
// Pas d'amorce de RIB ici : un bloc vide n'apparait que si LCR est choisi
|
|
// (cf. onPaymentTypeChange).
|
|
})
|
|
</script>
|