refactor:handle mode info or edit

src/pages/05_quotation/QuotationForm.vue

@@ -50,7 +50,7 @@ import ToggleButton from 'components/button/ToggleButton.vue';
 import FormAbout from 'components/05_quotation/FormAbout.vue';
 import SelectZone from 'components/shared/SelectZone.vue';
 import PersonCard from 'components/shared/PersonCard.vue';
-import { AddButton, SaveButton } from 'components/button';
+import { AddButton, SaveButton, EditButton } from 'components/button';
 import ProductServiceForm from './ProductServiceForm.vue';
 import QuotationFormInfo from './QuotationFormInfo.vue';
 import ProfileBanner from 'components/ProfileBanner.vue';
@@ -113,6 +113,13 @@ const currentQuotationId = ref<string | undefined>(undefined);
 const date = ref();
 
 const preSelectedWorker = ref<Employee[]>([]);
+const readonly = computed(() => {
+  return !(
+    quotationFormState.value.mode === 'create' ||
+    quotationFormState.value.mode === 'edit'
+  );
+});
+
 const selectedWorker = ref<
   (Employee & {
     attachment?: {
@@ -367,7 +374,6 @@ async function assignWorkerToSelectedWorker() {
     );
     if (retEmp) {
       workerList.value = retEmp.data.result;
-      console.log(retEmp.data.result);
       quotationFormData.value.worker.forEach((value) => {
         const tempValue: Employee | undefined = retEmp.data.result.find(
           (v) => v.id === value.id,
@@ -562,6 +568,7 @@ watch(
         input-only
         v-model:branch-id="branchId"
         v-model:customer-branch-id="quotationFormData.customerBranchId"
+        :readonly="readonly"
         @add-customer="triggerSelectTypeCustomerd()"
       />
     </header>
@@ -601,15 +608,18 @@ watch(
                   >
                     {{ $t('quotation.employeeList') }}
                   </span>
-                  <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
-                  {{
-                    toggleWorker
-                      ? $t('general.specify')
-                      : $t('general.noSpecify')
-                  }}
+                  <template v-if="!readonly">
+                    <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
+                    {{
+                      toggleWorker
+                        ? $t('general.specify')
+                        : $t('general.noSpecify')
+                    }}
+                  </template>
                 </div>
                 <nav class="q-ml-auto">
                   <AddButton
+                    v-if="!readonly"
                     icon-only
                     @click.stop="triggerSelectEmployeeDialog"
                   />
@@ -620,6 +630,7 @@ watch(
             <div class="surface-1 q-pa-md full-width">
               <WorkerItem
                 :employee-amount="selectedWorker.length"
+                :readonly="readonly"
                 fallback-img="/images/employee-avatar.png"
                 :rows="
                   selectedWorker.map((e: Employee) => ({
@@ -662,6 +673,7 @@ watch(
                 </div>
                 <nav class="q-ml-auto">
                   <AddButton
+                    v-if="!readonly"
                     icon-only
                     class="q-ml-auto"
                     @click.stop="triggerProductServiceDialog"
@@ -682,6 +694,7 @@ watch(
               </span>
 
               <ProductItem
+                :readonly="readonly"
                 :agent-price="agentPrice"
                 :employeeRows="
                   selectedWorker.map((e: Employee) => ({
@@ -786,6 +799,10 @@ watch(
           {{ $t('general.view', { msg: $t('general.example') }) }}
         </q-btn>
         <SaveButton
+          v-if="
+            quotationFormState.mode === 'create' ||
+            quotationFormState.mode === 'edit'
+          "
           @click="
             () => {
               convertDataToFormSubmit();
@@ -793,6 +810,15 @@ watch(
           "
           solid
         />
+        <EditButton
+          v-else
+          @click="
+            () => {
+              quotationFormState.mode = 'edit';
+            }
+          "
+          solid
+        />
       </div>
     </footer>