user and role refact
parent
dc4a5eea4b
commit
7ce58c1250
@ -1,108 +0,0 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import Modal from '@/Components/Modal'
|
||||
import { useForm } from '@inertiajs/react'
|
||||
import Button from '@/Components/Button'
|
||||
import FormInput from '@/Components/FormInput'
|
||||
import RoleSelectionInput from '../Role/SelectionInput'
|
||||
|
||||
import { isEmpty } from 'lodash'
|
||||
|
||||
export default function FormModal(props) {
|
||||
const { modalState } = props
|
||||
const { data, setData, post, put, processing, errors, reset, clearErrors } =
|
||||
useForm({
|
||||
name: '',
|
||||
bank_name: '',
|
||||
holder_name: '',
|
||||
account_number: '',
|
||||
})
|
||||
|
||||
const handleOnChange = (event) => {
|
||||
setData(
|
||||
event.target.name,
|
||||
event.target.type === 'checkbox'
|
||||
? event.target.checked
|
||||
? 1
|
||||
: 0
|
||||
: event.target.value
|
||||
)
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
modalState.setData(null)
|
||||
reset()
|
||||
clearErrors()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
handleReset()
|
||||
modalState.toggle()
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
const account = modalState.data
|
||||
if (account !== null) {
|
||||
put(route('account.update', account), {
|
||||
onSuccess: () => handleClose(),
|
||||
})
|
||||
return
|
||||
}
|
||||
post(route('account.store'), {
|
||||
onSuccess: () => handleClose(),
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const account = modalState.data
|
||||
if (isEmpty(account) === false) {
|
||||
setData({
|
||||
name: account.name,
|
||||
bank_name: account.bank_name,
|
||||
holder_name: account.holder_name,
|
||||
account_number: account.account_number,
|
||||
})
|
||||
return
|
||||
}
|
||||
}, [modalState])
|
||||
|
||||
return (
|
||||
<Modal isOpen={modalState.isOpen} toggle={handleClose} title={'Info'}>
|
||||
<FormInput
|
||||
name="name"
|
||||
value={data.name}
|
||||
onChange={handleOnChange}
|
||||
label="Nama"
|
||||
error={errors.name}
|
||||
/>
|
||||
<FormInput
|
||||
name="bank_name"
|
||||
value={data.bank_name}
|
||||
onChange={handleOnChange}
|
||||
label="Nama Bank"
|
||||
error={errors.bank_name}
|
||||
/>
|
||||
<FormInput
|
||||
name="holder_name"
|
||||
value={data.holder_name}
|
||||
onChange={handleOnChange}
|
||||
label="Atas Nama Rekening"
|
||||
error={errors.holder_name}
|
||||
/>
|
||||
<FormInput
|
||||
name="account_number"
|
||||
value={data.account_number}
|
||||
onChange={handleOnChange}
|
||||
label="Nomor Rekening"
|
||||
error={errors.account_number}
|
||||
/>
|
||||
<div className="flex items-center">
|
||||
<Button onClick={handleSubmit} processing={processing}>
|
||||
Simpan
|
||||
</Button>
|
||||
<Button onClick={handleClose} type="secondary">
|
||||
Batal
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,156 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { Head, useForm } from '@inertiajs/react'
|
||||
import { isEmpty } from 'lodash'
|
||||
|
||||
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
|
||||
import FormInput from '@/Components/FormInput'
|
||||
import FormFile from '@/Components/FormFile'
|
||||
import FormInputWith from '@/Components/FormInputWith'
|
||||
import Button from '@/Components/Button'
|
||||
import RoleSelectionInput from '../Role/SelectionInput'
|
||||
|
||||
export default function Form(props) {
|
||||
const { user } = props
|
||||
|
||||
const { data, setData, post, processing, errors } = useForm({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role_id: null,
|
||||
role: '',
|
||||
username: '',
|
||||
phone_wa: '',
|
||||
photo: null,
|
||||
photo_url: '',
|
||||
})
|
||||
|
||||
const handleOnChange = (event) => {
|
||||
setData(
|
||||
event.target.name,
|
||||
event.target.type === 'checkbox'
|
||||
? event.target.checked
|
||||
? 1
|
||||
: 0
|
||||
: event.target.value
|
||||
)
|
||||
}
|
||||
const handleSubmit = () => {
|
||||
if (isEmpty(user) === false) {
|
||||
post(route('user.update', user), {
|
||||
onSuccess: () => handleClose(),
|
||||
})
|
||||
return
|
||||
}
|
||||
post(route('user.store'), {
|
||||
onSuccess: () => handleClose(),
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isEmpty(user) === false) {
|
||||
setData({
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
role_id: user.role_id,
|
||||
role: user.role,
|
||||
username: user.username,
|
||||
phone_wa: user.phone_wa,
|
||||
photo: null,
|
||||
photo_url: user.photo_url,
|
||||
})
|
||||
}
|
||||
}, [user])
|
||||
|
||||
return (
|
||||
<AuthenticatedLayout
|
||||
page={'Admin'}
|
||||
action={'Form'}
|
||||
parent={route('user.index')}
|
||||
>
|
||||
<Head title="Admin" />
|
||||
|
||||
<div>
|
||||
<div className="mx-auto sm:px-6 lg:px-8">
|
||||
<div className="overflow-hidden p-4 shadow-sm sm:rounded-lg bg-white dark:bg-gray-800 flex flex-col min-h-screen">
|
||||
<div className="text-xl font-bold mb-4">Admin</div>
|
||||
<FormInput
|
||||
name="name"
|
||||
value={data.name}
|
||||
onChange={handleOnChange}
|
||||
label="Nama"
|
||||
error={errors.name}
|
||||
/>
|
||||
<FormInputWith
|
||||
type="number"
|
||||
leftItem={<div className="text-sm">+62</div>}
|
||||
name="phone_wa"
|
||||
value={data.phone_wa}
|
||||
onChange={handleOnChange}
|
||||
error={errors.phone_wa}
|
||||
formClassName={'pl-10'}
|
||||
label="Whatsapp"
|
||||
/>
|
||||
<FormInput
|
||||
name="email"
|
||||
value={data.email}
|
||||
onChange={handleOnChange}
|
||||
label="Email"
|
||||
error={errors.email}
|
||||
/>
|
||||
<FormInput
|
||||
name="username"
|
||||
value={data.username}
|
||||
onChange={handleOnChange}
|
||||
label="Username"
|
||||
error={errors.username}
|
||||
/>
|
||||
<FormInput
|
||||
type="password"
|
||||
name="password"
|
||||
value={data.password}
|
||||
onChange={handleOnChange}
|
||||
label="Password"
|
||||
error={errors.password}
|
||||
/>
|
||||
{data.role !== null && (
|
||||
<>
|
||||
<RoleSelectionInput
|
||||
label="Rule"
|
||||
itemSelected={data.role_id}
|
||||
onItemSelected={(id) =>
|
||||
setData('role_id', id)
|
||||
}
|
||||
error={errors.role_id}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<FormFile
|
||||
label={'Photo'}
|
||||
onChange={(e) =>
|
||||
setData('photo', e.target.files[0])
|
||||
}
|
||||
error={errors.photo}
|
||||
preview={
|
||||
isEmpty(data.photo_url) === false && (
|
||||
<img
|
||||
src={data.photo_url}
|
||||
className="mb-1 h-24 w-24 object-cover rounded-full"
|
||||
alt="preview"
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className="mt-8">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
processing={processing}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
)
|
||||
}
|
||||
@ -1,115 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import Modal from "@/Components/Modal";
|
||||
import { useForm } from "@inertiajs/react";
|
||||
import Button from "@/Components/Button";
|
||||
import FormInput from "@/Components/FormInput";
|
||||
import RoleSelectionInput from "../Role/SelectionInput";
|
||||
|
||||
import { isEmpty } from "lodash";
|
||||
|
||||
export default function FormModal(props) {
|
||||
const { modalState } = props
|
||||
const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role_id: null,
|
||||
role: '',
|
||||
})
|
||||
|
||||
const handleOnChange = (event) => {
|
||||
setData(event.target.name, event.target.type === 'checkbox' ? (event.target.checked ? 1 : 0) : event.target.value);
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
modalState.setData(null)
|
||||
reset()
|
||||
clearErrors()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
handleReset()
|
||||
modalState.toggle()
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
const user = modalState.data
|
||||
if(user !== null) {
|
||||
put(route('user.update', user), {
|
||||
onSuccess: () => handleClose(),
|
||||
})
|
||||
return
|
||||
}
|
||||
post(route('user.store'), {
|
||||
onSuccess: () => handleClose()
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const user = modalState.data
|
||||
if (isEmpty(user) === false) {
|
||||
setData({
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
role_id: user.role_id,
|
||||
role: user.role
|
||||
})
|
||||
return
|
||||
}
|
||||
}, [modalState])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={modalState.isOpen}
|
||||
toggle={handleClose}
|
||||
title={"User"}
|
||||
>
|
||||
<FormInput
|
||||
name="name"
|
||||
value={data.name}
|
||||
onChange={handleOnChange}
|
||||
label="name"
|
||||
error={errors.name}
|
||||
/>
|
||||
<FormInput
|
||||
name="email"
|
||||
value={data.email}
|
||||
onChange={handleOnChange}
|
||||
label="email"
|
||||
error={errors.email}
|
||||
/>
|
||||
<FormInput
|
||||
type="password"
|
||||
name="password"
|
||||
value={data.password}
|
||||
onChange={handleOnChange}
|
||||
label="Password"
|
||||
error={errors.password}
|
||||
/>
|
||||
{data.role !== null && (
|
||||
<>
|
||||
<RoleSelectionInput
|
||||
label="Role"
|
||||
itemSelected={data.role_id}
|
||||
onItemSelected={(id) => setData('role_id', id)}
|
||||
error={errors.role_id}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
processing={processing}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
type="secondary"
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue