Inventory/frontend/app/components/SyncConfirmationModal.vue

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