349 lines
12 KiB
TypeScript
349 lines
12 KiB
TypeScript
'use client'
|
|
import { error } from '@/config/swal';
|
|
import { createMasterUser } from '@/service/master-user';
|
|
import { MasterUser } from '@/types/globals';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { Button, Card, Input, Radio, RadioGroup, Select, SelectItem, Selection, Textarea } from '@nextui-org/react'
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/navigation';
|
|
import React, { useState } from 'react'
|
|
import { useForm } from 'react-hook-form';
|
|
import Swal from 'sweetalert2';
|
|
import withReactContent from 'sweetalert2-react-content';
|
|
import { z } from 'zod';
|
|
|
|
const masterUserSchema = z.object({
|
|
fullname: z.string().min(1, { message: "Required" }),
|
|
username: z.string().min(1, { message: "Required" }),
|
|
email: z.string().min(1, { message: "Required" }),
|
|
identityType: z.string().min(1, { message: "Required" }),
|
|
lastEducation: z.string().min(1, { message: "Required" }),
|
|
phoneNumber: z.string().min(1, { message: "Required" }),
|
|
workingType: z.string().min(1, { message: "Required" }),
|
|
});
|
|
|
|
export default function FormMasterUser() {
|
|
const router = useRouter();
|
|
const MySwal = withReactContent(Swal);
|
|
const [address, setAddress] = useState<string>();
|
|
const [dateOfBirt, setDateOfBirt] = useState<string>("13-april-1995");
|
|
const [email, setEmail] = useState<string>();
|
|
const [fullName, setFullname] = useState<string>();
|
|
const [genderType, setGenderType] = React.useState("");
|
|
const [identityNumber, setIdentityNumber] = useState<string>();
|
|
const [lastEducation, setLastEducation] = useState<any>([]);
|
|
const [phoneNumber, setPhoneNumber] = useState<string>();
|
|
const [userLevelsId, setUserLevelsId] = useState<number>(1);
|
|
const [userRoleId, setUserRoleId] = useState<number>(1);
|
|
const [username, setUsername] = useState<string>();
|
|
const [workType, setWorkType] = useState<string>("Tets");
|
|
const [identityType, setIdentityType] = useState<any>([])
|
|
const [showNumberInput, setShowNumberInput] = useState(false);
|
|
|
|
const formOptions = { resolver: zodResolver(masterUserSchema) };
|
|
type MicroIssueSchema = z.infer<typeof masterUserSchema>;
|
|
const {
|
|
register,
|
|
control,
|
|
handleSubmit,
|
|
setValue,
|
|
formState: { errors },
|
|
} = useForm<MicroIssueSchema>(formOptions);
|
|
|
|
const typeIdentity = [
|
|
{
|
|
id: 1,
|
|
value: "KTP",
|
|
},
|
|
{
|
|
id: 2,
|
|
value: "SIM",
|
|
},
|
|
{
|
|
id: 3,
|
|
value: "Passport",
|
|
},
|
|
]
|
|
|
|
const workingBackground = [
|
|
{
|
|
id: 1,
|
|
value: "Pegawai Negri Sipil",
|
|
},
|
|
{
|
|
id: 2,
|
|
value: "Wiraswasta",
|
|
},
|
|
{
|
|
id: 3,
|
|
value: "Guru",
|
|
},
|
|
{
|
|
id: 4,
|
|
value: "Dokter",
|
|
},
|
|
]
|
|
|
|
const educationGrade = [
|
|
{
|
|
id: 1,
|
|
value: "SMA / Sederajat",
|
|
},
|
|
{
|
|
id: 2,
|
|
value: "Diploma 1",
|
|
},
|
|
{
|
|
id: 3,
|
|
value: "Diploma 2",
|
|
},
|
|
{
|
|
id: 4,
|
|
value: "Diploma 3",
|
|
},
|
|
{
|
|
id: 5,
|
|
value: "Diploma 4",
|
|
},
|
|
{
|
|
id: 6,
|
|
value: "S1",
|
|
},
|
|
{
|
|
id: 7,
|
|
value: "S2",
|
|
},
|
|
{
|
|
id: 8,
|
|
value: "S3",
|
|
},
|
|
]
|
|
|
|
|
|
async function save(data: any) {
|
|
const formData = {
|
|
address: address,
|
|
dateOfBirt: dateOfBirt,
|
|
email: email,
|
|
fullName: fullName,
|
|
genderType: genderType,
|
|
identityNumber: identityNumber,
|
|
identityType: identityType.anchorKey,
|
|
lastEducation: Array.from(lastEducation)[0],
|
|
phoneNumber: phoneNumber,
|
|
userLevelsId: userLevelsId,
|
|
userRoleId: userRoleId,
|
|
username: username,
|
|
workType: workType,
|
|
};
|
|
|
|
console.log("Form MasterUser:", formData);
|
|
const response = await createMasterUser(formData);
|
|
|
|
if (response?.error) {
|
|
error(response.message);
|
|
return false;
|
|
}
|
|
|
|
successSubmit("/admin/article");
|
|
};
|
|
|
|
function successSubmit(redirect: any) {
|
|
MySwal.fire({
|
|
title: "Sukses",
|
|
icon: "success",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "OK",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
router.push(redirect);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function onSubmit(data: any) {
|
|
MySwal.fire({
|
|
title: "Simpan Data",
|
|
text: "",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#d33",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "Simpan",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
save(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className='mx-5 my-5 overflow-y-auto'>
|
|
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
|
|
<Card className='rounded-md p-5 space-y-5'>
|
|
<div>
|
|
<Input
|
|
type="text"
|
|
{...register("fullname")}
|
|
label="Fullname"
|
|
variant='bordered'
|
|
placeholder="Enter Text"
|
|
labelPlacement='outside'
|
|
value={fullName}
|
|
onChange={(e) => setFullname(e.target.value)}
|
|
/>
|
|
{errors.fullname?.message}
|
|
</div>
|
|
<div>
|
|
<Input
|
|
type="text"
|
|
{...register("username")}
|
|
label="Username"
|
|
variant='bordered'
|
|
placeholder="Enter Text"
|
|
labelPlacement='outside'
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
|
|
/>
|
|
{errors.username?.message}
|
|
</div>
|
|
<div>
|
|
<Input
|
|
type="email"
|
|
{...register("email")}
|
|
label="Email"
|
|
variant='bordered'
|
|
placeholder="Enter Text"
|
|
labelPlacement='outside'
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
{errors.email?.message}
|
|
</div>
|
|
<div>
|
|
<Select
|
|
variant='bordered'
|
|
{...register("identityType")}
|
|
labelPlacement='outside'
|
|
label="Identity Type"
|
|
placeholder="Select"
|
|
className="max-w-xs"
|
|
selectedKeys={identityType}
|
|
onSelectionChange={setIdentityType}
|
|
>
|
|
{typeIdentity.map((type) => (
|
|
<SelectItem key={type.value}>
|
|
{type.value}
|
|
</SelectItem>
|
|
))}
|
|
</Select>
|
|
{/* <p>selected : {identityType}</p> */}
|
|
{errors.identityType?.message}
|
|
{/* {showNumberInput && ( */}
|
|
<Input
|
|
type="text"
|
|
className='pt-2'
|
|
variant='bordered'
|
|
placeholder="Enter Identity Number"
|
|
labelPlacement='outside'
|
|
value={identityNumber}
|
|
onChange={(e) => setIdentityNumber(e.target.value)}
|
|
/>
|
|
{/* )} */}
|
|
</div>
|
|
<div>
|
|
<RadioGroup
|
|
orientation='horizontal'
|
|
label="Select your favorite city"
|
|
value={genderType}
|
|
onValueChange={setGenderType}
|
|
>
|
|
<Radio value="laki-laki">Laki-laki</Radio>
|
|
<Radio value="perempuan">Perempuan</Radio>
|
|
</RadioGroup>
|
|
<p className="text-default-500 text-small">Selected: {genderType}</p>
|
|
</div>
|
|
<div>
|
|
<Select
|
|
variant='bordered'
|
|
{...register("lastEducation")}
|
|
labelPlacement='outside'
|
|
label="Last Education"
|
|
selectedKeys={lastEducation}
|
|
onSelectionChange={setLastEducation}
|
|
placeholder="Select"
|
|
className="max-w-xs"
|
|
>
|
|
{educationGrade.map((grade) => (
|
|
<SelectItem key={grade.value}>
|
|
{grade.value}
|
|
</SelectItem>
|
|
))}
|
|
</Select>
|
|
<p className="text-default-500 text-small">Selected: {lastEducation}</p>
|
|
{errors.lastEducation?.message}
|
|
</div>
|
|
<div>
|
|
<Input
|
|
type="text"
|
|
{...register("phoneNumber")}
|
|
label="Phone Number"
|
|
className='pt-2'
|
|
variant='bordered'
|
|
placeholder="Enter Number"
|
|
labelPlacement='outside'
|
|
value={phoneNumber}
|
|
onChange={(e) => setPhoneNumber(e.target.value)}
|
|
/>
|
|
{errors.phoneNumber?.message}
|
|
</div>
|
|
<div>
|
|
<Select
|
|
variant='bordered'
|
|
{...register("workingType")}
|
|
labelPlacement='outside'
|
|
label="Working Type"
|
|
placeholder="Select"
|
|
className="max-w-xs"
|
|
>
|
|
{workingBackground.map((type) => (
|
|
<SelectItem key={type.id} value={type.id}>
|
|
{type.value}
|
|
</SelectItem>
|
|
))}
|
|
</Select>
|
|
{errors.workingType?.message}
|
|
</div>
|
|
<div>
|
|
<Textarea
|
|
label="Address"
|
|
labelPlacement="outside"
|
|
placeholder="Enter Text"
|
|
value={address}
|
|
onValueChange={setAddress}
|
|
/>
|
|
</div>
|
|
<div className='flex justify-end gap-3'>
|
|
<Link href={`/admin/master-user`}>
|
|
<Button
|
|
color='danger'
|
|
variant="ghost"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Link>
|
|
<Button
|
|
type="submit"
|
|
color='primary'
|
|
variant="solid"
|
|
>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</form>
|
|
</div >
|
|
)
|
|
}
|