hafifierahman
108 lines
5.1 KiB
Vue
108 lines
5.1 KiB
Vue
<template>
|
|
<div class="bg-white mx-auto shadow rounded-lg p-4 sm:p-6 w-1/2 xl:p-8 w-2/3 2xl:col-span-1">
|
|
|
|
<router-view>
|
|
</router-view>
|
|
|
|
<h2 class="text-2xl mx-auto font-semibold leading-normal mt-0 mb-2 text-blueGray-800 text-center">
|
|
SENARAI BAJET
|
|
</h2>
|
|
|
|
<div class="relative w-96 mx-auto">
|
|
<select v-model="pilihantahun" @change="EventTahun" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
|
|
<option value="none" selected disabled>Pilih Tahun</option>
|
|
<option value="2021">2021</option>
|
|
<option value="2022">2022</option>
|
|
<option value="2023">2023</option>
|
|
<option value="2024">2024</option>
|
|
<option value="2025">2025</option>
|
|
<option value="2026">2026</option>
|
|
</select>
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
|
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="pilihantahun != 'none'">
|
|
<div v-for="(bajet,i) in arrayBajet" :key="i" class="border-4 border-gray-400 hover:border-yellow-400 rounded-lg mt-3 hover:transition-all cursor-pointer transition transform hover:-translate-x-1 ">
|
|
<router-link :to="{ name: 'bajetkemaskini', params: { id: bajet[Object.keys(arrayBajet[i])][0].id }}">
|
|
<div class="flex flex-wrap mb-3 p-4">
|
|
<h4 class="font-bold w-1/6 m-auto text-2xl">{{ String(Object.keys(arrayBajet[i])) }}</h4>
|
|
<div class="w-1/4 grid-rows-4">
|
|
<p class="m-1" v-for="(bajetdata,a) in bajet[Object.keys(arrayBajet[i])]" :key="a">{{ (4 >= a) ? bajetdata.bulan + ':' : '' }}
|
|
<span v-if="4 >= a">
|
|
{{ String(Object.keys(arrayBajet[i])) == 'Gadai' || String(Object.keys(arrayBajet[i])) == 'Penebusan' || String(Object.keys(arrayBajet[i])) == 'Keuntungan' ? 'RM ' + formatexchange(bajetdata.nilaibajet) : parseInt(bajetdata.nilaibajet) }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="w-1/4 grid-rows-4">
|
|
<p class="m-1" v-for="(bajetdata,a) in bajet[Object.keys(arrayBajet[i])]" :key="a">{{ (a >= 5 && 9 >= a) ? bajetdata.bulan + ':' : ''}}
|
|
<span v-if="a >= 5 && 9 >= a">
|
|
{{ String(Object.keys(arrayBajet[i])) == 'Gadai' || String(Object.keys(arrayBajet[i])) == 'Penebusan' || String(Object.keys(arrayBajet[i])) == 'Keuntungan' ? 'RM ' + formatexchange(bajetdata.nilaibajet) : parseInt(bajetdata.nilaibajet) }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="w-1/4 grid-rows-4">
|
|
<p class="m-1" v-for="(bajetdata,a) in bajet[Object.keys(arrayBajet[i])]" :key="a">{{ (a >= 10 && 13 >= a) ? bajetdata.bulan + ':' : '' }}
|
|
<span v-if="a >= 10 && 13 >= a">
|
|
{{ String(Object.keys(arrayBajet[i])) == 'Gadai' || String(Object.keys(arrayBajet[i])) == 'Penebusan' || String(Object.keys(arrayBajet[i])) == 'Keuntungan' ? 'RM ' + formatexchange(bajetdata.nilaibajet) : parseInt(bajetdata.nilaibajet) }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<div v-if="showLoader" class="fixed inset-0 z-30 h-full w-full" id="loading">
|
|
<i class="animate-spin fas fa-circle-notch fixed fa-4x m-auto text-yellow-500" style="left:50% !important;top:50% !important;"></i>
|
|
</div>
|
|
<div v-if="showLoader" class="opacity-25 fixed inset-0 z-30 bg-black"></div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
export default {
|
|
props: {
|
|
kodcaw: {
|
|
type: String
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
pilihantahun: 'none',
|
|
arrayBajet:[],
|
|
showLoader:false
|
|
}
|
|
},
|
|
methods: {
|
|
formatexchange: function(value){
|
|
return formatter.format(value)
|
|
},
|
|
EventTahun: function(){
|
|
this.getData()
|
|
},
|
|
getData: function(){
|
|
this.showLoader = true;
|
|
|
|
this.axios.get(this.$hostname + '/admin/senaraiBajet',{
|
|
params: {
|
|
kodcaw: this.$kodcaw,
|
|
year: this.pilihantahun
|
|
}
|
|
}).then( response => {
|
|
this.arrayBajet = response.data
|
|
this.showLoader = false;
|
|
console.log(this.arrayBajet)
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
</script> |