'' import React, { useEffect, useRef, useState } from 'react' import { usePage, useForm } from '@inertiajs/react' import { isEmpty } from 'lodash' import Button from '@/Components/Button' import FormInput from '@/Components/FormInput' import FormFile from '@/Components/FormFile' import { Spinner } from 'flowbite-react' import { HiXCircle } from 'react-icons/hi2' export default function Partner() { const { props: { customer, csrf_token }, } = usePage() const [uploadIndex, setUploadIndex] = useState(null) const [loading, setLoading] = useState(false) const generalUploadRef = useRef() const { data, setData, post, processing, errors } = useForm({ job: '', image_selfie: null, image_selfie_url: '', file_statement: null, file_statement_url: '', file_agreement: null, file_agreement_url: '', items: [], }) const addItem = () => { setData( 'items', data.items.concat({ name: '', type: 'text', value: '', }) ) } const removeItem = (index) => { setData( 'items', data.items.filter((_, i) => i !== index) ) } const changeValueItem = (index, e) => { setData( 'items', data.items.map((item, i) => { if (i === index) { item[e.target.name] = e.target.value } return item }) ) } const handleClickUpload = (index) => { setUploadIndex(index) generalUploadRef.current.click() } const handleFileUpload = (e) => { const body = new FormData() body.append('_token', csrf_token) body.append('image', e.target.files[0]) setLoading(true) fetch(route('post.upload'), { method: 'post', body: body, headers: { 'accept-content': 'application/json', 'X-CSSRF-TOKEN': csrf_token, }, credentials: 'include', }) .then((res) => res.json()) .then((res) => { changeValueItem(uploadIndex, { target: { name: 'value', value: res.url }, }) }) .catch((err) => { alert(err) }) .finally(() => { setLoading(false) }) } const handleOnChange = (event) => { setData( event.target.name, event.target.type === 'checkbox' ? event.target.checked ? 1 : 0 : event.target.value ) } const handleSubmit = () => { post(route('customer.update_partner', customer)) } useEffect(() => { if (!isEmpty(customer?.partner)) { let items = JSON.parse(customer.partner.additional_json) if (isEmpty(items)) { items = [] } setData({ job: customer.partner.job, image_selfie_url: customer.partner.image_selfie_url, file_statement_url: customer.partner.file_statement_url, file_agreement_url: customer.partner.file_agreement_url, items: items, }) } }, [customer]) if (isEmpty(customer)) { return } return (
Data Mitra
setData('image_selfie', e.target.files[0])} error={errors.image_selfie} preview={ isEmpty(data.image_selfie_url) === false && ( preview ) } />
setData('file_statement', e.target.files[0]) } error={errors.file_statement} preview={ isEmpty(data.file_statement_url) === false && (
Download Surat Pernyataan
) } />
setData('file_agreement', e.target.files[0]) } error={errors.file_agreement} preview={ isEmpty(data.file_agreement_url) === false && (
Download Surat Perjanjian
) } />
Data Lainnya
{loading ? ( ) : ( <> {data.items.map((item, index) => ( ))}
Nama Tipe Nilai
changeValueItem(index, e) } /> {item.type === 'text' ? ( changeValueItem( index, e ) } /> ) : (
handleClickUpload( index ) } > Choose File
{isEmpty(item.value) ? ( 'No file chosen' ) : ( File Uploaded )}
)}
removeItem(index) } >
)}
) }