mediahub-fe/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx

"use client";

import SiteBreadcrumb from "@/components/site-breadcrumb";
import { zodResolver } from "@hookform/resolvers/zod";
import { Check, ChevronsUpDown } 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,
  getUserById,
  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";
import { useParams } from "next/navigation";
import { identity } from "@fullcalendar/core/internal";

const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
  ssr: false,
});

interface RoleData {
  id: number;
  label: string;
  name: string;
  value: string;
  levelNumber: number;
}

const FormSchema = z.object({
  fullname: z.string({
    required_error: "Required",
  }),
  username: z.string({
    required_error: "Required",
  }),

  identity: 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",
  }),
});

export default function EditUserForm() {
  const router = useRouter();
  const params = useParams();
  const id = params?.id;
  const MySwal = withReactContent(Swal);

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      password: "",
      confirmPassword: "",
    },
  });

  const passwordVal = form.watch("password");
  const confPasswordVal = form.watch("confirmPassword");

  useEffect(() => {
    initData();
  }, []);

  const initData = async () => {
    loading();
    const response = await getUserById(String(id));
    const res = response?.data?.data;
    close();
    console.log("res", res);
    form.setValue("fullname", res?.fullname);
    form.setValue("username", res?.username);
    form.setValue("phoneNumber", res?.phoneNumber);
    form.setValue("address", res?.address);
    form.setValue("email", res?.email);
  };

  async function save(data: z.infer<typeof FormSchema>) {
    let req: any = {
      id: Number(id),
      firstName: data.fullname,
      username: data.username,
      address: data.address,
      email: data.email,
      identityNumber: data.identity,
      password: data.password,
      passwordConf: data.confirmPassword,
      isDefault: false,
      isAdmin: true,
    };

    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 p-10 w-full"
        >
          <p className="text-xl">Data Pengelola Media Hub</p>

          <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="identity"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nomor Identitas</FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="Masukkan nomor identitas"
                    {...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>
                  <Input
                    type="password"
                    placeholder="Masukkan kata sandi"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="confirmPassword"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Konfirmasi Kata Sandi</FormLabel>
                <FormControl>
                  <Input
                    type="password"
                    placeholder="Masukkan kata sandi"
                    {...field}
                    className="w-1/2"
                  />
                </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>
  );
}