feat(quotation): form update

src/pages/05_quotation/MainPage.vue

@@ -2,20 +2,11 @@
 import { ref } from 'vue';
 import QuatationForm from './QuatationForm.vue';
 
-import FormDialog from 'components/FormDialog.vue';
-import HistoryEditComponent from 'components/03_customer-management/HistoryEditComponent.vue';
-
-const test = ref(true);
+const isOpen = ref(true);
 </script>
 
 <template>
-  <FormDialog no-footer no-address title="ประวัติการแก้ไข" v-model:modal="test">
-    <template #person>
-      <HistoryEditComponent />
-    </template>
-  </FormDialog>
-
-  <!-- <QuatationForm /> -->
+  <QuatationForm v-model:dialogState="isOpen" />
 </template>
 
 <style scoped></style>

src/pages/05_quotation/QuatationForm.vue

@@ -6,7 +6,7 @@ import MainDialog from 'components/05_quotation/MainDialog.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
 import AppBox from 'components/app/AppBox.vue';
 
-const dialogState = ref(true);
+const dialogState = defineModel<boolean>({ default: true });
 
 const selectedBranchIssuer = ref('');
 const selectedCustomer = ref('');
@@ -15,14 +15,18 @@ const toggleWorker = ref(true);
 
 <template>
   <MainDialog v-model:state="dialogState">
-    <template #title>{{ $t('quatationAddTitle') }}</template>
+    <template #title>
+      <span class="text-weight-medium" style="color: var(--brand-1)">
+        {{ $t('quotation.form.createTitle') }}
+      </span>
+    </template>
 
     <div class="row q-pa-md items-center">
       <div style="flex: 1"><q-img src="/logo.png" width="8rem" /></div>
       <q-select
         v-model="selectedBranchIssuer"
         :options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
-        :label="$t('buySaleFormSelectBranchIssuer')"
+        :label="$t('quotation.form.customerBranchSelect')"
         id="select-branch-issuer"
         for="select-branch-issuer"
         style="width: 300px"
@@ -33,7 +37,7 @@ const toggleWorker = ref(true);
       <q-select
         v-model="selectedCustomer"
         :options="[{ label: 'Customer 1', value: 'Customer 1' }]"
-        :label="$t('buySaleFormSelectCustomer')"
+        :label="$t('quotation.form.customerSelect')"
         id="select-customer"
         for="select-customer"
         style="width: 300px"
@@ -61,7 +65,7 @@ const toggleWorker = ref(true);
         >
           <div class="row items-center q-mb-sm">
             <span style="flex: 1">
-              {{ $t('buySaleListCustomer') }}
+              {{ $t('quotation.form.listWorker') }}
               <q-toggle
                 v-model="toggleWorker"
                 id="toggle-status"
@@ -109,6 +113,38 @@ const toggleWorker = ref(true);
               }"
               color="male"
             />
+            <q-tabs
+              inline-label
+              mobile-arrows
+              dense
+              align="left"
+              class="full-width"
+              active-color="info"
+            >
+              <q-tab name="ALL">
+                <div class="row">{{ $t('all') }}</div>
+              </q-tab>
+              <q-tab name="USER">
+                <div class="row">
+                  {{ $t('USER') }}
+                </div>
+              </q-tab>
+              <q-tab name="MESSENGER">
+                <div class="row">
+                  {{ $t('MESSENGER') }}
+                </div>
+              </q-tab>
+              <q-tab name="DELEGATE">
+                <div class="row">
+                  {{ $t('DELEGATE') }}
+                </div>
+              </q-tab>
+              <q-tab name="AGENCY">
+                <div class="row">
+                  {{ $t('AGENCY') }}
+                </div>
+              </q-tab>
+            </q-tabs>
           </AppBox>
         </AppBox>
       </div>
@@ -122,50 +158,35 @@ const toggleWorker = ref(true);
         "
       >
         <AppBox bordered class="column" style="gap: var(--size-3)">
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationNo') }}
+          <div class="rounded bordered q-px-md q-py-sm row">
+            <div class="col-4">{{ $t('quotation.form.labelNo') }}</div>
           </div>
 
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationDate') }}
+          <div class="rounded bordered q-px-md q-py-sm row">
+            <div class="col-4">{{ $t('quotation.form.labelDate') }}</div>
           </div>
 
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationTime') }}
+          <div class="rounded bordered q-px-md q-py-sm row">
+            <div class="col-4">{{ $t('quotation.form.labelTime') }}</div>
           </div>
 
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationTx') }}
-          </div>
-
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationName') }}
-          </div>
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationNo') }}
-          </div>
-
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationDate') }}
-          </div>
-
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationTime') }}
-          </div>
-
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationTx') }}
-          </div>
-
-          <div class="rounded bordered q-px-md q-py-sm">
-            {{ $t('buySaleQuatationName') }}
+          <div class="rounded bordered q-px-md q-py-sm row">
+            <div class="col-4">{{ $t('quotation.form.labelProcesser') }}</div>
           </div>
         </AppBox>
       </div>
     </div>
 
     <template #footer>
-      <q-btn color="primary" dense label="asd" class="q-px-md"></q-btn>
+      <div class="row justify-end full-width">
+        <q-btn
+          color="primary"
+          dense
+          no-caps
+          :label="$t('quotation.form.buttonSave')"
+          class="q-px-md"
+        />
+      </div>
     </template>
   </MainDialog>
 </template>