414 lines
23 KiB
TypeScript
414 lines
23 KiB
TypeScript
'use client'
|
|
import { Button } from "@nextui-org/button";
|
|
import { Card, Checkbox, CheckboxGroup, Divider, Image, Input, Radio, RadioGroup, Select, SelectItem, SelectSection, Slider, Switch, Tab, Table, Tabs, Textarea, User } from "@nextui-org/react";
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { TimesIcon } from "@/components/icons";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { close, error, loading } from "@/config/swal";
|
|
import Swal from 'sweetalert2';
|
|
import withReactContent from 'sweetalert2-react-content';
|
|
import dynamic from 'next/dynamic';
|
|
import { useForm } from "react-hook-form";
|
|
import * as z from "zod";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { createUserLevels } from "@/services/user-levels/user-levels-service";
|
|
|
|
const LevelList = [
|
|
{ label: "Admin", value: "admin", id: 1 },
|
|
{ label: "Super-Admin", value: "super-admin", id: 2 },
|
|
{ label: "Kurator", value: "kurator", id: 3 },
|
|
{ label: "Supervisor", value: "supervisor", id: 4 },
|
|
];
|
|
|
|
const moduleList = [
|
|
{ label: "Article", value: "article", id: 1 },
|
|
{ label: "Caption", value: "caption", id: 2 },
|
|
{ label: "Meme", value: "meme", id: 3 },
|
|
{ label: "Video", value: "video", id: 4 },
|
|
{ label: "Master Data", value: "master-data", id: 5 },
|
|
];
|
|
|
|
const provinceList = [
|
|
{ label: "NTT", value: "1", id: 1 },
|
|
{ label: "NTB", value: "2", id: 2 },
|
|
{ label: "Aceh", value: "3", id: 3 },
|
|
{ label: "Jawa Timur", value: "4", id: 4 },
|
|
{ label: "Jawa Barat", value: "5", id: 5 },
|
|
];
|
|
|
|
export default function CreateMasterUserLevelForm() {
|
|
const router = useRouter();
|
|
const JoditEditor = dynamic(() => import('jodit-react'), { ssr: false });
|
|
const MySwal = withReactContent(Swal);
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [tabs, setTabs] = useState<string>("personal-info")
|
|
const editor = useRef(null);
|
|
const [content, setContent] = useState('');
|
|
const [haveChildren, setHaveChildren] = useState("no");
|
|
const [active, setTrue] = useState("true");
|
|
const [levelValue, setLevelValue] = useState<any>("");
|
|
const handleTab = (tab: any) => {
|
|
setTabs(tab);
|
|
};
|
|
|
|
const handleActive = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setTrue(e.target.value);
|
|
};
|
|
|
|
const handleHaveChildren = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setHaveChildren(e.target.value);
|
|
};
|
|
|
|
let [files, setFiles] = useState<File[]>([]);
|
|
|
|
const removeFile = (name: string) => {
|
|
const arrayFile: File[] = [];
|
|
for (const element of files) {
|
|
if (element.name !== name) {
|
|
arrayFile.push(element);
|
|
}
|
|
}
|
|
setFiles(arrayFile);
|
|
};
|
|
|
|
const handleFileChange = (event: any) => {
|
|
const newFiles: FileList | null = event.target.files;
|
|
if (newFiles) {
|
|
const allowedExtensions = ['.doc', '.docx', '.pdf', '.ppt', '.pptx', '.xlsx', '.csv'];
|
|
let temp: File[] = [...files]; // Salin file-file yang sudah ada
|
|
for (let i = 0; i < newFiles.length; i++) {
|
|
const file = newFiles[i];
|
|
const fileExtension = file.name.split('.').pop()?.toLowerCase();
|
|
if (fileExtension && allowedExtensions.includes(`.${fileExtension}`)) {
|
|
temp.push(file);
|
|
} else {
|
|
alert('Format file tidak valid. Hanya file .doc, .docx, .ppt, .pptx, .xlsx, .csv atau .pdf yang diperbolehkan.');
|
|
}
|
|
}
|
|
setFiles(temp);
|
|
}
|
|
};
|
|
|
|
const toggleVisibility = () => setIsVisible(!isVisible);
|
|
|
|
const validationSchema = z.object({
|
|
name: z.string().min(1, { message: "Required" }),
|
|
aliasName: z.string().min(1, { message: "Required" }),
|
|
// levelNumber: z.string().min(1, { message: "Required" }),
|
|
});
|
|
|
|
const formOptions = { resolver: zodResolver(validationSchema) };
|
|
type ArticleSchema = z.infer<typeof validationSchema>;
|
|
|
|
const { register, handleSubmit, formState: { errors }, formState, setValue } = useForm<ArticleSchema>(formOptions);
|
|
|
|
const save = async (data: any) => {
|
|
const selectedLevel = Number(Array.from(levelValue).pop());
|
|
const request = {
|
|
name: data.name,
|
|
aliasName: data.aliasName,
|
|
levelNumber: selectedLevel,
|
|
isActive: active,
|
|
};
|
|
|
|
console.log(request);
|
|
loading();
|
|
const res = await createUserLevels(request);
|
|
if (res.error) {
|
|
error(res.message);
|
|
return false;
|
|
}
|
|
close();
|
|
successSubmit("/admin/master/master-user-level")
|
|
}
|
|
|
|
async function onSubmit(data: any) {
|
|
MySwal.fire({
|
|
title: "Save Data",
|
|
text: "",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#d33",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "Save",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
save(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
function successSubmit(redirect: string) {
|
|
MySwal.fire({
|
|
title: 'Sukses',
|
|
icon: 'success',
|
|
confirmButtonColor: '#3085d6',
|
|
confirmButtonText: 'OK',
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
router.push(redirect);
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="mx-3 my-5">
|
|
<div className="flex flex-col gap-3 mb-4">
|
|
<Card className="w-full bg-white">
|
|
<div className="w-full mr-2 p-5 ">
|
|
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
|
|
<>
|
|
<div className="flex flex-row gap-1">
|
|
<div className="w-6/12 justify-start items-start mt-2 gap-3">
|
|
<div className="flex flex-col ">
|
|
<Input
|
|
type="text"
|
|
label="Nama"
|
|
id="name"
|
|
{...register("name")}
|
|
placeholder="Input Name"
|
|
labelPlacement="outside"
|
|
className=" font-semibold"
|
|
classNames={{
|
|
label: "!text-black",
|
|
input: "!text-black hover:!text-white focus:!text-white",
|
|
inputWrapper: "max-h-[40px] bg-transparant border text-white",
|
|
}}
|
|
startContent={
|
|
<div className="pointer-events-none flex items-center">
|
|
<span className="text-default-400 text-small"></span>
|
|
</div>
|
|
}
|
|
/>
|
|
{errors.name?.message && (
|
|
<p className="text-red-400 text-sm">
|
|
{errors.name?.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col mt-3">
|
|
<Input
|
|
type="text"
|
|
label="Alias Name"
|
|
id="aliasName"
|
|
{...register("aliasName")}
|
|
placeholder="Input Name"
|
|
labelPlacement="outside"
|
|
className=" font-semibold"
|
|
classNames={{
|
|
label: "!text-black",
|
|
input: "!text-black hover:!text-white focus:!text-white",
|
|
inputWrapper: "max-h-[40px] bg-transparant border text-white",
|
|
}}
|
|
startContent={
|
|
<div className="pointer-events-none flex items-center">
|
|
<span className="text-default-400 text-small"></span>
|
|
</div>
|
|
}
|
|
/>
|
|
{errors.aliasName?.message && (
|
|
<p className="text-red-400 text-sm">
|
|
{errors.aliasName?.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="mt-3 ">
|
|
<p className="text-black text-sm mb-1 font-semibold">Level Number</p>
|
|
<Select
|
|
variant="bordered"
|
|
labelPlacement="outside"
|
|
placeholder="Select Polda"
|
|
selectedKeys={levelValue}
|
|
onSelectionChange={setLevelValue}
|
|
className="w-full"
|
|
classNames={{
|
|
mainWrapper: "rounded",
|
|
listboxWrapper:
|
|
"bg-white w-full !text-indigo-500 text-center font-bold",
|
|
popoverContent: "bg-white !text-indigo-500",
|
|
trigger:
|
|
"border-1 border-gray-200 hover:!bg-gray-100 !text-black",
|
|
}}
|
|
listboxProps={{
|
|
itemClasses: {
|
|
base: [
|
|
"!text-left",
|
|
"!bg-white",
|
|
"text-indigo-500 ",
|
|
"data-[selectable=true]:!text-indigo-500",
|
|
"data-[pressed=true]:text-indigo-500",
|
|
"data-[hover=true]:!text-indigo-300",
|
|
],
|
|
wrapper: ["!bg-white border-none"],
|
|
},
|
|
}}
|
|
>
|
|
<SelectSection showDivider title="List Level">
|
|
{LevelList.map((list: any) => (
|
|
<SelectItem key={list.id} value={list.id}>
|
|
{list.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectSection>
|
|
</Select>
|
|
</div>
|
|
{/* <div className="mt-3 ">
|
|
<p className="text-black text-sm mb-1 font-semibold">Parent LevelId</p>
|
|
<Select
|
|
variant="bordered"
|
|
selectionMode="single"
|
|
labelPlacement="outside"
|
|
placeholder="Select"
|
|
className="font-semibold"
|
|
items={moduleList}
|
|
classNames={{
|
|
mainWrapper: "rounded",
|
|
listboxWrapper:
|
|
"bg-white w-full !text-indigo-500 text-center font-bold",
|
|
popoverContent: "bg-white !text-indigo-500",
|
|
trigger:
|
|
"border-1 border-gray-200 hover:!bg-gray-100 !text-black",
|
|
}}
|
|
listboxProps={{
|
|
itemClasses: {
|
|
base: [
|
|
"!text-left",
|
|
"!bg-white",
|
|
"text-indigo-500 ",
|
|
"data-[selectable=true]:!text-indigo-500",
|
|
"data-[pressed=true]:text-indigo-500",
|
|
"data-[hover=true]:!text-indigo-300",
|
|
],
|
|
wrapper: ["!bg-white border-none"],
|
|
},
|
|
}}
|
|
renderValue={(items) => {
|
|
return items.map((item) => (
|
|
<span key={item.props?.value} className="text-black text-xs">
|
|
{item.textValue}
|
|
</span>
|
|
));
|
|
}}
|
|
>
|
|
<SelectSection showDivider title="Module">
|
|
{moduleList.map((list) => (
|
|
<SelectItem key={list.id} value={list.id}>
|
|
{list.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectSection>
|
|
</Select>
|
|
</div>
|
|
<div className="mt-3 ">
|
|
<p className="text-black text-sm mb-1 font-semibold">Provinsi</p>
|
|
<Select
|
|
variant="bordered"
|
|
selectionMode="single"
|
|
labelPlacement="outside"
|
|
placeholder="Select"
|
|
className="font-semibold"
|
|
items={provinceList}
|
|
classNames={{
|
|
mainWrapper: "rounded",
|
|
listboxWrapper:
|
|
"bg-white w-full !text-indigo-500 text-center font-bold",
|
|
popoverContent: "bg-white !text-indigo-500",
|
|
trigger:
|
|
"border-1 border-gray-200 hover:!bg-gray-100 !text-black",
|
|
}}
|
|
listboxProps={{
|
|
itemClasses: {
|
|
base: [
|
|
"!text-left",
|
|
"!bg-white",
|
|
"text-indigo-500 ",
|
|
"data-[selectable=true]:!text-indigo-500",
|
|
"data-[pressed=true]:text-indigo-500",
|
|
"data-[hover=true]:!text-indigo-300",
|
|
],
|
|
wrapper: ["!bg-white border-none"],
|
|
},
|
|
}}
|
|
renderValue={(items) => {
|
|
return items.map((item) => (
|
|
<span key={item.props?.value} className="text-black text-xs">
|
|
{item.textValue}
|
|
</span>
|
|
));
|
|
}}
|
|
>
|
|
<SelectSection showDivider title="Provinsi">
|
|
{provinceList.map((list) => (
|
|
<SelectItem key={list.id} value={list.id}>
|
|
{list.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectSection>
|
|
</Select>
|
|
</div>
|
|
<div className="text-black">
|
|
<p className=" text-black ">Status</p>
|
|
<RadioGroup
|
|
orientation="horizontal"
|
|
id="radio-banned"
|
|
className="text-gray-950 mb-2"
|
|
onChange={handleActive}
|
|
defaultValue={active}
|
|
>
|
|
<Radio
|
|
classNames={{
|
|
label: "!text-black",
|
|
}}
|
|
value="true"
|
|
>
|
|
Active
|
|
</Radio>
|
|
<Radio
|
|
classNames={{
|
|
label: "!text-black",
|
|
}}
|
|
value="false"
|
|
>
|
|
Inactive
|
|
</Radio>
|
|
</RadioGroup>
|
|
</div> */}
|
|
<div className="flex flex-row gap-3 my-3">
|
|
<Link href="/admin/master/master-user-level">
|
|
<Button
|
|
variant="bordered"
|
|
className="bg-white border-grey-100 rounded-full text-[#8E5C18] mr-5"
|
|
>
|
|
Cancel
|
|
</Button>{" "}
|
|
</Link>
|
|
<Button
|
|
className="w-[50px]"
|
|
color="primary"
|
|
size="md"
|
|
type="submit">
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="w-6/12 ">
|
|
<div className="flex items-center justify-center justify-items-center h-full">
|
|
<Image
|
|
width={400}
|
|
alt="NextUI hero Image"
|
|
src="/account-category.jpg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
</form>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div >
|
|
|
|
)
|
|
}
|