import React, { useState, useEffect, useRef } from 'react'
import DatePicker from 'react-datepicker'
import NumberFormat from 'react-number-format'
import ReactToPrint from 'react-to-print'
import { Inertia } from '@inertiajs/inertia'
import { usePrevious } from 'react-use'
import { toast } from 'react-toastify'
import { Head, useForm } from '@inertiajs/inertia-react'
import Authenticated from '@/Layouts/Authenticated'
import Pagination from '@/Components/Pagination'
import CloseIcon from '@/Components/CloseIcon'
import EmployeeSelectInput from '@/Selects/EmployeeSelectInput'
import { formatIDR } from '@/utils'
import Print from '@/Pages/Payrolls/Print'
export default function Edit(props) {
const { data: products, links } = props.products
const { payroll, _search, _page } = props
const { data, setData, put, errors, processing } = useForm({
date: new Date(payroll.date),
employee_id: payroll.employee_id,
employee_name: `${payroll.employee.name} - ${payroll.employee.whatsapp}`,
employee: payroll.employee,
cuts: payroll.cuts,
bonus: payroll.bonus,
items: payroll.items.map((item) => {
return {
product_id: item.product_id,
quantity: item.quantity,
...item.product,
}
}),
})
const [loading, setLoading] = useState(false)
const [search, setSearch] = useState(_search)
const preValue = usePrevious(search)
const componentToPrint = useRef()
const handleSelectedEmployee = (employee) => {
setData({
...data,
employee_id: employee.id,
employee_name: `${employee.name} - ${employee.whatsapp}`,
employee: employee
})
}
const addItem = (product) => {
const itemExist = data.items.find((item) => item.id === product.id)
if (itemExist) {
setData(
'items',
data.items.map((item) => {
if (item.id === product.id) {
return {
...item,
quantity: +item.quantity + 1,
}
} else {
return item
}
})
)
return
}
setData(
'items',
data.items.concat({
...product,
product_id: product.id,
quantity: 1,
})
)
}
const setQuantity = (product, value) => {
setData(
'items',
data.items.map((item) => {
if (item.id === product.id) {
return {
...item,
quantity: +value,
}
} else {
return item
}
})
)
}
const remoteItem = (product) => {
setData(
'items',
data.items.filter((item) => item.id !== product.id)
)
}
const handleReset = () => {
setData({
employee_id: null,
employee_name: '',
cuts: 0,
bonus: 0,
items: [],
})
}
const handleSubmit = () => {
if (data.items.length <= 0) {
alert('barang belum di pilih')
return
}
put(route('payrolls.update', payroll), {
onSuccess: () =>
Promise.all([
handleReset(),
toast.success('The Data has been saved'),
]),
})
}
const itemAmount = data.items.reduce(
(amt, item) => amt + +item.quantity * +item.price,
0
)
const totalAmount = itemAmount - +data.cuts + +data.bonus
useEffect(() => {
if (preValue) {
setLoading(true)
Inertia.get(
route(route().current(), payroll),
{ q: search, page: _page },
{
replace: true,
preserveState: true,
onSuccess: () => {
setLoading(false)
},
}
)
}
}, [search])
return (
Barang | Qty | Subtotal | |
---|---|---|---|
{item.name} |
|
{formatIDR( item.quantity * item.price )} |
|