New-Thanasoft/thanasoft-front/src/components/molecules/Interventions/interventionDetails.vue

<template>
  <div class="mt-4 card">
    <div class="p-3 card-body">
      <!-- En-tête avec titre et badge de statut -->
      <div class="d-flex align-items-center justify-content-between mb-4">
        <h5 class="mb-0">Détails de l'Intervention</h5>
        <SoftBadge
          :color="intervention.status.color"
          :variant="intervention.status.variant"
          :size="intervention.status.size"
        >
          {{ intervention.status.label }}
        </SoftBadge>
      </div>

      <!-- Informations Client -->
      <div class="mb-4">
        <div class="d-flex align-items-center justify-content-between mb-3">
          <h6 class="mb-0">Informations Client</h6>
          <button
            type="button"
            class="btn btn-sm bg-gradient-secondary"
            @click="toggleEditMode"
          >
            {{ editMode ? "Sauvegarder" : "Modifier" }}
          </button>
        </div>

        <div class="row">
          <!-- Colonne gauche -->
          <div class="col-md-6">
            <SoftInput
              label="Nom du défunt"
              v-model="localIntervention.defuntName"
              :disabled="!editMode"
              class="mb-3"
            />

            <SoftInput
              label="Date de l'intervention"
              type="datetime-local"
              v-model="localIntervention.date"
              :disabled="!editMode"
              class="mb-3"
            />

            <SoftInput
              label="Lieu"
              v-model="localIntervention.lieux"
              :disabled="!editMode"
              class="mb-3"
            />
          </div>

          <!-- Colonne droite -->
          <div class="col-md-6">
            <SoftInput
              label="Durée prévue"
              v-model="localIntervention.duree"
              :disabled="!editMode"
              class="mb-3"
            />

            <SoftInput
              label="Type de cérémonie"
              v-model="localIntervention.title"
              :disabled="!editMode"
              class="mb-3"
            />

            <SoftInput
              label="Contact familial"
              v-model="localIntervention.contactFamilial"
              :disabled="!editMode"
              class="mb-3"
            />
          </div>
        </div>
      </div>

      <!-- Description -->
      <div class="mb-4">
        <h6 class="mb-3">Description</h6>
        <SoftInput
          type="textarea"
          rows="3"
          v-model="localIntervention.description"
          :disabled="!editMode"
          placeholder="Description détaillée de l'intervention..."
        />
      </div>

      <hr class="horizontal dark" />

      <!-- Informations supplémentaires -->
      <div class="mb-4">
        <h6 class="mb-3">Informations Complémentaires</h6>
        <div class="row">
          <div class="col-md-6">
            <SoftInput
              label="Nombre de personnes attendues"
              type="number"
              v-model="localIntervention.nombrePersonnes"
              :disabled="!editMode"
              class="mb-3"
            />

            <SoftInput
              label="Coordonnées du contact"
              v-model="localIntervention.coordonneesContact"
              :disabled="!editMode"
              class="mb-3"
            />
          </div>
          <div class="col-md-6">
            <SoftInput
              label="Prestations supplémentaires"
              type="textarea"
              rows="2"
              v-model="localIntervention.prestationsSupplementaires"
              :disabled="!editMode"
              class="mb-3"
            />
          </div>
        </div>
      </div>

      <!-- Équipe assignée -->
      <div class="mb-4">
        <div class="d-flex align-items-center justify-content-between mb-3">
          <h6 class="mb-0">Équipe Assignée</h6>
          <button
            type="button"
            class="btn btn-sm bg-gradient-info"
            @click="showTeamModal = true"
          >
            Gérer l'équipe
          </button>
        </div>

        <div class="avatar-group">
          <a
            v-for="(member, index) in localIntervention.members"
            :key="index"
            href="javascript:;"
            class="avatar avatar-sm rounded-circle"
            data-bs-toggle="tooltip"
            data-bs-placement="bottom"
            :title="member.name"
          >
            <img alt="Image placeholder" :src="member.image" />
          </a>
        </div>
      </div>

      <hr class="horizontal dark" />

      <!-- Actions -->
      <div class="d-flex justify-content-between">
        <button
          type="button"
          class="btn btn-sm bg-gradient-danger"
          @click="$emit('cancel')"
        >
          Annuler
        </button>

        <div>
          <button
            type="button"
            class="btn btn-sm bg-gradient-secondary me-2"
            @click="resetChanges"
            :disabled="!hasChanges"
          >
            Réinitialiser
          </button>

          <button
            type="button"
            class="btn btn-sm"
            :class="`bg-gradient-${intervention.action.color}`"
            @click="saveChanges"
            :disabled="!hasChanges"
          >
            {{ intervention.action.label }}
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal pour gérer l'équipe -->
  <div
    v-if="showTeamModal"
    class="modal fade show"
    style="display: block"
    tabindex="-1"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Gérer l'équipe</h5>
          <button
            type="button"
            class="btn-close"
            @click="showTeamModal = false"
          ></button>
        </div>
        <div class="modal-body">
          <p>Interface de gestion de l'équipe à implémenter...</p>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-sm bg-gradient-secondary"
            @click="showTeamModal = false"
          >
            Fermer
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, defineProps, defineEmits } from "vue";
import SoftInput from "@/components/SoftInput.vue";
import SoftBadge from "@/components/SoftBadge.vue";

const props = defineProps({
  intervention: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update", "cancel"]);

// État local pour l'édition
const editMode = ref(false);
const showTeamModal = ref(false);
const localIntervention = ref({ ...props.intervention });

// Computed pour détecter les changements
const hasChanges = computed(() => {
  return (
    JSON.stringify(localIntervention.value) !==
    JSON.stringify(props.intervention)
  );
});

// Méthodes
const toggleEditMode = () => {
  if (editMode.value) {
    saveChanges();
  }
  editMode.value = !editMode.value;
};

const saveChanges = () => {
  emit("update", localIntervention.value);
  editMode.value = false;
};

const resetChanges = () => {
  localIntervention.value = { ...props.intervention };
};

// Watch pour mettre à jour les données locales quand les props changent
watch(
  () => props.intervention,
  (newVal) => {
    localIntervention.value = { ...newVal };
  },
  { deep: true }
);
</script>

<style scoped>
.avatar-group {
  display: flex;
  gap: 8px;
}

.avatar-sm {
  width: 32px;
  height: 32px;
}

.modal {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal.show {
  display: block;
}
</style>