From 9c7fd4a202faa1d6821452b05500e28005cd34d0 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Thu, 14 Dec 2023 09:34:35 +0800
Subject: [PATCH] feat: Upload layout done.

---
 src/assets/vendors.css              |  7 +++
 src/components/File/UploadModal.vue |  4 +-
 src/components/Navbar.vue           |  2 +
 src/router/index.js                 |  6 ++
 src/views/MainContainer.vue         |  5 +-
 src/views/Upload/index.vue          | 86 +++++++++++++++++++++++++++++
 6 files changed, 105 insertions(+), 5 deletions(-)
 create mode 100644 src/views/Upload/index.vue

diff --git a/src/assets/vendors.css b/src/assets/vendors.css
index c715c07..b93ac4f 100644
--- a/src/assets/vendors.css
+++ b/src/assets/vendors.css
@@ -9,6 +9,13 @@
   'GRAD' 0,
   'opsz' 40
 }
+.material-fill {
+  font-variation-settings:
+  'FILL' 1,
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 40
+}
 
 /* vue-toast-notification */
 .v-toast__item {
diff --git a/src/components/File/UploadModal.vue b/src/components/File/UploadModal.vue
index 1d872a1..ee0c92e 100644
--- a/src/components/File/UploadModal.vue
+++ b/src/components/File/UploadModal.vue
@@ -8,7 +8,7 @@
       <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>
+      <router-link class="btn btn-lg btn-c-primary" :to="{name: 'Upload', replace: true}">下一頁，路徑不添進歷史紀錄</router-link>
       <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>
@@ -33,7 +33,7 @@ export default {
     uploadFailde,
     uploadSuccess,
     uploadConfirm,
-  }
+  },
 }
 </script>
 <style scoped>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index ab576cb..c05c01f 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -37,6 +37,8 @@
             <UploadModal :visible="uploadModal" @closeModal="uploadModal = $event"></UploadModal>
           </div>
         </div>
+        <!-- Upload 無按鈕行為 -->
+        <div v-else-if="navViewName === 'UPLOAD'"></div>
         <!-- Other Page: Save and Download -->
         <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
         <div v-else class="space-x-4">
diff --git a/src/router/index.js b/src/router/index.js
index 009ef88..a8aa792 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import AuthContainer from '@/views/AuthContainer.vue';
 import MainContainer from '@/views/MainContainer.vue';
 import Login from '@/views/Login/index.vue';
 import Files from '@/views/Files/index.vue';
+import Upload from '@/views/Upload/index.vue';
 import Map from '@/views/Discover/Map/index.vue';
 import Conformance from '@/views/Discover/Conformance/index.vue';
 import MemberArea from '@/views/MemberArea/index.vue';
@@ -44,6 +45,11 @@ const routes = [
         name: "Files",
         component: Files,
       },
+      {
+        path: "/upload", // router.push({ replace: true }) 路徑不添進歷史紀錄
+        name: "Upload",
+        component: Upload
+      },
       {
         path: "/discover",
         name: "Discover",
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index b188487..74fc786 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -3,10 +3,9 @@
       <Header/>
       <Navbar/>
   </header>
-  <main>
+  <main class="w-full">
     <Loading v-if="loadingStore.isLoading" />
-    <router-view>
-    </router-view>
+    <router-view></router-view>
   </main>
 </template>
 
diff --git a/src/views/Upload/index.vue b/src/views/Upload/index.vue
new file mode 100644
index 0000000..a45faa5
--- /dev/null
+++ b/src/views/Upload/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="h-screen-main w-full px-4 flex flex-col justify-between items-start">
+    <!-- Upload Content -->
+    <div class="w-full">
+      <!-- File name -->
+      <p class="font-bold text-base leading-[48px] border-b border-neutral-300">File Name(點擊可以改名字)</p>
+      <!-- Upload notification -->
+      <div class="flex justify-start items-center space-x-2 ml-2 py-2">
+        <span class="material-symbols-outlined text-neutral-700" v-tooltip.right="tooltipUpload">info</span>
+        <span class="w-px h-7 bg-neutral-300"></span>
+        <div class="flex items-center">
+          <span class="material-symbols-outlined text-primary">notifications</span>
+          <span class="material-symbols-outlined material-fill text-danger">warning</span>
+        </div>
+        <!-- Upload text -->
+        <div class="flex justify-start items-center">
+          <p class="text-primary text-sm">
+            Please verify the label for each column before uploading.
+          </p>
+          <p class="text-danger text-sm">
+            Need to select [A], [B], [C].
+          </p>
+          <div class=" space-y-1">
+            <p class="text-danger text-sm">
+              [Case ID] has been assigned.
+            </p>
+            <p class="text-danger text-sm">
+              [Case ID], [Activity] have been assigned.
+            </p>
+          </div>
+        </div>
+      </div>
+      <!-- Upload table -->
+    </div>
+    <!-- Upload button -->
+    <div class="w-full text-right space-x-4 px-8 py-4">
+        <button type="button" class="btn btn-sm btn-neutral" @click="reset">Cancel</button>
+        <button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabled" :class="isDisabled ? 'btn-disable' : 'btn-neutral'">Upload</button>
+      </div>
+  </section>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const { isLoading } = storeToRefs(loadingStore);
+
+    return { isLoading }
+  },
+  data() {
+    return {
+      isDisabled: true,
+      tooltipUpload: {
+        value: `1. Case ID: A unique identifier for each case.
+          2. Activity: A process step executed by either a system (automated) or humans (manual).
+          3. Activity Instance ID: A unique identifier for a single occurrence of an activity.
+          4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
+          5. Status: Activity status, such as Start or Complete.
+          6. Attribute: A property that can be associated with a case to provide additional information about that case.
+          7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.`,
+       class: '!max-w-[400px] !text-[10px]',
+       autoHide: false,
+      }
+    }
+  },
+  methods: {
+    /**
+     * Cancel Button
+     */
+    reset() {},
+    /**
+     * Upload Button
+     */
+    submit() {},
+  },
+  mounted() {
+    this.isLoading = false;
+  },
+}
+// beforeRouteUpdate(){}
+</script>
+<style scoped>
+</style>