262 lines
14 KiB
TypeScript
262 lines
14 KiB
TypeScript
'use client'
|
|
import { Button } from "@nextui-org/button";
|
|
import { Card, Checkbox, CheckboxGroup, Divider, Input, Radio, RadioGroup, Select, SelectItem, 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";
|
|
|
|
export default function CreateMagazineForm() {
|
|
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 handleTab = (tab: any) => {
|
|
setTabs(tab);
|
|
};
|
|
|
|
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({
|
|
title: z.string().min(1, { message: "Required" }),
|
|
slug: 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 request = {
|
|
title: data.title,
|
|
slug: data.slug,
|
|
articleBody: data.articleBody,
|
|
status: 1,
|
|
};
|
|
// loading();
|
|
// // const res = await saveManualContext(request);
|
|
// if (res.error) {
|
|
// error(res.message);
|
|
// return false;
|
|
// }
|
|
close();
|
|
successSubmit("/admin/magazine")
|
|
}
|
|
|
|
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-col gap-1">
|
|
<div className="flex flex-row justify-between items-center mt-[24px] gap-3">
|
|
<div className="flex flex-col w-6/12">
|
|
<Input
|
|
type="text"
|
|
label="Title"
|
|
id="title"
|
|
{...register("title")}
|
|
placeholder="...."
|
|
labelPlacement="outside"
|
|
className="w-9/12 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.title?.message && (
|
|
<p className="text-red-400 text-sm">
|
|
{errors.title?.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col w-6/12">
|
|
<Input
|
|
type="text"
|
|
label="Slug"
|
|
id="slug"
|
|
{...register("slug")}
|
|
placeholder="....."
|
|
labelPlacement="outside"
|
|
className="w-9/12 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.slug?.message && (
|
|
<p className="text-red-400 text-sm">
|
|
{errors.slug?.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-black mt-2 pb-1 pt-3">Upload File (Opsional)</p>
|
|
<div className="w-full bg-transparent">
|
|
<div className="flex items-center justify-center w-full ">
|
|
<label
|
|
htmlFor="dropzone-file"
|
|
className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-100 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
|
>
|
|
<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" multiple accept=".doc,.docx,.pdf,.ppt,.pptx,.xlsx,.csv" className="hidden" onChange={handleFileChange} />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<p className="text-tiny text-default ">Support file format in word, excel, ppt and pdf</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
{files?.length > 0 &&
|
|
files?.map((list: File) => (
|
|
<div key={list.name} className="text-black text-sm py-2 px-4 border-1 border-black w-auto rounded-lg flex justify-between gap-5">
|
|
{list.name}
|
|
<a className="cursor-pointer" onClick={() => removeFile(list.name)}><TimesIcon /></a>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div className="mt-1">
|
|
<p className="text-black text-sm font-semibold my-2">Description</p>
|
|
<JoditEditor
|
|
ref={editor}
|
|
value={content}
|
|
onChange={(newContent) => setContent(newContent)}
|
|
className="dark:text-black"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row gap-3 my-3">
|
|
<Link href="/admin/magazine">
|
|
<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>
|
|
</>
|
|
</form>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div >
|
|
|
|
)
|
|
}
|