mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-24 23:13:59 +00:00
omair saleh
218 lines
10 KiB
Vue
218 lines
10 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-b-15" v-for="(item, index) in serviceCurrencies" v-bind:key="item.id">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-3 b-a pointer p-t-20 p-b-20" :class="[{'b-success': item.active}, {'b-grey': !item.active}]" @click="item.active = !item.active">
|
|
<div class="absolute" style="top: -10px; right: -27px;" v-if="item.active">
|
|
<div class="icon-thumbnail icon-25 bg-success text-white btn-rounded fs-10">
|
|
<i class="fa fs-10 fa-check"></i>
|
|
</div>
|
|
</div>
|
|
<currency-component :deleteable="false" :section="section" :data="item.currency_object"></currency-component>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row h-100 m-r-0 align-items-end" v-show="item.active">
|
|
<div class="col p-t-15 b-t b-r b-success bg-master-lightest">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 hint-text muted">
|
|
Purchase Limits
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-r-0">
|
|
<div class="col m-r-10 p-r-5">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component class="no-border" :validator="$v.parameters.currencies.$each[index].minimum_limit.value">
|
|
<label>Minimum Limit</label>
|
|
<input type="text" class="form-control" v-model.lazy="item.minimum_limit.value" v-money="money" :disabled="!item.active">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-auto bg-white b-t b-r b-b b-grey">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10 muted">{{item.currency_object.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component :validator="$v.parameters.currencies.$each[index].maximum_limit.value">
|
|
<label>Maximum Limit</label>
|
|
<input type="text" class="form-control" v-model.lazy="item.maximum_limit.value" v-money="money" :disabled="!item.active">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-auto bg-white b-t b-r b-b b-grey">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10 muted">{{item.currency_object.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-r-0" v-show="item.active">
|
|
<div class="col p-b-15 bg-master-lightest b-r b-b b-l b-success">
|
|
<div class="row">
|
|
<div class="col p-r-25 p-l-25">
|
|
<div class="row m-b-10 m-t-10">
|
|
<div class="col p-l-5">
|
|
<div class="font-heading all-caps fs-10 hint-text muted">
|
|
Exchange Rates
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4 p-l-5 p-r-5 m-b-10" v-for="(rate, method) in item.rates">
|
|
<validation-wrapper-component :validator="$v.parameters.currencies.$each[index].rates.$each[method].selling.value">
|
|
<label class="all-caps">{{rate.payment_method}}</label>
|
|
<input type="text" class="form-control" v-model.lazy="rate.selling.value" v-money="exchangeRate" :disabled="!item.active">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import formHandler from "../../../general/mixins/formHandler";
|
|
import { required, requiredIf, minValue, maxValue, decimal} from "vuelidate/lib/validators";
|
|
export default {
|
|
data(){
|
|
return {
|
|
parameters: {
|
|
currencies: []
|
|
}
|
|
}
|
|
},
|
|
validations: {
|
|
parameters: {
|
|
currencies: {
|
|
$each: {
|
|
maximum_limit: {
|
|
value:{
|
|
required: requiredIf(function (currency) { return currency.active}),
|
|
}
|
|
},
|
|
minimum_limit: {
|
|
value:{
|
|
required: requiredIf(function (currency) { return currency.active })
|
|
}
|
|
},
|
|
rates: {
|
|
required: true,
|
|
$each: {
|
|
selling: {
|
|
value:{
|
|
required: requiredIf(function (currency) { return currency.active }),
|
|
minValue: minValue(0)
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
convertibleCurrencies() {
|
|
let vm = this;
|
|
return this.$store.getters.getListData('convertibleCurrenciesSection').forEach(function(value){
|
|
vm.addInactiveCurrency(value)
|
|
});
|
|
},
|
|
serviceCurrencies: function(){
|
|
return this.data.currencies;
|
|
}
|
|
},
|
|
watch: {
|
|
convertibleCurrencies(){
|
|
this.convertibleCurrencies();
|
|
},
|
|
serviceCurrencies(currencies){
|
|
this.$emit('input', currencies)
|
|
}
|
|
},
|
|
methods: {
|
|
inArray(element){
|
|
return this.parameters.currencies.some(currency => currency.id === element.id);
|
|
},
|
|
pushIfNotExist(element){
|
|
if (!this.inArray(element)) {
|
|
this.parameters.currencies.push(element);
|
|
}
|
|
},
|
|
addInactiveCurrency(element){
|
|
this.pushIfNotExist({
|
|
currency_object: element,
|
|
active: false,
|
|
id: element.id,
|
|
maximum_limit: {
|
|
type: 'fixed_amount',
|
|
value: 0
|
|
},
|
|
minimum_limit: {
|
|
type: 'fixed_amount',
|
|
value: 0
|
|
},
|
|
rates: [
|
|
{
|
|
payment_method: 'cash',
|
|
selling: {
|
|
type: 'rate',
|
|
value: 0
|
|
}
|
|
},
|
|
{
|
|
payment_method: 'cheque',
|
|
selling: {
|
|
type: 'rate',
|
|
value: 0
|
|
}
|
|
},
|
|
{
|
|
payment_method: 'ba',
|
|
selling: {
|
|
type: 'rate',
|
|
value: 0
|
|
}
|
|
},
|
|
{
|
|
payment_method: 'wallet',
|
|
selling: {
|
|
type: 'rate',
|
|
value: 0
|
|
}
|
|
},
|
|
{
|
|
payment_method: 'payment_gateway',
|
|
selling: {
|
|
type: 'rate',
|
|
value: 0
|
|
}
|
|
}
|
|
]
|
|
});
|
|
}
|
|
},
|
|
mixins: [formHandler]
|
|
|
|
}
|
|
</script> |