From c5e7e477be4c8fd623e2beba89071391322f27cb Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Thu, 10 Oct 2024 17:21:14 +0700
Subject: [PATCH] refactor: add DialogDuplicateDate

---
 src/components/DialogDuplicateData.vue | 136 +++++++++++++++++++++++++
 src/stores/utils/index.ts              |  15 +++
 2 files changed, 151 insertions(+)
 create mode 100644 src/components/DialogDuplicateData.vue

diff --git a/src/components/DialogDuplicateData.vue b/src/components/DialogDuplicateData.vue
new file mode 100644
index 00000000..58931e12
--- /dev/null
+++ b/src/components/DialogDuplicateData.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import DialogForm from 'components/DialogForm.vue';
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+
+const props = defineProps<{
+  action: (...args: unknown[]) => void;
+  checkData: (...args: unknown[]) => {
+    oldData: { filName: string; value: string }[];
+    newData: { filName: string; value: string }[];
+  };
+  cancel?: (...args: unknown[]) => void;
+}>();
+const modal = ref<boolean>(false);
+const selectOldData = ref<boolean>(true);
+const selectNewData = ref<boolean>(false);
+
+onMounted(() => {
+  if (props.checkData().oldData.length === 0) {
+    props.action();
+  } else {
+    modal.value = true;
+  }
+});
+</script>
+<template>
+  <DialogForm
+    v-model:modal="modal"
+    :title="$t('form.warning.duplicateInformation')"
+    :submit="
+      () => {
+        if (selectNewData) {
+          action();
+        }
+        modal = false;
+      }
+    "
+    :close="
+      () => {
+        modal = false;
+      }
+    "
+    width="60%"
+    height="45%"
+  >
+    <template #iconTitle>
+      <q-icon name="mdi-alert" color="warning" size="xs" class="q-mr-xs" />
+    </template>
+    <div class="q-py-md q-px-lg full-height">
+      <div class="surface-1 q-pa-sm column bordered rounded full-height">
+        <div
+          class="row col-3 items-center text-weight-medium"
+          style="font-size: 16px"
+        >
+          เลือกข้อมูลที่มีอยู่แล้ว
+        </div>
+        <div
+          class="row col-3 items-center cursor-pointer"
+          style="gap: 16px"
+          :class="{ active: selectOldData }"
+          @click="
+            () => {
+              selectOldData = true;
+              selectNewData = false;
+            }
+          "
+        >
+          <q-checkbox
+            :model-value="selectOldData"
+            @update:model-value="
+              (v) => {
+                if (selectOldData === false) {
+                  selectOldData = v;
+                  selectNewData = !v;
+                }
+              }
+            "
+            size="xs"
+          />
+
+          <div v-for="v in checkData().oldData">
+            <span class="text-regular app-text-muted">
+              {{ v.filName }}
+            </span>
+            : {{ v.value }}
+          </div>
+        </div>
+        <div
+          class="row col-3 items-center text-weight-medium"
+          style="font-size: 16px"
+        >
+          เพิ่มมาใหม่
+        </div>
+        <div
+          class="row col-3 items-center cursor-pointer"
+          style="gap: 16px"
+          :class="{ active: selectNewData }"
+          @click="
+            () => {
+              selectNewData = true;
+              selectOldData = false;
+            }
+          "
+        >
+          <q-checkbox
+            :model-value="selectNewData"
+            @update:model-value="
+              (v) => {
+                if (selectNewData === false) {
+                  selectNewData = v;
+                  selectOldData = !v;
+                }
+              }
+            "
+            size="xs"
+          />
+
+          <div v-for="v in checkData().newData">
+            <span class="text-regular app-text-muted">
+              {{ v.filName }}
+            </span>
+            : {{ v.value }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </DialogForm>
+</template>
+
+<style lang="scss">
+.active {
+  border: 3px solid var(--blue-4);
+  background-color: var(--blue-0);
+  border-radius: var(--radius-2);
+}
+</style>
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 9a448e6c..1ef871b4 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -1,5 +1,6 @@
 import { Dialog, QSelect, Notify, QNotifyCreateOptions } from 'quasar';
 import GlobalDialog from 'components/GlobalDialog.vue';
+import DialogDuplicateData from 'components/DialogDuplicateData.vue';
 import { ComposerTranslation, useI18n } from 'vue-i18n';
 import { defineStore } from 'pinia';
 import { Ref, ref } from 'vue';
@@ -26,6 +27,20 @@ export function dialog(opts: {
   });
 }
 
+export function dialogCheckData(opts: {
+  checkData: (...args: unknown[]) => {
+    oldData: { filName: string; value: string }[];
+    newData: { filName: string; value: string }[];
+  };
+  action?: (...args: unknown[]) => unknown;
+  cancel?: (...args: unknown[]) => unknown;
+}) {
+  Dialog.create({
+    component: DialogDuplicateData,
+    componentProps: opts,
+  });
+}
+
 export function dialogWarningClose(
   t: ComposerTranslation,
   opts: {