refactor:handle mode info or edit

src/components/05_quotation/ProductItem.vue

@@ -16,6 +16,7 @@ import { useConfigStore } from 'stores/config';
 import { Product, Service, Work } from 'src/stores/product-service/types';
 
 defineProps<{
+  readonly?: boolean;
   agentPrice: boolean;
   employeeRows?: {
     foreignRefNo: string;
@@ -365,7 +366,10 @@ watch(
                 {{ formatNumberDecimal(calcPrice(props.row), 2) }}
               </q-td>
               <q-td>
-                <div class="row items-center full-width justify-end no-wrap">
+                <div
+                  class="row items-center full-width justify-end no-wrap"
+                  v-if="!readonly"
+                >
                   <q-btn
                     @click.stop="openEmployeeTable(item.title, props.rowIndex)"
                     dense

src/components/05_quotation/WorkerItem.vue

@@ -8,6 +8,7 @@ defineEmits<{
 
 withDefaults(
   defineProps<{
+    readonly?: boolean;
     employeeAmount?: number;
     fallbackImg?: string;
     hideQuantity?: boolean;
@@ -88,6 +89,7 @@ const columns = [
       bordered
       button-delete
       img-column="employeeName"
+      :readonly="readonly"
       :inTable
       :columns
       :rows

src/components/TableComponents.vue

@@ -5,6 +5,7 @@ import DeleteButton from './button/DeleteButton.vue';
 
 const props = withDefaults(
   defineProps<{
+    readonly?: boolean;
     rows: QTableProps['rows'];
     columns: QTableProps['columns'];
     flat?: boolean;
@@ -91,7 +92,10 @@ defineEmits<{
 
     <template v-slot:body-cell-action="props">
       <q-td>
-        <div class="row items-center full-width justify-end no-wrap">
+        <div
+          class="row items-center full-width justify-end no-wrap"
+          v-if="!readonly"
+        >
           <slot name="button" :props="props"></slot>
           <DeleteButton
             iconOnly

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" />
+                  <template v-if="!readonly">
-                  {{
+                    <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
-                    toggleWorker
+                    {{
-                      ? $t('general.specify')
+                      toggleWorker
-                      : $t('general.noSpecify')
+                        ? $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>