You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

102 lines
3.4 KiB
JavaScript

import React from 'react'
import { useForm } from '@inertiajs/react'
import { useModalState } from '@/hooks'
import Modal from '@/Components/Modal'
import Button from '@/Components/Button'
import LocationProfileSelectionInput from '../LocationProfile/SelectionInput'
import FormInput from '@/Components/FormInput'
import FormInputDate from '@/Components/FormInputDate'
import ModalConfirm from '@/Components/ModalConfirm'
export default function ModalDelete(props) {
const { modalState } = props
const confirmModal = useModalState()
const { data, setData, post, processing } = useForm({
location_profile_id: null,
comment: '',
import_date: null,
rule: 0,
})
const rules = [
{ val: 0, key: 'Hapus Sesuai Filter' },
{ val: 1, key: 'Hapus Keseluruhan' },
]
const handleOnChange = (event) => {
setData(
event.target.name,
event.target.type === 'checkbox'
? event.target.checked
? 1
: 0
: event.target.value
)
}
const handleClose = () => {
modalState.toggle()
}
const onDelete = () => {
post(route('voucher.bulk-destroy'))
modalState.toggle()
}
return (
<>
<Modal
isOpen={modalState.isOpen}
toggle={handleClose}
title={'Bulk Delete'}
>
<LocationProfileSelectionInput
label="Profile Lokasi"
itemSelected={data.location_profile_id}
onItemSelected={(id) => setData('location_profile_id', id)}
/>
<FormInput
name="comment"
value={data.comment}
onChange={handleOnChange}
label="Comment"
/>
<FormInputDate
selected={data.import_date}
onChange={(date) => {
setData('import_date', date)
}}
label="Tanggal Import"
/>
<label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Hapus Keseluruhan
</label>
<select
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
onChange={handleOnChange}
value={data.rule}
name="rule"
>
{rules.map((rule) => (
<option value={rule.val} key={rule.val}>
{rule.key}
</option>
))}
</select>
<div className="flex items-center">
<Button
type="danger"
onClick={confirmModal.toggle}
processing={processing}
>
Delete
</Button>
</div>
</Modal>
<ModalConfirm modalState={confirmModal} onConfirm={onDelete} />
</>
)
}