cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 04:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Manual Invoice / BA - drop down listing new UI

Browse Source
This commit is contained in:
Dillon Ngo
2025-11-12 15:43:46 +08:00
parent f8b0dc20e1
commit 663c2f9816
1 changed files with 183 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+183 -2
View File
@@ -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>