Add deleteContentModal

src/views/contents/ContentCard.vue

@@ -28,7 +28,7 @@
               <v-list-item @click="editContent">
                 <v-list-item-title>Modifier le contenu</v-list-item-title>
               </v-list-item>
-              <v-list-item @click="deleteContent">
+              <v-list-item @click="openDeleteConfirmationDialog">
                 <v-list-item-title>Effacer le contenu</v-list-item-title>
               </v-list-item>
               <v-list-item @click="reportContent">
@@ -94,6 +94,7 @@
             :subject-id="props.content.id"
             :messages="messages"
         ></message-list>
+
       </div>
 
       <div class="py-2">
@@ -103,6 +104,42 @@
       </div>
     </div>
   </div>
+
+
+  <v-dialog v-model="openDeleteConfirmationModal" max-width="500">
+    <v-form>
+      <v-card class="text-center rounded-xl"
+              :style="{ 
+                border: `2px solid  ` 
+              }">
+        <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
+          <div class="flex-1 text-center">
+            Supprimer ce contenu ?
+          </div>
+
+          <v-btn icon @click="openDeleteConfirmationModal = false" class="ml-auto mr-2" variant="text">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+
+        </div>
+
+        <div class=" mr-2">
+          Êtes-vous sûr de vouloir supprimer le contenu ?
+        </div>
+
+        <div class="py-2 space-x-2">
+          <v-btn variant="flat"
+                 @click="deleteContent()" class=" mt-5">
+            Oui
+          </v-btn>
+          <v-btn variant="outlined"
+                 @click="openDeleteConfirmationModal = false" class=" mt-5">
+            Non
+          </v-btn>
+        </div>
+      </v-card>
+    </v-form>
+  </v-dialog>
 </template>
 
 <script setup>
@@ -122,7 +159,8 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(['content-deleted'])
+const openDeleteConfirmationModal = ref(false);
+const emits = defineEmits(['content:deleted'])
 
 const contentId = computed(() => props.content.id)
 const creatorId = computed(() => props.content.createdBy)
@@ -136,6 +174,10 @@ const messagesVisible = ref(false);
 const messages = ref([]);
 const hasMessages = computed(() => messages.value.length > 0)
 
+function openDeleteConfirmationDialog() {
+  openDeleteConfirmationModal.value = true;
+}
+
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   messagesVisible.value = true;
@@ -168,8 +210,8 @@ function editContent() {
 async function deleteContent() {
   const client = useClient()
   const response = await client.delete(`/api/contents/${contentId.value}`)
-  if (response.status >= 200 && response.status < 300) {
-    emits('content-deleted', contentId.value)
+  if (response.status >= 200 && response.status < 300){
+    emits('content:deleted', contentId.value)
   }
 }