first commit

resources/js/components/dialogs/ConfirmDialog.vue

@@ -0,0 +1,164 @@
+<script setup>
+const props = defineProps({
+  confirmationQuestion: {
+    type: String,
+    required: true,
+  },
+  isDialogVisible: {
+    type: Boolean,
+    required: true,
+  },
+  confirmTitle: {
+    type: String,
+    required: true,
+  },
+  confirmMsg: {
+    type: String,
+    required: true,
+  },
+  cancelTitle: {
+    type: String,
+    required: true,
+  },
+  cancelMsg: {
+    type: String,
+    required: true,
+  },
+})
+
+const emit = defineEmits([
+  'update:isDialogVisible',
+  'confirm',
+])
+
+const unsubscribed = ref(false)
+const cancelled = ref(false)
+
+const updateModelValue = val => {
+  emit('update:isDialogVisible', val)
+}
+
+const onConfirmation = () => {
+  emit('confirm', true)
+  updateModelValue(false)
+  unsubscribed.value = true
+}
+
+const onCancel = () => {
+  emit('confirm', false)
+  emit('update:isDialogVisible', false)
+  cancelled.value = true
+}
+</script>
+
+<template>
+  <!-- 👉 Confirm Dialog -->
+  <VDialog
+    max-width="500"
+    :model-value="props.isDialogVisible"
+    @update:model-value="updateModelValue"
+  >
+    <VCard class="text-center px-10 py-6">
+      <VCardText>
+        <VBtn
+          icon
+          variant="outlined"
+          color="warning"
+          class="my-4"
+          size="x-large"
+        >
+          <span class="text-4xl">!</span>
+        </VBtn>
+
+        <h6 class="text-lg font-weight-medium">
+          {{ props.confirmationQuestion }}
+        </h6>
+      </VCardText>
+
+      <VCardText class="d-flex align-center justify-center gap-4">
+        <VBtn
+          variant="elevated"
+          @click="onConfirmation"
+        >
+          Confirm
+        </VBtn>
+
+        <VBtn
+          color="secondary"
+          variant="outlined"
+          @click="onCancel"
+        >
+          Cancel
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+
+  <!-- Unsubscribed -->
+  <VDialog
+    v-model="unsubscribed"
+    max-width="500"
+  >
+    <VCard>
+      <VCardText class="text-center px-10 py-6">
+        <VBtn
+          icon
+          variant="outlined"
+          color="success"
+          class="my-4"
+          size="x-large"
+        >
+          <span class="text-xl">
+            <VIcon icon="ri-check-line" />
+          </span>
+        </VBtn>
+
+        <h1 class="text-h4 mb-4">
+          {{ props.confirmTitle }}
+        </h1>
+
+        <p>{{ props.confirmMsg }}</p>
+
+        <VBtn
+          color="success"
+          @click="unsubscribed = false"
+        >
+          Ok
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+
+  <!-- Cancelled -->
+  <VDialog
+    v-model="cancelled"
+    max-width="500"
+  >
+    <VCard>
+      <VCardText class="text-center px-10 py-6">
+        <VBtn
+          icon
+          variant="outlined"
+          color="error"
+          class="my-4"
+          size="x-large"
+        >
+          <span class="text-2xl font-weight-light">X</span>
+        </VBtn>
+
+        <h1 class="text-h4 mb-4">
+          {{ props.cancelTitle }}
+        </h1>
+
+        <p>{{ props.cancelMsg }}</p>
+
+        <VBtn
+          color="success"
+          @click="cancelled = false"
+        >
+          Ok
+        </VBtn>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>