feat: เรียกใช้ ProfileUplode

src/pages/03_customer-management/MainPage.vue

@@ -1,14 +1,54 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 import SelectorList from 'components/SelectorList.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import AddButton from 'components/AddButton.vue';
 import AppBox from 'components/app/AppBox.vue';
+import ItemCard from 'src/components/ItemCard.vue';
+import FormDialog from 'src/components/FormDialog.vue';
+import ProfileUpload from 'src/components/ProfileUpload.vue';
 
-const costomerStats = [
+const statusToggle = ref<boolean>(false);
+const profileSubmit = ref<boolean>(false);
+const profileFile = ref<File | undefined>(undefined);
+const profileUrl = ref<string | null>('');
+
+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;
+})();
+
+const itemCard = [
+  {
+    icon: 'mdi:office-building',
+    text: 'customerLegalEntity',
+    color: 'var(--purple-8)',
+  },
+  {
+    icon: 'heroicons:user-solid',
+    text: 'customerNaturalPerson',
+    color: 'var(--green-9)',
+  },
+];
+
+const customerStats = [
   {
     id: 1,
     count: 2,
@@ -24,17 +64,38 @@ const costomerStats = [
   },
 ];
 
+const dialogCustomerType = ref<boolean>(false);
+const dialogInputForm = ref<boolean>(false);
+
 const selectorLabel = ref<string>('');
 const selectorList = computed(() => [
   { label: 'EMPLOYER', count: 0 },
   { label: 'WORKER', count: 0 },
 ]);
+
+const customerType = ref<'customerLegalEntity' | 'customerNaturalPerson'>(
+  'customerLegalEntity',
+);
+
+function triggerCreate(type: 'customerLegalEntity' | 'customerNaturalPerson') {
+  customerType.value = type;
+  openDialogInputForm();
+  dialogCustomerType.value = false;
+}
+
+function openDialogCustomerType() {
+  dialogCustomerType.value = true;
+}
+
+function openDialogInputForm() {
+  dialogInputForm.value = true;
+}
 </script>
 
 <template>
   <div class="column q-pb-lg">
     <div class="text-h6 text-weight-bold q-mb-md">
-      {{ $t('costomerManagement') }}
+      {{ $t('customerManagement') }}
     </div>
 
     <div class="row full-width q-mb-md no-wrap">
@@ -47,13 +108,13 @@ const selectorList = computed(() => [
       <!-- stat -->
       <AppBox bordered class="column full-width">
         <div class="text-weight-bold text-subtitle1">
-          {{ $t('costomerStatTitle') }}
+          {{ $t('customerStatTitle') }}
         </div>
         <div class="row full-width q-py-md" style="overflow-x: auto">
           <StatCardComponent
-            v-if="costomerStats"
+            v-if="customerStats"
             :branch="
-              costomerStats.map((v) => ({
+              customerStats.map((v) => ({
                 count: v.count,
                 label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
               }))
@@ -70,8 +131,8 @@ const selectorList = computed(() => [
       <div class="col-1 self-end">
         <div class="row">
           <TooltipComponent
-            title="costomerTooltipTitle"
-            caption="costomerTooltipCaption"
+            title="customerTooltipTitle"
+            caption="customerTooltipCaption"
             imgSrc="personnel-table-"
           />
         </div>
@@ -82,17 +143,53 @@ const selectorList = computed(() => [
         style="display: flex; flex-grow: 1; align-items: center"
       >
         <AddButton
-          :label="'costomerAdd'"
+          :label="'customerAdd'"
           :cyanOn="true"
-          @trigger="
-            () => {
-              console.log('add');
-            }
-          "
+          @trigger="openDialogCustomerType()"
         />
       </div>
     </AppBox>
   </div>
+
+  <FormDialog
+    v-model:modal="dialogCustomerType"
+    :title="$t('customerCardUserType')"
+    no-footer
+    no-app-box
+    :max-width="80"
+  >
+    <template #body>
+      <div class="row q-gutter-xl q-pa-sm">
+        <ItemCard
+          v-for="i in itemCard"
+          :key="i.text"
+          :icon="i.icon"
+          :text="i.text"
+          :color="i.color"
+          @trigger="
+            () => {
+              triggerCreate(
+                i.text as 'customerLegalEntity' | 'customerNaturalPerson',
+              );
+            }
+          "
+        />
+      </div>
+    </template>
+  </FormDialog>
+
+  <FormDialog v-model:modal="dialogInputForm" :title="`test`">
+    <template #prepend>
+      <ProfileUpload
+        v-model:url-profile="profileUrl"
+        v-model:status-toggle="statusToggle"
+        v-model:profile-submit="profileSubmit"
+        @input-file="inputFile.click()"
+      />
+    </template>
+
+    <template #information>asdasdsa</template>
+  </FormDialog>
 </template>
 
 <style scoped></style>