loan form

kidto1412

May 15th, 2025

363

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

TypeScript 5.73 KB | None | 0 0

raw download clone embed print report

<template>
<div class="tw-grid tw-grid-cols-12 tw-gap-x-4">
<div class="tw-col-span-12 md:tw-col-span-6">
<k-select-parameter
v-model="form.purpose_of_use"
parameter-type="TUJUAN_KREDIT"
required
t-label="purposeOfApplicant"
/>
</div>
<div class="tw-col-span-12 md:tw-col-span-6">
<k-select
ref="kSelectRef"
v-model="form.tenor"
type="number"
required
t-label="tenor"
@focus="() => onLoadShowOption()"
:loading="loading"
:error-message="errorMessage"
:options="options"
/>
</div>
<div class="tw-col-span-12 md:tw-col-span-6">
<k-currency-input
v-model="form.credit_amount"
required
t-label="creditRequested"
:type="'text'"
:is-amount="true"
:istNetIncome="false"
:maxAmount="LOAN_MAX_AMOUN"
:minAmount="LOAN_MIN_AMOUN"
:rules="[validateMinAmount]"
:is-white="false"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ApplicantDataRequest } from 'src/common/entities/applicant.entity'
import { computed, onMounted, ref, watch } from 'vue'
import KSelect from 'src/components/ui/KSelect.vue'
import { GetErrorMessage } from 'src/common/utils/error.utils'
import { useParameterEndpoint } from 'src/common/endpoints/parameter.endpoint'
import { parseCurrency } from 'src/common/utils/converter.utils'
import { FormaterCurrency } from 'src/common/utils/currency'
import { Notify } from 'quasar'
import { toNumber } from 'lodash'
import { useParameterStore } from 'src/stores/parameter.store'
interface Props {
modelValue: ApplicantDataRequest
}
interface Emits {
(event: 'update:model-value', value: Props['modelValue']): void
}
const props = withDefaults(defineProps<Props>(), {})
const emit = defineEmits<Emits>()
const form = computed({
get: () => props.modelValue,
set: (value) => emit('update:model-value', value),
})
const parameterService = useParameterEndpoint()
const options = ref<readonly unknown[] | undefined>([])
const errorMessage = ref<string | undefined>()
const loadParameter = async (callback: (result: unknown) => void = () => null) => {
if (hasLoadData.value) return
try {
loading.value = true
errorMessage.value = undefined
const data = (
await parameterService.getParam({
paramName: form.value.vehicle_type == 'MOBIL' ? 'LOAN_TENOR' : 'LOAN_TENOR_MOTOR',
})
).data
const results = data.map((item) => {
return {
name: item.value,
id: item.value,
}
})
const sortResult = results.sort((a, b) => Number(a.name) - Number(b.name))
hasLoadData.value = true
options.value = sortResult
if (typeof callback === 'function') {
callback(results)
}
} catch (error) {
errorMessage.value = GetErrorMessage(error as Error)
} finally {
loading.value = false
}
}
function reload() {
hasLoadData.value = false
loadParameter()
}
const kSelectRef = ref<InstanceType<typeof KSelect>>()
function showPopup() {
kSelectRef.value?.showPopup()
}
function onLoadShowOption() {
loadParameter(() => setTimeout(() => showPopup(), 100))
}
const hasLoadData = ref(false)
const loading = ref(false)
defineExpose({
reload,
})
watch(
() => props.modelValue,
(value) => {
if (value) loadParameter()
},
{
immediate: true,
}
)
watch(
() => props.modelValue,
(val) => {
if (val.credit_amount) {
const parseAmount = parseCurrency(form.value.credit_amount)
form.value.credit_amount = FormaterCurrency.format(Number(parseAmount))
}
},
{ immediate: true }
)
const parameterEndpoint = useParameterEndpoint()
const LOAN_MIN_AMOUN = ref<number | null>(null)
const LOAN_MAX_AMOUN = ref<number | null>(null)
const parameterStore = useParameterStore()
function validateMinAmount(value: string | number): string | true {
const numericValue = typeof value === 'string' ? toNumber(parseCurrency(value)) : value
const MIN_AMOUNT = LOAN_MIN_AMOUN.value
if (numericValue <= 0) {
parameterStore.setIsCreditValid(false)
return 'Nilai tidak boleh kosong atau kurang dari 0.'
}
if (numericValue < MIN_AMOUNT!) {
parameterStore.setIsCreditValid(false)
return `Nilai minimal adalah ${FormaterCurrency.format(MIN_AMOUNT!)}.`
}
parameterStore.setIsCreditValid(true)
return true
}
const getLoanMinAmount = async () => {
try {
const response = await parameterEndpoint.getParam({ paramName: 'LOAN_MIN_AMOUNT' })
LOAN_MIN_AMOUN.value = toNumber(response.data[0].value)
} catch (error) {
Notify.create({
message: GetErrorMessage(error as Error),
type: 'negative',
})
}
}
const getLoanMaxAmount = async () => {
try {
const response = await parameterEndpoint.getParam({
paramName: form.value.vehicle_type == 'MOTOR' ? 'LOW_MC_MAX_AMOUNT' : 'LOW_CAR_MAX_AMOUNT',
})
LOAN_MAX_AMOUN.value = toNumber(response.data[0].value)
} catch (error) {
Notify.create({
message: GetErrorMessage(error as Error),
type: 'negative',
})
}
}
onMounted(() => {
getLoanMinAmount()
getLoanMaxAmount()
if (form.value.credit_amount) {
const numericValue =
typeof form.value.credit_amount === 'string'
? toNumber(parseCurrency(form.value.credit_amount))
: form.value.credit_amount
if (numericValue <= 0) {
parameterStore.setIsCreditValid(false)
}
if (numericValue < LOAN_MIN_AMOUN.value!) {
parameterStore.setIsCreditValid(false)
}
parameterStore.setIsCreditValid(true)
}
})
</script>

Add Comment

Please, Sign In to add comment