baseform

kidto1412

May 15th, 2025

310

Never

Add comment

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

TypeScript 43.05 KB | None | 0 0

raw download clone embed print report

<template>
<div class="tw-container tw-mx-auto tw-max-w-[800px]">
<q-header class="tw-bg-primary tw-text-gray-50">
<q-toolbar>
<q-breadcrumbs class="tw-block md:tw-hidden">
<q-breadcrumbs-el
icon="arrow_back"
class="tw-text-xl tw-cursor-pointer"
@click="onBack"
:disable="isCount == true"
/>
</q-breadcrumbs>
<q-space></q-space>
<q-toolbar-title class="tw-flex tw-items-center tw-justify-center tw-px-0 -tw-translate-x-4">
<img src="~assets/images/login-logo-bprks.svg" alt="" class="tw-h-[30px]" />
</q-toolbar-title>
<q-space></q-space>
</q-toolbar>
</q-header>
<div class="tw-flex tw-flex-col tw-space-y-2 tw-py-4">
<h3 class="tw-font-semibold tw-text-2xl tw-text-center">Kredit Online BPR KS</h3>
<h5 class="tw-text-base tw-text-center">Mulai pengajuan pinjaman dengan mudah</h5>
<k-stepper align="center" class="k-stepper-applicant">
<k-step
v-for="(section, index) in sections"
:key="section.id"
:name="section.sectionCode"
:class="{
'step-done': currentOrder(sectionCode) > index + 1,
'border-black': currentOrder(sectionCode) == index + 1,
}"
>
<q-icon v-if="currentOrder(sectionCode) > index + 1" name="done" />
<span v-else>{{ (index + 1)?.toString() }}</span>
</k-step>
</k-stepper>
<k-step-panels v-model="sectionCode">
<k-step-panel v-for="section in sections" :key="section.id" :name="section.sectionCode">
<q-tabs
v-if="section.subSections.length > 0"
v-model="subSectionCode"
align="left"
active-color="primary"
indicator-color="primary"
>
<q-tab
v-for="(subSection, subIndex) in section.subSections"
:key="subSection.id"
:name="subSection.subSectionCode"
:class="{ 'step-done': currentSubOrder(sectionCode, subSectionCode) > subIndex + 1 }"
:disable="true"
>
<div class="tw-flex tw-items-center tw-space-x-2">
<q-avatar
color="primary"
text-color="white"
icon="done"
size="sm"
v-if="currentSubOrder(sectionCode, subSectionCode) > subIndex + 1"
/>
<q-icon
v-else
name="radio_button_unchecked"
size="1.25rem"
:color="subSectionCode === subSection.subSectionCode ? 'primary' : 'grey-8'"
/>
<span>{{ subSection.subSectionName }}</span>
</div>
</q-tab>
</q-tabs>
<q-separator></q-separator>
<k-tab-panels v-model="subSectionCode">
<k-tab-panel :name="SUB_SECTION_LOAN">
<loan-data v-model="form"></loan-data>
</k-tab-panel>
<k-tab-panel :name="SUB_SECTION_COLLATERAL">
<collateral-data v-model="form"></collateral-data>
</k-tab-panel>
<k-tab-panel :name="KK">
<upload-k-k v-model="form" :countDown="countDown"></upload-k-k>
</k-tab-panel>
<k-tab-panel :name="SUB_SECTION_WORKER">
<work-data v-model="form"></work-data>
</k-tab-panel>
<k-tab-panel :name="KTP">
<upload-ktp v-model="form" :countDown="countDown"></upload-ktp>
</k-tab-panel>
<k-tab-panel :name="KTP_PASANGAN">
<upload-partner-id-card v-model="form"></upload-partner-id-card>
</k-tab-panel>
<k-tab-panel :name="SUB_SECTION_COLLATERAL_UPLOAD">
<upload-data v-model="form"></upload-data>
</k-tab-panel>
>
<k-tab-panel :name="SECTION_AGREEMENT">
<aggrement v-model="form"></aggrement>
</k-tab-panel>
>
<k-tab-panel :name="SUB_SECTION_EMERGENCY_CONTACT">
<contact-emergency-data v-model="form"></contact-emergency-data>
</k-tab-panel>
</k-tab-panels>
<div class="tw-flex tw-items-center tw-justify-between tw-px-4">
<q-btn
:label="t('button.back')"
color="black"
type="button"
dense
class="tw-hidden md:tw-block"
flat
icon="arrow_back"
@click="onBack"
:disable="isCount == true"
/>
<q-btn
label="Lanjutkan"
color="secondary"
rounded
class="tw-w-full md:tw-w-auto"
@click="onSubmit"
:disable="isDisable || isCount == true"
:loading="buttonLoading"
/>
</div>
<!-- <div v-if="isCount == true && subSectionCode != 'KK' && subSectionCode != 'KTP'" class="tw-text-center">
{{ countDown }}
</div> -->
</k-step-panel>
</k-step-panels>
</div>
</div>
</template>
<script setup lang="ts">
import { ApplicantSectionResponse, ApplicantSubSection } from 'src/common/entities/applicant-section.entity'
import { useAuthenticationStore } from 'src/stores/authentication.store'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import KStepper from '../ui/KStepper.vue'
import KStep from '../ui/KStep.vue'
import KStepPanels from '../ui/KStepPanels.vue'
import KStepPanel from '../ui/KStepPanel.vue'
import { id, SectionCollection, sectionOder } from 'src/common/interfaces/response.interface'
import CollateralData from '../form/applicant/CollateralData.vue'
import LoanData from '../form/applicant/LoanData.vue'
import { Loading, LocalStorage, Notify } from 'quasar'
import { GetErrorMessage } from 'src/common/utils/error.utils'
import WorkData from '../form/applicant/WorkData.vue'
import ContactEmergencyData from '../form/applicant/ContactEmergencyData.vue'
import { ApplicantDataRequest } from 'src/common/entities/applicant.entity'
import { useAppStore } from 'src/stores/app.store'
import KTabPanels from '../ui/KTabPanels.vue'
import KTabPanel from '../ui/KTabPanel.vue'
import ApplicantData from '../form/applicant/ApplicantData.vue'
import UploadKtp from '../form/applicant/UploadKtp.vue'
import UploadKK from '../form/applicant/UploadKK.vue'
import UploadData from '../form/applicant/UploadData.vue'
import {
SUB_SECTION_APPLICANT,
SUB_SECTION_COLLATERAL,
SUB_SECTION_EMERGENCY_CONTACT,
SUB_SECTION_LOAN,
SUB_SECTION_WORKER,
SUB_SECTION_PERSONAL_UPLOAD,
SUB_SECTION_COLLATERAL_UPLOAD,
SECTION_AGREEMENT,
KTP,
KK,
KTP_PASANGAN,
} from 'src/common/constants/applicant-section.constant'
import { useI18n } from 'vue-i18n'
import { ErrorId } from 'src/common/exceptions/error-id'
import { useApplicantEndpoint } from 'src/common/endpoints/applicant.endpoint'
import { useUplaodStore } from 'src/stores/upload.store'
import { toInteger } from 'lodash'
import Aggrement from '../form/applicant/Aggrement.vue'
import { useParameterStore } from 'src/stores/parameter.store'
import moment from 'moment'
import { useOCRStore } from 'src/stores/ocr.store'
import { checkSameAdress } from '../../common/utils/validationAddress'
import UploadPartnerIdCard from '../form/applicant/UploadPartnerIdCard.vue'
import { FailedNotification } from '../../common/utils/notification.utils'
import { nextTick } from 'process'
export interface ApplicantBaseFormProps {
modelValue: ApplicantDataRequest
}
export interface ApplicantBaseFormEmits {
(event: 'update:model-value', value: ApplicantBaseFormProps['modelValue']): void
}
interface SectionTemp {
sectionId?: id
subSectionId?: id
}
const appStore = useAppStore()
const applicantDataStore = computed(() => appStore.$state.applicantData)
const applicantEndpoint = useApplicantEndpoint()
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const authStore = useAuthenticationStore()
const props = withDefaults(defineProps<ApplicantBaseFormProps>(), {})
const emit = defineEmits<ApplicantBaseFormEmits>()
const form = computed({
get: () => props.modelValue,
set: (value) => emit('update:model-value', value),
})
const isMarriage = computed(() => {
return form.value.marriage == '13939713532562'
})
const sections = computed(() => {
// Ambil data sections dari store
const rawSections = authStore.$state?.applicantSections || []
// Urutkan sections berdasarkan sectionOrder
const sortedSections = rawSections.slice().sort((a, b) => a.sectionOrder - b.sectionOrder)
return sortedSections.map((section) => ({
...section,
subSections: section.subSections
?.slice()
.sort((a, b) => a.subSectionOrder - b.subSectionOrder)
.filter((subSection) => isMarriage.value || subSection.subSectionCode !== 'KTP_PASANGAN'), // Hanya tampilkan "KTP PASANGAN" jika isMarriage true
}))
})
const sectionCode = ref<string>()
const subSectionCode = ref<string>()
const collectionParams = computed(() => route.params?.collection as string)
const sectionTemp = reactive<SectionTemp>({})
const currentOrder = (code?: string) => {
return sections.value?.find(({ sectionCode }) => sectionCode === code)?.sectionOrder || 0
}
const currentSubOrder = (code?: string, subCode?: string) => {
const filterSection = sections.value?.find(({ sectionCode }) => sectionCode === code)
const subSections = filterSection?.subSections.find((sub) => sub.subSectionCode == subCode)?.subSectionOrder
// return subSections.subSectionOrder || 0
return subSections || 0
}
const parameterStore = useParameterStore()
const flagging = computed(() => parameterStore.getFlagging)
onMounted(() => {
const currentSections = [...sections.value]
const sectionIndex = currentSections.findIndex((section) => section.sectionCode === sectionCode.value)
const section = currentSections[sectionIndex]
if (collectionParams.value) {
const collection = JSON.parse(collectionParams.value) as SectionCollection
const sectionOrder = collection.sectionOder // pastikan ini adalah number
sectionCode.value = sectionCodeByOrder(sectionOrder)
subSectionCode.value = subSectionCodeByOrder(sectionOrder)
sectionTemp.sectionId = sectionByOrder(sectionOrder)?.id
sectionTemp.subSectionId = subSectionByOrder(sectionOrder)?.id
form.value = { ...applicantDataStore.value }
if (applicantDataStore.value.collateral_type !== null) {
parameterStore.setGetWhell(applicantDataStore.value.vehicle_type)
}
if (applicantDataStore.value.brand !== null) {
parameterStore.setBrand(applicantDataStore.value.brand)
}
if (applicantDataStore.value.type !== null) {
parameterStore.setModel(applicantDataStore.value.type!)
}
if (applicantDataStore.value.id != null) {
uploadStore.setIdLoan(toInteger(applicantDataStore.value.id))
}
}
})
const sectionIdByCode = (sectionCode?: string) => {
const currentSection = [...sections.value]?.find((section) => section.sectionCode === sectionCode)
return currentSection?.sectionOrder
}
// const sectionById = (sectionId?: id): ApplicantSectionResponse | undefined => {
// const currentSection = [...sections.value]?.find(({ id }) => id === sectionId)
// return currentSection
// }
// const sectionCodeById = (sectionId: id): string | undefined => {
// return sectionById(sectionId)?.sectionCode
// }
// const subSectionById = (sectionId?: id): ApplicantSubSection | undefined => {
// const currentSection = [...sections.value]?.find(({ id }) => id === sectionId)
// if (currentSection && currentSection?.subSections?.length > 0) {
// const [section] = currentSection?.subSections
// return section
// }
// }
// const subSectionCodeById = (sectionId: id): string | undefined => {
// return subSectionById(sectionId)?.subSectionCode
// }
const sectionByOrder = (sectionOrder: sectionOder): ApplicantSectionResponse | undefined => {
const currentSection = [...sections.value]?.find(({ order }) => order === sectionOrder)
return currentSection
}
const sectionCodeByOrder = (sectionOrder: sectionOder): string | undefined => {
return sectionByOrder(sectionOrder)?.sectionCode
}
const subSectionByOrder = (sectionOrder: sectionOder): ApplicantSubSection | undefined => {
const currentSection = sectionByOrder(sectionOrder)
if (currentSection && currentSection?.subSections?.length > 0) {
// Dapatkan subSection berdasarkan order (misalnya subSectionOrder)
const currentSubSection = currentSection.subSections.find((sub) => sub.sectionOrder === sectionOrder)
return currentSubSection
}
}
const subSectionCodeByOrder = (sectionOrder: sectionOder): string | undefined => {
return subSectionByOrder(sectionOrder)?.subSectionCode
}
// old
function onStepper(value: id) {
try {
const currentSection = [...sections.value]?.find(({ sectionCode }) => sectionCode === value)
if (currentSection && currentSection?.subSections?.length > 0) {
const [section] = currentSection?.subSections
// Pastikan tidak lompat ke subSection yang lebih tinggi
if (currentOrder(sectionCode.value) <= currentSection.sectionOrder) {
subSectionCode.value = section?.subSectionCode
} else {
Notify.create({
type: 'negative',
message: 'Anda harus menyelesaikan langkah sebelumnya terlebih dahulu!',
})
}
}
} catch (error) {
Notify.create({
type: 'negative',
message: GetErrorMessage(error as Error),
})
}
}
// new
// function onStepper(value: id) {
// try {
// const currentSection = sections.value.find(({ sectionCode }) => sectionCode === value)
// if (currentSection) {
// sectionCode.value = currentSection.sectionCode // Update sectionCode sesuai step
// if (currentSection.subSections.length > 0) {
// subSectionCode.value = currentSection.subSections[0].subSectionCode // Reset subSection
// }
// }
// } catch (error) {
// Notify.create({
// type: 'negative',
// message: GetErrorMessage(error as Error),
// })
// }
// }
// function onStepper(value: id) {
// const currentSection = findSectionBy({ sectionCode: value })
// if (currentSection) {
// sectionCode.value = currentSection.sectionCode
// sectionTemp.sectionId = currentSection.id
// const firstSubSection = currentSection.subSections?.[0]
// subSectionCode.value = firstSubSection?.subSectionCode
// sectionTemp.subSectionId = firstSubSection?.id
// }
// }
async function onBack() {
try {
const currentSections = [...sections.value]
const sectionIndex = currentSections.findIndex((section) => section.sectionCode === sectionCode.value)
const section = currentSections[sectionIndex]
if (!section) throw new Error('Section not found.')
if (section.subSections.length > 0) {
const currentSubSections = [...section.subSections]
const subSectionIndex = currentSubSections.findIndex(
(subSection) => subSection.subSectionCode === subSectionCode.value
)
if (subSectionIndex > 0) {
const prevSubSection = currentSubSections[subSectionIndex - 1]
sectionTemp.subSectionId = prevSubSection.id
subSectionCode.value = prevSubSection.subSectionCode
loadSubmission()
} else if (sectionIndex > 0) {
const prevSection = currentSections[sectionIndex - 1]
sectionTemp.subSectionId = prevSection.subSections[prevSection.subSections.length - 1]?.id || 0
sectionCode.value = prevSection.sectionCode
subSectionCode.value = prevSection.subSections[prevSection.subSections.length - 1]?.subSectionCode || ''
loadSubmission()
} else {
router.back()
}
}
} catch (error) {
Notify.create({
type: 'negative',
message: GetErrorMessage(error as Error),
})
}
}
const uploadStore = useUplaodStore()
const statusOCR = computed(() => uploadStore.getStatusOCR)
function parseCurrency(value: string) {
return value.replace(/\D/g, '')
}
const genders = computed(() => parameterStore.getGender)
const typeOfWorks = computed(() => parameterStore.typeOfWorks)
const marriages = computed(() => parameterStore.marriages)
async function loadSubmission() {
const sectionId = sectionIdByCode(sectionCode.value)
try {
Loading.show()
const inquiryData = await applicantEndpoint.getOne()
appStore.setApplicantData(inquiryData.data)
if (inquiryData.data.domicile == undefined || inquiryData.data.domicile == null) {
inquiryData.data.domicile = true
}
if (inquiryData.data.flagging) {
parameterStore.setFlagging(inquiryData.data.flagging)
}
form.value = { ...inquiryData.data }
console.log(form.value, 'new form data')
if (inquiryData.data.applicantKkId) {
form.value.applicantKkId = inquiryData.data.applicantKkId
ocrStore.setApplicantKKId(inquiryData.data.applicantKkId)
} else {
ocrStore.setApplicantKKId(null)
}
if (inquiryData.data.applicantKtpId) {
ocrStore.setApplicantKTPId(inquiryData.data.applicantKtpId)
form.value.applicantKtpId = inquiryData.data.applicantKtpId
} else {
ocrStore.setApplicantKTPId(null)
}
} catch (error) {
Notify.create({
type: 'negative',
message: GetErrorMessage(error as Error),
})
} finally {
Loading.hide()
}
}
const statusKTP = ref<string | null>(null)
const statusKK = ref<string | null>(null)
const isCount = ref<boolean>(false)
const countDown = ref<number>(0)
const maxCounterKtp = ref<number>(0)
const maxCounterKK = ref<number>(0)
let timerId: any
function countDownTimer(callback: any) {
if (countDown.value > 0) {
timerId = setTimeout(() => {
countDown.value -= 1
callback(countDown.value)
countDownTimer(callback)
}, 1000)
}
}
function clearTimer() {
if (timerId) {
clearTimeout(timerId)
timerId = null
}
}
function updateCountDown(newCount: number) {
countDown.value = newCount
if (newCount === 0) {
isCount.value = false
clearTimer()
}
}
function updateContDownOCR(newCount: number) {
const currentSections = [...sections.value]
const sectionIndex = currentSections.findIndex((section) => section.sectionCode === sectionCode.value)
countDown.value = newCount
Loading.show({ message: `Silahkan tunggu ${countDown.value}` })
const nextSection = currentSections[sectionIndex + 1]
if (newCount === 0) {
isCount.value = false
clearTimer()
Loading.hide()
sectionTemp.subSectionId = nextSection.subSections[0]?.subSectionOrder || 0
sectionCode.value = nextSection.sectionCode
subSectionCode.value = nextSection.subSections[0]?.subSectionCode || ''
console.log(subSectionCode.value, 'update countdown')
loadSubmission()
}
}
const ocrStore = useOCRStore()
const statusOcrKTP = computed(() => ocrStore.getStatusOCRKTP)
const statusOcrKK = computed(() => ocrStore.getStatusOCRKK)
const applicantKKId = computed(() => ocrStore.getApplicantKKId)
const applicantKTPId = computed(() => ocrStore.getApplicantKTPId)
const inqueryStatusOCR = async (fileOCR: string) => {
try {
const checkStatus = await applicantEndpoint.checkStatusOCR({
applicantId: fileOCR == 'KTP' ? applicantKTPId.value ?? '' : applicantKKId.value ?? '',
})
if (fileOCR == 'KTP') {
ocrStore.setStatusOCRKTP(checkStatus.data.status)
} else {
ocrStore.setStatusOCRKK(checkStatus.data.status)
}
if (checkStatus.data.status == 'IN_PROGRESS' || checkStatus.data.status == 'on_queue') {
isCount.value = true
clearTimer()
countDown.value = 10
countDownTimer(updateCountDown)
Notify.create({
type: 'positive',
message: 'Sedang diproses',
})
if (fileOCR == 'KTP') {
setKTPDataToNull()
}
} else if (checkStatus.data.status == 'MANUAL') {
if (fileOCR == 'KTP') {
Notify.create({
type: 'negative',
message: 'Silahkan isi formulir manual',
})
}
await loadSubmission()
} else if (checkStatus.data.status == 'ERROR') {
// isCount.value = true
// clearTimer()
// countDown.value = 10
// countDownTimer(updateCountDown)
if (fileOCR == 'KTP') {
Notify.create({
type: 'negative',
message: 'Silahkan isi formulir manual',
})
} else {
Notify.create({
type: 'negative',
message: 'OCR gagal',
})
}
await loadSubmission()
} else {
Notify.create({
type: 'positive',
message: 'OCR berhasil',
})
await loadSubmission()
}
} catch (error) {
isCount.value = false
ocrStore.setStatusOCRKTP(null)
ocrStore.setStatusOCRKK(null)
Notify.create({
type: 'negative',
message: GetErrorMessage(error as Error),
})
} finally {
}
}
const setKTPDataToNull = () => {
form.value.legal_id = ''
form.value.full_name = ''
form.value.place_of_birth = ''
form.value.date_of_birth = ''
form.value.gender = ''
form.value.marriage = ''
form.value.province = ''
form.value.city_or_district = ''
form.value.subdistrict = ''
form.value.village = ''
form.value.rt = ''
form.value.rw = ''
form.value.postal_code = ''
form.value.address = ''
}
const buttonLoading = ref<boolean>(false)
const dataKtpPasanganExist = computed(() => uploadStore.getExistKtpPasangan)
async function onSubmit() {
console.log(subSectionCode.value, 'sub section')
try {
buttonLoading.value = true
const sectionId = sectionIdByCode(sectionCode.value)
if (!sectionId) throw new ErrorId('SectionId is undefined')
const currentForm: ApplicantDataRequest = { ...form.value, sectionId }
console.log(currentForm, 'form request')
currentForm.subSection = subSectionCode.value ?? ''
if (form.value.date_of_birth != null) {
const dob = form.value.date_of_birth
// Cek apakah format awalnya adalah DD-MM-YYYY (misalnya dari OCR)
const isFormatDMY = moment(dob, 'DD-MM-YYYY', true).isValid()
const isFormatYMD = moment(dob, 'YYYY-MM-DD', true).isValid()
const isFormatYMDslash = moment(dob, 'YYYY/MM/DD', true).isValid()
if (isFormatDMY) {
currentForm.date_of_birth = moment(dob, 'DD-MM-YYYY').format('YYYY-MM-DD')
} else if (isFormatYMD) {
currentForm.date_of_birth = dob // sudah sesuai, tidak diubah
} else if (isFormatYMDslash) {
currentForm.date_of_birth = moment(dob, 'YYYY/MM/DD').format('YYYY-MM-DD')
} else {
currentForm.date_of_birth = dob // fallback jika format tidak dikenal
}
}
// if (form.value.tax_date != null) {
// currentForm.tax_date = moment(form.value.tax_date, 'YYYY/MM/DD').format('YYYY-MM-DD')
// }
if (form.value.gender != null && genders.value!.length != 0) {
const filterGender = genders.value!.filter((item) => item.description == form.value.gender)[0]
if (filterGender) {
currentForm.gender = filterGender.id
}
}
if (form.value.marriage != null && marriages.value!.length != 0) {
const filterMarriage = marriages.value!.filter(
(item) => item.description.toLowerCase() == form.value.marriage.toLowerCase()
)[0]
if (filterMarriage) {
currentForm.marriage = filterMarriage.id
}
}
console.log(currentForm.gender, 'gender')
if (form.value.credit_amount != null) {
currentForm.credit_amount = parseCurrency(form.value.credit_amount)
}
if (form.value.net_income) {
currentForm.net_income = parseCurrency(form.value.net_income)
}
const currentSections = [...sections.value]
const sectionIndex = currentSections.findIndex((section) => section.sectionCode === sectionCode.value)
const section = currentSections[sectionIndex]
if (!section) throw new Error('Section not found.')
if (section.subSections.length > 0) {
const currentSubSections = [...section.subSections]
// const subSectionIndex = currentSubSections.findIndex((subSection) => subSection.id === sectionTemp.subSectionId)
const subSectionIndex = currentSubSections.findIndex(
(subSection) => subSection.subSectionCode === subSectionCode.value
)
const nexSubSection = currentSubSections[subSectionIndex + 1]
if (nexSubSection) {
console.log(subSectionCode.value, 'next')
if (subSectionCode.value == 'COLLATERAL') {
currentForm.type =
typeof form.value.type === 'object' && form.value.type !== null ? form.value.type.label : form.value.type
currentForm.flagging = flagging.value != null ? flagging.value : form.value.flagging
currentForm.year =
typeof form.value.year === 'object' && form.value.year !== null ? form.value.year.tahun : form.value.year
}
if (subSectionCode.value != 'KK' && subSectionCode.value != 'KTP' && subSectionCode.value != 'KTP_PASANGAN') {
const response = await applicantEndpoint.create(currentForm)
console.log('post subSection next')
if (form.value.id == null) {
form.value.id = response.data.id
}
}
if (subSectionCode.value != 'KTP' && subSectionCode.value != 'KTP_PASANGAN') {
await loadSubmission()
console.log('load subSection next')
}
uploadStore.setIdLoan(toInteger(form.value.id))
if (subSectionCode.value == 'KTP_PASANGAN') {
const idCardPartner = computed(() => uploadStore.getIdCardPartnerFormData)
if (idCardPartner.value) {
try {
await applicantEndpoint.uploadKtpPasangan(idCardPartner.value)
await applicantEndpoint.create(currentForm)
await loadSubmission()
uploadStore.setIdCardPartnerFormData(null)
sectionTemp.subSectionId = nexSubSection.id
subSectionCode.value = nexSubSection.subSectionCode
} catch (error) {
Notify.create({
message: GetErrorMessage(error as Error),
})
}
return
}
if (dataKtpPasanganExist.value) {
await applicantEndpoint.create(currentForm)
await loadSubmission()
uploadStore.setIdCardPartnerFormData(null)
sectionTemp.subSectionId = nexSubSection.id
subSectionCode.value = nexSubSection.subSectionCode
}
}
if (subSectionCode.value != 'KTP' && subSectionCode.value != 'KK' && subSectionCode.value != 'KTP_PASANGAN') {
sectionTemp.subSectionId = nexSubSection.id
subSectionCode.value = nexSubSection.subSectionCode
}
if (
(statusOcrKTP.value == 'COMPLETED' && subSectionCode.value == 'KTP') ||
(statusOcrKTP.value == 'MANUAL' && subSectionCode.value == 'KTP') ||
(statusOcrKTP.value == 'ERROR' && subSectionCode.value == 'KTP')
) {
currentForm.address2 = form.value.domicile == true ? form.value.address : form.value.address2
currentForm.city_or_district2 =
form.value.domicile == true ? form.value.city_or_district : form.value.city_or_district2
currentForm.subdistrict2 = form.value.domicile == true ? form.value.subdistrict : form.value.subdistrict2
currentForm.village2 = form.value.domicile == true ? form.value.village : form.value.village2
currentForm.rt2 = form.value.domicile == true ? form.value.rt : form.value.rt2
currentForm.rw2 = form.value.domicile == true ? form.value.rw : form.value.rw2
currentForm.province2 = form.value.domicile == true ? form.value.province : form.value.province2
currentForm.postal_code2 = form.value.domicile == true ? form.value.postal_code : form.value.postal_code2
await applicantEndpoint.create(currentForm)
await loadSubmission()
sectionTemp.subSectionId = nexSubSection.id
subSectionCode.value = nexSubSection.subSectionCode
}
if (subSectionCode.value == 'KTP') {
inqueryStatusOCR('KTP')
}
} else {
const nextSection = currentSections[sectionIndex + 1]
if (nextSection) {
console.log(subSectionCode.value, 'nexxxt sectiom')
if (subSectionCode.value == 'EMERGENCY_CONTACT') {
const addressIsSame = checkSameAdress(form.value.address, form.value.emergency_address)
if (addressIsSame == true) {
Notify.create({
type: 'negative',
message: 'Alamat tidak boleh sama dengan pemohon',
})
return
}
}
if (
subSectionCode.value != 'KK' &&
subSectionCode.value != 'KTP' &&
subSectionCode.value != 'COLLATERAL_UPLOAD'
) {
const response = await applicantEndpoint.create(currentForm)
if (form.value.id == null) {
form.value.id = response.data.id
}
console.log('post section next')
}
if (subSectionCode.value != 'KK' && subSectionCode.value != 'COLLATERAL_UPLOAD') {
console.log('get section next')
await loadSubmission()
}
if (subSectionCode.value == 'KK') {
const famillyCardFormData = computed(() => uploadStore.getFamillyCardFormData)
if (famillyCardFormData.value && !form.value.applicantKkId) {
try {
// await applicantEndpoint.upload(famillyCardFormData.value!)
const uploadKK = await applicantEndpoint.uploadOCR(famillyCardFormData.value!)
appStore.setMaxCounterKK(0)
ocrStore.setStatusOCRKK(uploadKK.data.status)
ocrStore.setApplicantKKId(uploadKK.data.applicantId ? uploadKK.data.applicantId : null)
if (uploadKK.data.applicantId) {
form.value.applicantKkId = uploadKK.data.applicantId
}
if (uploadKK.data.status == 'on_queue') {
Notify.create({
type: 'positive',
message: 'Sedang diproses',
})
} else if (uploadKK.data.status == 'ERROR' || uploadKK.data.status == 'MANUAL') {
Notify.create({
type: 'negative',
message: 'OCR gagal',
})
} else {
Notify.create({
type: 'positive',
message: 'OCR berhasil',
})
}
} catch (error) {
Notify.create({
type: 'negative',
message: GetErrorMessage(error as Error),
})
}
}
}
if (subSectionCode.value == 'COLLATERAL_UPLOAD') {
const bpkb1 = computed(() => uploadStore.getBPKB1FormData)
const bpkb2 = computed(() => uploadStore.getBPKB2FormData)
const stnk = computed(() => uploadStore.getSTNK)
const vehicleWarranty = computed(() => uploadStore.getVehicleWarranty)
const vehicleWarranty2 = computed(() => uploadStore.getVehicleWarranty2)
const vehicleWarranty3 = computed(() => uploadStore.getVehicleWarranty3)
const vehicleWarranty4 = computed(() => uploadStore.getVehicleWarranty4)
try {
await Promise.all([
bpkb1.value ? applicantEndpoint.uploadOCR(bpkb1.value!) : null,
bpkb2.value ? applicantEndpoint.upload(bpkb2.value!) : null,
stnk.value ? applicantEndpoint.uploadOCR(stnk.value!) : null,
vehicleWarranty.value ? applicantEndpoint.upload(vehicleWarranty.value!) : null,
vehicleWarranty2.value ? applicantEndpoint.upload(vehicleWarranty2.value!) : null,
vehicleWarranty3.value ? applicantEndpoint.upload(vehicleWarranty3.value!) : null,
vehicleWarranty4.value ? applicantEndpoint.upload(vehicleWarranty4.value!) : null,
])
await loadSubmission()
isCount.value = true
clearTimer()
countDown.value = 10
console.log('All uploads completed')
try {
const newForm: ApplicantDataRequest = { ...form.value, sectionId }
const response = await applicantEndpoint.create(newForm)
if (form.value.id == null) {
form.value.id = response.data.id
}
} catch (error) {
FailedNotification(GetErrorMessage(error as Error))
}
countDownTimer(updateContDownOCR)
} catch (error) {
console.log(error, 'Upload failed')
isCount.value = false
clearTimer()
countDown.value = 0
FailedNotification(GetErrorMessage(error as Error))
}
}
uploadStore.setIdLoan(toInteger(form.value.id))
if (
subSectionCode.value != 'KTP' &&
subSectionCode.value != 'KK' &&
subSectionCode.value != 'COLLATERAL_UPLOAD'
) {
sectionTemp.subSectionId = nextSection.subSections[0]?.subSectionOrder || 0
sectionCode.value = nextSection.sectionCode
subSectionCode.value = nextSection.subSections[0]?.subSectionCode || ''
}
if (
(subSectionCode.value == 'KK' && statusOcrKK.value == 'IN_PROGRESS') ||
(subSectionCode.value == 'KK' && statusOcrKK.value == 'on_queue')
) {
await inqueryStatusOCR('KK')
}
if (
(statusOcrKK.value == 'COMPLETED' && subSectionCode.value == 'KK') ||
(statusOcrKK.value == 'MANUAL' && subSectionCode.value == 'KK') ||
(statusOcrKK.value == 'ERROR' && subSectionCode.value == 'KK')
) {
await applicantEndpoint.create(currentForm)
sectionTemp.subSectionId = nextSection.subSections[0]?.subSectionOrder || 0
sectionCode.value = nextSection.sectionCode
subSectionCode.value = nextSection.subSections[0]?.subSectionCode || ''
}
} else {
await applicantEndpoint.create(currentForm)
parameterStore.setIsAggree(false)
router.push('/submission/history')
uploadStore.reset()
uploadStore.resetUploadFile()
parameterStore.resetAmountIsValid()
}
}
}
} catch (error) {
Notify.create({
type: 'negative',
message: GetErrorMessage(error as Error),
})
} finally {
buttonLoading.value = false
}
}
// watch(sectionCode, (newVal, oldVal) => {
// console.log(newVal, 'new')
// console.log(oldVal, 'lod')
// })
const netIncomeIsValid = computed(() => parameterStore.getNetIncomeIsValid)
const creditIsValid = computed(() => parameterStore.getCreditIsValid)
const isAggree = computed(() => parameterStore.getIsAggree)
const dataKTP = computed(() => uploadStore.getIdCardFormData)
const dataFamillyCard = computed(() => uploadStore.getFamillyCardFormData)
const dataSTNK = computed(() => uploadStore.getSTNK)
const dataBPKB1 = computed(() => uploadStore.getBPKB1FormData)
const dataBPKB2 = computed(() => uploadStore.getBPKB2FormData)
const dataTTJ = computed(() => uploadStore.getVehicleWarranty)
const dataTTJ2 = computed(() => uploadStore.getVehicleWarranty2)
const dataTTJ3 = computed(() => uploadStore.getVehicleWarranty3)
const dataTTJ4 = computed(() => uploadStore.getVehicleWarranty4)
const isWestJava = computed(() => appStore.getIsWestJava)
const existKTP = computed(() => uploadStore.getExistKtp)
const existKK = computed(() => uploadStore.getExistKK)
const kkFile = computed(() => uploadStore.getKKFile)
const existBPKB1 = computed(() => uploadStore.getExistBPKB1)
const existBPKB2 = computed(() => uploadStore.getExistBPKB2)
const existSTNK = computed(() => uploadStore.getExistSTNK)
const existTTJ = computed(() => uploadStore.getExistTTJ)
const existTTJ2 = computed(() => uploadStore.getExistTTJ2)
const existTTJ3 = computed(() => uploadStore.getExistTTJ3)
const existTTJ4 = computed(() => uploadStore.getExistTTJ4)
const KtpPasanganFIle = computed(() => uploadStore.getKtpPasanganFile)
const existKtpPasangan = computed(() => uploadStore.getExistKtpPasangan)
// console.log(
// !!(form.value.vehicle_type && form.value.brand && typeof form.value.type == 'object' && form.value.type != null
// ? form.value.type.label
// : form.value.type && typeof form.value.year == 'object' && form.value.year != null
// ? form.value.year.tahun
// : form.value.year),
// 'rules collateral'
// )
const validationRules: any = {
COLLATERAL: () => {
return !!(form.value.vehicle_type && form.value.brand && form.value.type && form.value.year)
},
LOAN: () => {
return !!(form.value.purpose_of_use && form.value.tenor && form.value.credit_amount)
},
KTP: () => {
if (!dataKTP.value && !existKTP.value) {
return false // Validasi gagal jika data KTP tidak ada
}
if (statusOcrKTP.value === 'IN_PROGRESS' || statusOcrKTP.value === 'on_queue') {
return true
}
const dob = form.value.date_of_birth
const format1 = moment(dob, 'DD-MM-YYYY', true)
const format2 = moment(dob, 'YYYY-MM-DD', true)
const format3 = moment(dob, 'YYYY/MM/DD', true)
const isDateValid = format1.isValid() || format2.isValid() || format3.isValid()
if (!isDateValid) {
return false
}
// Validasi data identitas utama
const isPersonalDataValid = !!(
(form.value.legal_id?.length ?? 0) > 15 &&
form.value.full_name &&
form.value.place_of_birth &&
form.value.date_of_birth &&
form.value.gender &&
form.value.marriage &&
(form.value.referral_code?.length ?? 0) > 0
)
// Validasi alamat pertama jika domicile == true
const isAddress1Valid =
form.value.domicile === true &&
!!(
form.value.province &&
form.value.city_or_district &&
form.value.subdistrict &&
form.value.village &&
form.value.rt &&
form.value.rw &&
form.value.postal_code &&
form.value.address
)
// Validasi alamat kedua jika domicile == false
const isAddress2Valid =
form.value.domicile === false &&
!!(
form.value.province2 &&
form.value.city_or_district2 &&
form.value.subdistrict2 &&
form.value.village2 &&
form.value.rt2 &&
form.value.rw2 &&
form.value.postal_code2 &&
form.value.address2
)
return isPersonalDataValid && (isAddress1Valid || isAddress2Valid)
},
KTP_PASANGAN: () => {
if (isMarriage.value) {
return !!(KtpPasanganFIle.value || existKtpPasangan.value)
} else {
return true
}
},
KK: () => {
return !!(kkFile.value || existKK.value)
},
WORKER: () => {
return !!(
form.value.type_of_work &&
form.value.net_income &&
form.value.length_of_work &&
form.value.company_name &&
form.value.address_company
)
},
EMERGENCY_CONTACT: () => {
return !!(
form.value.emergency_name &&
form.value.emergency_address &&
form.value.emergency_contact &&
form.value.relation
)
},
COLLATERAL_UPLOAD: () => {
return !!(
(existBPKB1.value || dataBPKB1.value) &&
(existBPKB2.value || dataBPKB2.value) &&
(existSTNK.value || dataSTNK.value) &&
(existTTJ.value || dataTTJ.value) &&
(existTTJ2.value || dataTTJ2.value) &&
(existTTJ3.value || dataTTJ3.value) &&
(existTTJ4.value || dataTTJ4.value)
)
},
AGREEMENT: () => {
return !!(form.value.isAgree === true)
},
// Tambahkan subSectionCode lainnya jika ada...
}
const isDisable = computed(() => {
// Urutan langkah dari awal hingga akhir
const steps = [
'COLLATERAL',
'LOAN',
'KTP',
'KTP_PASANGAN',
'KK',
'WORKER',
'EMERGENCY_CONTACT',
'COLLATERAL_UPLOAD',
'AGREEMENT',
// Tambahkan langkah lain jika ada...
]
// Cari index langkah saat ini
const currentIndex = steps.indexOf(subSectionCode.value!)
// Validasi semua langkah dari awal hingga langkah saat ini
for (let i = 0; i <= currentIndex; i++) {
const step = steps[i]
const isValid = validationRules[step]?.()
if (!isValid) {
return true // Tombol di-disable jika ada langkah tidak valid
}
}
return false // Semua langkah valid, tombol diaktifkan
})
watch(
isCount,
(newVal, oldVal) => {
if (newVal != oldVal) {
appStore.setIsCount(newVal)
}
},
{ deep: true }
)
// check status first when step ktp and kk
watch(
subSectionCode,
(val) => {
if (applicantKTPId.value && val == 'KTP') {
inqueryStatusOCR('KTP')
}
if (applicantKKId.value && val == 'KK') {
inqueryStatusOCR('KK')
}
// if (!applicantKKId.value && val == 'KK' && existKK.value) {
// Notify.create({
// type: 'negative',
// message: 'Silahkan unggah ulang Foto Kartu Keluarga',
// })
// }
if (subSectionCode.value != 'KK' && subSectionCode.value != 'KTP') {
ocrStore.setStatusOCRKK(null)
ocrStore.setStatusOCRKTP(null)
}
},
{ immediate: true }
)
watch(
subSectionCode,
() => {
validationRules
},
{ deep: true }
)
</script>
<style lang="scss">
.k-stepper-applicant {
.q-tabs__content {
.k-step.disabled {
@apply tw-cursor-default !important;
.q-tab__content {
@apply tw-cursor-default !important;
}
}
}
}
.disabled {
opacity: 1 !important;
}
</style>

Add Comment

Please, Sign In to add comment