Deleting whiteboards

front/src/components/WhiteboardHistoryItem.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
+
 import type { Whiteboard } from '@/types'
+import { ref } from 'vue'
 
 const props = defineProps<{ whiteboard: Whiteboard }>()
-const emit = defineEmits<{ click: [whiteboard: Whiteboard] }>()
+const emit = defineEmits<{
+  (e: 'click', whiteboard: Whiteboard): void
+  (e: 'delete', whiteboard: Whiteboard): void
+}>()
+
+const showConfirm = ref(false)
 
 const formatDate = (date: string | Date) =>
   new Date(date).toLocaleDateString(
@@ -11,18 +18,89 @@ const formatDate = (date: string | Date) =>
   )
 
 const handleClick = () => emit('click', props.whiteboard)
+
+const handleDeleteClick = (e: MouseEvent) => {
+  e.stopPropagation()
+  showConfirm.value = true
+}
+
+const handleCancel = (e: MouseEvent) => {
+  e.stopPropagation()
+  showConfirm.value = false
+}
+
+const handleConfirmDelete = (e: MouseEvent) => {
+  e.stopPropagation()
+  showConfirm.value = false
+  emit('delete', props.whiteboard)
+}
+
 </script>
 
 <template>
+
   <div
     class="card border rounded-3 p-3 cursor-pointer hover-card"
     @click="handleClick"
   >
     <div class="d-flex justify-content-between align-items-start mb-2">
       <h5 class="mb-0 text-dark">{{ whiteboard.title }}</h5>
-      <small class="text-muted">{{ formatDate(whiteboard.createdAt) }}</small>
+      <div class="d-flex align-items-center gap-2">
+        <small class="text-muted">{{ formatDate(whiteboard.createdAt) }}</small>
+        <button
+          class="btn btn-link p-0 text-danger"
+          title="Delete whiteboard"
+          @click="handleDeleteClick"
+        >
+          <i class="bi bi-trash fs-5"></i>
+        </button>
+      </div>
     </div>
   </div>
+
+  <!-- Confirmation Modal -->
+  <Teleport to="body">
+    <div
+      v-if="showConfirm"
+      class="modal d-block"
+      tabindex="-1"
+      style="background: rgba(0,0,0,0.5)"
+      @click.self="handleCancel"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header border-0 pb-0">
+            <h5 class="modal-title">Delete Whiteboard</h5>
+            <button
+              type="button"
+              class="btn-close"
+              @click="handleCancel"
+            ></button>
+          </div>
+          <div class="modal-body">
+            Are you sure you want to delete this whiteboard?
+          </div>
+          <div class="modal-footer border-0 pt-0">
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              @click="handleCancel"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="btn btn-danger"
+              @click="handleConfirmDelete"
+            >
+              Yes, delete
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+
 </template>
 
 <style scoped>