web-humas-fe/components/form/form-article.tsx

"use client";
import { error } from "@/config/swal";
import { createArticle } from "@/service/article";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Button,
  Card,
  Chip,
  Input,
  Select,
  SelectItem,
  Selection,
} from "@nextui-org/react";
import JoditEditor from "jodit-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import * as z from "zod";
import ReactSelect from "react-select";
import makeAnimated from "react-select/animated";

const articleSchema = z.object({
  title: z.string().min(1, { message: "Required" }),
  article: z.string().min(1, { message: "Required" }),
  slug: z.string().min(1, { message: "Required" }),
  tags: z.string().min(0, { message: "Required" }).optional(),
  description: z.string().min(0, { message: "Required" }).optional(),
});

const dummyCategory = [
  {
    id: 1,
    label: "Category 1",
    value: "category-1",
  },
  {
    id: 2,
    label: "Category 2",
    value: "category-2",
  },
  {
    id: 3,
    label: "Category 3",
    value: "category-3",
  },
  {
    id: 4,
    label: "Category 4",
    value: "category-4",
  },
  {
    id: 5,
    label: "Category 5",
    value: "category-5",
  },
];

export default function FormArticle() {
  const animatedComponents = makeAnimated();

  const router = useRouter();
  const [title, setTitle] = useState<string>("");
  const [article, setArticle] = React.useState<Selection>(new Set([]));
  const [slug, setSlug] = useState<string>("");
  const [tags, setTags] = useState<string[]>([]);
  const [newTags, setNewTags] = useState<string>("");
  const editor = useRef(null);
  const [content, setContent] = useState("");
  const MySwal = withReactContent(Swal);
  const [selectedImages, setSelectedImages] = useState<File[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<any>();

  useEffect(() => {
    console.log("selected", selectedCategory);
  }, [selectedCategory]);

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

  const TypeId = [
    {
      key: 1,
      label: "Article",
    },
    {
      key: 2,
      label: "Magazine",
    },
  ];

  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
      const files = Array.from(event.target.files);
      setSelectedImages((prevImages) => [...prevImages, ...files]);
    }
  };

  const handleRemoveImage = (index: number) => {
    setSelectedImages((prevImages) => prevImages.filter((_, i) => i !== index));
  };

  // const handleSubmitImage = (event: any) => {
  //     event.preventDefault();
  //     // Lakukan penanganan pengunggahan gambar di sini
  //     if (selectedImage) {
  //         console.log('Gambar yang dipilih:', selectedImage);
  //         // Anda dapat melakukan pengunggahan gambar ke server di sini
  //     } else {
  //         console.log('Pilih gambar terlebih dahulu.');
  //     }
  // };

  const handleClose = (tagsToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagsToRemove));
    if (tags.length === 1) {
      setTags([]);
    }
  };

  const handleAddTags = (e: any) => {
    if (newTags.trim() !== "") {
      setTags([...tags, newTags.trim()]);
      setNewTags("");
      e.preventDefault();
    }
  };

  const handleKeyDown = (event: any) => {
    if (event.key === "Enter") {
      handleAddTags(event);
    }
  };

  async function save(data: any) {
    const formData = {
      title: title,
      typeId: parseInt(String(Array.from(article)[0])),
      slug: slug,
      tags: tags.join(","),
      description: content,
      htmlDescription: content,
    };

    console.log("Form Data:", formData);
    const response = await createArticle(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="title"
              {...register("title")}
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              label="Judul"
              variant="bordered"
              placeholder="Enter Text"
              labelPlacement="outside"
            />
            <div className="text-sm text-red-500">
              {title.length === 0 && errors.title && errors.title.message}
            </div>
          </div>
          <div>
            <Select
              label="Jenis Artikel"
              {...register("article")}
              variant="bordered"
              labelPlacement="outside"
              placeholder="Select"
              selectedKeys={article}
              className="max-w-xs"
              onSelectionChange={setArticle}
            >
              {TypeId.map((data) => (
                <SelectItem key={data.key} value={data.key}>
                  {data.label}
                </SelectItem>
              ))}
            </Select>
            <div className="text-sm text-red-500">
              {errors.article?.message}
            </div>
            {/* <p>{article}</p> */}
          </div>
          <div>
            <p className="text-sm mb-1">Category</p>
            <ReactSelect
              className="basic-single text-black z-50"
              classNames={{
                control: (state: any) =>
                  "!rounded-xl bg-white !border-1 !border-gray-200",
              }}
              classNamePrefix="select"
              onChange={setSelectedCategory}
              closeMenuOnSelect={false}
              components={animatedComponents}
              isClearable={true}
              isSearchable={true}
              isMulti={true}
              placeholder="Category ..."
              name="sub-module"
              options={dummyCategory}
            />
            <div className="text-sm text-red-500">
              {(!selectedCategory || selectedCategory?.length < 1) && (
                <p>Required</p>
              )}
            </div>
          </div>
          <div>
            <Input
              type="text"
              {...register("slug")}
              value={slug}
              onChange={(e) => setSlug(e.target.value)}
              label="Slug"
              variant="bordered"
              placeholder="Enter Text"
              labelPlacement="outside"
            />
            <div className="text-sm text-red-500">
              {slug.length === 0 && errors.slug && errors.slug.message}
            </div>
          </div>
          <div>
            <Input
              label="Tags (Optional)"
              {...register("tags")}
              labelPlacement="outside"
              type="text"
              value={newTags}
              onChange={(e) => setNewTags(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="Tambahkan tag baru dan tekan Enter"
            />
            <div className="text-sm text-red-500">
              {tags.length === 0 && errors.tags && errors.tags.message}
            </div>
            <div className="flex gap-2 border border-inherit mt-2 rounded-md p-1 items-center h-11">
              {tags.map((tag, index) => (
                <Chip
                  color="primary"
                  key={index}
                  onClose={() => handleClose(tag)}
                >
                  {tag}
                </Chip>
              ))}
            </div>
          </div>
          <div>
            <p className="pb-2">Description</p>
            <JoditEditor
              ref={editor}
              value={content}
              onChange={(newContent) => setContent(newContent)}
              className="dark:text-black"
            />
            <div className="text-sm text-red-500">
              {content.length === 0 &&
                errors.description &&
                errors.description.message}
            </div>
          </div>
          <div>
            <p>Attachment (Opsional)</p>
            <div className="flex items-center justify-center w-full pt-2 ">
              <label
                htmlFor="dropzone-file"
                className="flex flex-col items-center justify-center w-full h-36 border border-gray-100 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-200"
              >
                <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
                  <svg
                    className="w-10 h-10 mb-3 text-gray-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                    ></path>
                  </svg>
                  <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                    Drag and drop files here
                  </p>
                  <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                    {/* or{" "} */}
                    <span className="font-semibold underline text-amber-800">
                      Click to upload
                    </span>
                  </p>
                </div>
                <input
                  id="dropzone-file"
                  type="file"
                  className="hidden"
                  onChange={handleImageChange}
                />
              </label>
            </div>
            {selectedImages?.length > 0 ? (
              <div>
                <h4>Pratinjau:</h4>
                <div className="flex gap-2 pt-2">
                  {selectedImages.map((image, index) => (
                    <div key={index} className="flex flex-col items-end">
                      <Chip
                        color="danger"
                        size="sm"
                        className="cursor-pointer"
                        onClick={() => handleRemoveImage(index)}
                      >
                        X
                      </Chip>
                      <img
                        src={URL.createObjectURL(image)}
                        alt="Pratinjau Gambar"
                        style={{ maxWidth: "200px", maxHeight: "200px" }}
                      />
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              ""
            )}
          </div>
          <div className="flex justify-end gap-3">
            <Link href={`/admin/article`}>
              <Button color="danger" variant="ghost">
                Cancel
              </Button>
            </Link>
            <Button type="submit" color="primary" variant="solid">
              Save
            </Button>
          </div>
        </Card>
      </form>
    </div>
  );
}