mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-09-02 03:13:57 +00:00
Dillon Ngo
209 lines
11 KiB
Vue
209 lines
11 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
|
|
<div class="row" v-show="!isLoading">
|
|
<div class="col">
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<h6 class="all-caps m-b-5 bold no-margin">Create Service</h6>
|
|
<div class="font-heading fs-10 muted">Create a new exchange service</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
|
|
<div class="col">
|
|
<small class="bold fs-10 text-danger">{{ error }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-20">
|
|
<div class="col-5 p-r-10">
|
|
<validation-wrapper-component :validator="v$.parameters.name">
|
|
<label>Service Name</label>
|
|
<input type="text" class="form-control" v-model="parameters.name">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-auto pointer bg-master-lightest m-r-10" @click="parameters.configurations.billable = !parameters.configurations.billable">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col-auto p-r-0">
|
|
<div class="icon-thumbnail fs-12 icon-25 btn-rounded" :class="[{ 'bg-success': parameters.configurations.billable }, { 'bg-white': !parameters.configurations.billable }]">
|
|
<i class="fa fa-check fs-12 text-white"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-0 p-r-25">
|
|
<div class="font-heading fs-8 all-caps muted">Billable Service</div>
|
|
<div class="font-heading fs-8 all-caps">Include Billing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto pointer bg-master-lightest" v-if="data" @click="parameters.configurations.active = !parameters.configurations.active">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col-auto p-r-0">
|
|
<div class="icon-thumbnail fs-12 icon-25 btn-rounded" :class="[{ 'bg-success': parameters.configurations.active }, { 'bg-white': !parameters.configurations.active }]">
|
|
<i class="fa fa-check fs-12 text-white"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-0 p-r-25">
|
|
<div class="font-heading fs-8 all-caps muted">Active For Default</div>
|
|
<div class="font-heading fs-8 all-caps">Customer segment</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 hint-text muted">
|
|
Service Configurations
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col p-r-5">
|
|
<validation-wrapper-component :validator="v$.parameters.configurations.service_charge.value">
|
|
<label>Service Charge</label>
|
|
<input type="text" class="form-control" v-model.lazy="parameters.configurations.service_charge.value" v-money3="percentage">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col p-l-5 p-r-20">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component :validator="v$.parameters.configurations.minimum_charge.value">
|
|
<label>Minimum Charge</label>
|
|
<input type="text" class="form-control" v-model.lazy="parameters.configurations.minimum_charge.value" v-money3="money">
|
|
</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">MYR</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-5" v-show="parameters.configurations.billable">
|
|
<validation-wrapper-component :validator="v$.parameters.configurations.tax.value">
|
|
<label>Tax</label>
|
|
<input type="text" class="form-control" v-model.lazy="parameters.configurations.tax.value" v-money3="percentage">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5">
|
|
<div class="col-5 p-r-0" v-show="parameters.configurations.billable">
|
|
<validation-wrapper-component :validator="v$.parameters.configurations.po_limit.value">
|
|
<label>Abandoned PO Limit **</label>
|
|
<input type="text" class="form-control" v-model.lazy="parameters.configurations.po_limit.value" >
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col">
|
|
<validation-wrapper-component selectable :validator="v$.parameters.configurations.bank_id">
|
|
<label>Receivable Bank Account</label>
|
|
<selectable-component :endpoint="route('api.bank.list') + '?filters={%22company_id%22:1}'" section="BankAccountListSection" valueColumn="id" :labelColumn="['bank_name', 'account_no']" v-model="parameters.configurations.bank_id"></selectable-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10" v-show="parameters.configurations.billable">
|
|
<div class="col">
|
|
<div class="fs-8 muted">** Abandoned PO's limit is only applicable to transfers that have been paid in full.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 hint-text muted">
|
|
Currencies Settings
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-l-0 m-r-0 m-b-10">
|
|
<div class="col p-r-0">
|
|
<currencies-list-component :data="parameters.configurations" :section="section" v-model="parameters.configurations.currencies"></currencies-list-component>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col p-r-5">
|
|
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm">{{ data ? 'Update' : 'Create' }} Service</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useFormHandler } from '@/composables/useFormHandler';
|
|
import route from '@/general/functions/router';
|
|
import { useVuelidate } from '@vuelidate/core';
|
|
import { required, minValue } from '@vuelidate/validators';
|
|
|
|
interface Props {
|
|
section: string;
|
|
data?: any;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const money = { decimal: '.', thousands: ',', precision: 2 };
|
|
const percentage = { decimal: '.', thousands: '', precision: 2, suffix: '%' };
|
|
|
|
const { parameters, submit, error, isLoading } = useFormHandler({
|
|
section: props.section,
|
|
data: {
|
|
name: props.data?.name || '',
|
|
configurations: {
|
|
active: props.data?.configurations?.active || 0,
|
|
bank_id: props.data?.configurations?.bank_id || '',
|
|
service_charge: props.data?.configurations?.service_charge || { type: 'percentage', value: 0 },
|
|
minimum_charge: props.data?.configurations?.minimum_charge || { type: 'fixed_amount', value: 0 },
|
|
tax: props.data?.configurations?.tax || { type: 'percentage', value: 0 },
|
|
po_limit: props.data?.configurations?.po_limit || { type: 'fixed_amount', value: 1 },
|
|
billable: true,
|
|
currencies: Array.isArray(props.data?.configurations.currencies) ? props.data?.configurations.currencies : []
|
|
}
|
|
}
|
|
});
|
|
|
|
const rules = {
|
|
parameters: {
|
|
name: { required },
|
|
configurations: {
|
|
bank_id: { required },
|
|
service_charge: {
|
|
value: { required }
|
|
},
|
|
minimum_charge: {
|
|
value: { required }
|
|
},
|
|
tax: {
|
|
value: { required }
|
|
},
|
|
po_limit: {
|
|
value: {
|
|
required,
|
|
minValue: minValue(1)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const v$ = useVuelidate(rules, { parameters });
|
|
|
|
const submitForm = async () => {
|
|
const isValid = await v$.value.$validate();
|
|
if (!isValid) return;
|
|
|
|
const endpoint = props.data
|
|
? route('api.service_type.update', props.data.id)
|
|
: route('api.service_type.create');
|
|
const method = props.data ? 'put' : 'post';
|
|
|
|
await submit(endpoint, method, props.section, true, true, parameters.value);
|
|
};
|
|
</script>
|