From 67b0ee47df8d1cce4142fb8e9669b9a8b4b9c690 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Tue, 12 Dec 2023 11:56:21 +0800
Subject: [PATCH] feat: Upload Alert done.

---
 src/assets/components.css                     |  24 +++++
 .../Discover/Conformance/MoreModal.vue        | 102 +++++++++---------
 src/components/File/UploadModal.vue           |  51 +++++++++
 src/components/Navbar.vue                     |  11 +-
 src/components/icons/IconUploarding.vue       |  13 +++
 src/module/alertModal.js                      |  77 +++++++++----
 6 files changed, 204 insertions(+), 74 deletions(-)
 create mode 100644 src/components/File/UploadModal.vue
 create mode 100644 src/components/icons/IconUploarding.vue

diff --git a/src/assets/components.css b/src/assets/components.css
index 0eb7f52..4ad4b6e 100644
--- a/src/assets/components.css
+++ b/src/assets/components.css
@@ -30,6 +30,30 @@
     transform: rotate(360deg)
   }
 }
+/* loaderBar */
+/* <span class="loaderBar"></span> */
+.loaderBar {
+  width: 80%;
+  height: 16px;
+  display: inline-block;
+  background-color: #0099FF;
+  border: 1px solid #0099FF;
+  border-radius: 4px;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
+  font-size: 30px;
+  background-size: 1em 1em;
+  box-sizing: border-box;
+  animation: barStripe 1s linear infinite;
+}
+
+@keyframes barStripe {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 1em 0;
+  }
+}
 
 /* components */
 /* Scrollbar */
diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue
index b6c623e..2ea5e58 100644
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -6,58 +6,58 @@
     </div>
   </template>
   <div class="h-full flex items-start justify-start p-4">
-      <!-- Trace List -->
-      <section class="w-80 h-full pr-4">
-        <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
-        <p class="text-primary h2 px-2 mb-2">
-          <span class="material-symbols-outlined text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
-        </p>
-        <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
-          <table class="border-separate border-spacing-x-2 text-sm">
-            <thead class="sticky top-0 z-10 bg-neutral-100">
-              <tr>
-                <th class="h2 px-2 border-b border-neutral-500">Trace</th>
-                <th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
-                <td class="p-2">#{{ trace.id }}</td>
-                <td class="p-2 w-24">
-                  <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
-                    <div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
+    <!-- Trace List -->
+    <section class="w-80 h-full pr-4">
+      <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
+      <p class="text-primary h2 px-2 mb-2">
+        <span class="material-symbols-outlined text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
+      </p>
+      <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
+        <table class="border-separate border-spacing-x-2 text-sm">
+          <thead class="sticky top-0 z-10 bg-neutral-100">
+            <tr>
+              <th class="h2 px-2 border-b border-neutral-500">Trace</th>
+              <th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
+              <td class="p-2">#{{ trace.id }}</td>
+              <td class="p-2 w-24">
+                <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+                  <div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
+                </div>
+              </td>
+              <td class="py-2 text-right">{{ trace.count }}</td>
+              <td class="p-2 text-right">{{ trace.ratio }}%</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <!-- Trace item Table -->
+    <section class="px-4 py-2 h-full w-[calc(100%_-_320px)] bg-neutral-10 rounded-xl">
+      <p class="h2 mb-2 px-4">Trace #{{ showTraceId }}</p>
+      <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
+        <div class="h-full w-full">
+          <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
+        </div>
+      </div>
+      <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable" @scroll="handleScroll">
+          <DataTable :value="caseData" showGridlines tableClass="text-sm " breakpoint="0">
+            <div v-for="(col, index) in columnData" :key="index">
+              <Column :field="col.field" :header="col.header">
+                <template #body="{ data }">
+                  <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
+                    {{ data[col.field] }}
                   </div>
-                </td>
-                <td class="py-2 text-right">{{ trace.count }}</td>
-                <td class="p-2 text-right">{{ trace.ratio }}%</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-      <!-- Trace item Table -->
-      <section class="px-4 py-2 h-full w-[calc(100%_-_320px)] bg-neutral-10 rounded-xl">
-        <p class="h2 mb-2 px-4">Trace #{{ showTraceId }}</p>
-        <div class="h-36 w-full px-2 mb-2 border border-neutral-300 rounded">
-          <div class="h-full w-full">
-            <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
-          </div>
-        </div>
-        <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_200px)] infiniteTable" @scroll="handleScroll">
-            <DataTable :value="caseData" showGridlines tableClass="text-sm " breakpoint="0">
-              <div v-for="(col, index) in columnData" :key="index">
-                <Column :field="col.field" :header="col.header">
-                  <template #body="{ data }">
-                    <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
-                      {{ data[col.field] }}
-                    </div>
-                  </template>
-                </Column>
-              </div>
-            </DataTable>
-        </div>
-      </section>
-    </div>
+                </template>
+              </Column>
+            </div>
+          </DataTable>
+      </div>
+    </section>
+  </div>
 </Dialog>
 </template>
 <script>
diff --git a/src/components/File/UploadModal.vue b/src/components/File/UploadModal.vue
new file mode 100644
index 0000000..1d872a1
--- /dev/null
+++ b/src/components/File/UploadModal.vue
@@ -0,0 +1,51 @@
+<template>
+  <Dialog :visible="uploadModal" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass" @update:visible="$emit('closeModal', $event)">
+    <template #header>
+      <div class="py-5">
+      </div>
+    </template>
+    <div class=" h-full flex flex-col justify-center items-center p-4 space-y-4">
+      <IconUploarding class="loader-arrow-upward"></IconUploarding>
+      <p class="text-neutral-900">Click or drag a file here.</p>
+      <p class="text-neutral-500">(Only <span class="text-primary">.csv</span> is supported)</p>
+      <p class="btn btn-lg btn-c-primary">下一頁</p>
+      <p class="btn btn-lg btn-c-primary" @click="uploadFailde">上傳失敗 Modal</p>
+      <p class="btn btn-lg btn-c-primary" @click="uploadSuccess">上傳成功 Modal</p>
+      <p class="btn btn-lg btn-c-primary" @click="uploadConfirm">是否上傳 Modal</p>
+    </div>
+  </Dialog>
+</template>
+<script>
+import IconUploarding from '../icons/IconUploarding.vue';
+import { uploadFailde, uploadSuccess, uploadConfirm } from '@/module/alertModal.js'
+
+export default {
+  props: ['uploadModal'],
+  data() {
+    return {
+      contentClass: 'h-full',
+    }
+  },
+  components: {
+    IconUploarding,
+  },
+  methods: {
+    uploadFailde,
+    uploadSuccess,
+    uploadConfirm,
+  }
+}
+</script>
+<style scoped>
+.loader-arrow-upward {
+  animation: bump 0.6s linear infinite alternate;
+}
+@keyframes bump {
+  0% {
+    transform: translate(0%, 5px);
+  }
+  100% {
+    transform: translate(0%, -5px);
+  }
+}
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index dc65121..ab576cb 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -27,11 +27,15 @@
                 </button>
               </span>
             </label>
-          </form>
-          <label class="btn btn-sm btn-neutral cursor-pointer">
+          </form> -->
+          <!-- <label class="btn btn-sm btn-neutral cursor-pointer">
             <input id="uploadFiles" class="hidden" type="file">
             Upload
           </label> -->
+          <div class="btn btn-sm btn-neutral cursor-pointer" @click="uploadModal = true">
+            Upload
+            <UploadModal :visible="uploadModal" @closeModal="uploadModal = $event"></UploadModal>
+          </div>
         </div>
         <!-- Other Page: Save and Download -->
         <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
@@ -52,6 +56,7 @@ import ConformanceStore from '@/stores/conformance.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
 import { saveFilter, savedSuccessfully, saveConformance } from '@/module/alertModal.js';
+import UploadModal from './File/UploadModal.vue';
 
 export default {
   setup() {
@@ -66,6 +71,7 @@ export default {
   components: {
     IconSearch,
     IconSetting,
+    UploadModal,
   },
   data() {
     return {
@@ -79,6 +85,7 @@ export default {
       },
       navViewName: 'FILES',
       isActive: null,
+      uploadModal: false,
     };
   },
   computed: {
diff --git a/src/components/icons/IconUploarding.vue b/src/components/icons/IconUploarding.vue
new file mode 100644
index 0000000..202d581
--- /dev/null
+++ b/src/components/icons/IconUploarding.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+    <g clip-path="url(#clip0_2395_2657)">
+      <circle cx="32" cy="32" r="30" fill="#0099FF"/>
+      <path d="M33.7678 22.2322C32.7915 21.2559 31.2085 21.2559 30.2322 22.2322L14.3223 38.1421C13.346 39.1185 13.346 40.7014 14.3223 41.6777C15.2986 42.654 16.8816 42.654 17.8579 41.6777L32 27.5355L46.1421 41.6777C47.1185 42.654 48.7014 42.654 49.6777 41.6777C50.654 40.7014 50.654 39.1184 49.6777 38.1421L33.7678 22.2322ZM29.5 64C29.5 65.3807 30.6193 66.5 32 66.5C33.3807 66.5 34.5 65.3807 34.5 64H29.5ZM29.5 24L29.5 64H34.5L34.5 24L29.5 24Z" fill="white"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_2395_2657">
+        <rect width="64" height="64" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/src/module/alertModal.js b/src/module/alertModal.js
index 6db021d..2ad7b72 100644
--- a/src/module/alertModal.js
+++ b/src/module/alertModal.js
@@ -4,6 +4,7 @@ import ConformanceStore from '@/stores/conformance.js';
 import LoginStore from '@/stores/login.js';
 
 const customClass = {
+  container: '!z-[99999]',
   popup: '!w-[564px]',
   title: '!text-xl !font-semibold !mb-2',
   htmlContainer: '!text-sm !font-normal !h-full !mb-4 !leading-5',
@@ -165,36 +166,70 @@ export async function leaveConformance(next, addConformanceCreateCheckId, toPath
     logOut ? null : next(false);
   }
 };
-
-// 登出 button 規則，暫時沒用到
-export async function logoutLeave(addFilterId) {
-  const allMapDataStore = AllMapDataStore();
-  const loginStore = LoginStore();
+/**
+ * Upload failde
+ * @param { string } value
+ */
+export async function uploadFailde(value) {
+  value = value ? value : '';
+  await Swal.fire({
+    title: 'UPLOAD FAILED',
+    html: `(錯誤樣態由前後端自行確認，呈現於此處)  e.g.您的資料格式錯誤，請檢查資料後再重新上傳。`,
+    timer: 5000, // 停留5秒後自動關閉
+    showConfirmButton: false,
+    icon: 'error',
+    iconColor: '#FF3366',
+    customClass: customClass
+  })
+};
+/**
+ * Upload Success
+ * @param { string } value
+ */
+export async function uploadSuccess() {
+  await Swal.fire({
+    title: 'UPLOAD COMPLETED',
+    timer: 5000, // 停留5秒後自動關閉
+    showConfirmButton: false,
+    icon: 'success',
+    iconColor: '#0099FF',
+    customClass: customClass
+  })
+};
+/**
+ * Confirm whether to upload the file  */
+export async function uploadConfirm() {
   const result = await Swal.fire({
-    title: 'ARE YOU SURE TO LEAVE MAP?',
-    html: 'Filter settings have not been saved.</br>Click “Save as” to save filtered results, “OK” to leave map.',
+    title: 'ARE YOU SURE?',
+    html: 'After uploading, you won’t be able to modify labels.',
     icon: 'warning',
     iconColor: '#FF3366',
     reverseButtons:true,
-    confirmButtonText: 'Save as',
+    confirmButtonText: 'Yes',
     confirmButtonColor: '#FF3366',
     showCancelButton: true,
-    cancelButtonText: 'OK',
+    cancelButtonText: 'No',
     cancelButtonColor: '#94a3b8',
     customClass: customClass
   })
   if(result.isConfirmed) {
-    await saveFilter(addFilterId);
-    // allMapDataStore.tempFilterId = await null;
-    // allMapDataStore.temporaryData = await [];
-    // allMapDataStore.postRuleData = await [];
-    // allMapDataStore.ruleData = await [];
-    // await loginStore.logOut()
+    uploadloader(); // 跑馬燈
   } else if(result.dismiss === 'cancel') {
-    allMapDataStore.tempFilterId = await null;
-    // allMapDataStore.temporaryData = await [];
-    // allMapDataStore.postRuleData = await [];
-    // allMapDataStore.ruleData = await [];
-    await loginStore.logOut()
+    // 什麼都不做
+  } else if(result.dismiss === 'backdrop') {
+    // 什麼都不做
   }
-}
+};
+/**
+ * Upload loader
+ */
+export async function uploadloader() {
+  await Swal.fire({
+    html: '<span class="loaderBar mt-7"></span>',
+    timer: 5000, // 停留5秒後自動關閉
+    showConfirmButton: false,
+    allowOutsideClick: false,
+    // allowOutsideClick: () => !Swal.isLoading()
+    customClass: customClass
+  })
+};