pourquoi j'envoie mes données là ?
PATCH
https://url/dev/reprise-examen/api

moi je veux les envoyé en post ou bien patch, determine la meilleur methode par un de ces 2 chemins selon la doc :
 /students/{id}/registrations/{year} - Créé une nouvelle inscriptions pour un.e élève (externe) en utilisant son ID interne. PUT, POST api:registrations-byId
/students/{fiche}/registrations/{year} - Créé une nouvelle inscriptions pour un.e élève (interne) basé sur son ID interne. PUT, POST api:registrations-byFiche 

code parent Results.vue :
<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import AppList from '@/components/AppList.vue';
import AppCustomAlert from '@/components/AppCustomAlert.vue';
import apiClient from '@/services/axiosConfig.js';

const subjects = ref([]);
const selectedItem = ref(null);
const showSuccessAlert = ref(false);
const errors = ref({});

// Nouvelle référence pour stocker la map des fiches aux étudiants
const studentsMap = ref({});

// Fonction pour padder les fiches à 7 chiffres
const padFiche = (fiche) => {
  return fiche.toString().padStart(7, '0');
};

const getCurrentSchoolYear = () => 2023; 

const columns = ref([
  { header: 'Nom de la Matière', field: 'description', class: 'col-3 left-align' },
  {
    header: 'Volet',
    field: 'volet_details',
    class: 'col-3 center-align',
    formatter: (item) => item.volet_details
  },
  { header: 'Nombre d\'inscriptions', field: 'registration_details', class: 'col-4 center-align' }
]);

const customActions = ref([
  { name: 'customModal', label: 'Entrer les résultats', icon: 'cil-spreadsheet', tooltip: 'Entrer les résultats', iconClass: 'text-primary' }
]);

const modalForms = ref({
  default: {
    fields: [
      { name: 'subject_info', label: '', type: 'custom', class: 'col-md-12' },
      { name: 'student_info', label: '', type: 'custom', class: 'col-md-12' },
    ]
  }
});


const apiUrls = computed(() => ({
  update: id => `/students/registrations/${id}/${getCurrentSchoolYear()}`
}));

const fetchSubjectsAndRegistrations = async () => {
  try {
    const [registrationsResponse, subjectsResponse] = await Promise.all([
      apiClient.get(`/students/registrations/${getCurrentSchoolYear()}`),
      apiClient.get(`/subjects/${getCurrentSchoolYear()}`)
    ]);

    if (subjectsResponse.data.status === "success" && Array.isArray(subjectsResponse.data.data)) {
      const registrations = registrationsResponse.data.data || [];

      // Extraire les fiches uniques des inscriptions
      const fiches = [...new Set(registrations.map(reg => reg.fiche).filter(fiche => fiche))];

      // Padder les fiches à 7 chiffres
      const paddedFiches = fiches.map(fiche => padFiche(fiche));

      // Récupérer les données des étudiants pour chaque fiche paddée
      const studentPromises = paddedFiches.map(fiche => 
        apiClient.get(`/students/${fiche}`).then(res => res.data.data)
      );
      const students = await Promise.all(studentPromises);

      // Créer une map de fiches padées aux données des étudiants
      students.forEach(student => {
        if (student.fiche) {
          const paddedFiche = padFiche(student.fiche);
          studentsMap.value[paddedFiche] = student;
        }
      });

      // Assigner les données des étudiants aux inscriptions
      const registrationsWithStudents = registrations.map(reg => {
        const fichePadded = padFiche(reg.fiche);
        return {
          ...reg,
          student: studentsMap.value[fichePadded] || {}
        };
      });

      // Assigner les inscriptions avec les étudiants aux matières
      subjects.value = subjectsResponse.data.data.map(subject => {
        const subjectRegistrations = registrationsWithStudents.filter(reg => reg.subject_id === subject.id);
        return {
          ...subject,
          registrations: subjectRegistrations 
        };
      }).filter(subject => subject.registrations.length > 0);
      
    } else {
      console.error('Failed to fetch subjects:', subjectsResponse);
    }
  } catch (error) {
    console.error('Erreur lors de la récupération des données:', error);
  }
};

// Computed pour l'affichage des colonnes
const processedSubjects = computed(() => {
  return subjects.value.map(subject => {
    const voletDetailsGeneral = [];

    for (let i = 1; i <= 4; i++) {
      const code = subject[`volet${i}_code`];
      const percentage = subject[`volet${i}_percentage`];

      // Vérifier si au moins une inscription existe pour ce volet
      const hasRegistrations = subject.registrations.some(reg => reg[`volet${i}`]);

      if (code && code.trim() !== '' && hasRegistrations) {
        voletDetailsGeneral.push(`${code} - ${percentage || 0}%`);
      }
    }

    return {
      ...subject,
      volet_details: voletDetailsGeneral.join('<br/>'),
      registration_details: subject.registrations.length
    };
  });
});


// Computed property pour regrouper les inscriptions par volet
const groupedRegistrations = computed(() => {
  if (!selectedItem.value) return {};

  const volets = {};

  selectedItem.value.registrations.forEach(reg => {
    for (let i = 1; i <= 4; i++) {
      if (reg[`volet${i}`]) { // Vérifie si l'étudiant est inscrit à ce volet
        const code = selectedItem.value[`volet${i}_code`];
        const percentage = selectedItem.value[`volet${i}_percentage`];

        if (code && code.trim() !== '') {
          if (!volets[code]) {
            volets[code] = {
              code,
              percentage,
              registrations: []
            };
          }

          const resultField = `volet${i}_results`;
          const result = reg[resultField];

          volets[code].registrations.push({
            ...reg,
            student: reg.student,
            result,
            resultField,
            voletIndex: i
          });
        }
      }
    }
  });

  return volets;
});

const handleCustomAction = async (actionName, item) => {
  selectedItem.value = JSON.parse(JSON.stringify(item));
  console.log('Selected Item:', selectedItem.value); 
};

const handleSaveItem = async () => {
  const updates = {};

  Object.values(groupedRegistrations.value).forEach(volet => {
    volet.registrations.forEach(reg => {
      const registrationId = reg.id;
      const resultField = reg.resultField;
      const result = reg.result;

      if (!updates[registrationId]) {
        updates[registrationId] = {
          year: selectedItem.value.year,
          subject_id: selectedItem.value.id,
          volet1: reg.volet1,
          volet2: reg.volet2,
          volet3: reg.volet3,
          volet4: reg.volet4,
          volet1_results: reg.volet1_results || null,
          volet2_results: reg.volet2_results || null,
          volet3_results: reg.volet3_results || null,
          volet4_results: reg.volet4_results || null,
        };
      }

      updates[registrationId][resultField] = result;
    });
  });

  if (!validateResults(updates)) {
    return;
  }

  try {
    for (const registrationId in updates) {
      const dataToUpdate = updates[registrationId];
      const updateUrl = `/students/registrations/${registrationId}`;
      await apiClient.post(updateUrl, dataToUpdate);
    }

    showSuccessAlert.value = true;
    selectedItem.value = null;
  } catch (error) {
    console.error('Erreur lors de la mise à jour des résultats:', error);
  }
};


const validateResults = (updates) => {
  let isValid = true;
  errors.value = {};

  for (const registrationId in updates) {
    const data = updates[registrationId];

    for (const field in data) {
      const result = data[field];
      if (result === null || result === undefined || result === '') {
        errors.value[registrationId] = 'Le résultat est requis.';
        isValid = false;
      } else if (result < 0 || result > 100) {
        errors.value[registrationId] = 'Le résultat doit être entre 0 et 100.';
        isValid = false;
      }
    }
  }

  return isValid;
};


const validateAndCorrectResults = () => {
  subjects.value.forEach(subject => {
    subject.registrations.forEach(registration => {
      for (let i = 1; i <=4; i++) {
        const result = registration[`volet${i}_results`];
        if (result !== null && (isNaN(parseInt(result, 10)) || result > 100)) {
          registration[`volet${i}_results`] = result > 100 ? 100 : parseInt(result, 10);
        }
      }
    });
  });
};

watch(() => subjects.value, validateAndCorrectResults, { deep: true });

onMounted(fetchSubjectsAndRegistrations);
</script>

<template>
  <div>
    <AppCustomAlert v-if="showSuccessAlert" :message="'Les résultats ont été enregistrés avec succès!'" type="success" />
    <AppList
      :title="'Liste des Matières'"
      :columns="columns"
      :items="processedSubjects"
      :customModalTitle="'Entrer'"
      :itemType="'les Résultats'"
      :customButtonLabel="'Enregistrer'"
      :customActions="customActions"
      :modalForms="modalForms"
      :showAddButton="false"
      :shouldFetchData="false"
      :apiUrls="apiUrls"
      :handleSaveItem="handleSaveItem"
      @customAction="handleCustomAction"
      @itemSaved="() => showSuccessAlert = true"
      @operationFailed="console.error"
    >
    <template v-slot:modal-body="{ currentItem }">
    <div v-if="selectedItem">
      <h3>{{ selectedItem.description }}</h3>
      <div v-for="(volet, code) in groupedRegistrations" :key="code" class="volet-section">
        <h4>{{ code }}</h4>
        <div v-for="reg in volet.registrations" :key="reg.id" class="student-result-container">
          <div class="student-info">
            <span class="student-name">{{ reg.student.first_name }} {{ reg.student.last_name }}</span>
            <span class="student-fiche">(#{{ reg.fiche }})</span>
          </div>
          <div class="result-input">
            <input
              type="number"
              v-model="reg.result"
              min="0"
              max="100"
              placeholder="Résultat"
              class="result-input-field"
            />
            <div v-if="errors[reg.id]" class="error-message">
              {{ errors[reg.id] }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
    </AppList>
  </div>
</template>

<style scoped>
@import "@/styles/_results.scss";

/* Styles existants */

/* Style pour la section du volet */
.volet-section {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Style pour le titre du volet */
.volet-section h4 {
  margin-bottom: 5px;
  color: #333;
}

/* Style pour le nombre d'inscriptions */
.volet-section p {
  margin-bottom: 10px;
  color: #555;
}

/* Container pour chaque étudiant et son résultat */
.student-result-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* Style pour les informations de l'étudiant */
.student-info {
  flex: 1;
}

.student-name {
  font-weight: bold;
}

.student-fiche {
  margin-left: 10px;
  color: #666;
}

/* Style pour le champ de saisie des résultats */
.result-input {
  flex: 1;
}

.result-input label {
  margin-right: 5px;
}
</style>



Code enfant Applist.vue :
<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'; 
import AppCustomAlert from '@/components/AppCustomAlert.vue'
import apiClient from '@/services/axiosConfig.js'

const props = defineProps({
  title: String,
  apiUrls: Object,
  columns: Array,
  items: Array,
  itemType: String,
  itemTypeToDelete: String,
  modalForms: Object,
  modalClass: String,
  customModalTitle: String,
  customButtonLabel: String,
  customApiUrl: String,
  newRegistration: Object,
  apiUrls: {
    type: Object,
    default: () => ({
      fetch: '',
      create: '',
      update: '',
      delete: ''
    })
  },
  modalType: { type: String, default: 'default' },
  layout: Array,
  isRowClickable: { type: Boolean, default: false },
  showAddButton: { type: Boolean, default: true },
  showTable: { type: Boolean, default: true },
  customActions: { type: Array, default: () => [] },
  showActions: { type: Boolean, default: true },
  extraData: { type: [Object, Function], default: () => ({}) },
  watchProperty: { type: String, default: null, },
  shouldFetchData: { type: Boolean, default: true }
})

const isHovering = ref(false);
const emit = defineEmits(['itemSaved', 'itemDeleted', 'itemAction', 'operationFailed', 'customAction', 'propertyChanged', 'openAddModal', 'openEditModal']);

const items = ref([])
const currentItem = ref({});
const errorMessage = ref('')
const successMessage = ref('')
const showModal = ref(false)
const showSuccessAlert = ref(false)
const isEditMode = ref(false)
const errors = ref({})
const showConfirmDeleteModal = ref(false);
const idToDelete = ref(null);
const customModal = ref(false);
const modalTitle = ref('');
const modalButtonLabel = ref('');
const apiUrl = ref('');
const router = useRouter();

const fetchItems = async () => {
  if (props.shouldFetchData && props.apiUrls.fetch) {
    try {
      const response = await apiClient.get(props.apiUrls.fetch);
      if (response.data && Array.isArray(response.data.data)) {
        items.value = response.data.data;
      } else {
        throw new Error('Invalid data format received.');
      }
    } catch (error) {
      console.error(`Error loading items: ${error.message}`);
    }
  }
};

const openModal = (item = {}, isCustom = false) => {
  currentItem.value = { ...item, result: item.result || '' };

  console.log('Modal ouverte avec item:', currentItem.value);

  isEditMode.value = !!item.id;

  errors.value = {};

  if (item.birthday) {
    currentItem.value.birthday = formatInputDate(item.birthday);
  }

  if (!currentItem.value.notes) {
    currentItem.value.notes = '';
  }

  if (isCustom) {
    apiUrl.value = props.customApiUrl;
    modalTitle.value = props.customModalTitle;
    modalButtonLabel.value = props.customButtonLabel;
  } else {
    apiUrl.value = item.id ? `${props.apiUrls.update}/${item.id}` : props.apiUrls.create;
    modalTitle.value = item.id ? 'Modifier' : 'Ajouter';
    modalButtonLabel.value = item.id ? 'Modifier' : 'Ajouter';
  }

  if (isEditMode.value) {
    emit('openEditModal', item);
  } else {
    emit('openAddModal');
  }

  showModal.value = true;
};

const closeModal = () => {
  showModal.value = false;
  currentItem.value = {};
  errors.value = {};
};

function formatInputDate(date) {
  if (date && typeof date === 'object' && date.date) {
    return date.date.split(' ')[0];
  } else if (typeof date === 'string') {
    return date.split(' ')[0];
  }
  return '';
}

const handleCustomAction = (actionName, item) => {
  if (actionName === 'redirectToDetails') {
    emit('redirectAction', item);
  } else if (actionName === 'customModal') {
    emit('customAction', actionName, item);
    openModal(item, true);
  } else {
    emit('customAction', actionName, item);
    openModal(item);
  }
};

const handleSaveItem = async () => {
  if (props.modalType === 'customModal') {
    emit('itemSaved', currentItem.value);
    closeModal();
  } else {
    console.log(`Final check before prepareRegistrationData: ${currentItem.value.notes}`);
    let extraData = typeof props.extraData === 'function' ? props.extraData() : props.extraData;

    console.log(`ExtraData type: ${typeof extraData}`);
    console.log(`ExtraData value: ${extraData}`);

    const itemToSave = {
      ...currentItem.value, 
      ...extraData
    };

    console.log(`Saving item with data: ${JSON.stringify(itemToSave)}`);
    Object.entries(itemToSave).forEach(([key, value]) => {
      console.log(`${key}: ${value} (type: ${typeof value})`);
    });

    if (!validateFields()) {
      console.error(`Validation failed: ${JSON.stringify(errors.value)}`);
      emit('operationFailed', errors.value || { global: "Vérifiez les champs et réessayez." });
      return;
    }

    try {
      const method = itemToSave.id ? 'patch' : 'post';
      const response = await apiClient[method](apiUrl.value, itemToSave);

      console.log(`API response: ${JSON.stringify(response)}`);

      if (response.data.status === 'success') {
        emit('itemSaved', itemToSave);
        closeModal();
        fetchItems();
      } else {
        console.error(`Error from API: ${response.data.message}`);
        emit('operationFailed', response.data.errors || { global: "Une erreur inattendue s'est produite." });
      }
    } catch (error) {
      console.error(`Error during API call: ${error}`);
      emit('operationFailed', { global: error.message || "Erreur de communication avec le serveur." });
    }
    console.log(`Final notes value before sending to API: ${itemToSave.notes}`);
  }
};

const saveItem = async (item) => {
  errors.value = {}
  if (!validateFields()) {
    return { success: false, errors: errors.value }
  }

  const itemToSend = { ...item }

  try {
    const method = item.id ? 'patch' : 'post'
    const url = item.id ? `${props.apiUrls.update}/${item.id}` : props.apiUrls.create
    await apiClient[method](url, itemToSend)
    return { success: true }
  } catch (error) {
    errorMessage.value = `Error saving item: ${error.message}`
    return { success: false }
  }
}

const handleActionClick = (action, item) => {
  emit('itemAction', { action, item });
};

const validateFields = () => {
  let isValid = true;
  errors.value = {};

  props.modalForms.default.fields.forEach(field => {
    if (field.required && (currentItem.value[field.name] === undefined || currentItem.value[field.name] === '')) {
      errors.value[field.name] = field.errorMessage || 'Ce champ est requis';
      isValid = false;
    }
  });

  return isValid;
};

const validateEmail = (email) => {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

const confirmDelete = (id) => {
  idToDelete.value = id;
  showConfirmDeleteModal.value = true;
}

const deleteItem = async () => {
  if (!idToDelete.value) return;

  try {
    let deleteUrl;

    if (typeof props.apiUrls.delete === 'function') {
      deleteUrl = props.apiUrls.delete(idToDelete.value);
    } else {
      deleteUrl = `${props.apiUrls.delete}/${idToDelete.value}`;
    }

    await apiClient.delete(deleteUrl);
    items.value = items.value.filter(item => item.id !== idToDelete.value);
    showConfirmDeleteModal.value = false;
    emit('itemDeleted', idToDelete.value);
  } catch (error) {
    errorMessage.value = `Error deleting item: ${error.message}`;
    showConfirmDeleteModal.value = false;
  }
}

function getClass(field) {
  return field.class || 'col-md-12';
}

if (props.watchProperty) {
  watch(() => currentItem.value[props.watchProperty], (newValue, oldValue) => {
    emit('propertyChanged', { property: props.watchProperty, newValue });
  });
}

watch(() => props.items, (newItems, oldItems) => {
  if (newItems !== oldItems) {
    items.value = [...newItems];
  }
}, { deep: true });
onMounted(fetchItems)
</script>

<template>
  <div>
    <AppCustomAlert v-if="showSuccessAlert" :message="successMessage" type="success" style="text-align: center;" />
    <CRow v-if="showTable" class="justify-content-center mt-4">
      <CCol :xs="12">
        <CCard class="shadow-card">
          <CCardHeader class="d-flex justify-content-between align-items-center">
            <div><i>{{ title }}</i></div>
            <CButton v-if="showAddButton" color="success" variant="outline" class="btn-add hover-text-white"
              @click="openModal()">
              <div class="d-flex align-items-center hover-text-white">
                <CIcon icon="cil-plus" class="me-2 hover-text-white" /> Ajouter {{ itemType }}
              </div>
            </CButton>
            <div v-else class="placeholder-button"></div>
          </CCardHeader>
          <CCardBody>
            <AppCustomAlert v-if="errorMessage" :message="errorMessage" type="error" />
            <table class="table table-striped">
              <thead>
                <tr>
                  <th v-for="column in columns" :key="column.field" :class="column.class">{{ column.header }}</th>
                  <th v-if="showActions" class="actions-header">
                    <div class="d-flex justify-content-end actions-text">Actions</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in items" :key="item.id" @click="isRowClickable ? () => emit('rowClick', item) : null"
                  :class="isRowClickable ? 'clickable-row' : ''">
                  <td v-for="column in columns" :key="column.field" :class="column.class">
                    <span v-if="column.formatter" v-html="column.formatter(item)"></span>
                    <span v-else>{{ item[column.field] }}</span>
                  </td>
                  <td v-if="showActions" class="actions-cell">
                    <div class="d-flex justify-content-end">
                      <CButton v-for="action in customActions" :key="action.name"
                        @click="() => handleCustomAction(action.name, item)"
                        v-c-popover="{ content: action.tooltip, placement: 'left', trigger: 'hover' }"
                        :class="['custom-action-button', action.iconClass]">
                        <CIcon :icon="action.icon" :class="action.iconClass" />
                      </CButton>
                      <CButton v-if="customActions.length === 0" @click="openModal(item)"
                        v-c-popover="{ content: 'Modifier', placement: 'left', trigger: 'hover' }">
                        <CIcon icon="cil-pencil" class="icon-pencil me-2" />
                      </CButton>
                      <CButton v-if="customActions.length === 0" @click="confirmDelete(item.id)"
                        v-c-popover="{ content: 'Supprimer', placement: 'right', trigger: 'hover' }">
                        <CIcon icon="cil-trash" class="icon-trash" />
                      </CButton>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
    <CModal v-model:visible="showModal" :class="modalClass" alignment="center" @close="closeModal">
      <CModalHeader @close="closeModal">
        <CModalTitle>{{ modalTitle }} {{ itemType }}</CModalTitle>
      </CModalHeader>
      <CModalBody>
        <template v-if="$slots['modal-body']">
          <slot name="modal-body" :currentItem="currentItem" :errors="errors"></slot>
        </template>
        <template v-else>
          <div class="row">
            <slot name="customBody" :currentItem="currentItem" :errors="errors">
              <template v-if="props.modalType === 'customModal'">
                <div v-for="field in modalForms.customModal.fields"
                    :key="field.name" :class="['mb-3', getClass(field)]">
                  <label :for="field.name" class="form-label">{{ field.label }}</label>
                  <input v-if="field.type === 'text'" :type="field.type" :id="field.name" v-model="currentItem[field.name]"
                    :class="['form-control', { 'is-invalid': errors[field.name] }]" :required="field.required"
                    :disabled="field.disabled || false" />
                </div>
              </template>
              <template v-else>
                <div v-for="field in modalForms.default.fields" :key="field.name" :class="['mb-3', getClass(field)]">
                  <label :for="field.name" class="form-label" v-if="field.type !== 'checkboxes'">{{ field.label }}</label>
                  <select v-if="field.type === 'select'" :id="field.name" v-model="currentItem[field.name]"
                    :class="['form-control', { 'is-invalid': errors[field.name] }]" :required="field.required">
                    <option disabled value="">{{ field.placeholder }}</option>
                    <option v-for="option in field.options" :key="option.value" :value="option.value">{{ option.text }}</option>
                  </select>
                  <input v-if="field.type === 'text'" :type="field.type" :id="field.name"
                    v-model="currentItem[field.name]" :class="['form-control', { 'is-invalid': errors[field.name] }]"
                    :required="field.required" />
                  <input v-else-if="field.type === 'number' || field.type === 'date'" :type="field.type" :id="field.name"
                    v-model="currentItem[field.name]" :class="['form-control', { 'is-invalid': errors[field.name] }]"
                    :required="field.required" />
                  <div v-if="field.type === 'textarea'" class="form-group">
                    <textarea :id="field.name" v-model="props.newRegistration.notes" class="form-control" :rows="field.rows || 1" :placeholder="field.placeholder || ''"></textarea>
                  </div>
                  <div v-if="field.type === 'checkboxes'">
                    <div v-for="option in field.options" :key="option.id">
                      <input class="form-check-input" type="checkbox" :id="`checkbox-${option.id}`"
                            v-model="currentItem[field.name]" :value="option.id" :checked="option.checked">
                      <label class="form-check-label" :for="`checkbox-${option.id}`">{{ option.text }}</label>
                    </div>
                  </div>
                  <div v-if="errors[field.name]" class="invalid-feedback">
                    {{ errors[field.name] }}
                  </div>
                </div>
              </template>
            </slot>
          </div>
        </template>
      </CModalBody>
      <CModalFooter>
        <CButton class="btn-box-shadow btn-secondary" @click="closeModal">Annuler</CButton>
        <CButton class="btn-box-shadow btn-primary" @click="handleSaveItem">{{ modalButtonLabel }}</CButton>
      </CModalFooter>
    </CModal>
    <CModal v-model:visible="showConfirmDeleteModal" alignment="center" @close="() => showConfirmDeleteModal = false">
      <CModalHeader>
        <CModalTitle>Confirmation de Suppression</CModalTitle>
      </CModalHeader>
      <CModalBody>
        Êtes-vous sûr de vouloir supprimer {{ itemTypeToDelete }} ?
      </CModalBody>
      <CModalFooter>
        <CButton class="btn-box-shadow btn-secondary" @click="() => showConfirmDeleteModal = false">Annuler</CButton>
        <CButton class="btn-box-shadow btn-danger white-text" @click="deleteItem">Supprimer</CButton>
      </CModalFooter>
    </CModal>
  </div>
</template>

<style scoped>
@import "@/styles/_applist.scss";
@import "@/styles/_header.scss";
</style>