113 lines
3.0 KiB
Vue
113 lines
3.0 KiB
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>
|