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

WIP: create feature checkboxes layout

Browse Source
This commit is contained in:
Cindy Chang
2024-06-20 16:54:37 +08:00
parent 05caf819bb
commit 193bc315ca
6 changed files with 86 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,8 +6,8 @@
<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
justify-between">
<div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
<span class="align-right-span flex w-[100px] justify-end">
<div class="field-label text-sm flex items-center font-medium justify-end">
<span class="align-right-span flex w-[122px] justify-end">
{{ i18next.t("AcctMgmt.Account") }}
</span>
</div>
@@ -17,8 +17,8 @@
</div>
<div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
justify-between">
<div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
<span class="align-right-span flex w-[100px] justify-end">
<div class="field-label text-sm flex items-center font-medium justify-end">
<span class="align-right-span flex w-[122px] justify-end">
{{ i18next.t("AcctMgmt.FullName") }}
</span>
</div>
@@ -27,8 +27,8 @@
</div>
<div v-show="!isSSO" class="input-row w-full flex py-2 h-[40px] mb-4 items-center
justify-between">
<div class="field-label text-sm flex items-center font-medium mr-4 justify-end">
<span class="align-right-span flex w-[100px] justify-end">
<div class="field-label text-sm flex items-center font-medium justify-end">
<span class="align-right-span flex w-[122px] justify-end">
{{ i18next.t("AcctMgmt.Password") }}
</span>
</div>
@@ -42,7 +42,7 @@
</div>
<div v-show="!isSSO" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
mb-4 flex items-center"> <!-- 2-by-2 的格子，其中左下角是一個dummy格子，其沒有內容 -->
<span class="field-label w-[100px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
<span class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
:class="{
'text-[#000000]': isPwdMatched,
'text-[#FF3366]': !isPwdMatched,
@@ -73,7 +73,24 @@
{{ i18next.t("AcctMgmt.PwdNotMatch") }}
</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 class="dummy field-label flex items-center w-[122px]">
</div> <!--這裡也使用了dummy欄位去撐起空間-->
<section id="account_create_checkboxes_section" class="flex flex-col">
<div class="checkbox-and-text flex">
<IconChecked :isChecked="isSetAsAdminChecked" @click="toggleIsAdmin"/>
<span class="flex checkbox-text">
{{ i18next.t("AcctMgmt.SetAsAdmin") }}
</span>
</div>
<div class="checkbox-and-text flex">
<IconChecked :isChecked="isSetActivedChecked" @click="toggleIsActivated"/>
<span class="flex checkbox-text">
{{ i18next.t("AcctMgmt.ActivateNow") }}
</span>
</div>
</section>
</div>
</main>
<footer class="flex row footer justify-end pr-[32px] pb-8">
@@ -104,6 +121,7 @@ import { mapActions, } from 'pinia';
import { useModalStore } from '@/stores/modal.js';
import useAcctMgmtStore from '@/stores/acctMgmt.js';
import ModalHeader from "./ModalHeader.vue";
import IconChecked from "@/components/icons/IconChecked.vue";
export default defineComponent({
setup() {
@@ -114,6 +132,8 @@ export default defineComponent({
const isPwdMatched = ref(true);
const inputPwd = ref("");
const inputConfirmPwd = ref("");
const isSetAsAdminChecked = ref(false);
const isSetActivedChecked = ref(true);
const {
id,
@@ -143,6 +163,13 @@ export default defineComponent({
validateConfirmPwd();
}
const toggleIsAdmin = () => {
isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
}
const toggleIsActivated = () => {
isSetActivedChecked.value = !isSetActivedChecked.value;
}
return {
isConfirmDisabled,
account,
@@ -157,6 +184,10 @@ export default defineComponent({
inputPwd,
inputConfirmPwd,
onConfirmBtnClick,
isSetAsAdminChecked,
isSetActivedChecked,
toggleIsAdmin,
toggleIsActivated,
};
},
data() {
@@ -166,6 +197,7 @@ export default defineComponent({
},
components: {
ModalHeader,
IconChecked,
},
methods: {
onCloseBtnClick(){