781 lines
23 KiB
TypeScript
781 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Check, ChevronsUpDown, Eye, EyeOff } from "lucide-react";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
import { cn, getCookiesDecrypt } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/components/ui/command";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import {
|
|
AdministrationLevelList,
|
|
getListCompetencies,
|
|
getListEducation,
|
|
getListSchools,
|
|
saveUserInternal,
|
|
} from "@/service/management-user/management-user";
|
|
import { useEffect, useState } from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Link, useRouter } from "@/i18n/routing";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import dynamic from "next/dynamic";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import { close, error, loading } from "@/config/swal";
|
|
|
|
const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
|
|
ssr: false,
|
|
});
|
|
|
|
const sns = [
|
|
{
|
|
key: 1,
|
|
id: "comment",
|
|
typeId: 1,
|
|
name: "Komentar Konten",
|
|
},
|
|
{
|
|
key: 2,
|
|
id: "fb",
|
|
typeId: 2,
|
|
name: "Facebook",
|
|
},
|
|
{
|
|
key: 3,
|
|
id: "ig",
|
|
typeId: 3,
|
|
name: "Instagram",
|
|
},
|
|
{
|
|
key: 4,
|
|
id: "twt",
|
|
typeId: 4,
|
|
name: "Twitter",
|
|
},
|
|
{
|
|
key: 5,
|
|
id: "yt",
|
|
typeId: 5,
|
|
name: "Youtube",
|
|
},
|
|
{
|
|
key: 6,
|
|
id: "emergency",
|
|
typeId: 6,
|
|
name: "Emergency Issue",
|
|
},
|
|
{
|
|
key: 7,
|
|
id: "email",
|
|
typeId: 7,
|
|
name: "Email",
|
|
},
|
|
{
|
|
key: 8,
|
|
id: "inbox",
|
|
typeId: 8,
|
|
name: "Pesan Masuk",
|
|
},
|
|
{
|
|
key: 9,
|
|
id: "whatsapp",
|
|
typeId: 9,
|
|
name: "Whatssapp",
|
|
},
|
|
{
|
|
key: 10,
|
|
id: "tiktok",
|
|
typeId: 10,
|
|
name: "Tiktok",
|
|
},
|
|
];
|
|
|
|
interface RoleData {
|
|
id: number;
|
|
label: string;
|
|
name: string;
|
|
value: string;
|
|
levelNumber: number;
|
|
}
|
|
|
|
const FormSchema = z.object({
|
|
level: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
fullname: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
username: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
role: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
nrp: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
address: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
email: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
phoneNumber: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
password: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
confirmPassword: z.string({
|
|
required_error: "Required",
|
|
}),
|
|
isValidPassword: z.boolean().refine((val) => val === true, {
|
|
message: "Check Password",
|
|
}),
|
|
sns: z.array(z.string()).optional(),
|
|
education: z.string().optional(),
|
|
school: z.string().optional(),
|
|
competency: z.string().optional(),
|
|
});
|
|
|
|
export default function CreateUserForm() {
|
|
const router = useRouter();
|
|
const MySwal = withReactContent(Swal);
|
|
const levelName = getCookiesDecrypt("ulnae");
|
|
const [roleList, setRoleList] = useState<RoleData[]>([]);
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
const [userEducations, setUserEducations] = useState<any>();
|
|
const [userSchools, setUserSchools] = useState<any>();
|
|
const [userCompetencies, setUserCompetencies] = useState<any>();
|
|
|
|
const form = useForm<z.infer<typeof FormSchema>>({
|
|
resolver: zodResolver(FormSchema),
|
|
defaultValues: {
|
|
password: "",
|
|
confirmPassword: "",
|
|
sns: [],
|
|
education: "1",
|
|
school: "4",
|
|
competency: "2",
|
|
},
|
|
});
|
|
|
|
const passwordVal = form.watch("password");
|
|
const confPasswordVal = form.watch("confirmPassword");
|
|
const selectedRole = form.watch("role");
|
|
|
|
useEffect(() => {
|
|
initFetch();
|
|
getDataAdditional();
|
|
}, []);
|
|
|
|
const initFetch = async () => {
|
|
const response = await AdministrationLevelList();
|
|
const res = response?.data?.data;
|
|
var levelsArr: RoleData[] = [];
|
|
res.forEach((levels: RoleData) => {
|
|
levelsArr.push({
|
|
id: levels.id,
|
|
label: levels.name,
|
|
name: levels.name,
|
|
value: String(levels.id),
|
|
levelNumber: levels.levelNumber,
|
|
});
|
|
});
|
|
setRoleList(levelsArr);
|
|
};
|
|
|
|
async function getDataAdditional() {
|
|
const resEducations = await getListEducation();
|
|
setUserEducations(resEducations?.data?.data);
|
|
const resSchools = await getListSchools();
|
|
setUserSchools(resSchools?.data?.data);
|
|
const resCompetencies = await getListCompetencies();
|
|
setUserCompetencies(resCompetencies?.data?.data);
|
|
}
|
|
|
|
const roles =
|
|
levelName == "MABES POLRI"
|
|
? [
|
|
{
|
|
id: "ADM-ID",
|
|
name: "Admin",
|
|
},
|
|
{
|
|
id: "EXE-ID",
|
|
name: "Eksekutif",
|
|
},
|
|
{
|
|
id: "APP-ID",
|
|
name: "Approver",
|
|
},
|
|
{
|
|
id: "CON-ID",
|
|
name: "Kontributor",
|
|
},
|
|
{
|
|
id: "SPV-ID",
|
|
name: "Supervisor Feedback Center",
|
|
},
|
|
{
|
|
id: "OPT-ID",
|
|
name: "Operator Feedback Center",
|
|
},
|
|
{
|
|
id: "KKUR-ID",
|
|
name: "Koor Kurator",
|
|
},
|
|
{
|
|
id: "KUR-ID",
|
|
name: "Kurator",
|
|
},
|
|
]
|
|
: [
|
|
{
|
|
id: "APP-ID",
|
|
name: "Approver",
|
|
},
|
|
{
|
|
id: "CON-ID",
|
|
name: "Kontributor",
|
|
},
|
|
];
|
|
|
|
async function save(data: z.infer<typeof FormSchema>) {
|
|
let req: any = {
|
|
firstName: data.fullname,
|
|
username: data.username,
|
|
roleId: data.role,
|
|
userLevelId: Number(data.level),
|
|
memberIdentity: data.nrp,
|
|
address: data.address,
|
|
email: data.email,
|
|
phoneNumber: data.phoneNumber,
|
|
password: data.password,
|
|
passwordConf: data.confirmPassword,
|
|
isDefault: false,
|
|
isAdmin: true,
|
|
};
|
|
|
|
if (data.role == "OPT-ID") {
|
|
req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
|
|
}
|
|
|
|
if (data.role == "KUR-ID") {
|
|
req.userEducationId = Number(data.education);
|
|
req.userSchoolsId = Number(data.school);
|
|
req.userCompetencyId = Number(data.competency);
|
|
}
|
|
|
|
loading();
|
|
const response = await saveUserInternal(req);
|
|
|
|
if (response?.error) {
|
|
error(response.message);
|
|
return false;
|
|
}
|
|
|
|
close();
|
|
MySwal.fire({
|
|
title: "Sukses",
|
|
icon: "success",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "Oke",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
router.push("/admin/management-user");
|
|
}
|
|
});
|
|
return false;
|
|
}
|
|
|
|
async function onSubmit(data: z.infer<typeof FormSchema>) {
|
|
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>
|
|
<SiteBreadcrumb />
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
className="space-y-6 bg-white dark:bg-black p-10 w-full"
|
|
>
|
|
<p className="text-xl">Data Pengelola Media Hub</p>
|
|
<FormField
|
|
control={form.control}
|
|
name="level"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-col">
|
|
<FormLabel>Pilih Level</FormLabel>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
className={cn(
|
|
"w-[400px] justify-between",
|
|
!field.value && "text-muted-foreground"
|
|
)}
|
|
>
|
|
{field.value
|
|
? roleList.find((role) => role.value === field.value)
|
|
?.label
|
|
: "Pilih level"}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[400px] p-0">
|
|
<Command>
|
|
<CommandInput />
|
|
<CommandList>
|
|
<CommandEmpty>No role found.</CommandEmpty>
|
|
<CommandGroup>
|
|
{roleList.map((role) => (
|
|
<CommandItem
|
|
value={role.label}
|
|
key={role.value}
|
|
onSelect={() => {
|
|
form.setValue("level", role.value);
|
|
}}
|
|
>
|
|
{role.label}
|
|
<Check
|
|
className={cn(
|
|
"ml-auto",
|
|
role.value === field.value
|
|
? "opacity-100"
|
|
: "opacity-0"
|
|
)}
|
|
/>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="fullname"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Nama Lengkap</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Masukkan nama lengkap"
|
|
{...field}
|
|
className="w-1/2"
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="username"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Username</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Masukkan username"
|
|
{...field}
|
|
className="w-1/2"
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="role"
|
|
render={({ field }) => (
|
|
<FormItem className="space-y-3">
|
|
<FormLabel>Role</FormLabel>
|
|
<FormControl>
|
|
<RadioGroup
|
|
onValueChange={field.onChange}
|
|
defaultValue={field.value}
|
|
className="flex flex-wrap gap-3 w-1/2"
|
|
>
|
|
{roles.map((role) => (
|
|
<FormItem
|
|
key={role.id}
|
|
className="flex items-center space-x-3 space-y-0"
|
|
>
|
|
<FormControl>
|
|
<RadioGroupItem value={role.id} />
|
|
</FormControl>
|
|
<FormLabel className="font-normal">
|
|
{role.name}
|
|
</FormLabel>
|
|
</FormItem>
|
|
))}
|
|
</RadioGroup>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
{selectedRole === "OPT-ID" && (
|
|
<FormField
|
|
control={form.control}
|
|
name="sns"
|
|
render={() => (
|
|
<FormItem>
|
|
<div className="mb-4">
|
|
<FormLabel>Social Media Yang Ditangani</FormLabel>
|
|
</div>
|
|
<div className="grid grid-cols-5 gap-2 w-1/2">
|
|
{sns.map((item) => (
|
|
<FormField
|
|
key={item.id}
|
|
control={form.control}
|
|
name="sns"
|
|
render={({ field }) => {
|
|
return (
|
|
<FormItem
|
|
key={item.typeId}
|
|
className="flex flex-row items-start space-x-3 space-y-0"
|
|
>
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value?.includes(
|
|
String(item.typeId)
|
|
)}
|
|
onCheckedChange={(checked) => {
|
|
return checked
|
|
? field.onChange([
|
|
...(field.value || []),
|
|
String(item.typeId),
|
|
])
|
|
: field.onChange(
|
|
(field.value || []).filter(
|
|
(value) =>
|
|
value !== String(item.typeId)
|
|
)
|
|
);
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="font-normal">
|
|
{item.name}
|
|
</FormLabel>
|
|
</FormItem>
|
|
);
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
{selectedRole === "KUR-ID" && (
|
|
<>
|
|
<FormField
|
|
control={form.control}
|
|
name="education"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Pendidikan Terakhir</FormLabel>
|
|
<Select onValueChange={field.onChange} value={field.value}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{userEducations?.map((edu: any) => (
|
|
<SelectItem key={edu.id} value={String(edu.id)}>
|
|
{edu.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="school"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Universitas / Perguruan Tinggi</FormLabel>
|
|
<Select onValueChange={field.onChange} value={field.value}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{userSchools?.map((edu: any) => (
|
|
<SelectItem key={edu.id} value={String(edu.id)}>
|
|
{edu.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="competency"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Kompetensi</FormLabel>
|
|
<Select onValueChange={field.onChange} value={field.value}>
|
|
<FormControl>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
</FormControl>
|
|
<SelectContent>
|
|
{userCompetencies?.map((edu: any) => (
|
|
<SelectItem key={edu.id} value={String(edu.id)}>
|
|
{edu.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</>
|
|
)}
|
|
<FormField
|
|
control={form.control}
|
|
name="nrp"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="Masukkan NRP"
|
|
{...field}
|
|
className="w-1/2"
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="address"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Alamat</FormLabel>
|
|
<FormControl>
|
|
<Textarea
|
|
placeholder="Masukkan alamat"
|
|
className="resize-none w-1/2"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="email"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Email</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="email"
|
|
placeholder="Masukkan email"
|
|
{...field}
|
|
className="w-1/2"
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="phoneNumber"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>No. Handphone</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="Masukkan nomor handphone"
|
|
{...field}
|
|
className="w-1/2"
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="password"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Password</FormLabel>
|
|
<FormControl>
|
|
<div className="relative w-1/2">
|
|
<Input
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="Masukkan kata sandi"
|
|
{...field}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500"
|
|
>
|
|
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
|
</button>
|
|
</div>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="confirmPassword"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Konfirmasi Kata Sandi</FormLabel>
|
|
<FormControl>
|
|
<div className="relative w-1/2">
|
|
<Input
|
|
type={showConfirmPassword ? "text" : "password"}
|
|
placeholder="Masukkan kata sandi"
|
|
{...field}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setShowConfirmPassword(!showConfirmPassword)
|
|
}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500"
|
|
>
|
|
{showConfirmPassword ? (
|
|
<EyeOff size={18} />
|
|
) : (
|
|
<Eye size={18} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<PasswordChecklist
|
|
rules={["minLength", "specialChar", "number", "capital", "match"]}
|
|
minLength={8}
|
|
value={passwordVal || ""}
|
|
valueAgain={confPasswordVal || ""}
|
|
onChange={(isValid) => {
|
|
form.setValue("isValidPassword", isValid);
|
|
}}
|
|
className="text-sm"
|
|
messages={{
|
|
minLength: "Password harus lebih dari 8 karakter",
|
|
specialChar: "Password harus memiliki spesial karakter",
|
|
number: "Password harus memiliki angka",
|
|
capital: "Password harus memiliki huruf kapital",
|
|
match: "Password sama",
|
|
}}
|
|
/>
|
|
<Link href="/admin/management-user">
|
|
<Button type="button" color="primary" variant="outline">
|
|
Back
|
|
</Button>
|
|
</Link>
|
|
<Button type="submit" color="primary" className="mx-3">
|
|
Submit
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|