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 --- src/lib/pengajuan-tempo/component/Referensi.jsx | 639 +++++++++++------------- 1 file changed, 300 insertions(+), 339 deletions(-) (limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx') 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