import React, { useEffect, useState } from "react"; import Modal from "@/Components/Modal"; import InputError from "@/Components/InputError"; import { DatePickerInput } from "@/Components/DatePickerInput"; import { useForm, usePage } from "@inertiajs/react"; import { toast } from "react-toastify"; export default function FormModal(props) { const { auth: { user } } = usePage().props const { modalState } = props const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({ id: null, name: "", description: "", job_number: "", date_expense: new Date(), amount: "", isIncome: 0, is_paid: 4, }) const setType = (type) => { setData('isIncome',type) } const handleOnChange = (event) => { setData(event.target.name, event.target.value) } const handleReset = () => { modalState.setData(null) reset() clearErrors() } const handleClose = () => { handleReset() modalState.toggle() } const handleSubmit = () => { const expense = modalState.data if(expense !== null) { put(route('expenses.update', expense), { onSuccess: () => { toast.success('item updated') handleClose() } }) return } post(route('expenses.store'), { onSuccess: () => { toast.success('item created') handleClose() } }) } const title = data.id ? 'Edit Data' : 'Tambah Data' useEffect(() => { const expense = modalState.data if (expense !== null) { setData({ id: expense?.id, name: expense?.name, description: expense?.description, job_number: expense?.job_number, date_expense: new Date(expense?.date_expense), amount: expense?.amount, isIncome: +expense?.isIncome, is_paid: expense?.is_paid, }) return } }, [modalState]) return ( {+user.role === 1 && (
setType(0)} > Pengeluaran setType(1)} > Pemasukan
)} {data.isIncome === 0 && ( <>
)}