From 3a0f3c6ed7ef886d3205d51937b1ecbb035b1a87 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 21 Oct 2024 16:16:34 +0700 Subject: update and fix section dokumen --- .../pengajuan-tempo/component/PengajuanTempo.jsx | 22 +- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 33 +- src/lib/pengajuan-tempo/component/Referensi.jsx | 639 ++++++++++----------- 3 files changed, 331 insertions(+), 363 deletions(-) (limited to 'src') diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 612b009a..2ab7c21a 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -4,11 +4,13 @@ import Stepper from './Stepper'; import InformasiPerusahaan from './informasiPerusahaan'; import KontakPerusahaan from './KontakPerusahaan'; import Pengiriman from './Pengiriman'; +import Referensi from './Referensi'; import { Controller, useForm } from 'react-hook-form'; import { usePengajuanTempoStore, usePengajuanTempoStoreKontakPerson, usePengajuanTempoStorePengiriman, + usePengajuanTempoStoreSupplier, } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'; const PengajuanTempo = () => { @@ -22,6 +24,8 @@ const PengajuanTempo = () => { validateKontakPerson, updateFormKontakPerson, } = usePengajuanTempoStoreKontakPerson(); + const { formSupplier, errorsSupplier, validateSupplier, updateFormSupplier } = + usePengajuanTempoStoreSupplier(); const { formPengiriman, errorsPengiriman, @@ -40,7 +44,7 @@ const PengajuanTempo = () => { buttonSubmitClick={buttonSubmitClick} />, , -
Referensi
, + ,
Dokumen
,
Konfirmasi
, ]; @@ -48,7 +52,7 @@ const PengajuanTempo = () => { errors, errorsKontakPerson, errorsPengiriman, -
Referensi
, + errorsSupplier,
Dokumen
,
Konfirmasi
, ]; @@ -56,7 +60,7 @@ const PengajuanTempo = () => { form, formKontakPerson, formPengiriman, -
Referensi
, + formSupplier,
Dokumen
,
Konfirmasi
, ]; @@ -64,7 +68,7 @@ const PengajuanTempo = () => { updateForm, updateFormKontakPerson, updateFormPengiriman, -
Referensi
, + updateFormSupplier,
Dokumen
,
Konfirmasi
, ]; @@ -96,9 +100,13 @@ const PengajuanTempo = () => { const cachedData = getFromLocalStorage(stepLabels[currentStep]); if (cachedData) { // const formData = JSON.parse(cachedData); - Object.keys(cachedData).forEach((key) => { - stepDivsUpdateForm[currentStep](key, cachedData[key]); - }); + if (currentStep == 3) { + stepDivsUpdateForm[currentStep](cachedData); + } else { + Object.keys(cachedData).forEach((key) => { + stepDivsUpdateForm[currentStep](key, cachedData[key]); + }); + } } }, [currentStep]); const goToNextStep = () => { diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx index a281916c..2e1b1bba 100644 --- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx +++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx @@ -272,23 +272,6 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { } }, [sameAddress]); - useEffect(() => { - if (formPengiriman.statePengiriman) { - setValue('statePengiriman', parseInt(formPengiriman.statePengiriman)); - } - if (formPengiriman.stateInvoice) { - setValue('stateInvoice', parseInt(formPengiriman.stateInvoice)); - } - if (formPengiriman.cityInvoice) { - setValue('cityInvoice', parseInt(formPengiriman.cityInvoice)); - } - }, [formPengiriman]); - useEffect(() => { - const cachedData = getFromLocalStorage('Pengiriman'); - if (cachedData) { - setValue('cityPengiriman', parseInt(cachedData.cityPengiriman)); - } - }, [formPengiriman]); const getFromLocalStorage = (key) => { const itemStr = localStorage.getItem(key); if (!itemStr) return null; @@ -296,6 +279,22 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => { const item = JSON.parse(itemStr); return item; }; + const cachedData = getFromLocalStorage('Pengiriman'); + useEffect(() => { + if (cachedData) { + setValue('cityPengiriman', parseInt(cachedData.cityPengiriman)); + updateFormPengiriman('cityPengiriman', `${cachedData.cityPengiriman}`); + } + if (cachedData.statePengiriman) { + setValue('statePengiriman', parseInt(cachedData.statePengiriman)); + } + if (cachedData.stateInvoice) { + setValue('stateInvoice', parseInt(cachedData.stateInvoice)); + } + if (cachedData.cityInvoice) { + setValue('cityInvoice', parseInt(cachedData.cityInvoice)); + } + }, [cachedData.cityPengiriman]); return ( <>
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx index cb0bb5fe..e2a341e6 100644 --- a/src/lib/pengajuan-tempo/component/Referensi.jsx +++ b/src/lib/pengajuan-tempo/component/Referensi.jsx @@ -1,365 +1,326 @@ import React, { useState, useEffect, useMemo, useRef } from 'react'; -import { Controller, set, useForm } from 'react-hook-form'; -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; -import odooApi from '~/libs/odooApi'; -import stateApi from '@/lib/address/api/stateApi.js'; -import cityApi from '@/lib/address/api/cityApi'; -import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react'; -import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import { useForm } from 'react-hook-form'; +import { usePengajuanTempoStoreSupplier } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore'; +import * as Yup from 'yup'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { PlusCircleIcon } from '@heroicons/react/24/outline'; + +const initialData = []; const Referensi = ({ chekValid, buttonSubmitClick }) => { - const { control, watch } = useForm(); const { - formKontakPerson, - errorsKontakPerson, - validateKontakPerson, - updateFormKontakPerson, - } = usePengajuanTempoStoreKontakPerson(); + register, + formState: { errors }, + handleSubmit, + watch, + setValue, + control, + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues, + }); + const { formSupplier, updateFormSupplier } = usePengajuanTempoStoreSupplier(); + const [formData, setFormData] = useState([ + { + supplier: '', + pic: '', + telepon: '', + durasiTempo: '', + creditLimit: '', + }, + ]); + + const [buttonSubmit, setButtonSubmit] = useState(false); + const [supplierData, setSupplierData] = useState(initialData); + const [newSupplier, setNewSupplier] = useState({ + supplier: '', + pic: '', + telepon: '', + durasiTempo: '', + creditLimit: '', + }); + const onChangeInput = (e, index) => { + const { name, value } = e.target; + + let formattedValue = value; + + if (name === 'durasiTempo') { + formattedValue = value.replace(/\s*Hari\s*/g, ''); + } else if (name === 'creditLimit') { + formattedValue = value.replace(/^Rp\s*/, ''); + } - const handleInputChange = (event) => { - const { name, value } = event.target; - updateFormKontakPerson(name, value); - validateKontakPerson(); + const editData = supplierData.map((item, i) => + i === index ? { ...item, [name]: formattedValue } : item + ); + + setSupplierData(editData); }; - const isFormValid = useMemo( - () => Object.keys(errorsKontakPerson).length === 0, - [errorsKontakPerson] - ); + const handleNewSupplierChange = (e) => { + const { name, value } = e.target; + + let formattedValue = value; + + if (name === 'durasiTempo') { + formattedValue = value.replace(/\s*Hari\s*/g, ''); + } else if (name === 'creditLimit') { + formattedValue = value.replace(/^Rp\s*/, ''); + } - const direkturNameRef = useRef(null); - const direkturMobileRef = useRef(null); - const direkturEmailRef = useRef(null); - const purchasingNameRef = useRef(null); - const purchasingEmailRef = useRef(null); - const purchasingMobileRef = useRef(null); - const financeNameRef = useRef(null); - const financeMobileRef = useRef(null); - const financeEmailRef = useRef(null); + const updatedSupplier = { ...newSupplier, [name]: formattedValue }; + setNewSupplier(updatedSupplier); + + // if (Object.values(updatedSupplier).every((val) => val.trim() !== '')) { + // setSupplierData((prevData) => { + // const newData = [...prevData, updatedSupplier]; + // return newData; + // }); + + // setNewSupplier({ + // supplier: '', + // pic: '', + // telepon: '', + // durasiTempo: '', + // creditLimit: '', + // }); + // } + }; + + const handleAddNewSupplier = () => { + // Pastikan semua field sudah diisi sebelum menambahkan supplier baru + if (Object.values(newSupplier).every((val) => val.trim() !== '')) { + setSupplierData((prevData) => { + const newData = [...prevData, newSupplier]; + return newData; + }); + + // Reset newSupplier setelah menambahkan + setNewSupplier({ + supplier: '', + pic: '', + telepon: '', + durasiTempo: '', + creditLimit: '', + }); + } + }; useEffect(() => { - const loadIndustries = async () => { - if (!isFormValid) { - const options = { - behavior: 'smooth', - block: 'center', - }; - if (errorsKontakPerson.direkturName && direkturNameRef.current) { - direkturNameRef.current.scrollIntoView(options); - return; - } - if (errorsKontakPerson.direkturMobile && direkturMobileRef.current) { - direkturMobileRef.current.scrollIntoView(options); - return; - } - if (errorsKontakPerson.direkturEmail && direkturEmailRef.current) { - direkturEmailRef.current.scrollIntoView(options); - return; - } - if (errorsKontakPerson.purchasingName && purchasingNameRef.current) { - purchasingNameRef.current.scrollIntoView(options); - return; - } - if ( - errorsKontakPerson.purchasingMobile && - purchasingMobileRef.current - ) { - purchasingMobileRef.current.scrollIntoView(options); - return; - } - if (errorsKontakPerson.purchasingEmail && purchasingEmailRef.current) { - purchasingEmailRef.current.scrollIntoView(options); - return; - } - if (errorsKontakPerson.financeName && financeNameRef.current) { - financeNameRef.current.scrollIntoView(options); - return; - } - if (errorsKontakPerson.financeMobile && financeMobileRef.current) { - financeMobileRef.current.scrollIntoView(options); - return; - } - if (errorsKontakPerson.financeEmail && financeEmailRef.current) { - financeEmailRef.current.scrollIntoView(options); - return; - } - } - }; - loadIndustries(); - }, [buttonSubmitClick, chekValid]); + handleAddNewSupplier(); + updateFormSupplier(supplierData); + setButtonSubmit(!buttonSubmit); + }, [buttonSubmitClick]); + const simpanData = () => { + setButtonSubmit(!buttonSubmit); + if (Object.values(newSupplier).every((val) => val.trim() !== '')) { + setSupplierData((prevData) => { + const newData = [...prevData, newSupplier]; + return newData; + }); + // Reset newSupplier setelah menambahkan + setNewSupplier({ + supplier: '', + pic: '', + telepon: '', + durasiTempo: '', + creditLimit: '', + }); + } + }; + const formatRupiah = (value) => { + if (!value) return ''; + const numberString = value.replace(/[^0-9]/g, ''); + return numberString + ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString) + : ''; + }; + const formatHari = (value) => { + if (!value) return ''; + + const numberString = value.replace(/[^0-9]/g, ''); + + return numberString ? numberString.replace(/Hari/g, '') + ' Hari' : ''; + }; + // useEffect(() => { + // setSupplierData((prevData) => { + // const newData = [...prevData, newSupplier]; + // return newData; + // }); + // updateFormSupplier(supplierData); + // }, [buttonSubmitClick]); useEffect(() => { - validateKontakPerson(); + updateFormSupplier(supplierData); + }, [buttonSubmit]); + useEffect(() => { + if (formSupplier) { + setSupplierData(formSupplier); + } }, [buttonSubmitClick]); return ( <>

Referensi Supplier / Rekanan Bisnis Perusahaan{' '} - (Opsional) + (Opsional)

-
-
-
- -
-
- - {chekValid && ( -
- {errorsKontakPerson.direkturName} -
- )} -
-
- -
-
- - - isi nomor telpon direktur di perusahaan kamu - -
-
- - {chekValid && ( -
- {errorsKontakPerson.direkturMobile} -
- )} -
-
- -
-
- - - isi email Direktur yang sesuai - -
-
- - {chekValid && ( -
- {errorsKontakPerson.direkturEmail} -
- )} -
-
- -
-
- - - isi nama purchasing yang bertanggung jawab di perusahaan anda - -
-
- - {chekValid && ( -
- {errorsKontakPerson.purchasingName} -
- )} -
-
- -
-
- - - isi nomor purchasing yang bertanggung jawab di perusahaan anda - -
-
- - {chekValid && ( -
- {errorsKontakPerson.purchasingMobile} -
- )} -
-
- -
-
- - - isi email purchasing benar - -
-
- - {chekValid && ( -
- {errorsKontakPerson.purchasingEmail} -
- )} -
-
- -
-
- - - isi nama finance yang bertanggung jawab di perusahaan anda - -
-
- - {chekValid && ( -
- {errorsKontakPerson.financeName} -
- )} -
-
-
-
- - - isi nomor finance yang bertanggung jawab di perusahaan anda - -
-
- - {chekValid && ( -
- {errorsKontakPerson.financeMobile} -
- )} -
-
- -
-
- - - isi email finance dengan benar - -
-
- - {chekValid && ( -
- {errorsKontakPerson.financeEmail} -
- )} -
-
-
+ + + + + + + + + + + + {supplierData.map((supplier, index) => ( + + + + + + + + ))} + + + + + + + + +
Nama Supplier / RekananPICTeleponDurasi TempoCredit Limit
+ onChangeInput(e, index)} + className='form-input border px-4 py-2' + placeholder='Type Supplier' + /> + + onChangeInput(e, index)} + placeholder='Type PIC' + /> + + onChangeInput(e, index)} + placeholder='Type Telepon' + /> + + onChangeInput(e, index)} + placeholder='Type Durasi Tempo' + /> + + onChangeInput(e, index)} + placeholder='Type Credit Limit' + /> +
+ + + + + + + + + +
+
+ + +
+ {/* */} ); }; +const validationSchema = Yup.object().shape({ + supplier: Yup.string().required('Harus di-isi'), + pic: Yup.string().required('Harus di-isi'), + telepon: Yup.string().required('Harus di-isi'), + durasiTempo: Yup.string().required('Harus di-isi'), + creditLimit: Yup.string().required('Harus di-isi'), +}); + +const defaultValues = { + supplier: '', + pic: '', + telepon: '', + durasiTempo: '', + creditLimit: '', +}; export default Referensi; -- cgit v1.2.3