feat: quatation tree

src/components/shared/TreeView.vue

@@ -30,7 +30,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
 
 <template>
   <div class="tree-container">
-    <div v-for="node in nodes" class="tree-item">
+    <div v-for="(node, i) in nodes" class="tree-item" :key="i">
       <slot
         v-if="$slots['item']"
         name="item"
@@ -39,14 +39,19 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
 
       <template v-else>
         <div
-          class="item__content row items-center"
+          class="item__content row items-center no-wrap"
           @click="open = expandable ? !open : open"
         >
-          <label class="item__checkbox" @click.stop>
+          <label class="flex items-center item__checkbox" @click.stop>
             <input type="checkbox" v-model="node.selected" />
           </label>
 
-          <Icon v-if="dec && dec.icon" :icon="dec.icon" class="item__icon" />
+          <div
+            class="item__icon flex items-center justify-center"
+            :style="`background: ${dec?.bg}; color: ${dec?.fg}`"
+          >
+            <Icon v-if="dec && dec.icon" :icon="dec.icon" />
+          </div>
 
           <div class="column">
             <span class="item__title">
@@ -58,17 +63,23 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
           </div>
         </div>
       </template>
+      <q-separator v-if="!level"></q-separator>
 
-      <div class="q-pl-lg" v-if="open">
+      <transition name="slide">
-        <TreeView
+        <div
-          class="item__children"
+          class="q-pl-lg q-pt-sm"
-          v-if="node.children"
+          v-if="open && node.children && node.children.length > 0"
-          v-model:nodes="node.children"
+        >
-          :level="(level || 0) + 1"
+          <TreeView
-          :expandable
+            class="item__children"
-          :decoration
+            v-if="node.children"
-        />
+            v-model:nodes="node.children"
-      </div>
+            :level="(level || 0) + 1"
+            :expandable
+            :decoration
+          />
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -78,7 +89,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
   display: flex;
   flex-direction: column;
   user-select: none;
-  gap: 1rem;
+  gap: 8px;
 
   & .tree-item {
     & .item__content {
@@ -97,11 +108,13 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
 
     & .item__icon {
       margin-right: 1rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      border-radius: 50%;
     }
 
     & .item__title {
       font-weight: 600;
-      color: var(--brand-1);
     }
 
     & .item__subtitle {
@@ -110,4 +123,18 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
     }
   }
 }
+
+.slide-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
 </style>

src/layouts/DrawerComponent.vue

@@ -80,7 +80,7 @@ onMounted(async () => {
     {
       label: 'menu.quotation',
       icon: 'mdi-file-document',
-      route: '',
+      route: '/quotation',
       disabled: true,
     },
     {

src/layouts/ProfileMenu.vue

@@ -141,7 +141,7 @@ onMounted(async () => {
     filterRole.value = userRoles
       .filter(
         (role) =>
-          role !== 'default-roles-' + getRealm() &&
+          !role.includes('default-roles') &&
           role !== 'offline_access' &&
           role !== 'uma_authorization',
       )

src/pages/05_quotation/MainPage.vue

@@ -4,14 +4,88 @@ import QuatationForm from './QuatationForm.vue';
 import SideMenu from 'components/SideMenu.vue';
 import ImageUploadDialog from 'components/ImageUploadDialog.vue';
 import { watch } from 'vue';
+import TreeView from 'src/components/shared/TreeView.vue';
 
 const isOpen = ref(true);
 const imageUploadDialog = ref<InstanceType<typeof ImageUploadDialog>>();
 const file = ref<File | null>(null);
+
+const nodes = ref([
+  {
+    title: 'กลุ่มสินค้าและบริการที่ 1',
+    subtitle: 'TG01000000001',
+    selected: false,
+    children: [
+      {
+        title: 'งานที่ 1',
+        subtitle: 'TG01000000001',
+        selected: false,
+        children: [
+          {
+            title: 'สินค้า 1',
+            subtitle: 'TG01000000001',
+            selected: false,
+          },
+          {
+            title: 'สินค้า 2',
+            subtitle: 'TG01000000001',
+            selected: false,
+          },
+          {
+            title: 'สินค้า 3',
+            subtitle: 'TG01000000001',
+            selected: false,
+          },
+          {
+            title: 'สินค้า 4',
+            subtitle: 'TG01000000001',
+            selected: false,
+          },
+          {
+            title: 'สินค้า 5',
+            subtitle: 'TG01000000001',
+            selected: false,
+          },
+          {
+            title: 'สินค้า 6',
+            subtitle: 'TG01000000001',
+            selected: false,
+          },
+        ],
+      },
+    ],
+  },
+]);
 </script>
 
 <template>
-  <ImageUploadDialog
+  <div class="surface-1 rounded full-height q-pa-md">
+    <TreeView
+      v-model:nodes="nodes"
+      expandable
+      :decoration="[
+        {
+          level: 0,
+          icon: 'mdi-folder-outline',
+          bg: 'hsla(var(--pink-6-hsl)/0.1)',
+          fg: 'var(--pink-6)',
+        },
+        {
+          level: 1,
+          icon: 'mdi-server-outline',
+          bg: 'hsla(var(--orange-5-hsl)/0.1)',
+          fg: 'var(--orange-5)',
+        },
+        {
+          level: 2,
+          icon: 'mdi-shopping-outline',
+          bg: 'hsla(var(--teal-10-hsl)/0.1)',
+          fg: 'var(--teal-10)',
+        },
+      ]"
+    />
+  </div>
+  <!-- <ImageUploadDialog
     v-model:dialog-state="isOpen"
     v-model:file="file"
     ref="imageUploadDialog"
@@ -56,7 +130,7 @@ const file = ref<File | null>(null);
   >
     My Menu
   </div>
-  <QuatationForm v-model:dialog-state="isOpen" />
+  <QuatationForm v-model:dialog-state="isOpen" /> -->
 </template>
 
 <style scoped></style>