mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
edmondlang
98 lines
4.5 KiB
Vue
98 lines
4.5 KiB
Vue
<template>
|
|
<div class="row h-100 mt-1 mb-1 m-md-0">
|
|
<div class="col">
|
|
<!-- <loading-component style="height: 100%; top: 0;" key="1" color="success" v-show="isLoading"></loading-component> -->
|
|
|
|
<div class="row h-100" style="margin-left:1px; margin-right:1px; min-height: 50px;" v-if='!isLoading'>
|
|
<div class="col bg-primary text-white">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col p-l-5 p-r-20">
|
|
<span class="m-l-10">{{ selectedCurrency.name }}</span>
|
|
</div>
|
|
<div class="col-auto h-100 pointer" @click="recipientMenu = !recipientMenu">
|
|
<div class="row align-items-center bg-primary-light h-100">
|
|
<div class="col ">
|
|
<i class="fa fa-angle-down fs-14 m-t-5"
|
|
:class="[{ 'fa-angle-down': !recipientMenu }, { 'fa-angle-up': recipientMenu }]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100 text-master">
|
|
<div class="absolute w-100 b-l b-b b-r b-success" :class="[{ 'hide': !recipientMenu }]"
|
|
style="top: 100%; right: 0; z-index: 1;">
|
|
<div class="row text-left no-margin bg-white">
|
|
<div class="col no-padding">
|
|
<div class="row no-margin" v-for="currency in currencyList"
|
|
v-bind:key="currency.id">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 "
|
|
:class="[{ 'bg-primary-light': selectedCurrency.id === currency.id }, { 'text-white': selectedCurrency.id === currency.id }, { 'hover-primary': selectedCurrency.id !== currency.id }, { 'pointer': selectedCurrency.id !== currency.id }]"
|
|
@click="UpdateCurrency(currency)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto p-l-5">
|
|
<div class="font-heading fs-12">
|
|
{{ currency.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
section: 'chooseCurrencySection',
|
|
currencyList: null,
|
|
recipientMenu: false,
|
|
selectedCurrency: null,
|
|
isLoading: true,
|
|
};
|
|
},
|
|
computed: {
|
|
pendingQueue() {
|
|
return this.$store.getters.isInCompleteQueue(this.section);
|
|
}
|
|
},
|
|
watch: {
|
|
pendingQueue(inComplete) {
|
|
if (inComplete) {
|
|
this.fetchCurrency();
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.$store.dispatch('updateListQueue', { 'name': this.section });
|
|
},
|
|
methods: {
|
|
fetchCurrency() {
|
|
this.submit(route('api.service_type.list'), 'get', this.section, false, false);
|
|
},
|
|
successHandler(response) {
|
|
this.isLoading = false;
|
|
this.currencyList = response.payload.data;
|
|
this.UpdateCurrency(this.currencyList[0]);
|
|
this.$emit('loaded', true);
|
|
},
|
|
UpdateCurrency(currency) {
|
|
this.selectedCurrency = currency;
|
|
this.recipientMenu = false;
|
|
this.$emit('input', currency.id);
|
|
},
|
|
}
|
|
}
|
|
</script>
|