editable status control

src/views/AccountManagement/ModalAccountEditCreate.vue

@@ -20,7 +20,8 @@
                         'text-[#FF3366]': !isAccountUnique,
                         'border-[#FF3366]': !isAccountUnique,
                         }"
-                        @focus="onInputAccountFocus"
+                        @focus="onInputAccountFocus" :readonly="!isEditable"
+                        @dblclick="onInputDoubleClick"
                     />
                     <div v-show="!isAccountUnique" class="error-wrapper my-2">                    
                         <div class="error-msg-section flex justify-start">
@@ -41,7 +42,8 @@
                     </span>
                 </div>
                 <input class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
-                    v-model="inputName"/>
+                    v-model="inputName" :readonly="!isEditable" @dblclick="onInputDoubleClick"
+                    />
             </div>
             <div v-show="!isSSO" class="input-row w-full flex py-2 h-[40px] mb-4 items-center
                 justify-between">
@@ -52,7 +54,7 @@
                 </div>
                 <div class="w-[454px] rounded border-[1px] border-[#64748B] flex items-center h-[40px] relative">
                     <input class="outline-none p-1 w-[352px]" :type="isPwdEyeOn ? 'text' : 'password'"
-                        v-model="inputPwd"/>
+                        v-model="inputPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"/>
                     <img v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
                         @click="togglePwdEyeBtn"/>
                     <img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer" @click="togglePwdEyeBtn"/>
@@ -75,7 +77,7 @@
                         'border-[#FF3366]': !isPwdMatched,
                     }">
                     <input class="outline-none p-1 w-[352px]" :type="isPwdConfirmEyeOn ? 'text' : 'password'"
-                        v-model="inputConfirmPwd"
+                        v-model="inputConfirmPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
                         :class="{
                         'text-[#000000]': isPwdMatched,
                         'text-[#FF3366]': !isPwdMatched,
@@ -133,7 +135,7 @@
 </template>
 
 <script>
-import { defineComponent, computed, ref, watch, } from 'vue';
+import { defineComponent, computed, ref, watch, onMounted, } from 'vue';
 import i18next from "@/i18n/i18n.js";
 import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
@@ -174,6 +176,8 @@ export default defineComponent({
 
         const isAccountUnique = ref(true);
 
+        const isEditable = ref(true);
+
         // 自從加入這段 watch 之後，填寫密碼欄位之時，就不會胡亂清空掉 account 或是 full name 蘭為了。
         watch(whichCurrentModal, (newVal) => {
             if (newVal === MODAL_CREATE_NEW) {
@@ -189,7 +193,6 @@ export default defineComponent({
             return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
         });
 
-
         watch(
             [inputUserAccount, inputName, inputPwd, inputConfirmPwd, isAccountUnique,
                 isPwdMatched,
@@ -197,8 +200,9 @@ export default defineComponent({
                 ([newAccount, newName, newPwd, newConfirmPwd, newIsAccountUnique,
                     newPwdMatched,
                 ]) => {
-                if (!newAccount.length || !newName.length || !newPwd.length 
-                    || !newConfirmPwd.length || !newIsAccountUnique
+                
+                if (!newAccount?.length || !newName?.length || !newPwd?.length 
+                    || !newConfirmPwd?.length || !newIsAccountUnique
                     || !newPwdMatched
                 ) {
                     isConfirmDisabled.value = true;
@@ -221,19 +225,23 @@ export default defineComponent({
             isPwdMatched.value = inputPwd.value.length > 0 && inputPwd.value === inputConfirmPwd.value;
         }
 
+        const onInputDoubleClick = () => {
+            // 允許編輯模式
+            isEditable.value = true;
+        }
+
         const onConfirmBtnClick = async () => {
             validateConfirmPwd();
             if(!isPwdMatched.value){
                 return;
             }
             
+            switch(whichCurrentModal.value) {
+                case MODAL_CREATE_NEW:
                     await checkAccountIsUnique();
                     if(!isAccountUnique.value) {
                         return;
                     }                
-            
-            switch(whichCurrentModal.value) {
-                case MODAL_CREATE_NEW:                    
                     await acctMgmtStore.createNewAccount({
                         username: inputUserAccount.value,
                         password: inputPwd.value,
@@ -257,6 +265,7 @@ export default defineComponent({
                         // is_active: isSetActivedChecked.value, //TODO: 待確認需求規格
                     });
                     await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+                    isEditable.value = false;
                 default:
                 break;
             }
@@ -270,18 +279,26 @@ export default defineComponent({
         };
 
         const toggleIsAdmin = () => {
+            if(isEditable){
                 isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
             }            
+        }
 
         const toggleIsActivated = () => {
+            if(isEditable){
                 isSetActivedChecked.value = !isSetActivedChecked.value;
             }
+        }
         const onInputAccountFocus = () => {
             if(!isAccountUnique.value) {
                 // 之所以要轉回true，是為了讓使用者可以繼續填寫不被阻擋
                 isAccountUnique.value = true;
             }
         }
+
+        onMounted(() => {
+        });
+
         return {
             isConfirmDisabled,
             username,
@@ -297,6 +314,7 @@ export default defineComponent({
             inputPwd,
             inputConfirmPwd,
             onConfirmBtnClick,
+            onInputDoubleClick,
             isSetAsAdminChecked,
             isSetActivedChecked,
             toggleIsAdmin,
@@ -306,6 +324,7 @@ export default defineComponent({
             modalTitle,
             isAccountUnique,
             onInputAccountFocus,
+            isEditable,
         };
     },
     data() {