From e29cf15484182b31e2c9d0d5f61000be1177f6d3 Mon Sep 17 00:00:00 2001
From: Sas Andy <alfiantoandy6@gmail.com>
Date: Thu, 7 Nov 2024 11:42:11 +0700
Subject: [PATCH] global component dialog (info dan error) snackbar

---
 globalcomponent/one-dialog.vue   | 71 ++++++++++++++++++++++++++++++++
 globalcomponent/one-snackbar.vue | 63 ++++++++++++++++++++++++++++
 2 files changed, 134 insertions(+)
 create mode 100644 globalcomponent/one-dialog.vue
 create mode 100644 globalcomponent/one-snackbar.vue

diff --git a/globalcomponent/one-dialog.vue b/globalcomponent/one-dialog.vue
new file mode 100644
index 0000000..b3e3613
--- /dev/null
+++ b/globalcomponent/one-dialog.vue
@@ -0,0 +1,71 @@
+<!-- SimpleSnackbar.vue -->
+<template>
+  <v-dialog persistent :max-width="width" v-model="localVisible">
+    <v-card>
+      <v-toolbar elevation="4" :title="title" :color="color"></v-toolbar>
+      <v-card-text v-html="message"></v-card-text>
+
+      <v-card-actions class="px-5">
+        <v-spacer></v-spacer>
+
+        <v-btn
+          color="error"
+          size="large"
+          :text="$t('message.close')??'TUTUP'"
+          @click="closeDialog()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  export default {
+    props: {
+      modelValue: {
+        type: Boolean,
+        default: false,
+      },
+      message: {
+        type: String,
+        default: "",
+      },
+      title: {
+        type: String,
+        default: "",
+      },
+      color: {
+        type: String,
+        default: "success",
+      },
+      width: {
+        type: String,
+        default: "500",
+      },
+      onClose: {
+        type: Function,
+        default: () => {},
+      },
+    },
+    computed: {
+      localVisible: {
+        get() {
+          return this.modelValue;
+        },
+        set(value) {
+          if (!value) {
+            // console.log("aksjdhs");
+            this.onClose(); // Panggil hanya saat dialog ditutup
+          }
+          this.$emit("update:modelValue", value);
+        },
+      },
+    },
+    methods: {
+      closeDialog() {
+        // this.onClose;
+        this.localVisible = false;
+      },
+    },
+  };
+</script>
diff --git a/globalcomponent/one-snackbar.vue b/globalcomponent/one-snackbar.vue
new file mode 100644
index 0000000..319aa66
--- /dev/null
+++ b/globalcomponent/one-snackbar.vue
@@ -0,0 +1,63 @@
+<!-- SimpleSnackbar.vue -->
+<template>
+  <v-snackbar
+    v-model="localVisible"
+    :multi-line="multiLine"
+    :color="color"
+    :timeout="timeout"
+    :location="location"
+    variant="elevated"
+    z-index="999999999999999999999999999999"
+  >
+    {{ message }}
+    <template v-slot:actions>
+      <v-btn text @click="closeSnackbar">Tutup</v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+  export default {
+    props: {
+      multiLine: {
+        type: Boolean,
+        default: false,
+      },
+      modelValue: {
+        type: Boolean,
+        default: false,
+      },
+      message: {
+        type: String,
+        default: "",
+      },
+      color: {
+        type: String,
+        default: "success",
+      },
+      location: {
+        type: String,
+        default: "top",
+      },
+      timeout: {
+        type: Number,
+        default: 3000,
+      },
+    },
+    computed: {
+      localVisible: {
+        get() {
+          return this.modelValue;
+        },
+        set(value) {
+          this.$emit("update:modelValue", value);
+        },
+      },
+    },
+    methods: {
+      closeSnackbar() {
+        this.localVisible = false;
+      },
+    },
+  };
+</script>