refactor(sync) : remove restrictedMode and add sync service + confirmation modal

2026-03-13 13:49:24 +01:00
parent 5912216a89
commit 8dacad7a59
16 changed files with 168 additions and 800 deletions
--- a/app/components/ComponentModelStructureEditor.vue
+++ b/app/components/ComponentModelStructureEditor.vue
@@ -10,7 +10,6 @@
      :locked-type-label="displayedRootTypeLabel"
      :allow-subcomponents="allowSubcomponents"
      :max-subcomponent-depth="maxSubcomponentDepth"
-      :restricted-mode="restrictedMode"
      is-root
    />
  </div>
@@ -56,10 +55,6 @@ const props = defineProps({
    type: Number,
    default: Infinity,
  },
-  restrictedMode: {
-    type: Boolean,
-    default: false,
-  },
 })

 const emit = defineEmits(['update:modelValue'])
--- a/app/components/PieceModelStructureEditor.vue
+++ b/app/components/PieceModelStructureEditor.vue
@@ -29,7 +29,6 @@
                <select
                  v-model="product.typeProductId"
                  class="select select-bordered select-xs"
-                  :disabled="isProductLocked(product)"
                  @change="handleProductTypeSelect(product)"
                >
                  <option value="">
@@ -46,26 +45,16 @@
              </div>
            </div>
            <button
-              v-if="!isProductLocked(product)"
              type="button"
              class="btn btn-error btn-xs btn-square"
              @click="removeProduct(index)"
            >
              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
            </button>
-            <div v-else class="tooltip tooltip-left" data-tip="Ce produit ne peut pas être supprimé car des éléments utilisent cette catégorie">
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
-                disabled
-              >
-                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-              </button>
-            </div>
          </div>
        </li>
      </ul>
-      <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
+      <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
        Ajouter
      </button>
@@ -111,7 +100,7 @@
                  class="input input-bordered input-xs"
                  placeholder="Nom du champ"
                >
-                <select v-model="field.type" class="select select-bordered select-xs" :disabled="isFieldLocked(field)">
+                <select v-model="field.type" class="select select-bordered select-xs">
                  <option value="text">
                    Texte
                  </option>
@@ -131,7 +120,7 @@
              </div>

              <div class="flex items-center gap-2 text-xs">
-                <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" :disabled="isFieldLocked(field)">
+                <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
                Obligatoire
              </div>

@@ -140,27 +129,16 @@
                v-model="field.optionsText"
                class="textarea textarea-bordered textarea-xs h-20"
                placeholder="Option 1&#10;Option 2"
-                :disabled="isFieldLocked(field)"
              />
            </div>

            <button
-              v-if="!isFieldLocked(field)"
              type="button"
              class="btn btn-error btn-xs btn-square"
              @click="removeField(index)"
            >
              <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
            </button>
-            <div v-else class="tooltip tooltip-left" data-tip="Ce champ ne peut pas être supprimé car des éléments utilisent cette catégorie">
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
-                disabled
-              >
-                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-              </button>
-            </div>
          </div>
        </li>
      </ul>
@@ -183,7 +161,6 @@ defineOptions({ name: 'PieceModelStructureEditor' })

 const props = defineProps<{
  modelValue?: PieceModelStructure | null
-  restrictedMode?: boolean
 }>()

 const emit = defineEmits<{
@@ -194,9 +171,6 @@ const {
  fields,
  products,
  productTypeOptions,
-  restrictedMode,
-  isFieldLocked,
-  isProductLocked,
  formatProductTypeOption,
  handleProductTypeSelect,
  addProduct,
--- a/app/components/StructureNodeEditor.vue
+++ b/app/components/StructureNodeEditor.vue
@@ -109,7 +109,7 @@
                      class="input input-bordered input-xs"
                      placeholder="Nom du champ"
                    />
-                    <select v-model="field.type" class="select select-bordered select-xs" :disabled="isCustomFieldLocked(index)">
+                    <select v-model="field.type" class="select select-bordered select-xs">
                      <option value="text">Texte</option>
                      <option value="number">Nombre</option>
                      <option value="select">Liste</option>
@@ -118,7 +118,7 @@
                    </select>
                  </div>
                  <div class="flex items-center gap-2 text-xs">
-                    <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" :disabled="isCustomFieldLocked(index)" />
+                    <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" />
                    Obligatoire
                  </div>
                  <textarea
@@ -126,26 +126,15 @@
                    v-model="field.optionsText"
                    class="textarea textarea-bordered textarea-xs h-20"
                    placeholder="Option 1&#10;Option 2"
-                    :disabled="isCustomFieldLocked(index)"
                  ></textarea>
                </div>
                <button
-                  v-if="!isCustomFieldLocked(index)"
                  type="button"
                  class="btn btn-error btn-xs btn-square"
                  @click="removeCustomField(index)"
                >
                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
                </button>
-                <div v-else class="tooltip tooltip-left" data-tip="Ce champ ne peut pas être supprimé car des éléments utilisent cette catégorie">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
-                    disabled
-                  >
-                    <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-                  </button>
-                </div>
              </div>
            </div>
          </div>
@@ -189,7 +178,6 @@
                    <select
                      v-model="product.typeProductId"
                      class="select select-bordered select-xs"
-                      :disabled="isProductLocked(index)"
                      @change="handleProductTypeSelect(product)"
                    >
                      <option value="">
@@ -205,22 +193,13 @@
                    </select>
                  </div>
                </div>
-                <button v-if="!isProductLocked(index)" type="button" class="btn btn-error btn-xs btn-square" @click="removeProduct(index)">
+                <button type="button" class="btn btn-error btn-xs btn-square" @click="removeProduct(index)">
                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
                </button>
-                <div v-else class="tooltip tooltip-left" data-tip="Ce produit ne peut pas être supprimé car des éléments utilisent cette catégorie">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed"
-                    disabled
-                  >
-                    <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-                  </button>
-                </div>
              </div>
            </div>
          </div>
-          <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
+          <button type="button" class="btn btn-outline btn-xs" @click="addProduct">
            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
            Ajouter
          </button>
@@ -261,7 +240,6 @@
                      <select
                        v-model="piece.typePieceId"
                        class="select select-bordered select-xs"
-                        :disabled="isPieceLocked(index)"
                        @change="handlePieceTypeSelect(piece)"
                      >
                        <option value="">
@@ -293,18 +271,13 @@
                    />
                  </div>
                </div>
-                <button v-if="!isPieceLocked(index)" type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
+                <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
                </button>
-                <div v-else class="tooltip tooltip-left" data-tip="Cette pièce ne peut pas être supprimée">
-                  <button type="button" class="btn btn-ghost btn-xs btn-square opacity-30 cursor-not-allowed" disabled>
-                    <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
-                  </button>
-                </div>
              </div>
            </div>
          </div>
-          <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addPiece">
+          <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
            Ajouter
          </button>
@@ -346,14 +319,12 @@
                :product-types="productTypes"
                :allow-subcomponents="childAllowSubcomponents"
                :max-subcomponent-depth="maxSubcomponentDepth"
-                :restricted-mode="restrictedMode"
-                :is-locked="isSubcomponentLocked(index)"
                @remove="removeSubComponent(index)"
              />
            </div>
          </div>
          <button
-            v-if="canManageSubcomponents && !restrictedMode"
+            v-if="canManageSubcomponents"
            type="button"
            class="btn btn-outline btn-xs"
            @click="addSubComponent"
@@ -386,7 +357,6 @@ const props = withDefaults(defineProps<{
  lockedTypeLabel?: string
  allowSubcomponents?: boolean
  maxSubcomponentDepth?: number
-  restrictedMode?: boolean
  isLocked?: boolean
 }>(), {
  depth: 0,
@@ -398,19 +368,13 @@ const props = withDefaults(defineProps<{
  lockedTypeLabel: '',
  allowSubcomponents: true,
  maxSubcomponentDepth: Infinity,
-  restrictedMode: false,
  isLocked: false,
 })

 const emit = defineEmits(['remove'])

 const {
-  isCustomFieldLocked,
-  isPieceLocked,
-  isProductLocked,
-  isSubcomponentLocked,
  isLocked,
-  restrictedMode,
  componentTypes,
  pieceTypes,
  productTypes,
--- a/app/components/SyncConfirmationModal.vue
+++ b/app/components/SyncConfirmationModal.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { SyncPreviewResult } from '~/services/modelTypes';
+
+const props = defineProps<{
+  preview: SyncPreviewResult | null;
+  open: boolean;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+const dialogRef = ref<HTMLDialogElement>();
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen) {
+    dialogRef.value?.showModal();
+  }
+  else {
+    dialogRef.value?.close();
+  }
+});
+
+const hasDeletions = computed(() => {
+  if (!props.preview) return false;
+  return Object.values(props.preview.deletions).some(v => v > 0);
+});
+
+const hasModifications = computed(() => {
+  if (!props.preview) return false;
+  return Object.values(props.preview.modifications).some(v => v > 0);
+});
+
+const totalAdditions = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.additions).reduce((sum, v) => sum + v, 0);
+});
+
+const totalDeletions = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.deletions).reduce((sum, v) => sum + v, 0);
+});
+
+const totalModifications = computed(() => {
+  if (!props.preview) return 0;
+  return Object.values(props.preview.modifications).reduce((sum, v) => sum + v, 0);
+});
+
+function handleCancel() {
+  emit('cancel');
+}
+
+function handleConfirm() {
+  emit('confirm');
+}
+</script>
+
+<template>
+  <dialog ref="dialogRef" class="modal" @close="handleCancel">
+    <div class="modal-box">
+      <h3 class="text-lg font-bold">
+        Synchronisation des éléments liés
+      </h3>
+
+      <div v-if="preview" class="py-4 space-y-3">
+        <p>
+          Cette modification impactera
+          <strong>{{ preview.itemCount }}</strong>
+          élément(s) lié(s).
+        </p>
+
+        <ul class="list-disc list-inside space-y-1">
+          <li v-if="totalAdditions > 0" class="text-success">
+            {{ totalAdditions }} ajout(s)
+          </li>
+          <li v-if="totalDeletions > 0" class="text-error">
+            {{ totalDeletions }} suppression(s)
+          </li>
+          <li v-if="totalModifications > 0" class="text-warning">
+            {{ totalModifications }} modification(s)
+          </li>
+        </ul>
+
+        <div v-if="hasDeletions" role="alert" class="alert alert-warning">
+          <span>Des éléments seront supprimés. Cette action est irréversible.</span>
+        </div>
+
+        <div v-if="hasModifications" role="alert" class="alert alert-info">
+          <span>Des valeurs de champs personnalisés seront réinitialisées.</span>
+        </div>
+      </div>
+
+      <div class="modal-action">
+        <button class="btn btn-ghost" :disabled="loading" @click="handleCancel">
+          Annuler
+        </button>
+        <button class="btn btn-primary" :disabled="loading" @click="handleConfirm">
+          <span v-if="loading" class="loading loading-spinner loading-sm" />
+          Confirmer la synchronisation
+        </button>
+      </div>
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+      <button @click="handleCancel">
+        close
+      </button>
+    </form>
+  </dialog>
+</template>
--- a/app/components/model-types/ModelTypeForm.vue
+++ b/app/components/model-types/ModelTypeForm.vue
@@ -15,8 +15,7 @@
          minlength="2"
          maxlength="120"
          required
-          :disabled="restrictedMode"
-        />
+          />
        <p v-if="errors.name" class="mt-1 text-sm text-error">{{ errors.name }}</p>
      </div>
      <div>
@@ -48,7 +47,6 @@
          rows="4"
          name="notes"
          maxlength="2000"
-          :disabled="restrictedMode"
        ></textarea>
        <p class="mt-1 text-xs text-base-content/70">Saisissez des informations complémentaires (facultatif).</p>
      </div>
@@ -83,7 +81,6 @@
            v-model="componentStructure"
            :allow-subcomponents="allowComponentSubcomponents"
            :max-subcomponent-depth="componentSubcomponentMaxDepth"
-            :restricted-mode="restrictedMode"
          />
        </div>

@@ -95,7 +92,7 @@
            Aperçu :
            <span class="font-medium text-base-content">{{ pieceStructurePreview }}</span>
          </p>
-          <PieceModelStructureEditor v-model="pieceStructure" :restricted-mode="restrictedMode" />
+          <PieceModelStructureEditor v-model="pieceStructure" />
        </div>

        <div
@@ -106,30 +103,11 @@
            Aperçu :
            <span class="font-medium text-base-content">{{ productStructurePreview }}</span>
          </p>
-          <PieceModelStructureEditor v-model="productStructure" :restricted-mode="restrictedMode" />
+          <PieceModelStructureEditor v-model="productStructure" />
        </div>
      </template>
    </section>

-    <div
-      v-if="restrictedMode && restrictedModeMessage"
-      class="alert alert-info"
-      role="status"
-      aria-live="polite"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-      <span>{{ restrictedModeMessage }}</span>
-    </div>
-
-    <div
-      v-if="disableSubmit"
-      class="alert alert-warning"
-      role="alert"
-      aria-live="polite"
-    >
-      <span>{{ disableSubmitMessage }}</span>
-    </div>
-
    <footer class="flex flex-col gap-3 border-t border-base-300 pt-4 sm:flex-row sm:justify-end">
      <button type="button" class="btn btn-ghost" :disabled="saving" @click="emit('cancel')">
        Annuler
@@ -172,10 +150,6 @@ const props = withDefaults(defineProps<{
  structureLoading?: boolean
  allowComponentSubcomponents?: boolean
  componentSubcomponentMaxDepth?: number
-  disableSubmit?: boolean
-  disableSubmitMessage?: string
-  restrictedMode?: boolean
-  restrictedModeMessage?: string
  readonly?: boolean
 }>(), {
  initialData: null,
@@ -184,10 +158,6 @@ const props = withDefaults(defineProps<{
  structureLoading: false,
  allowComponentSubcomponents: true,
  componentSubcomponentMaxDepth: 1,
-  disableSubmit: false,
-  disableSubmitMessage: '',
-  restrictedMode: false,
-  restrictedModeMessage: '',
  readonly: false,
 })

@@ -205,19 +175,7 @@ const componentSubcomponentMaxDepth = computed(() =>
    ? props.componentSubcomponentMaxDepth
    : 1,
 )
-const disableSubmit = computed(() => props.disableSubmit === true)
-const disableSubmitMessage = computed(() =>
-  (props.disableSubmitMessage && props.disableSubmitMessage.trim())
-    ? props.disableSubmitMessage
-    : 'Cette catégorie ne peut pas être modifiée car des éléments y sont déjà liés.',
-)
 const isReadonly = computed(() => props.readonly === true)
-const restrictedMode = computed(() => props.restrictedMode === true || isReadonly.value)
-const restrictedModeMessage = computed(() =>
-  (props.restrictedModeMessage && props.restrictedModeMessage.trim())
-    ? props.restrictedModeMessage
-    : '',
-)

 const form = reactive<ModelTypePayload>({
  name: '',
@@ -294,7 +252,7 @@ const resetForm = () => {
 }

 const submitLabel = computed(() => (props.mode === 'edit' ? 'Enregistrer' : 'Créer'))
-const isSubmitDisabled = computed(() => saving.value || structureLoading.value || disableSubmit.value || isReadonly.value)
+const isSubmitDisabled = computed(() => saving.value || structureLoading.value || isReadonly.value)

 const validate = () => {
  errors.name = undefined