Files
exchange-2.0/resources/assets/vue/components/companies/elements/SupplierComponent.vue
T
2022-03-12 19:32:45 +08:00

139 lines
11 KiB
Vue

<template>
<div class="row m-b-15 parentContainer">
<div class="col">
<div class="row align-items-center">
<div class="col-auto p-r-0">
<div class="padding-5 bg-master-lightest">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="30" height="30"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="86" y1="67.85938" x2="86" y2="98.7495" gradientUnits="userSpaceOnUse" id="color-1_44784_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="13.77344" x2="86" y2="157.88525" gradientUnits="userSpaceOnUse" id="color-2_44784_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M72.5625,83.3125c0,-7.42019 6.01731,-13.4375 13.4375,-13.4375c7.42019,0 13.4375,6.01731 13.4375,13.4375c0,7.42019 -6.01731,13.4375 -13.4375,13.4375c-0.91912,0 -1.81944,-0.09137 -2.6875,-0.26875v-10.48125l-10.75,-2.6875" fill="url(#color-1_44784_gr1)"></path><path d="M134.375,48.375h-5.375c0,-5.92862 -4.82137,-10.75 -10.75,-10.75c-1.96725,0 -3.78669,0.56975 -5.375,1.49425v-4.18175c0,-7.40944 -6.02806,-13.4375 -13.4375,-13.4375c-3.43731,0 -6.54675,1.33569 -8.92519,3.46687c-1.88663,-5.14119 -6.78594,-8.84187 -12.57481,-8.84187c-6.58169,0 -12.04806,4.76494 -13.19294,11.02144c-2.29513,-1.82481 -5.15731,-2.95894 -8.30706,-2.95894c-7.40944,0 -13.4375,6.02806 -13.4375,13.4375v10.75h-5.375c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v53.75c0,4.44512 3.61738,8.0625 8.0625,8.0625h5.59c0.62619,4.33762 2.72781,8.19419 5.78887,11.051c-3.44537,0.91644 -6.00387,4.03125 -6.00387,7.7615v10.75c0,4.44512 3.61738,8.0625 8.0625,8.0625h69.875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-10.75c0,-3.73025 -2.5585,-6.84506 -6.00119,-7.7615c3.06106,-2.85681 5.16269,-6.71337 5.78887,-11.051h5.58731c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-53.75c0,-4.44512 -3.61737,-8.0625 -8.0625,-8.0625zM134.375,53.75c1.4835,0 2.6875,1.204 2.6875,2.6875v10.75h-2.6875c-5.92863,0 -10.75,-4.82138 -10.75,-10.75v-2.6875zM118.25,110.1875v2.6875h-34.77625c-1.634,-3.27875 -3.98825,-6.14094 -6.8585,-8.36619c5.36694,-1.23356 9.38475,-6.05225 9.38475,-11.79006c0,-6.66769 -5.42606,-12.09375 -12.09375,-12.09375h-17.46875c-7.40944,0 -13.4375,6.02806 -13.4375,13.4375v0.93525c-1.70925,-0.60469 -3.51525,-0.93525 -5.375,-0.93525h-2.6875v-21.5h2.6875c8.89294,0 16.125,-7.23206 16.125,-16.125v-2.6875h64.5v2.6875c0,8.89294 7.23206,16.125 16.125,16.125h2.6875v21.5h-2.6875c-8.89294,0 -16.125,7.23206 -16.125,16.125zM118.25,43c2.96431,0 5.375,2.41069 5.375,5.375h-10.75c0,-2.96431 2.41069,-5.375 5.375,-5.375zM99.4375,26.875c4.44512,0 8.0625,3.61737 8.0625,8.0625v13.4375h-16.125v-13.4375c0,-4.44513 3.61737,-8.0625 8.0625,-8.0625zM69.875,29.5625c0,-4.44513 3.61737,-8.0625 8.0625,-8.0625c4.44513,0 8.0625,3.61737 8.0625,8.0625v18.8125h-16.125v-10.75zM48.375,37.625c0,-4.44512 3.61738,-8.0625 8.0625,-8.0625c4.44512,0 8.0625,3.61738 8.0625,8.0625v10.75h-16.125zM37.625,53.75h10.75v2.6875c0,5.92862 -4.82138,10.75 -10.75,10.75h-2.6875v-10.75c0,-1.4835 1.204,-2.6875 2.6875,-2.6875zM34.9375,110.1875v-10.75h2.6875c1.91619,0 3.74369,0.52138 5.375,1.46738v11.97012h-5.375c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875zM120.9375,134.375c1.4835,0 2.6875,1.204 2.6875,2.6875v2.6875h-10.75v5.375h10.75v2.6875c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-69.875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-10.75c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h10.75h5.375zM110.1875,129h-43h-5.375c-7.40944,0 -13.4375,-6.02806 -13.4375,-13.4375v-2.6875v-18.8125c0,-4.44512 3.61738,-8.0625 8.0625,-8.0625h17.46875c3.70606,0 6.71875,3.01269 6.71875,6.71875c0,3.70606 -3.01269,6.71875 -6.71875,6.71875h-14.78125v5.375h2.6875c10.37106,0 18.8125,8.44144 18.8125,18.8125h5.375c0,-1.849 -0.22306,-3.64425 -0.61544,-5.375h37.969c-1.24969,6.12481 -6.67575,10.75 -13.16606,10.75zM134.375,112.875h-10.75v-2.6875c0,-5.92863 4.82137,-10.75 10.75,-10.75h2.6875v10.75c0,1.4835 -1.204,2.6875 -2.6875,2.6875z" fill="url(#color-2_44784_gr2)"></path></g></g></svg>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-auto p-r-10">
<div class="font-heading all-caps fs-8 muted">Name</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="font-heading all-caps fs-10">{{item.name}}</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row">
<div class="col-auto p-r-10">
<div class="font-heading all-caps fs-8 muted">Currencies</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="font-heading all-caps fs-10">{{stringifyCurrencies}}</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-auto p-r-10">
<div class="font-heading all-caps fs-8 muted">Service Charge</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="font-heading all-caps fs-10">{{item.service_charge ? ((Math.round((parseFloat(item.service_charge.detail.amount.value) + Number.EPSILON) * 1000) / 1000).toFixed(3)+ '' +(item.service_charge.detail.amount.type === 'percentage' ? '%' : ' MYR')) : '0.000%'}}</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-auto p-r-10">
<div class="font-heading all-caps fs-8 muted">Transfer Fee</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="font-heading all-caps fs-10">{{item.service_charge ? ((Math.round((parseFloat(item.service_charge.detail.transferFee.value) + Number.EPSILON) * 1000) / 1000).toFixed(3)+ '' +(item.service_charge.detail.transferFee.type === 'percentage' ? '%' : ' FEC')) : '0.000%'}}</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row">
<div class="col">
<button class="btn btn-xs btn-outline-warning b-rad-none m-r-5 requestModal" data-type="editServiceCharge">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteSupplier">
<i class="fa fa-times"></i>
</button>
<button class="btn btn-xs btn-complete p-l-10 p-r-10 b-rad-none" @click="expanded = !expanded">
<i class="fa" :class="[{'fa-angle-up': expanded}, {'fa-angle-down': !expanded}]"></i>
</button>
<modal-component class="animate__animated animate__fast animate__fadeIn" type="editServiceCharge">
<supplier-service-charge-form-component :supplierId="item.id" :data="item.service_charge" section="suppliersSection"></supplier-service-charge-form-component>
</modal-component>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteSupplier">
<delete-supplier-form-component :data="item" section="suppliersSection" class="text-center"></delete-supplier-form-component>
</modal-component>
</div>
</div>
</div>
</div>
<div class="row" v-if="expanded">
<div class="col-1"></div>
<div class="col p-l-10 p-t-10 p-b-10">
<div class="row m-b-20">
<div class="col">
<div class="row m-l-0 m-b-10 align-items-center parentContainer">
<div class="col p-l-0">
<div class="font-heading all-caps fs-10 hint-text muted">
Bank Accounts
</div>
</div>
</div>
<div class="row m-r-0" v-for="bank in item.personal_banks" v-bind:key="bank.id" :data="bank">
<div class="col">
<bank-account-component :data="bank" section="suppliersSection"></bank-account-component>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-xs btn-outline-primary b-rad-none requestModal" data-type="createModal">
<i class="fa fa-plus m-r-5"></i>
Add New Bank Account
</button>
<modal-form-component section="suppliersSection">
<template slot="form" slot-scope="{section}">
<bank-account-form-component :section="section" :company_id="item.id"></bank-account-form-component>
</template>
</modal-form-component>
</div>
</div>
</div>
</div>
<supplier-currencies-section-component section="suppliersSection" :data="item"></supplier-currencies-section-component>
</div>
</div>
</div>
</div>
</template>
<script>
import componentHandler from '../../../general/mixins/componentHandler';
export default {
data(){
return {
expanded: false,
}
},
computed: {
stringifyCurrencies(){
return this.data.currencies.map(function(value){
return value.short_code;
}).join(', ')
}
},
mixins: [componentHandler]
}
</script>