WIP: account edit modal layout done (now: without password rows)

src/assets/icon-x.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.7081 18.2926C19.801 18.3855 19.8747 18.4958 19.9249 18.6172C19.9752 18.7386 20.0011 18.8687 20.0011 19.0001C20.0011 19.1315 19.9752 19.2616 19.9249 19.383C19.8747 19.5044 19.801 19.6147 19.7081 19.7076C19.6151 19.8005 19.5048 19.8742 19.3835 19.9245C19.2621 19.9747 19.132 20.0006 19.0006 20.0006C18.8692 20.0006 18.7391 19.9747 18.6177 19.9245C18.4963 19.8742 18.386 19.8005 18.2931 19.7076L10.0006 11.4138L1.70806 19.7076C1.52042 19.8952 1.26592 20.0006 1.00056 20.0006C0.735192 20.0006 0.480697 19.8952 0.293056 19.7076C0.105415 19.5199 5.23096e-09 19.2654 0 19.0001C-5.23096e-09 18.7347 0.105415 18.4802 0.293056 18.2926L8.58681 10.0001L0.293056 1.70757C0.105415 1.51993 -1.97712e-09 1.26543 0 1.00007C1.97712e-09 0.734704 0.105415 0.480208 0.293056 0.292568C0.480697 0.104927 0.735192 -0.000488279 1.00056 -0.000488281C1.26592 -0.000488283 1.52042 0.104927 1.70806 0.292568L10.0006 8.58632L18.2931 0.292568C18.4807 0.104927 18.7352 -0.000488286 19.0006 -0.000488281C19.2659 -0.000488276 19.5204 0.104927 19.7081 0.292568C19.8957 0.480208 20.0011 0.734704 20.0011 1.00007C20.0011 1.26543 19.8957 1.51993 19.7081 1.70757L11.4143 10.0001L19.7081 18.2926Z" fill="#64748B"/>
+</svg>

src/components/AccountMenu/SearchBar.vue

@@ -2,7 +2,7 @@
     <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full 
         justify-between">
         <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"/>
-        <img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex"/>
+        <img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex cursor-pointer"/>
     </div>
 </template>
 

src/components/Navbar.vue

@@ -135,7 +135,9 @@ export default {
       return result;
     },
     noShowSaveButton: function() {
-      return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || this.activePage === 'PERFORMANCE' ? true : false;
+      return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || 
+        this.navViewName === 'ACCOUNT MANAGEMENT' ||
+        this.activePage === 'PERFORMANCE' ? true : false;
     },
     ...mapState(PageAdminStore, [
       'activePage',

src/i18n/en.json

@@ -5,7 +5,8 @@
         "Apply": "Apply",
         "Cancel": "Cancel",
         "Clear": "Clear",
-        "Save": "Save"
+        "Save": "Save",
+        "Confirm": "Confirm"
     },
     "AcctMgmt":{
         "hi": "Hi, ",
@@ -18,7 +19,8 @@
         "AdminRights": "Admin Rights",
         "AccountActivation": "Account Activation",
         "Detail": "Detail",
-        "Edit": "Edit"
+        "Edit": "Edit",
+        "AccountEdit": "Account Edit"
     },
     "Compare": {
         "timeUsage": "Time Usage",

src/module/alertModal.js

@@ -3,6 +3,7 @@ import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
 import FilesStore from '@/stores/files.js';
 import PageAdminStore from '@/stores/pageAdmin.js';
+import { useModalStore } from '@/stores/modal.js';
 
 const customClass = {
   container: '!z-[99999]',
@@ -484,3 +485,27 @@ export async function reallyDeldetInformation(files, reallyDeldetData) {
   recordIdData = await Promise.all(reallyDeldetData.map(file => filesStore.deletionRecord(file.id)));
   await filesStore.fetchAllFiles();
 }
+
+/**
+ * When user is leaving the acct mgmt page but hasn't finished editing,
+ * we jump out this alert modal to remind her.
+ */
+export async function leaveAccountManagementToRemind(){
+  const modalStore = useModalStore();
+  const result = await Swal.fire({
+    title: 'SAVE YOUR EDIT?',
+    icon: 'info',
+    showCancelButton: true,
+    didOpen: () => {
+      const confirmButton = Swal.getConfirmButton();
+
+      confirmButton.style.border = '1px solid #0099FF';
+    }
+  });
+  if(result.isConfirmed) {
+    //TODO: Call Pinia Save Backend API
+  } else {
+    //TODO: 
+    modalStore.openModal();
+  }
+};

src/views/AccountManagement/AccountAdmin/index.vue

@@ -42,7 +42,7 @@
                     </Column>
                     <Column field="edit" :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500">
                         <template #body="slotProps">                            
-                            <img src="@/assets/icon-edit.svg" alt="Edit" class="cursor-pointer"/>
+                            <img src="@/assets/icon-edit.svg" alt="Edit" class="cursor-pointer" @click="onEditBtnClick(slotProps.data.id)"/>
                         </template></Column>
                 </DataTable>
             </div>
@@ -66,7 +66,7 @@ function repeatAccountList(accountList, N) {
         // 复制每次的对象并将其添加到新数组中
         accountList.forEach(account => {
             // 创建一个新的对象，避免直接引用
-            const newAccount = { ...account };
+            const newAccount = { ...account, id: account.id + i };
             repeatedList.push(newAccount);
         });
     }
@@ -168,6 +168,9 @@ export default {
         onDetailBtnClick(dataId){
             this.openModal();
         },
+        onEditBtnClick(dataId){
+            this.openModal();
+        },
         ...mapActions(useModalStore, ['openModal']),
     },
     created() {

src/views/AccountManagement/ModalAccountEdit.vue

@@ -0,0 +1,76 @@
+<template>
+    <div id="modal_account_edit" class="w-[600px] h-[296px] bg-[#FFFFFF] rounded
+        shadow-lg flex flex-col">
+        <header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
+            border-b border-b-[1px] border-[#CBD5E1]
+        ">
+            <h1 class="flex text-base font-bold"> {{ i18next.t("AcctMgmt.AccountEdit") }}</h1>
+            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
+                @click="onCloseBtnClick"
+            />
+        </header>
+        
+        <main class="flex row h-[96px] my-[32px] flex-col px-8">
+            <div class="input-row w-full flex py-3">
+                <span class="field-label w-[68px] text-sm flex items-center font-medium mr-4 justify-end">{{ i18next.t("AcctMgmt.Account") }} </span>
+                <input class="w-[454px] rounded p-1 btn btn-sm btn-neutralborder border-[1px] border-[#64748B] flex items-center h-[40px]"/>
+            </div>
+            <div class="input-row w-full flex py-3 items-center">
+                <span class="field-label w-[68px] text-sm flex items-center font-medium mr-4 justify-end">{{ i18next.t("AcctMgmt.FullName") }} </span>
+                <input class="w-[454px] rounded p-1 btn btn-sm btn-neutralborder border-[1px] border-[#64748B] flex items-center h-[40px]"/>
+            </div>
+        </main>
+        <footer class="flex row footer justify-end pr-[32px]">            
+            <button class="cancel-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
+                flex justify-center items-center text-[#4E5969] font-medium"
+                @click="onCancelBtnClick"
+            >
+                {{ i18next.t("Global.Cancel") }}
+            </button>
+            <button class="confirm-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 bg-[#0099FF]
+                flex justify-center items-center text-[#ffffff] font-medium  ml-[16px]"
+                @click="onConfirmBtnClick"
+            >
+                {{ i18next.t("Global.Confirm") }}
+            </button>
+        </footer>       
+    </div>
+</template>
+
+<script>
+import i18next from "@/i18n/i18n.js";
+import { mapActions, } from 'pinia';
+import { useModalStore } from '@/stores/modal.js';
+
+export default {
+    setup() {
+      return {
+
+      };
+    },
+    data() {
+        return {
+            i18next: i18next,
+        };
+    },
+    methods: {
+        onConfirmBtnClick(){
+            //TODO:
+        },
+        onCloseBtnClick(){
+            this.closeModal();
+        },
+        onCancelBtnClick(){
+            this.closeModal();
+        },
+        ...mapActions(useModalStore, ['closeModal']),
+    }
+};
+
+</script>
+<style>
+#modal_account_edit {
+    background-color: #ffffff;
+    backdrop-filter: opacity(1); /*防止子元件繼承父元件的透明度 */
+}
+</style>

src/views/AccountManagement/ModalContainer.vue

@@ -1,21 +1,16 @@
 <template>
     <div id="modal_container" v-if="modalStore.isModalOpen" class="fixed w-screen h-screen bg-gray-800
         flex justify-center items-center">
-      <button @click="modalStore.openModal" class="flex px-4 py-2 bg-blue-500 text-white rounded">
-        Open Modal
-      </button>
-
-      <button @click="modalStore.closeModal" class="flex px-4 py-2 bg-blue-500 text-white rounded">
-        Close Modal
-      </button>
-  
 
+      <div class="flex">
+        <ModalAccountEdit/>
+      </div>
     </div>    
   </template>
   
   <script>
   import { useModalStore } from '@/stores/modal.js';
-  
+  import ModalAccountEdit from './ModalAccountEdit.vue';
   export default {
     setup() {
       const modalStore = useModalStore();
@@ -23,11 +18,14 @@
         modalStore,
       };
     },
+    components: {
+      ModalAccountEdit,
+    }
   };
   </script>
 <style>
 #modal_container {
     z-index: 9999;
-    background-color: rgb(254,254,254);
+    background-color: rgba(254,254,254, 0.8);
 }
 </style>