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 --- .../register/stores/usePengajuanTempoStore.ts | 41 ++ src-migrate/types/tempo.ts | 9 + src-migrate/validations/tempo.ts | 12 + .../pengajuan-tempo/component/PengajuanTempo.jsx | 22 +- src/lib/pengajuan-tempo/component/Pengiriman.jsx | 33 +- src/lib/pengajuan-tempo/component/Referensi.jsx | 639 ++++++++++----------- 6 files changed, 393 insertions(+), 363 deletions(-) diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts index e531c3d0..08053e42 100644 --- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts +++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts @@ -3,11 +3,13 @@ import { TempoProps, TempoPropsKontakPerson, TempoPropsPengiriman, + TempoPropsSupplier, } from '~/types/tempo'; import { TempoSchema, TempoSchemaKontakPerson, TempoSchemaPengiriman, + TempoSchemaSupplier, } from '~/validations/tempo'; import { boolean, ZodError } from 'zod'; @@ -260,3 +262,42 @@ export const usePengajuanTempoStorePengiriman = create< }, }), })); + +type StateSupplier = { + formSupplier: TempoPropsSupplier[]; + errorsSupplier: { + [key in keyof TempoPropsSupplier]?: string; + }; +}; +type ActionSupplier = { + updateFormSupplier: (data: TempoPropsSupplier[]) => void; + + validateSupplier: () => void; +}; +export const usePengajuanTempoStoreSupplier = create< + StateSupplier & ActionSupplier +>((set, get) => ({ + formSupplier: [], + updateFormSupplier: (data) => { + set(() => ({ + formSupplier: data, // Menyimpan data baru ke dalam formSupplier + })); + }, + + errorsSupplier: {}, + validateSupplier: () => { + // try { + // TempoSchemaSupplier.parse(get().formSupplier); + // set({ errorsSupplier: {} }); + // } catch (error) { + // if (error instanceof ZodError) { + // const errorsSupplier: StateSupplier['errorsSupplier'] = {}; + // error.errors.forEach( + // (e) => + // (errorsSupplier[e.path[0] as keyof TempoPropsSupplier] = e.message) + // ); + // set({ errorsSupplier }); + // } + // } + }, +})); diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts index b40ef8d7..17c4c906 100644 --- a/src-migrate/types/tempo.ts +++ b/src-migrate/types/tempo.ts @@ -2,6 +2,7 @@ import { TempoSchema, TempoSchemaKontakPerson, TempoSchemaPengiriman, + TempoSchemaSupplier, } from '~/validations/tempo'; import { OdooApiRes } from './odoo'; import { z } from 'zod'; @@ -60,12 +61,20 @@ export type tempoPropsPengiriman = { dokumenPengirimanInvoice: string; dokumenPengirimanInvoiceInput: string; }; +export type tempoPropsSupplier = { + supplier: string; + pic: string; + telepon: string; + durasiTempo: string; + creditLimit: string; +}; export type TempoApiProps = OdooApiRes; export type TempoProps = z.infer; export type TempoPropsKontakPerson = z.infer; export type TempoPropsPengiriman = z.infer; +export type TempoPropsSupplier = z.infer; export type TempoResApiProps = { Tempo: boolean; diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts index 9a0df8bb..86bcf6d1 100644 --- a/src-migrate/validations/tempo.ts +++ b/src-migrate/validations/tempo.ts @@ -95,3 +95,15 @@ export const TempoSchemaPengiriman = z.object({ }), dokumenPengirimanInvoiceInput: z.string().optional(), }); +export const TempoSchemaSupplier = z.object({ + supplier: z.string().min(1, { message: 'Nama supplier harus diisi' }), + pic: z.string().min(1, { message: 'Nama PIC harus diisi' }), + telepon: z + .string() + .min(1, { message: 'Nomor telepon harus diisi' }) + .refine((val) => /^\d{10,12}$/.test(val), { + message: 'Format nomor telepon tidak valid, contoh: 081234567890', + }), + durasiTempo: z.string().min(1, { message: 'Durasi tempo harus diisi' }), + creditLimit: z.string().min(1, { message: 'Limit Kredit harus diisi' }), +}); 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