WIP: delete alert modal prototype.

src/assets/icon-large-exclamation.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.1386 8.155C38.4927 6.91052 37.4801 5.8602 36.2172 5.12506C34.9544 4.38992 33.4928 3.99988 32.0009 3.99988C30.509 3.99988 29.0474 4.38992 27.7846 5.12506C26.5217 5.8602 25.5091 6.91052 24.8632 8.155L2.08337 49.619C-0.642023 54.5693 2.8019 61.1427 9.21822 61.1427H54.7808C61.1999 61.1427 64.6382 54.5719 61.9184 49.619L39.1386 8.155ZM32.0009 22.185C32.7453 22.185 33.4592 22.4586 33.9856 22.9457C34.512 23.4327 34.8077 24.0933 34.8077 24.7822V37.7681C34.8077 38.4569 34.512 39.1175 33.9856 39.6046C33.4592 40.0916 32.7453 40.3653 32.0009 40.3653C31.2565 40.3653 30.5426 40.0916 30.0162 39.6046C29.4898 39.1175 29.1941 38.4569 29.1941 37.7681V24.7822C29.1941 24.0933 29.4898 23.4327 30.0162 22.9457C30.5426 22.4586 31.2565 22.185 32.0009 22.185ZM32.0009 44.261C32.7453 44.261 33.4592 44.5347 33.9856 45.0217C34.512 45.5088 34.8077 46.1694 34.8077 46.8582V48.1568C34.8077 48.8456 34.512 49.5062 33.9856 49.9933C33.4592 50.4804 32.7453 50.754 32.0009 50.754C31.2565 50.754 30.5426 50.4804 30.0162 49.9933C29.4898 49.5062 29.1941 48.8456 29.1941 48.1568V46.8582C29.1941 46.1694 29.4898 45.5088 30.0162 45.0217C30.5426 44.5347 31.2565 44.261 32.0009 44.261Z" fill="#FF3366"/>
+</svg>

src/constants/constants.js

@@ -1,8 +1,13 @@
 export const PRIME_VUE_TICKS_LIMIT = 6;
+export const ONCE_RENDER_NUM_OF_DATA = 6;
+
 export const GRID_COLOR = '#64748b';
+
 export const MODAL_CREATE_NEW = 'MODAL_CREATE_NEW';
 export const MODAL_ACCT_EDIT = 'MODAL_ACCT_EDIT';
 export const MODAL_ACCT_INFO = 'MODAL_ACCT_INFO';
+export const MODAL_DELETE = 'MODAL_DELETE';
+
 export const knownLayoutChartOption = {
     padding: {
       top: 16,

src/i18n/en.json

@@ -1,4 +1,7 @@
 {
+    "No": "No",
+    "Yes": "Yes",
+    "The": "The",
     "Global": {
         "Login": "Login",
         "Logout": "Logout",
@@ -13,6 +16,7 @@
         "acctMgmt": "Account management",
         "mangUrAcct": "Manage your account",
         "Logout": "Log out",
+        "CreateNew": "Create New",
         "Search": "Search",
         "Account": "Account",
         "FullName": "Full Name",
@@ -27,7 +31,10 @@
         "ConfirmPassword": "Confirm Password",
         "PwdNotMatch": "Confirm Password does not match.",
         "SetAsAdmin": "Set as admin.",
-        "ActivateNow": "Activate now."
+        "ActivateNow": "Activate now.",
+        "DelteQuestion": "Are you sure to delete ?",
+        "DeleteFirstClause": "deletion is irreversible !",
+        "DeleteSecondClause": "You will delete all data and content on this account."
     },
     "Compare": {
         "timeUsage": "Time Usage",

src/stores/acctMgmt.js

@@ -1,6 +1,5 @@
 import { defineStore } from "pinia";
 import apiError from '@/module/apiError.js';
-import iconDeleteGray from '@/assets/icon-delete-gray.svg';
 
 export default defineStore('acctMgmtStore', {
   state: () => ({
@@ -34,6 +33,17 @@ export default defineStore('acctMgmtStore', {
       const userFind = this.allUserAccoutList.find(user => user.username === username);
       this.currentViewingUser = userFind ? userFind : {};
     },
+    /**
+     * We have this method because we want to handle create new modal case.
+     */
+    clearCurrentViewingUser() {
+      this.currentViewingUser = {
+        username: '',
+        name: '',
+        is_admin: false,
+        is_sso: false,
+      };
+    },
     /**
      * Get all user accounts
      */
@@ -92,5 +102,16 @@ export default defineStore('acctMgmtStore', {
         userToChange.isEditHovered = isEditHovered;
       }
     },
+    /**
+     * According to mouseover or mouseleave status, change the bool value.
+     * @param {string} username 
+     * @param {boolean} isEditHovered 
+     */
+    changeIsDetailHoveredByUser(username, isDetailHovered) {
+      const userToChange = this.allUserAccoutList.find(user => user.username === username);
+      if (userToChange) {
+        userToChange.isDetailHovered = isDetailHovered;
+      }
+    },
   },
 })

src/views/AccountManagement/AccountAdmin/index.vue

@@ -1,7 +1,11 @@
 <template>
     <div class="flex justify-center pt-2">
         <div class="flex w-[1216px] flex-col items-center">
-            <div class="flex w-full justify-end py-2">
+            <div class="flex w-full justify-between py-2 items-center">
+                <button id="create_new_acct_btn" class="flex rounded-full bg-primary text-[#ffffff] flex justify-center
+                    items-center px-6 py-[10px]" @click="onCreateNewClick">
+                    {{ i18next.t("AcctMgmt.CreateNew") }}
+                </button>
                 <SearchBar/>
             </div>
             <div id="acct_mgmt_data_grid" class="flex w-full overflow-y-auto h-[570px]" @scroll="handleScroll">
@@ -58,7 +62,10 @@
                         <template #body="slotProps">
                             <div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <img src="@/assets/icon-detail-card.svg" alt="Detail" class="cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"/>
+                                <img :src="slotProps.data.isDetailHovered ? iconDetailOn : iconDetailOff" alt="Detail" class="cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"
+                                    @mouseover="handleDetailMouseOver(slotProps.data.username)"
+                                    @mouseout="handleDetailMouseOut(slotProps.data.username)"
+                                />
                             </div>
                         </template>
                     </Column>
@@ -105,14 +112,17 @@ import {
     MODAL_CREATE_NEW,
     MODAL_ACCT_EDIT,
     MODAL_ACCT_INFO,
+    MODAL_DELETE,
     accountList,
+    ONCE_RENDER_NUM_OF_DATA,
   } from "@/constants/constants.js";
   import iconDeleteGray from '@/assets/icon-delete-gray.svg';
   import iconDeleteRed from '@/assets/icon-delete-red.svg';
   import iconEditOff from '@/assets/icon-edit-off.svg';
   import iconEditOn from '@/assets/icon-edit-on.svg';
+  import iconDetailOn from '@/assets/icon-detail-on.svg';
+  import iconDetailOff from '@/assets/icon-detail-card.svg';
 
-const ONCE_RENDER_NUM_OF_DATA = 9;
 
 function repeatAccountList(accountList, N) {
     const repeatedList = [];
@@ -162,6 +172,11 @@ export default {
             }            
         };
 
+        const onCreateNewClick = () => {
+            acctMgmtStore.clearCurrentViewingUser();
+            modalStore.openModal(MODAL_CREATE_NEW);
+        };
+
         const getFirstPageUserData = async() => {
             await acctMgmtStore.getAllUserAccounts();
             internalInfiniteAcctData.value = allUserAccoutList.value.slice(0, ONCE_RENDER_NUM_OF_DATA)
@@ -192,8 +207,16 @@ export default {
             acctMgmtStore.changeIsEditHoveredByUser(username, false);
         };
 
-        const onDeleteBtnClick = (usernameToDelete) => {
+        const handleDetailMouseOver = (username) => {
+            acctMgmtStore.changeIsDetailHoveredByUser(username, true);
+        };
 
+        const handleDetailMouseOut = (username) => {
+            acctMgmtStore.changeIsDetailHoveredByUser(username, false);
+        };
+        
+        const onDeleteBtnClick = (usernameToDelete) => {
+            modalStore.openModal(MODAL_DELETE);
         };
 
         const getRowClass = (curData) => {
@@ -211,6 +234,7 @@ export default {
             modalStore,
             loginUserData,
             internalInfiniteAcctData,
+            onCreateNewClick,
             getRowClass,
             onDeleteBtnClick,
             handleDeleteMouseOver,
@@ -219,10 +243,14 @@ export default {
             handleRowMouseOut,
             handleEditMouseOver,
             handleEditMouseOut,
+            handleDetailMouseOver,
+            handleDetailMouseOut,
             iconDeleteGray,
             iconDeleteRed,
             iconEditOff,
             iconEditOn,
+            iconDetailOn,
+            iconDetailOff,
         };
     },
     data() {

src/views/AccountManagement/ModalAccountEdit.vue

@@ -1,7 +1,7 @@
 <template>
-    <div id="modal_account_edit" class="w-[640px] bg-[#FFFFFF] rounded
+    <div id="modal_account_edit_or_create_new" class="w-[640px] bg-[#FFFFFF] rounded
         shadow-lg flex flex-col">
-        <ModalHeader :headerText="i18next.t('AcctMgmt.AccountEdit')"/>
+        <ModalHeader :headerText="modalTitle"/>
         
         <main class="flex row min-h-[96px] my-[32px] flex-col px-6">
             <div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
@@ -74,7 +74,7 @@
                     </span>
                 </div>
             </div>
-            <div class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center">
+            <div v-if="whichCurrentModal === MODAL_CREATE_NEW" class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center">
                 <div class="dummy field-label flex items-center w-[122px]">
                 </div> <!--這裡也使用了dummy欄位去撐起空間-->
                 <section id="account_create_checkboxes_section" class="flex flex-col">
@@ -122,10 +122,13 @@ import { useModalStore } from '@/stores/modal.js';
 import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
+import { MODAL_CREATE_NEW, } from '@/constants/constants.js';
 
 export default defineComponent({
     setup() {
         const acctMgmtStore = useAcctMgmtStore();
+        const modalStore = useModalStore();
+
         const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
         const isPwdEyeOn = ref(false);
         const isPwdConfirmEyeOn = ref(false);
@@ -135,6 +138,8 @@ export default defineComponent({
         const isSetAsAdminChecked = ref(false);
         const isSetActivedChecked = ref(true);
 
+        const whichCurrentModal = computed(() => modalStore.whichModal);
+
         const {
             id,
         } = currentViewingUser;
@@ -143,6 +148,10 @@ export default defineComponent({
         const username = computed(() => acctMgmtStore.currentViewingUser.username);
         const name = computed(() => acctMgmtStore.currentViewingUser.name);
 
+        const modalTitle = computed(() => {
+            return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
+        });
+
         const isConfirmDisabled = computed(() => {
             return inputPwd.length && inputConfirmPwd.length;
         });
@@ -188,6 +197,9 @@ export default defineComponent({
             isSetActivedChecked,
             toggleIsAdmin,
             toggleIsActivated,
+            whichCurrentModal,
+            MODAL_CREATE_NEW,
+            modalTitle,
         };
     },
     data() {

src/views/AccountManagement/ModalAccountInfo.vue

@@ -4,7 +4,10 @@
         <ModalHeader :headerText='i18next.t("AcctMgmt.AccountInformation")'/>
         <main class="flex main-part flex-col px-6 mt-6">
             <h1 id="acct_info_user_name" class="text-[32px] leading-[64px] font-medium">{{ fullName }}</h1>
-            <div class="status-container"><Badge displayText="Admin" isActivated/> <Badge displayText="Suspended" :isActivated="false"/></div>
+            <div class="status-container">
+                <Badge displayText="Admin" isActivated/>
+                <Badge displayText="Suspended" :isActivated="false"/>
+            </div>
             <div id="account_visit_info" class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4">
                 Account: <span class="text-[#0099FF]">{{ account }}</span>, total visits <span class="text-[#0099FF]">{{ visitTiime }}</span> times.
             </div>

src/views/AccountManagement/ModalContainer.vue

@@ -3,8 +3,9 @@
         flex justify-center items-center">
 
       <div class="flex">
-        <ModalAccountEdit v-if="whichModal === MODAL_ACCT_EDIT"/>
+        <ModalAccountEdit v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW "/>
         <ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO"/>
+        <ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
       </div>
     </div>    
   </template>
@@ -14,12 +15,15 @@
   import { useModalStore } from '@/stores/modal.js';
   import ModalAccountEdit from './ModalAccountEdit.vue';
   import ModalAccountInfo from './ModalAccountInfo.vue';
+  import ModalDeleteAlert from './ModalDeleteAlert.vue';
   import {
     MODAL_CREATE_NEW,
     MODAL_ACCT_EDIT,
     MODAL_ACCT_INFO,
+    MODAL_DELETE,
   } from "@/constants/constants.js";
 
+  
   export default {
     setup() {
       const modalStore = useModalStore();
@@ -35,11 +39,13 @@
         MODAL_CREATE_NEW,
         MODAL_ACCT_EDIT,
         MODAL_ACCT_INFO,
+        MODAL_DELETE,
       };
     },
     components: {
       ModalAccountEdit,
       ModalAccountInfo,
+      ModalDeleteAlert,
     }
   };
   </script>

src/views/AccountManagement/ModalDeleteAlert.vue

@@ -0,0 +1,49 @@
+<template>
+    <div id="modal_delete_acct_alert" class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]">
+        <div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
+        <main id="delete_acct_modal_main" class="flex flex-col items-center justify-center">
+            <img src="@/assets/icon-large-exclamation.svg" alt="!"  class="flex mt-[36px]">
+            <h1 class="flex mt-4 text-xl font-medium">{{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}</h1>
+            <div class="clauses flex flex-col mt-4 mb-8 px-8">
+                <h2 class="flex leading-[21px]">{{ i18next.t("The") }}&nbsp;<span class="text-[#FF3366]">
+                    {{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
+                    </span>
+                </h2>
+                <h2 class="flex leading-[21px]">{{ i18next.t("AcctMgmt.DeleteSecondClause") }}</h2>
+            </div>
+        </main>
+        <footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
+            <button id="calcel_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
+                bg-[#FF3366] text-[#ffffff]" @click="onNoBtnClick">
+                {{ i18next.t("No") }}
+            </button>
+            <button id="sure_to_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
+                border-2 border-[#FF3366] text-[#FF3366]">
+                {{ i18next.t("Yes") }}
+            </button>
+        </footer>
+    </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onBeforeMount, watch, } from 'vue';
+import { useModalStore } from '@/stores/modal.js';
+import useAcctMgmtStore from '@/stores/acctMgmt.js';
+import i18next from '@/i18n/i18n.js';
+
+export default defineComponent({
+    setup() {
+        const acctMgmtStore = useAcctMgmtStore();
+        const modalStore = useModalStore();
+
+        const onNoBtnClick = () => {
+            modalStore.closeModal();
+        }
+
+        return {
+            i18next,
+            onNoBtnClick,
+        };
+    },
+});
+</script>