From 663c2f98160d15d4ab505a3b99bc2484db338bee Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Wed, 12 Nov 2025 15:43:46 +0800
Subject: [PATCH] Manual Invoice / BA - drop down listing new UI

---
 .../bookings/forms/BookingFormComponent.vue   | 185 +++++++++++++++++-
 1 file changed, 183 insertions(+), 2 deletions(-)

diff --git a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
index 474c5611..cc92cf29 100644
--- a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
@@ -73,7 +73,52 @@
                                                                             <div class="row text-left no-margin bg-white">
                                                                                 <div class="col no-padding">
                                                                                     <div class="row no-margin" v-for="service in data.services" v-bind:key="service.id" >
-                                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-success-light': serviceType.id === service.id}, {'text-white': serviceType.id === service.id}, {'hover-success': serviceType.id !== service.id}, {'pointer': serviceType.id !== service.id}]" @click="updateServiceType(service)">
+                                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-success-light': serviceType.id === service.id}, {'text-white': serviceType.id === service.id}, {'hover-success': serviceType.id !== service.id}, {'pointer': serviceType.id !== service.id}]" v-if="service.id === 15">
+                                                                                            <div class="dropdown w-100" @mouseleave="closeDropdown">
+                                                                                                <button
+                                                                                                class="font-heading fs-10 w-100"
+                                                                                                @click="innerDropdown.main = !innerDropdown.main" style="background: inherit; border: none; text-align: left;"
+                                                                                                >
+                                                                                                {{ displaySelection }}
+                                                                                                <i class="fa" :class="innerDropdown.main ? 'fa-angle-up' : 'fa-angle-down'"></i>
+                                                                                                </button>
+
+                                                                                                <div
+                                                                                                v-if="innerDropdown.main"
+                                                                                                class="dropdown-menu show p-0 border border-success w-100"
+                                                                                                style="max-height: 400px; overflow-y: auto;"
+                                                                                                >
+                                                                                                    <ul class="menu-level w-100">
+                                                                                                        <li
+                                                                                                        v-for="svc in serviceInfo.services"
+                                                                                                        :key="svc.id"
+                                                                                                        class="menu-item w-100"
+                                                                                                        @mouseenter="hoverService(svc)"
+                                                                                                        >
+                                                                                                        <div
+                                                                                                            class="level-title w-100 font-heading fs-10"
+                                                                                                            @click="selectService(svc)"
+                                                                                                            :class="{ 'bg-success-light text-white': innerDropdownSelected.service && innerDropdownSelected.service.id === svc.id }"
+                                                                                                        >
+                                                                                                            {{ svc.name }}
+                                                                                                        </div>
+                                                                                                            <ul v-if="innerDropdownHovered.service && innerDropdownHovered.service.id === svc.id" class="menu-level submenu w-100">
+                                                                                                                <li v-for="sub in svc.subservices" :key="'sub-'+sub.id" class="menu-item w-100">
+                                                                                                                <div
+                                                                                                                    class="level-title w-100 sub-level font-heading fs-10"
+                                                                                                                    @click="selectSubservice(service, svc, sub)"
+                                                                                                                    :class="{ 'bg-success-light text-white': innerDropdownSelected.subservice && innerDropdownSelected.subservice.id === sub.id }"
+                                                                                                                >
+                                                                                                                    {{ sub.name }}
+                                                                                                                </div>
+                                                                                                                </li>
+                                                                                                            </ul>
+                                                                                                        </li>
+                                                                                                    </ul>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-success-light': serviceType.id === service.id}, {'text-white': serviceType.id === service.id}, {'hover-success': serviceType.id !== service.id}, {'pointer': serviceType.id !== service.id}]" @click="updateServiceType(service)" v-else>
                                                                                             <div class="row align-items-center justify-content-center">
                                                                                                 <div class="col">
                                                                                                     <div class="font-heading fs-10">{{service.name}}</div>
@@ -196,7 +241,65 @@
                     recipientBanks: [],
                     company: {}
                 },
-                parameters: {}
+                parameters: {},
+
+                innerDropdown: { main: false },
+                innerDropdownHovered: {
+                    service: null,
+                    subservice: null
+                },
+
+                innerDropdownSelected: {
+                    service: null,
+                    subservice: null,
+                    option: null
+                },
+                serviceInfo: {
+                    services: [
+                        {
+                            id: 1,
+                            name: "BANK TRANSFER",
+                            subservices: [
+                                {
+                                    id: 14,
+                                    name: "(IN) BANK TRANSFER",
+                                },
+                                {
+                                    id: 15,
+                                    name: "(EX) BANK TRANSFER",
+                                },
+                            ]
+                        },
+                        {
+                            id: 2,
+                            name: "ALIPAY TRANSFER",
+                            subservices: [
+                                {
+                                    id: 14,
+                                    name: "(IN) ALIPAY TRANSFER",
+                                },
+                                {
+                                    id: 15,
+                                    name: "(EX) ALIPAY TRANSFER",
+                                },
+                            ]
+                        },
+                        {
+                            id: 3,
+                            name: "ENTERPRISE TO ENTERPRISE 公打公",
+                            subservices: [
+                                {
+                                    id: 14,
+                                    name: "(IN) ENTERPRISE TO ENTERPRISE 公打公",
+                                },
+                                {
+                                    id: 15,
+                                    name: "(EX) ENTERPRISE TO ENTERPRISE 公打公",
+                                },
+                            ]
+                        },
+                    ]
+                }
             }
         },
         created(){
@@ -212,6 +315,18 @@
             this.summary.recipientBanks = this.data.recipient_banks.accounts;
 
         },
+        computed: {
+            displaySelection() {
+                var defaultName = "BANKING INVOICE";
+                var service = this.innerDropdownSelected.service;
+                var sub = this.innerDropdownSelected.subservice;
+                var opt = this.innerDropdownSelected.option;
+                if (service && sub && opt) return defaultName + " → " + service.name + " → " + sub.name + " → " + opt.name;
+                if (service && sub) return defaultName + " → " + service.name + " → " + sub.name;
+                if (service) return defaultName + " → " + service.name;
+                return defaultName;
+            }
+        },
         methods: {
             updateServiceType(service){
                 this.serviceType.id = service.id;
@@ -230,9 +345,75 @@
                     recipientBanks: this.data.recipient_banks.accounts,
                     company: this.data,
                 }
+                this.innerDropdownSelected = { service: null, subservice: null };
+            },
+            hoverService(service) {
+                this.innerDropdownHovered.service = service;
+                this.innerDropdownHovered.subservice = null;
+            },
+            hoverSubservice(sub) {
+                this.innerDropdownHovered.subservice = sub;
+            },
+            selectService(service) {
+                this.innerDropdownSelected.service = service;
+                this.innerDropdownSelected.subservice = null;
+                this.innerDropdownSelected.option = null;
+                this.innerDropdownHovered.service = service;
+                this.innerDropdownHovered.subservice = null;
+            },
+            selectSubservice(service, svc, sub) {
+                this.updateServiceType(service);
+                this.innerDropdownSelected = { service: svc, subservice: sub };
 
+                this.innerDropdownSelected.subservice = sub;
+                this.innerDropdownSelected.option = null;
+                this.innerDropdownHovered.subservice = sub;
+
+                this.innerDropdown.main = false;
+                this.innerDropdownHovered.service = null;
+
+            },
+            closeDropdown() {
+                this.innerDropdownHovered.service = null;
+                this.innerDropdownHovered.subservice = null;
+                // this.innerDropdown.main = false; // optional, closes dropdown when leaving
             }
         },
         mixins: [formHandler]
     }
 </script>
+<style scoped>
+    .menu-level {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+
+    .menu-item {
+        width: 100%;
+    }
+
+    .level-title {
+        padding: 4px 8px;
+        width: 100%;
+        cursor: pointer;
+    }
+
+    .level-title.sub-level {
+        padding-left: 20px;
+    }
+
+    .level-title.option-level {
+        padding-left: 35px;
+    }
+
+    .menu-item:hover > .level-title {
+        background-color: #28a745;
+        color: white;
+    }
+
+    .bg-success-light {
+        background-color: #8fd19e !important;
+    }
+</style>