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>
+      <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>

front/src/components/WhiteboardHistoryList.vue

@@ -3,6 +3,7 @@ import { onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useWhiteboardsStore } from '@/stores/whiteboards'
 import WhiteboardHistoryItem from './WhiteboardHistoryItem.vue'
+import type {Whiteboard} from "@/types";
 
 const router = useRouter()
 const store = useWhiteboardsStore()
@@ -20,6 +21,11 @@ const sortedWhiteboards = computed(() =>
 const handleClick = (whiteboard: any) => {
   router.push({ name: 'whiteboard', params: { id: whiteboard.id } })
 }
+
+const handleDelete = async (whiteboard: Whiteboard) => {
+  await store.deleteWhiteboard(whiteboard.id)
+}
+
 </script>
 
 <template>
@@ -29,6 +35,7 @@ const handleClick = (whiteboard: any) => {
       :key="wb.id"
       :whiteboard="wb"
       @click="handleClick"
+      @delete="handleDelete"
     />
   </div>
   <div class="d-flex flex-column gap-3 overflow-auto h-100 w-100 p-3" v-else>

front/src/services/whiteboardService.ts

@@ -18,6 +18,10 @@ export const whiteboardService = {
 
   async getWhiteboardById(id: string): Promise<Whiteboard> {
     return await api.get<any>(`/api/Whiteboard/${id}`).then(mapWhiteboard)
+  },
+
+  async deleteWhiteboard(id: string): Promise<void> {
+    await api.delete(`/api/Whiteboard/${id}`)
   }
 }
 
@@ -25,6 +29,7 @@ function mapWhiteboard(raw: any): Whiteboard {
   return {
     id: raw.id,
     ownerId: raw.ownerId,
+    code: raw.code,
     title: raw.title,
     createdAt: new Date(raw.createdAt),
     deletedAt: raw.deletedAt ? new Date(raw.deletedAt) : undefined,