feat: add product dialog

src/pages/04_product-service/MainPage.vue

@@ -10,6 +10,9 @@ import BasicInformation from 'src/components/04_product-service/BasicInformation
 import FormDialog from 'src/components/FormDialog.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
+import BasicInfoProduct from 'src/components/04_product-service/ฺBasicInfoProduct.vue';
+import PriceDataComponent from 'src/components/04_product-service/PriceDataComponent.vue';
+import ProfileUpload from 'src/components/ProfileUpload.vue';
 
 import { Status } from 'src/stores/types';
 import NoData from 'components/NoData.vue';
@@ -59,6 +62,11 @@ const inputSearch = ref<string>('');
 const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
+const dialogProduct = ref<boolean>(false);
+const statusToggle = ref<boolean>(false);
+const profileSubmit = ref<boolean>(false);
+const profileFile = ref<File | undefined>(undefined);
+const profileUrl = ref<string | null>('');
 
 const groupName = ref<string>('งาน MOU');
 const dialogProductServiceType = ref<boolean>(false);
@@ -83,6 +91,26 @@ const resultSearchType = ref<(Product & { productGroupId: string })[]>();
 
 const currentStatus = ref<Status | 'All'>('All');
 
+const inputFile = (() => {
+  const element = document.createElement('input');
+  element.type = 'file';
+  element.accept = 'image/*';
+
+  const reader = new FileReader();
+  reader.addEventListener('load', () => {
+    if (typeof reader.result === 'string') profileUrl.value = reader.result;
+  });
+
+  element.addEventListener('change', () => {
+    profileFile.value = element.files?.[0];
+    if (profileFile.value) {
+      reader.readAsDataURL(profileFile.value);
+    }
+  });
+
+  return element;
+})();
+
 async function searchGroup() {
   const resultList = await fetchListProductService({
     query: inputSearch.value,
@@ -273,6 +301,35 @@ watch(currentStatus, async () => {
         }
       "
     ></q-fab-action>
+    <q-fab-action
+      v-if="productMode === 'service'"
+      label="เพิ่มสินค้า"
+      external-label
+      label-position="left"
+      style="color: white; background-color: hsla(var(--green-11-hsl))"
+      padding="xs"
+      icon="mdi-folder-multiple-plus"
+      @click="
+        () => {
+          dialogProduct = true;
+        }
+      "
+    ></q-fab-action>
+    <q-fab-action
+      v-if="productMode === 'service'"
+      label="เพิ่มบริการ"
+      external-label
+      label-position="left"
+      style="color: white; background-color: hsla(var(--blue-11-hsl))"
+      padding="xs"
+      icon="mdi-folder-multiple-plus"
+      @click="
+        () => {
+          clearForm();
+          dialogInputForm = true;
+        }
+      "
+    ></q-fab-action>
   </ButtonAddComponent>
 
   <div class="column q-pb-lg">
@@ -734,6 +791,38 @@ watch(currentStatus, async () => {
     </template>
     <TotalProductComponent />
   </FormDialog>
+
+  <FormDialog
+    v-model:modal="dialogProduct"
+    noAddress
+    noAppBox
+    title="เพิ่มสินค้า"
+    :submit="
+      () => {
+        console.log('submit');
+      }
+    "
+    :close="
+      () => {
+        dialogProduct = false;
+      }
+    "
+  >
+    <template #prepend>
+      <ProfileUpload
+        isProduct
+        v-model:url-profile="profileUrl"
+        v-model:status-toggle="statusToggle"
+        v-model:profile-submit="profileSubmit"
+        @input-file="inputFile.click()"
+      />
+    </template>
+
+    <AppBox class="col-10" bordered>
+      <BasicInfoProduct dense separator />
+      <PriceDataComponent dense />
+    </AppBox>
+  </FormDialog>
 </template>
 
 <style scoped>