134 lines
4.5 KiB
TypeScript
134 lines
4.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useCallApi } from '@/hooks';
|
|
import { KeenIcon } from '@/components';
|
|
import { ImageInput, IImageInputFile } from '@/components/image-input';
|
|
import { apiConfig } from '@/config/api.config';
|
|
import { toast } from 'sonner';
|
|
|
|
const API_URL = apiConfig.service_credit;
|
|
|
|
const StepThree = ({ setFormData, formData }: any) => {
|
|
const [imageFiles, setImageFiles] = useState<{ [key: string]: IImageInputFile[] }>({});
|
|
const [formList, setFormList] = useState<any[]>([]);
|
|
const { PostData, GetData } = useCallApi();
|
|
|
|
const uploadFile = async (file: File, name: string, id: string) => {
|
|
// console.log(file);
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const response = await PostData(`${API_URL}/application/file/upload`, formData);
|
|
|
|
if (response?.status) {
|
|
toast.success('Success upload document');
|
|
// let obj = { [name]: response.message.name };
|
|
let form = {
|
|
id: id,
|
|
name: name,
|
|
type: 'file',
|
|
value: response?.message.name
|
|
};
|
|
console.log('form:', form);
|
|
setFormData((prevState: any) => ({
|
|
...prevState,
|
|
form: [...prevState.form, form] // Tambahkan form ke array form
|
|
}));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error uploading file:', error);
|
|
}
|
|
};
|
|
const handleImageChange = (name: string, id: string) => (value: IImageInputFile[]) => {
|
|
setImageFiles((prev) => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
|
|
value.forEach((item) => {
|
|
if (item.file) {
|
|
uploadFile(item.file, name, id);
|
|
}
|
|
});
|
|
};
|
|
|
|
const doGetFormList = async (code: string) => {
|
|
const response = await GetData(`${API_URL}/application/form/list`, {
|
|
code: formData?.type
|
|
});
|
|
return { data: response?.data };
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchFormList = async () => {
|
|
try {
|
|
const { data } = await doGetFormList(formData?.type);
|
|
setFormList(data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch form type', error);
|
|
}
|
|
};
|
|
fetchFormList();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mb-5" style={{ minHeight: '53vh' }}>
|
|
<div className="">
|
|
<p className="text-[14px] form-label">Persyaratan Lain</p>
|
|
</div>
|
|
<hr className="border-dashed my-3 border-gray-300" />
|
|
<div className="grid lg:grid-cols-2 gap-y-5 lg:gap-5 items-stretch">
|
|
{formList.map((type, index) => (
|
|
<div key={index} className="flex flex-col justify-between">
|
|
<div className="mb-2">
|
|
<label className="form-label flex items-center gap-1 text-[13px]">{type.label}</label>
|
|
<p className="text-danger text-[13px]">{type.label_red}</p>
|
|
</div>
|
|
<ImageInput
|
|
value={imageFiles[type.name]}
|
|
onChange={handleImageChange(type.name, type.id)}
|
|
multiple={false}
|
|
>
|
|
{({ fileList, onImageUpload, onImageRemove, dragProps, isDragging }) => (
|
|
<button onClick={onImageUpload} className="text-[13px] text-gray-500 w-full">
|
|
<div
|
|
{...dragProps}
|
|
style={{
|
|
border: isDragging ? '1px dashed #4CAF50' : '1px dashed #006599',
|
|
padding: '20px',
|
|
textAlign: 'center',
|
|
borderRadius: '0.375rem',
|
|
minHeight: '152px',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
display: 'flex'
|
|
}}
|
|
>
|
|
<div>
|
|
<KeenIcon icon="file-up" className="text-[20px] px-1 card-title" />
|
|
{fileList.length > 0 ? (
|
|
fileList.map((file, index) => (
|
|
<div key={index}>
|
|
<p>{file.file?.name}</p>
|
|
<button onClick={() => onImageRemove(index)} className="text-danger">
|
|
Hapus
|
|
</button>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="">Click here to import file</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
)}
|
|
</ImageInput>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { StepThree };
|