feat: ทำ form input

src/components/01_branch-management/FormBranchContact.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const telephoneNo = defineModel<string>('telephoneNo');
+const contact = defineModel<string>('contact');
+const email = defineModel<string>('email');
+const contactName = defineModel<string>('contactName');
+const operatingHours = defineModel<string>('operatingHours');
+const lineId = defineModel<string>('lineId');
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-5"
+      :label="$t('formDialogInputEmailHq')"
+      v-model="email"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-7"
+      :label="$t('formDialogInputTelephoneHq')"
+      v-model="telephoneNo"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-5"
+      :label="$t('formDialogInputContactName')"
+      v-model="contactName"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-7"
+      :label="$t('formDialogInputTelephoneContact')"
+      v-model="contact"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-5"
+      label="Line ID"
+      v-model="lineId"
+    />
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>

src/components/01_branch-management/FormBranchInformation.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const code = defineModel<string>('code');
+const taxNo = defineModel<string>('taxNo');
+const name = defineModel<string>('name');
+const nameEN = defineModel<string>('nameEN');
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      readonly
+      hide-bottom-space
+      class="col-6"
+      :label="$t('formDialogInputCode')"
+      v-model="code"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('formDialogInputTaxNo')"
+      v-model="taxNo"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-12"
+      :label="$t('formDialogInputNameHq')"
+      v-model="name"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-12"
+      :label="$t('formDialogInputNameHqEn')"
+      v-model="nameEN"
+    />
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>

src/components/01_branch-management/FormLocation.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
-const location = defineModel<string>('qr');
+const longitude = defineModel<string>('longitude');
+const latitude = defineModel<string>('latitude');
+
+function getLocation() {
+  navigator.geolocation.getCurrentPosition((position) => {
+    longitude.value = position.coords.longitude.toString();
+    latitude.value = position.coords.latitude.toString();
+  });
+}
 
 defineProps<{
   title?: string;
@@ -10,8 +18,46 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• ข้อมูลที่อยู่สำนักงานใหญ่</div>
+  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
-  <div class="col-9 row">Location</div>
+  <div class="col-9 bordered rounded row no-padding">
+    <div class="col-12 q-pl-md q-py-sm app-text-muted">location</div>
+
+    <div v-if="!!longitude && !!latitude" class="col-12 flex flex-center">
+      <iframe
+        :src="`https://maps.google.com/maps?q=${latitude}, ${longitude}&z=15&output=embed`"
+        width="100%"
+        height="100%"
+        frameborder="0"
+        style="border: 0"
+      ></iframe>
+    </div>
+
+    <div
+      v-else
+      class="col-12 flex flex-center"
+      style="
+        height: 100px;
+        background-image: url(/map.png);
+        background-position: center center;
+        background-size: 920px 400px;
+      "
+    >
+      <q-btn
+        :text-color="$q.dark.isActive ? 'black' : 'white'"
+        style="
+          background: var(--blue-5);
+          color: var(--blue-0);
+          font-size: 12px;
+          width: 150px;
+        "
+        unelevated
+        rounded
+        :label="$t('formDialogBtnLocation')"
+        @click="getLocation()"
+      />
+    </div>
+  </div>
+
   <q-separator
     v-if="separator"
     class="col-12 q-mt-xl q-mb-md"

src/components/01_branch-management/FormQr.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const qr = defineModel<string>('qr');
+import { Icon } from '@iconify/vue';
+
+const qr = defineModel<string | null>('qr');
 
 defineProps<{
   title?: string;
@@ -8,13 +10,85 @@ defineProps<{
   readonly?: boolean;
   separator?: boolean;
 }>();
+
+defineEmits<{
+  (e: 'upload'): void;
+}>();
 </script>
 <template>
-  <div class="col-3 app-text-muted">• ข้อมูลที่อยู่สำนักงานใหญ่</div>
+  <div class="col-3 app-text-muted">• {{ title }}</div>
-  <div class="col-9 row">QRCode</div>
+  <div
+    :class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
+    class="col-9 row q-col-gutter-md q-mt-lg branch-form-show-qr-code"
+  >
+    <div class="col-12 flex flex-center">
+      <q-img
+        v-if="qr"
+        :src="qr as string"
+        style="width: 150px; height: 150px"
+      />
+
+      <q-btn
+        @click="$emit('upload')"
+        class="branch-form-btn-qr-code"
+        :class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
+        v-else
+        unelevated
+        :color="$q.dark.isActive ? 'black' : 'grey-2'"
+        :text-color="$q.dark.isActive ? 'white' : 'grey-5'"
+      >
+        <Icon icon="teenyicons:add-outline" width="30px" height="50px" />
+      </q-btn>
+    </div>
+    <div class="col-12 flex flex-center q-py-md">
+      <q-btn
+        :text-color="$q.dark.isActive ? 'black' : 'white'"
+        style="background: var(--blue-5); color: var(--blue-0); font-size: 12px"
+        unelevated
+        rounded
+        :label="$t('formDialogUploadQrCode')"
+        @click="$emit('upload')"
+      />
+    </div>
+  </div>
   <q-separator
     v-if="separator"
     class="col-12 q-mt-xl q-mb-md"
     style="padding-block: 0.5px"
   />
 </template>
+
+<style scoped>
+.branch-form-show-qr-code {
+  --_bg-branch-form-show-qr-code: linear-gradient(
+    180deg,
+    var(--indigo-0),
+    var(--sand-0)
+  );
+  --_border-branch-form-show-qr-code: 2px dashed var(--gray-4);
+  border: var(--_border-branch-form-show-qr-code);
+  border-radius: 10px;
+  background-image: var(--_bg-branch-form-show-qr-code);
+  &.dark-form-show-qr-code {
+    background: var(--gray-9);
+    border-radius: 10px;
+    border: none;
+  }
+}
+.branch-form-btn-qr-code {
+  --_color-btn-qr-code: 3px solid var(--gray-4);
+  border: var(--_color-btn-qr-code);
+  border-radius: 6px;
+  &.dark-form-btn-qr-code {
+    border: none;
+  }
+}
+.branch-form-input-Contact {
+  --_bg-branch-form-input-Contact: var(--gray-1-hsl);
+  background: hsl(var(--_bg-branch-form-input-Contact));
+  &.dark-form-input-Contact {
+    --_bg-branch-form-input-Contact: var(--gray-10-hsl);
+    border: 2px solid var(--gray-9);
+  }
+}
+</style>

src/components/FormDialog.vue

@@ -4,6 +4,7 @@ import FormAddress from './02_personnel-management/FormAddress.vue';
 
 defineProps<{
   title: string;
+  titleFormAddress?: string;
   addressTitle?: string;
   addressTitleEN?: string;
   addressSeparator?: boolean;
@@ -83,6 +84,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
                 <FormAddress
                   dense
                   outlined
+                  :title="titleFormAddress"
                   :separator="addressSeparator"
                   v-model:isOpen="modal"
                   v-model:address="address"

src/i18n/en-US/form-dialog.ts

@@ -1,4 +1,8 @@
 export default {
+  formDialogTitleLocation: 'Head Office Location',
+  formDialogTitleInformation: 'Basic Information',
+  formDialogTitleContact: 'Contact Information',
+
   formDialogInputCode: 'Head Office Code',
   formDialogInputTaxNo: 'Tax Identification Number',
   formDialogInputTaxNoValidate: 'Please enter the Tax Identification Number',
@@ -21,9 +25,15 @@ export default {
   formDialogInputTelephoneHq: 'Head Office Telephone Number',
   formDialogInputEmailHq: 'Head Office Contact Email',
 
+  formDialogInputContactName: 'Contact',
+
+  formDialogInputOperatingHours: 'Operating Hours',
+
   formDialogInputAddressValidate: 'Please enter the address',
   formDialogInputProvinceValidate: 'Please enter the province',
 
   formDialogInputDistrictValidate: 'Please enter the district',
   formDialogInputSubDistrictValidate: 'Please enter the sub-district',
+
+  formDialogBtnLocation: 'Start sharing location',
 };

src/i18n/th-th/form-dialog.ts

@@ -1,4 +1,8 @@
 export default {
+  formDialogTitleLocation: 'สถานที่ตั้งสำนักงานใหญ่',
+  formDialogTitleInformation: 'ข้อมูลพื้นฐาน',
+  formDialogTitleContact: 'ข้อมูลติดต่อ',
+
   formDialogInputCode: 'รหัสสำนักงานใหญ่',
   formDialogInputTaxNo: 'เลขประจำตัวผู้เสียภาษี',
   formDialogInputTaxNoValidate: 'โปรดระบุเลขประจำตัวผู้เสียภาษี',
@@ -13,15 +17,21 @@ export default {
   formDialogInputNameHqEnValidate: 'โปรดระบุชื่อสำนักงานใหญ่ (ภาษาอังกฤษ)',
   formDialogInputNameSubBranchEnValidate: 'โปรดระบุชื่อสาขา (ภาษาอังกฤษ)',
 
-  formDialogInputTelephoneContact: 'เบอร์โทรศัพท์',
+  formDialogInputTelephoneContact: 'เบอร์โทรศัพท์ติดต่อ',
   formDialogUploadQrCode: 'อัปโหลด QR Code',
 
   formDialogInputTelephoneHq: 'เบอร์โทรศัพท์สำนักงานใหญ่',
   formDialogInputEmailHq: 'อีเมลติดต่อสำนักงานใหญ่',
 
+  formDialogInputContactName: 'ติดต่อ',
+
+  formDialogInputOperatingHours: 'เวลาทําการ',
+
   formDialogInputAddressValidate: 'โปรดระบุที่อยู่',
   formDialogInputProvinceValidate: 'โปรดระบุจังหวัด',
 
   formDialogInputDistrictValidate: 'โปรดระบุอำเภอ',
   formDialogInputSubDistrictValidate: 'โปรดระบุตำบล',
+
+  formDialogBtnLocation: 'เริ่มแชร์โลเคชั่น',
 };