WIP: delete alert modal prototype.

2024-06-21 14:20:52 +08:00
parent ad8c555632
commit 0fb0d8b529
9 changed files with 152 additions and 18 deletions
--- a/src/views/AccountManagement/AccountAdmin/index.vue
+++ b/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)
@@ -191,9 +206,17 @@ export default {
        const handleEditMouseOut = (username) => {
            acctMgmtStore.changeIsEditHoveredByUser(username, false);
        };
+
+        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() {
--- a/src/views/AccountManagement/ModalAccountEdit.vue
+++ b/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() {
--- a/src/views/AccountManagement/ModalAccountInfo.vue
+++ b/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>
--- a/src/views/AccountManagement/ModalContainer.vue
+++ b/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,11 +15,14 @@
  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() {
@@ -35,11 +39,13 @@
        MODAL_CREATE_NEW,
        MODAL_ACCT_EDIT,
        MODAL_ACCT_INFO,
+        MODAL_DELETE,
      };
    },
    components: {
      ModalAccountEdit,
      ModalAccountInfo,
+      ModalDeleteAlert,
    }
  };
  </script>
--- a/src/views/AccountManagement/ModalDeleteAlert.vue
+++ b/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>