imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: delete alert modal prototype.

Browse Source
This commit is contained in:
Cindy Chang
2024-06-21 14:20:52 +08:00
parent ad8c555632
commit 0fb0d8b529
9 changed files with 152 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/AccountManagement/ModalAccountEdit.vue
View File

@@ -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() {