Files
Starseed/frontend/modules/catalog/components/ProductPlaceholderTabs.vue
T
tristan eb94204c55
Auto Tag Develop / tag (push) Successful in 37s
feat(catalog) : M6 — écran consultation produit + onglets conditionnés + édition sans redirection
- Nouvel écran de consultation lecture seule /admin/products/{id} (calque
  client/fournisseur) : clic sur une ligne ouvre la consultation (plus l'édition
  directe), bouton « Modifier » → édition.
- Règle ERP-193 en consultation : champs vides / checkbox non cochées masqués
  (isFilled) ; onglets vides masqués → les coquilles Fournisseurs/Clients
  (placeholder, module Contrat inexistant) ne sont pas rendues en consultation.
- Onglets Fournisseurs/Clients : non affichés à l'ajout (avant validation du
  formulaire principal) ; visibilité conditionnée par l'état (spec C3, « Aucun »
  = OTHER) : Fournisseurs si Achat/Aucun, Clients si Vendu/Aucun.
- Édition : après « Enregistrer » on reste sur l'écran (l'utilisateur garde la
  main, calque client/fournisseur) ; réaffichage des valeurs normalisées serveur
  (RG-6.07) via re-prefill, plus de redirection.
- i18n consultation + tests (consultation, onglets, no-redirect) ; spec écran 8.bis.
2026-06-27 17:18:53 +02:00

55 lines
2.4 KiB
Vue

<template>
<!--
Onglets « Fournisseurs » / « Clients » de la fiche produit HORS PERIMETRE
V0 (HP-M6-01, RG-6.10) : ils dependent d'un module Contrat inexistant.
Rendu en placeholder « en cours de développement » (meme composant que les
onglets non-dev des fiches M1→M4). AUCUN appel API, AUCUN champ saisissable.
Visibilite conditionnee par l'etat du produit (cf. spec C3, « Aucun » = OTHER) :
- « Fournisseurs » : visible si l'etat contient Achat (PURCHASE) ou Aucun (OTHER) ;
- « Clients » : visible si l'etat contient Vendu (SALE) ou Aucun (OTHER).
Si aucun onglet n'est applicable (etat vide), rien n'est rendu.
-->
<MalioTabList v-if="tabs.length" v-model="activeTab" :tabs="tabs" class="mt-[60px]">
<template #suppliers><ComingSoonPlaceholder :title="t('admin.products.tab.placeholder')" /></template>
<template #clients><ComingSoonPlaceholder :title="t('admin.products.tab.placeholder')" /></template>
</MalioTabList>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
const props = defineProps<{
/** Etats du produit (codes enum PURCHASE / SALE / OTHER) pilotant la visibilite. */
states: string[]
}>()
const { t } = useI18n()
// RG (spec C3) : « Fournisseurs » si Achat ou Aucun ; « Clients » si Vendu ou Aucun.
const showSuppliers = computed(() => props.states.includes('PURCHASE') || props.states.includes('OTHER'))
const showClients = computed(() => props.states.includes('SALE') || props.states.includes('OTHER'))
// Icone (Iconify) par onglet, alignee sur la convention des fiches existantes.
const tabs = computed(() => {
const list: { key: string, label: string, icon: string }[] = []
if (showSuppliers.value) {
list.push({ key: 'suppliers', label: t('admin.products.tab.suppliers'), icon: 'mdi:truck-outline' })
}
if (showClients.value) {
list.push({ key: 'clients', label: t('admin.products.tab.clients'), icon: 'mdi:account-group-outline' })
}
return list
})
const activeTab = ref('suppliers')
// Si l'onglet actif disparait suite a un changement d'etat, retombe sur le premier
// onglet encore disponible (evite un onglet actif fantome).
watch(tabs, (list) => {
if (list.length && !list.some(tab => tab.key === activeTab.value)) {
activeTab.value = list[0].key
}
}, { immediate: true })
</script>