From 193bc315ca0a5f482093599d32b7ae713115118f Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Thu, 20 Jun 2024 16:54:37 +0800
Subject: [PATCH] WIP: create feature checkboxes layout

---
 src/assets/icon-blue-checkbox.svg             |  3 ++
 src/assets/icon-checkbox-checked.svg          |  3 ++
 src/assets/icon-checkbox-empty.svg            |  3 ++
 src/components/icons/IconChecked.vue          | 34 +++++++++++++
 src/i18n/en.json                              |  4 +-
 .../AccountManagement/ModalAccountEdit.vue    | 48 +++++++++++++++----
 6 files changed, 86 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/icon-blue-checkbox.svg
 create mode 100644 src/assets/icon-checkbox-checked.svg
 create mode 100644 src/assets/icon-checkbox-empty.svg
 create mode 100644 src/components/icons/IconChecked.vue

diff --git a/src/assets/icon-blue-checkbox.svg b/src/assets/icon-blue-checkbox.svg
new file mode 100644
index 0000000..45419a3
--- /dev/null
+++ b/src/assets/icon-blue-checkbox.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="16" height="16" rx="2" fill="white" stroke="#0099FF" stroke-width="2"/>
+</svg>
diff --git a/src/assets/icon-checkbox-checked.svg b/src/assets/icon-checkbox-checked.svg
new file mode 100644
index 0000000..b95b239
--- /dev/null
+++ b/src/assets/icon-checkbox-checked.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10.4999L0 5.53988L1.59 3.99988L5 7.34988L12.41 -0.00012207L14 1.57988L5 10.4999Z" fill="#0099FF"/>
+</svg>
diff --git a/src/assets/icon-checkbox-empty.svg b/src/assets/icon-checkbox-empty.svg
new file mode 100644
index 0000000..c690de8
--- /dev/null
+++ b/src/assets/icon-checkbox-empty.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="16" height="16" rx="2" fill="white" stroke="#CBD5E1" stroke-width="2"/>
+</svg>
diff --git a/src/components/icons/IconChecked.vue b/src/components/icons/IconChecked.vue
new file mode 100644
index 0000000..abe3e0b
--- /dev/null
+++ b/src/components/icons/IconChecked.vue
@@ -0,0 +1,34 @@
+<template>
+    <div
+        class="relative two-imgs-container  w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
+        <img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute"/>
+        <img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute"/>
+        <img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"/>
+    </div>
+    
+</template>
+
+<script>
+import { defineComponent, computed, ref, } from 'vue';
+import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
+import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
+import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
+
+export default defineComponent({
+    props: {
+        isChecked: {
+        type: Boolean,
+        required: true // 表示这个 props 是必需的
+        },
+    },
+    setup(props) {
+        const isChecked = computed(() => props.isChecked);
+        return {
+            ImgCheckboxBlueFrame,
+            ImgCheckboxCheckedMark,
+            ImgCheckboxGrayFrame,
+            isChecked,
+        };
+    },
+});
+</script>
\ No newline at end of file
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 76ff171..56d8ca6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -24,7 +24,9 @@
         "AccountInformation": "Account Information",
         "Password": "Password",
         "ConfirmPassword": "Confirm Password",
-        "PwdNotMatch": "Confirm Password does not match."
+        "PwdNotMatch": "Confirm Password does not match.",
+        "SetAsAdmin": "Set as admin.",
+        "ActivateNow": "Activate now."
     },
     "Compare": {
         "timeUsage": "Time Usage",
diff --git a/src/views/AccountManagement/ModalAccountEdit.vue b/src/views/AccountManagement/ModalAccountEdit.vue
index c18dba7..d7f1c73 100644
--- a/src/views/AccountManagement/ModalAccountEdit.vue
+++ b/src/views/AccountManagement/ModalAccountEdit.vue
@@ -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(){