From 367d2518cfb776c4a2d79b5cf6804768365ba04c Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 23 Apr 2024 11:37:27 +0700
Subject: [PATCH] feat: tab branch

---
 src/components/TabComponent.vue               | 57 +++++++++++++++++++
 src/pages/03_customer-management/MainPage.vue |  5 ++
 2 files changed, 62 insertions(+)
 create mode 100644 src/components/TabComponent.vue

diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue
new file mode 100644
index 00000000..b422fc17
--- /dev/null
+++ b/src/components/TabComponent.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import AppBox from './app/AppBox.vue';
+
+const tab = ref<string>('');
+
+const index = ref<number>(0);
+const tabList = ref<{ name: string; label: string }[]>([]);
+
+function test() {
+  index.value++;
+  tabList.value.push({
+    name: `สาขาที่ ${index.value}`,
+    label: `สาขาที่ ${index.value}`,
+  });
+
+  tab.value = tabList.value[tabList.value.length - 1].name;
+}
+</script>
+
+<template>
+  <div class="column">
+    <q-tabs
+      active-bg-color="white"
+      active-color="primary"
+      indicator-color="white"
+      v-model="tab"
+      align="left"
+      inline-label
+      class="bg-primary text-white"
+      style="width: 960px"
+    >
+      <q-tab icon="mdi-plus" @click="test()" />
+      <q-tab
+        v-for="v in tabList"
+        :key="v.name"
+        :name="v.name"
+        :label="v.label"
+      />
+    </q-tabs>
+  </div>
+  <div class="column">
+    <q-tab-panels v-model="tab" class="rounded-borders">
+      <q-tab-panel v-for="v in tabList" :key="v.name" :name="v.name">
+        <slot name="about"></slot>
+        <slot name="address"></slot>
+        <slot name="businessInformation"></slot>
+        <slot name="contactInformation"></slot>
+
+        <slot name="otherDocuments"></slot>
+      </q-tab-panel>
+    </q-tab-panels>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 4119ff57..66dd1069 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -10,6 +10,7 @@ import ItemCard from 'src/components/ItemCard.vue';
 import FormDialog from 'src/components/FormDialog.vue';
 import ProfileUpload from 'src/components/ProfileUpload.vue';
 import BasicInformation from 'src/components/03_customer-management/BasicInformation.vue';
+import TabComponent from 'src/components/TabComponent.vue';
 
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
@@ -196,6 +197,10 @@ function openDialogInputForm() {
     <template #information>
       <BasicInformation dense outlined separator />
     </template>
+
+    <template #address>
+      <FormCustomerBranch separator dense outlined />
+    </template>
   </FormDialog>
 </template>