first commit

src/components/GlobalDialog.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  message: string;
+  color?: string;
+  icon?: string;
+  actionText?: string;
+  cancelText?: string;
+  persistent?: boolean;
+  action?: (...args: unknown[]) => void;
+  cancel?: (...args: unknown[]) => void;
+}>();
+</script>
+<template>
+  <q-dialog ref="dialogRef" :persistent="persistent || false">
+    <q-card class="q-pa-sm" style="min-width: 300px; max-width: 80%">
+      <q-card-section class="row q-pa-sm">
+        <div
+          class="q-pr-md"
+          v-if="icon"
+          style="display: flex; align-items: center"
+        >
+          <q-avatar
+            :icon="icon"
+            size="xl"
+            font-size="25px"
+            color="grey-2"
+            :text-color="color || 'primary'"
+          />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold block">{{ title }}</span>
+          <span class="block">{{ message }}</span>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right" v-if="action || cancel">
+        <q-btn
+          id="btn-cancel-dialog"
+          v-if="cancel"
+          @click="cancel"
+          :label="cancelText || $t('cancel')"
+          :color="color || 'primary'"
+          v-close-popup
+          flat
+        />
+        <q-btn
+          id="btn-ok-dialog"
+          v-if="action"
+          @click="action"
+          :label="actionText || $t('ok')"
+          :color="color || 'primary'"
+          v-close-popup
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss"></style>