web-humas-fe/components/form/form-master-user-edit.tsx

"use client";
import { error } from "@/config/swal";
import {
  createMasterUser,
  editMasterUsers,
  getDetailMasterUsers,
} 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 { useParams, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import Datepicker from "react-tailwindcss-datepicker";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { z } from "zod";
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
import ReactPasswordChecklist from "react-password-checklist";

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" }),
  identityNumber: z.string().min(1, { message: "Required" }),
  genderType: z.string().min(1, { message: "Required" }),
  phoneNumber: z.string().min(1, { message: "Required" }),
  address: z.string().min(1, { message: "Required" }),
});

export default function FormMasterUserEdit() {
  const router = useRouter();
  const MySwal = withReactContent(Swal);
  const [isVisible, setIsVisible] = useState([false, false]);
  const [isValidPassword, setIsValidPassword] = useState(false);
  const params = useParams();
  const id = params?.id;

  const toggleVisibility = (type: number) => {
    setIsVisible(
      type === 0 ? [!isVisible[0], isVisible[1]] : [isVisible[0], !isVisible[1]]
    );
  };

  const formOptions = {
    resolver: zodResolver(masterUserSchema),
  };
  type MicroIssueSchema = z.infer<typeof masterUserSchema>;
  const {
    control,
    handleSubmit,
    formState: { errors },
    setError,
    watch,
    setValue,
  } = useForm<MicroIssueSchema>(formOptions);

  async function save(data: z.infer<typeof masterUserSchema>) {
    const formData = {
      address: data.address,
      email: data.email,
      fullname: data.fullname,
      genderType: data.genderType,
      identityNumber: data.identityNumber,
      phoneNumber: data.phoneNumber,
      userLevelId: 2,
      userRoleId: 2,
      username: data.username,
    };

    const response = await editMasterUsers(formData);

    if (response?.error) {
      error(response.message);
      return false;
    }

    successSubmit("/admin/master-user");
  }

  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: z.infer<typeof masterUserSchema>) {
    MySwal.fire({
      title: "Simpan Data",
      text: "",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save(data);
      }
    });
  }

  useEffect(() => {
    initFetch();
  }, [id]);

  const initFetch = async () => {
    const res = await getDetailMasterUsers(String(id));
    const profile = res?.data?.data;
    setValue("fullname", profile?.fullname);
    setValue("username", profile?.username);
    setValue("email", profile?.email);
    setValue("address", profile?.address);
    setValue("identityNumber", profile?.identityNumber);
    setValue("genderType", profile?.genderType);
    setValue("phoneNumber", profile?.phoneNumber);
  };

  return (
    <div className="mx-5 my-5 overflow-y-auto">
      <form method="POST" onSubmit={handleSubmit(onSubmit)}>
        <Card className="rounded-md p-5 flex flex-col gap-3">
          <Controller
            control={control}
            name="fullname"
            render={({ field: { onChange, value } }) => (
              <Input
                type="text"
                id="title"
                placeholder="Nama Lengkap..."
                label="Nama Lengkap"
                value={value}
                onChange={onChange}
                labelPlacement="outside"
                className="w-full"
                classNames={{
                  inputWrapper: [
                    "border-1 rounded-lg",
                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                  ],
                }}
                variant="bordered"
              />
            )}
          />
          {errors.fullname?.message && (
            <p className="text-red-400 text-sm">{errors.fullname?.message}</p>
          )}
          <Controller
            control={control}
            name="username"
            render={({ field: { onChange, value } }) => (
              <Input
                type="text"
                id="username"
                placeholder="Username..."
                label="Username"
                value={value}
                onChange={onChange}
                labelPlacement="outside"
                className="w-full"
                classNames={{
                  inputWrapper: [
                    "border-1 rounded-lg",
                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                  ],
                }}
                variant="bordered"
              />
            )}
          />
          {errors.username?.message && (
            <p className="text-red-400 text-sm">{errors.username?.message}</p>
          )}

          <Controller
            control={control}
            name="email"
            render={({ field: { onChange, value } }) => (
              <Input
                type="email"
                id="email"
                placeholder="Email..."
                label="Email"
                value={value}
                onChange={onChange}
                labelPlacement="outside"
                className="w-full"
                classNames={{
                  inputWrapper: [
                    "border-1 rounded-lg",
                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                  ],
                }}
                variant="bordered"
              />
            )}
          />
          {errors.email?.message && (
            <p className="text-red-400 text-sm">{errors.email?.message}</p>
          )}

          {/* <Controller
            control={control}
            name="identityType"
            render={({ field: { onChange, value } }) => (
              <Select
                variant="bordered"
                labelPlacement="outside"
                label="Identity Type"
                placeholder="Select"
                className="max-w-xs"
                selectedKeys={[value]}
                onChange={onChange}
              >
                {typeIdentity.map((type) => (
                  <SelectItem key={type.value}>{type.value}</SelectItem>
                ))}
              </Select>
            )}
          />
          {errors.identityType?.message && (
            <p className="text-red-400 text-sm">
              {errors.identityType?.message}
            </p>
          )} */}
          <Controller
            control={control}
            name="identityNumber"
            render={({ field: { onChange, value } }) => (
              <Input
                type="number"
                id="identityNumber"
                placeholder="NRP..."
                label="NRP"
                value={value}
                onChange={onChange}
                labelPlacement="outside"
                className="w-full"
                classNames={{
                  inputWrapper: [
                    "border-1 rounded-lg",
                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                  ],
                }}
                variant="bordered"
              />
            )}
          />
          {errors.identityNumber?.message && (
            <p className="text-red-400 text-sm">
              {errors.identityNumber?.message}
            </p>
          )}

          <Controller
            control={control}
            name="address"
            render={({ field: { onChange, value } }) => (
              <Textarea
                label="Alamat"
                labelPlacement="outside"
                placeholder="Alamat..."
                variant="bordered"
                value={value}
                classNames={{
                  inputWrapper: [
                    "border-1 rounded-lg",
                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
                  ],
                }}
                onValueChange={onChange}
              />
            )}
          />
          {errors.address?.message && (
            <p className="text-red-400 text-sm">{errors.address?.message}</p>
          )}

          <Controller
            control={control}
            name="genderType"
            render={({ field: { onChange, value } }) => (
              <RadioGroup
                orientation="horizontal"
                label="Gender"
                value={value}
                onValueChange={onChange}
              >
                <Radio value="Male">Laki-laki</Radio>
                <Radio value="Female">Perempuan</Radio>
              </RadioGroup>
            )}
          />
          {errors.genderType?.message && (
            <p className="text-red-400 text-sm">{errors.genderType?.message}</p>
          )}
          {/* <Controller
            control={control}
            name="birthDate"
            render={({ field: { onChange, value } }) => (
              <Datepicker
                useRange={false}
                asSingle={true}
                value={value}
                displayFormat="DD/MM/YYYY"
                onChange={onChange}
                popoverDirection="down"
                inputClassName="w-full bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl "
              />
            )}
          />
          {errors.birthDate?.startDate?.message && (
            <p className="text-red-400 text-sm">
              {errors.birthDate?.startDate?.message}
            </p>
          )} */}
          {/* <Controller
            control={control}
            name="lastEducation"
            render={({ field: { onChange, value } }) => (
              <Select
                variant="bordered"
                labelPlacement="outside"
                label="Last Education"
                selectedKeys={[value]}
                onChange={onChange}
                placeholder="Select"
                className="max-w-xs"
              >
                {educationGrade.map((grade) => (
                  <SelectItem key={grade.value}>{grade.value}</SelectItem>
                ))}
              </Select>
            )}
          />
          {errors.lastEducation?.message && (
            <p className="text-red-400 text-sm">
              {errors.lastEducation?.message}
            </p>
          )} */}
          <Controller
            control={control}
            name="phoneNumber"
            render={({ field: { onChange, value } }) => (
              <Input
                type="number"
                id="identityNumber"
                placeholder="08*********"
                label="No. Handphone"
                value={value}
                onChange={onChange}
                labelPlacement="outside"
                className="w-full"
                variant="bordered"
              />
            )}
          />
          {errors.phoneNumber?.message && (
            <p className="text-red-400 text-sm">
              {errors.phoneNumber?.message}
            </p>
          )}
          {/* <Controller
            control={control}
            name="workType"
            render={({ field: { onChange, value } }) => (
              <Select
                variant="bordered"
                labelPlacement="outside"
                label="Working Type"
                placeholder="Select"
                className="max-w-xs"
                selectedKeys={[value]}
                onChange={onChange}
              >
                {workingBackground.map((type) => (
                  <SelectItem key={type.id} value={type.id}>
                    {type.value}
                  </SelectItem>
                ))}
              </Select>
            )}
          />
          {errors.workType?.message && (
            <p className="text-red-400 text-sm">{errors.workType?.message}</p>
          )} */}

          <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>
  );
}