Confirmation on deletion of characters.

src/components/utilities/ConfirmationModal.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Modal from '@/components/utilities/Modal.vue'
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  confirmHeader: {
+    type: String,
+    default: 'Are you sure?'
+  },
+  confirmFunction: {
+    type: Function
+  },
+  cancelFunction: {
+    type: Function
+  },
+  cancelButtonText: {
+    type: String,
+    default: 'Cancel'
+  },
+  confirmButtonText: {
+    type: String,
+    default: 'Confirm'
+  },
+  modalOpened: {
+    type: Boolean,
+    default: false
+  }
+})
+
+watch(
+  () => props.modalOpened,
+  (val) => {
+    modalOpened.value = val;
+  }
+)
+
+const modalOpened = ref(props.modalOpened);
+</script>
+
+<template>
+  <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => modalOpened = !modalOpened" :modal-width="300" :modal-height="190">
+    <template #modalHeader>
+      <div class="text-white">
+        <slot name="modalHeader"></slot>
+      </div>
+    </template>
+    <template #modalBody>
+      <div class="text-white h-full">
+        <div class="flex h-full flex-col justify-between">
+          <span class="p-2">
+            <slot name="modalBody"></slot>
+          </span>
+          <div class="flex justify-between p-2">
+
+            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
+              {{props.cancelButtonText}}
+            </button>
+
+            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
+              {{props.confirmButtonText}}
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>

src/screens/Characters.vue

@@ -3,6 +3,19 @@
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
       <div class="filler"></div>
+      <ConfirmationModal
+        v-if="deletingCharacter != null"
+        :confirm-function="delete_character.bind(this, deletingCharacter.id)"
+        :cancel-function="(() => deletingCharacter = null).bind(this)"
+        confirm-button-text="Delete"
+      >
+        <template #modalHeader>
+          Deleting character
+        </template>
+        <template #modalBody>
+          You are about to delete <span class="font-extrabold">{{deletingCharacter.name}}</span>, are you sure about that?
+        </template>
+      </ConfirmationModal>
       <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
         <div
           v-for="character in characters"
@@ -12,8 +25,8 @@
         >
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
-          <!-- @TODO : Add a confirmation dialog -->
+
-          <button class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100" @click="delete_character(character.id)">
+          <button class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100" @click="() => { deletingCharacter = character }">
             <img draggable="false" src="/assets/icons/trashcan.svg" />
           </button>
 
@@ -79,10 +92,12 @@ import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { type Character as CharacterT } from '@/types'
 import { useZoneStore } from '@/stores/zone'
+import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
 
 const isLoading = ref(true)
 const characters = ref([])
 const gameStore = useGameStore()
+const deletingCharacter = ref(null);
 
 // Fetch characters
 gameStore.connection?.on('character:list', (data: any) => {
@@ -101,6 +116,7 @@ onMounted(() => {
 const selected_character = ref(null)
 function select_character() {
   if (!selected_character.value) return
+  deletingCharacter.value = null;
   console.log('selected_character', selected_character.value)
   gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
   gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
@@ -109,6 +125,7 @@ function select_character() {
 // Delete character logics
 function delete_character(character_id: number) {
   if (!character_id) return
+  deletingCharacter.value = null;
   gameStore.connection?.emit('character:delete', { character_id: character_id })
 }