fix: fixed api in detail rewrite
This commit is contained in:
parent
ca14a7271a
commit
b854378233
|
|
@ -12,7 +12,8 @@ import SidebarManagement from "@/components/landing-page/sidebar-management";
|
|||
import withReactContent from "sweetalert2-react-content";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import Swal from "sweetalert2";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
|
||||
const Galery = (props: any) => {
|
||||
const [profile, setProfile] = useState<any>();
|
||||
|
|
@ -282,6 +283,29 @@ const Galery = (props: any) => {
|
|||
<Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
|
||||
<img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
|
||||
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="flex items-center gap-1">
|
||||
<a>
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
|
||||
<button onClick={() => copyToClip(video.mediaUpload?.slug)} className="w-full flex items-center gap-2">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold">Bagikan</p>
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a onClick={() => handleDelete(video?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
|
||||
<Icon icon="fa:trash" fontSize={20} />
|
||||
<p className="text-base font-semibold">Hapus</p>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -296,11 +320,7 @@ const Galery = (props: any) => {
|
|||
contentAudio?.length > 0 ? (
|
||||
<div className=" grid grid-cols-1 gap-6 ">
|
||||
{contentAudio?.map((audio: any) => (
|
||||
<Link
|
||||
href={`/audio/detail/${audio?.mediaUpload?.slug}`}
|
||||
key={audio?.id}
|
||||
className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
|
||||
>
|
||||
<div key={audio?.id} className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
|
||||
<svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -310,7 +330,9 @@ const Galery = (props: any) => {
|
|||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.mediaUpload?.title}</div>
|
||||
<Link href={`/audio/detail/${audio?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
|
||||
{audio?.mediaUpload?.title}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className="mt-2">
|
||||
|
|
@ -327,7 +349,30 @@ const Galery = (props: any) => {
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="flex items-center gap-1">
|
||||
<a>
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
|
||||
<button onClick={() => copyToClip(audio?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold">Bagikan</p>
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a onClick={() => handleDelete(audio?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
|
||||
<Icon icon="fa:trash" fontSize={20} />
|
||||
<p className="text-base font-semibold">Hapus</p>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -346,6 +391,29 @@ const Galery = (props: any) => {
|
|||
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
|
||||
</Link>
|
||||
</CardContent>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="flex items-center gap-1">
|
||||
<a>
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
|
||||
<button onClick={() => copyToClip(image?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold">Bagikan</p>
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
|
||||
<Icon icon="fa:trash" fontSize={20} />
|
||||
<p className="text-base font-semibold">Hapus</p>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -357,7 +425,7 @@ const Galery = (props: any) => {
|
|||
) : contentDocument.length > 0 ? (
|
||||
<div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{contentDocument?.map((document: any) => (
|
||||
<Link href={`/document/detail/${document?.mediaUpload?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
<div key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
|
||||
<div className="flex items-center justify-center rounded-lg w-16 h-16">
|
||||
<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
|
|
@ -368,7 +436,9 @@ const Galery = (props: any) => {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col flex-1 gap-2">
|
||||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.mediaUpload?.title}</div>
|
||||
<Link href={`/document/detail/${document?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
|
||||
{document?.mediaUpload?.title}
|
||||
</Link>
|
||||
<div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
|
||||
<path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
|
||||
|
|
@ -376,7 +446,30 @@ const Galery = (props: any) => {
|
|||
Download Dokumen
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="flex items-center gap-1">
|
||||
<a>
|
||||
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>
|
||||
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
|
||||
<button onClick={() => copyToClip(document?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
|
||||
<Icon icon="oi:share" fontSize={20} />
|
||||
<p className="text-base font-semibold">Bagikan</p>
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<a onClick={() => handleDelete(document?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
|
||||
<Icon icon="fa:trash" fontSize={20} />
|
||||
<p className="text-base font-semibold">Hapus</p>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@ const page = (props: { states?: any }) => {
|
|||
const maxRetries = 20;
|
||||
|
||||
try {
|
||||
const waitForStatusUpdate = async () => {
|
||||
const waitForStatusUpdate: any = async () => {
|
||||
while (retryCount < maxRetries) {
|
||||
const res = await getDetailArticle(id);
|
||||
const articleData = res?.data?.data;
|
||||
|
|
@ -276,7 +276,7 @@ const page = (props: { states?: any }) => {
|
|||
const articleImagesData = articleData?.imagesUrl?.split(",");
|
||||
setValue("description", cleanArticleBody || "");
|
||||
setArticleBody(cleanArticleBody || "");
|
||||
setDetailData(articleData);
|
||||
setDetailArticle(articleData);
|
||||
setSelectedArticleId(id);
|
||||
setArticleImages(articleImagesData || []);
|
||||
} catch (error) {
|
||||
|
|
@ -404,7 +404,11 @@ const page = (props: { states?: any }) => {
|
|||
{articleIds.map((id: any, index: any) => (
|
||||
<p
|
||||
key={index}
|
||||
className={`text-black m-1 ${selectedArticleId === id ? "bg-[#31ce36] cursor-pointer border border-[#31ce36]" : "bg-[#48abf7] cursor-pointer border border-[#48abf7]"}`}
|
||||
className={`text-black border border-black w-fit rounded-md p-3 m-1 ${
|
||||
selectedArticleId === id
|
||||
? "text-[#31ce36] w-fit p-3 hover:bg-[#31ce36] hover:text-white cursor-pointer border border-[#31ce36]"
|
||||
: "text-[#48abf7] p-3 hover:text-white hover:bg-[#48abf7] w-fit cursor-pointer border border-[#48abf7]"
|
||||
}`}
|
||||
onClick={() => handleArticleIdClick(id)}
|
||||
>
|
||||
{id}
|
||||
|
|
@ -429,7 +433,7 @@ const page = (props: { states?: any }) => {
|
|||
)
|
||||
}
|
||||
/>
|
||||
{articleBody === null || articleBody === "" ? <div className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</div> : ""}
|
||||
{articleBody === null || articleBody === "" ? <p className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</p> : ""}
|
||||
</div>
|
||||
<div className="flex flex-row gap-3">
|
||||
<Button
|
||||
|
|
@ -441,7 +445,7 @@ const page = (props: { states?: any }) => {
|
|||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button type="submit" className="border border-blue-500 bg-blue-500 text-white">
|
||||
<Button type="submit" className="border border-blue-500 bg-blue-500 text-white">
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { close, error, loading } from "@/config/swal";
|
|||
import { useRouter } from "@/i18n/routing";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { getContentRewrite, getInfoProfile } from "@/service/landing/landing";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useParams, useSearchParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
|
|
@ -15,6 +15,8 @@ import { generateDataArticle } from "@/service/content/ai";
|
|||
import HeaderManagement from "@/components/landing-page/header-management";
|
||||
import SidebarManagement from "@/components/landing-page/sidebar-management";
|
||||
import { saveContentRewrite } from "@/service/content/content";
|
||||
import CustomEditor from "@/components/editor/custom-editor";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
const page = (props: any) => {
|
||||
const { states } = props;
|
||||
|
|
@ -23,7 +25,8 @@ const page = (props: any) => {
|
|||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const [, setLoadingState] = useState(false);
|
||||
const id: any = searchParams?.get("title");
|
||||
const getParams = useParams();
|
||||
const id: any = getParams?.id;
|
||||
const [content, setContent] = useState<any>([]);
|
||||
const [isFromSPIT, setIsFromSPIT] = useState(false);
|
||||
const [listSuggestion, setListSuggestion] = useState();
|
||||
|
|
@ -199,96 +202,95 @@ const page = (props: any) => {
|
|||
<div className="text-xl font-bold mb-5">Detail Content Rewrite</div>
|
||||
<div className="p-8 border border-black rounded-lg">
|
||||
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* {content && ( */}
|
||||
<>
|
||||
<div className="w-full">
|
||||
<div className="mb-3">
|
||||
<p className="font-semibold">Judul</p>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className={`w-full p-2 border rounded-md mb-3 border-black ${errors.title ? "is-invalid" : ""}`}
|
||||
{...register("title", {
|
||||
value: content?.title,
|
||||
})}
|
||||
id="title"
|
||||
defaultValue={content?.title}
|
||||
// onChange={(e) => setSelectedTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between lg:flex-row">
|
||||
<div className="w-50%">
|
||||
<div className="mb-3">
|
||||
<p className="font-semibold">Main Keyword</p>
|
||||
{content && (
|
||||
<>
|
||||
<div className="w-full">
|
||||
<div className="mb-1">
|
||||
<p className="font-bold text-base">Judul</p>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-50%">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="font-semibold">
|
||||
Additional Keyword{" "}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="border mb-3 rounded-md p-2 border-black"
|
||||
<Input
|
||||
type="text"
|
||||
id="additionalKeyword"
|
||||
name="additionalKeyword"
|
||||
// onChange={(e) =>
|
||||
// setSelectedMainKeyword(e.target.value)
|
||||
// }
|
||||
placeholder="Masukan Additional Keyword disini!"
|
||||
defaultValue={content?.additionalKeyword}
|
||||
className={`w-full mb-3 ${errors.title ? "is-invalid" : ""}`}
|
||||
{...register("title", {
|
||||
value: content?.title,
|
||||
})}
|
||||
id="title"
|
||||
defaultValue={content?.title}
|
||||
// onChange={(e) => setSelectedTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between gap-3 lg:flex-row">
|
||||
<div className="w-1/2">
|
||||
<div className="mb-1">
|
||||
<p className="font-semibold">Main Keyword</p>
|
||||
</div>
|
||||
<div>
|
||||
<Input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<div className="mb-1">
|
||||
<label htmlFor="title" className="font-semibold">
|
||||
Additional Keyword{" "}
|
||||
</label>
|
||||
</div>
|
||||
<Input
|
||||
className="border mb-3 rounded-md p-2 border-black"
|
||||
type="text"
|
||||
id="additionalKeyword"
|
||||
name="additionalKeyword"
|
||||
// onChange={(e) =>
|
||||
// setSelectedMainKeyword(e.target.value)
|
||||
// }
|
||||
placeholder="Masukan Additional Keyword disini!"
|
||||
defaultValue={content?.additionalKeyword}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-between lg:flex-row">
|
||||
<div className="w-50%">
|
||||
<div className="flex gap-3 justify-between lg:flex-row">
|
||||
<div className="w-1/2">
|
||||
<div className="font-semibold mb-1">
|
||||
<label htmlFor="metaTitle">Meta Title</label>
|
||||
</div>
|
||||
<Input
|
||||
type="text"
|
||||
className="border rounded-md mb-3 p-2 border-black"
|
||||
id="metaTitle"
|
||||
name="metaTitle"
|
||||
// onChange={(e) =>
|
||||
// setSelectedMainKeyword(e.target.value)
|
||||
// }
|
||||
placeholder="Masukan Meta Title disini!"
|
||||
defaultValue={content?.metaTitle}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<div className="font-semibold mb-1">
|
||||
<label htmlFor="metaDescription">Meta Description</label>
|
||||
</div>
|
||||
<Input
|
||||
type="text"
|
||||
className="border rounded-md mb-3 p-2 border-black"
|
||||
id="metaDescription"
|
||||
name="metaDescription"
|
||||
// onChange={(e) =>
|
||||
// setSelectedMainKeyword(e.target.value)
|
||||
// }
|
||||
placeholder="Masukan Meta Description disini!"
|
||||
defaultValue={content?.metaDescription}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="font-semibold mb-3">
|
||||
<label htmlFor="metaTitle">Meta Title</label>
|
||||
<label htmlFor="description">Deskripsi Artikel</label>
|
||||
<CustomEditor onChange={(e: any) => {}} initialData={articleBody || ""} />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded-md mb-3 p-2 border-black"
|
||||
id="metaTitle"
|
||||
name="metaTitle"
|
||||
// onChange={(e) =>
|
||||
// setSelectedMainKeyword(e.target.value)
|
||||
// }
|
||||
placeholder="Masukan Meta Title disini!"
|
||||
defaultValue={content?.metaTitle}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-50%">
|
||||
<div className="font-semibold mb-3">
|
||||
<label htmlFor="metaDescription">Meta Description</label>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded-md mb-3 p-2 border-black"
|
||||
id="metaDescription"
|
||||
name="metaDescription"
|
||||
// onChange={(e) =>
|
||||
// setSelectedMainKeyword(e.target.value)
|
||||
// }
|
||||
placeholder="Masukan Meta Description disini!"
|
||||
defaultValue={content?.metaDescription}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="font-semibold mb-3">
|
||||
<label htmlFor="description">Deskripsi Artikel</label>
|
||||
</div>
|
||||
{articleBody === null || articleBody === "" ? <div className="w-full px-0 text-sm">Deskripsi tidak boleh kosong</div> : ""}
|
||||
</div>
|
||||
</>
|
||||
{/* )} */}
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,460 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { close, error, loading, registerConfirm } from "@/config/swal";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, saveInstitutes } from "@/service/auth";
|
||||
import { verifyOTP } from "@/service/landing/landing";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { useParams, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm, SubmitHandler } from "react-hook-form";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import * as Yup from "yup";
|
||||
|
||||
|
||||
type Inputs = {
|
||||
example: string;
|
||||
exampleRequired: string;
|
||||
};
|
||||
|
||||
const page = () => {
|
||||
const params = useParams();
|
||||
const [stepOneActive] = useState(true);
|
||||
const [stepTwoActive, setStepTwoActive] = useState(false);
|
||||
const [stepThreeActive, setStepThreeActive] = useState(false);
|
||||
const [typePass, setTypePass] = useState("password");
|
||||
const [typePassConf, setTypePassConf] = useState("password");
|
||||
const searchParams = useSearchParams();
|
||||
const [formProfile, setFormProfile] = useState(false);
|
||||
const [journalistCertificate, setJournalistCertificate] = useState();
|
||||
const [personilNRP, setPersonilNRP] = useState();
|
||||
const [journalistData, setJournalistData] = useState<any>();
|
||||
const [personilData, setPersonilData] = useState<any>();
|
||||
const [userIdentity] = useState();
|
||||
const [userIdentityValidate, setUserIdentityValidate] = useState("");
|
||||
const [email, setEmail] = useState();
|
||||
const [emailValidate, setEmailValidate] = useState("");
|
||||
const [otpValidate, setOtpValidate] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordConf, setPasswordConf] = useState("");
|
||||
const [city, setCity] = useState([]);
|
||||
const [isValidPassword, setIsValidPassword] = useState(false);
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [isCustomActive, setIsCustomActive] = useState(false);
|
||||
const [institusi, setInstitusi] = useState();
|
||||
const [customInstituteName, setCustomInstituteName] = useState("");
|
||||
const [institusiAddress, setInstitusiAddress] = useState<any>();
|
||||
const [institution, setInstitution] = useState<any>([]);
|
||||
const [province, setProvince] = useState<any>([]);
|
||||
const router = useRouter();
|
||||
const category = searchParams?.get("category");
|
||||
const [districts, setDistricts] = useState([]);
|
||||
|
||||
const [otp1, setOtp1] = useState();
|
||||
const [otp2, setOtp2] = useState();
|
||||
const [otp3, setOtp3] = useState();
|
||||
const [otp4, setOtp4] = useState();
|
||||
const [otp5, setOtp5] = useState();
|
||||
const [otp6, setOtp6] = useState();
|
||||
|
||||
const nMinuteSeconds = 60;
|
||||
const nSecondInMiliseconds = 1000;
|
||||
const [, setRefreshTimer] = useState(false);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
firstName: Yup.string().required("Nama Lengkap tidak boleh kosong"),
|
||||
username: Yup.string().required("Username tidak boleh kosong"),
|
||||
phoneNumber: Yup.string().required("Nomor Telepon tidak boleh kosong"),
|
||||
address: Yup.string().required("Alamat tidak boleh kosong"),
|
||||
email: Yup.string().required("Email tidak boleh kosong"),
|
||||
provinsi: Yup.string().required("Provinsi tidak boleh kosong"),
|
||||
kota: Yup.string().required("Kota tidak boleh kosong"),
|
||||
kecamatan: Yup.string().required("Kecamatan tidak boleh kosong"),
|
||||
password: Yup.string().required("Kata Sandi tidak boleh kosong"),
|
||||
passwordConf: Yup.string().required(
|
||||
"Konfirmasi Kata Sandi tidak boleh kosong",
|
||||
),
|
||||
});
|
||||
|
||||
const formOptions = {
|
||||
resolver: yupResolver(validationSchema),
|
||||
};
|
||||
|
||||
const { register, handleSubmit, formState, setValue } = useForm<any>(formOptions);
|
||||
|
||||
const convertMinutesToMiliseconds = (minute: any) =>
|
||||
minute * nMinuteSeconds * nSecondInMiliseconds;
|
||||
|
||||
const convertMilisecondsToHour = (miliseconds: any) =>
|
||||
new Date(miliseconds).toISOString().slice(17, -5);
|
||||
|
||||
let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
|
||||
let interval;
|
||||
|
||||
const showPass = () => {
|
||||
setTypePass("text");
|
||||
};
|
||||
|
||||
const hidePass = () => {
|
||||
setTypePass("password");
|
||||
};
|
||||
|
||||
const showPassConf = () => {
|
||||
setTypePassConf("text");
|
||||
};
|
||||
|
||||
const hidePassConf = () => {
|
||||
setTypePassConf("password");
|
||||
};
|
||||
|
||||
const setValUsername = (e: any) => {
|
||||
const uname = e.replaceAll(/[^\w.-]/g, "");
|
||||
setValue("username", uname.toLowerCase());
|
||||
};
|
||||
|
||||
const setValPassword = (e: any) => {
|
||||
setValue("password", e);
|
||||
setPassword(e);
|
||||
};
|
||||
|
||||
const setValPasswordConf = (e: any) => {
|
||||
setPasswordConf(e);
|
||||
};
|
||||
|
||||
|
||||
|
||||
async function save(data: any) {
|
||||
// loading();
|
||||
let institutionId = 1;
|
||||
|
||||
if (Number(category) == 6) {
|
||||
const dataInstitution =
|
||||
isCustomActive == true
|
||||
? {
|
||||
name: customInstituteName,
|
||||
address: institusiAddress,
|
||||
categoryRoleId: Number(category),
|
||||
}
|
||||
: {
|
||||
id: institusi,
|
||||
address: institusiAddress,
|
||||
};
|
||||
|
||||
console.log(dataInstitution);
|
||||
|
||||
const resInstitution = await saveInstitutes(dataInstitution);
|
||||
|
||||
institutionId = resInstitution?.data?.data?.id;
|
||||
if (resInstitution?.error) {
|
||||
error(resInstitution?.message);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// const sanitizedFirstName = sanitizeHtml(data.firstName);
|
||||
|
||||
// if (sanitizedFirstName == "") {
|
||||
// error("Invalid Name");
|
||||
// } else {
|
||||
// const datas = {
|
||||
// firstName: sanitizedFirstName,
|
||||
// lastName: "",
|
||||
// username: data.username,
|
||||
// phoneNumber: data.phoneNumber,
|
||||
// email,
|
||||
// address: data.address,
|
||||
// memberIdentity: userIdentity,
|
||||
// provinceId: Number(data.provinsi),
|
||||
// cityId: Number(data.kota),
|
||||
// districtId: Number(data.kecamatan),
|
||||
// password: data.password,
|
||||
// instituteId: Number(institutionId),
|
||||
// roleId: Number(category),
|
||||
// };
|
||||
|
||||
// const response = await postRegistration(datas);
|
||||
// console.log(response);
|
||||
// if (response?.error) {
|
||||
// error(response?.message);
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// registerConfirm();
|
||||
// return false;
|
||||
// }
|
||||
}
|
||||
|
||||
const handleJournalistCertificate = async () => {
|
||||
const response = await getDataJournalist(journalistCertificate);
|
||||
const data = response?.data?.data;
|
||||
console.log(data);
|
||||
if (data) {
|
||||
setJournalistData(data[0]);
|
||||
}
|
||||
|
||||
console.log("Data jurnalis:", data);
|
||||
return data;
|
||||
};
|
||||
|
||||
const handleDataNRP = async () => {
|
||||
const response = await getDataPersonil(personilNRP);
|
||||
const data = response?.data?.data;
|
||||
setPersonilData(data);
|
||||
console.log("Data personil:", data);
|
||||
return data;
|
||||
};
|
||||
|
||||
const handleInstituteOption = (e: any) => {
|
||||
if (e.target.value == "0") {
|
||||
setIsCustomActive(true);
|
||||
} else {
|
||||
setIsCustomActive(false);
|
||||
setInstitusi(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
// const {
|
||||
// register,
|
||||
// handleSubmit,
|
||||
// watch,
|
||||
// formState: { errors },
|
||||
// } = useForm<Inputs>();
|
||||
// const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
|
||||
// console.log(watch("example"));
|
||||
|
||||
function setDataToForm() {
|
||||
if (Number(category) == 6 && journalistData) {
|
||||
setValue("firstName", journalistData.journalistName);
|
||||
setValue("memberIdentity", journalistData.certNumber);
|
||||
const selectedProvince = province.find(
|
||||
(o: any) => o.provName == journalistData.province?.toUpperCase(),
|
||||
);
|
||||
|
||||
if (selectedProvince !== undefined) {
|
||||
setValue("provinsi", selectedProvince.id);
|
||||
}
|
||||
} else if (Number(category) == 7 && personilData) {
|
||||
setValue("firstName", personilData.lastName);
|
||||
setValue("memberIdentity", personilData.nrp);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function onSubmit(data: any) {
|
||||
|
||||
console.log("Submit");
|
||||
|
||||
if (isValidPassword) {
|
||||
MySwal.fire({
|
||||
title: "Buat akun",
|
||||
text: "",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "Buat",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
save(data);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
error("Kata Sandi harus sama");
|
||||
}
|
||||
}
|
||||
|
||||
const handleIdentity = async (e: any) => {
|
||||
const id = e;
|
||||
console.log(id);
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000)); // 2 sec
|
||||
if (Number(category) == 5) {
|
||||
const reqId =
|
||||
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
|
||||
const response = await getDataByNIK(reqId, id);
|
||||
const data = response?.data?.data_return[0];
|
||||
|
||||
console.log(data);
|
||||
if (data !== undefined) {
|
||||
setValue("firstName", data.nama_lengkap);
|
||||
setValue("address", data.alamat);
|
||||
const selectedProvince = province.find(
|
||||
(o: any) => o.provName == data.prov?.toUpperCase(),
|
||||
);
|
||||
|
||||
if (selectedProvince !== undefined) {
|
||||
setValue("provinsi", selectedProvince.id);
|
||||
}
|
||||
|
||||
const selectedCity: any = city.find(
|
||||
(o: any) => o.cityName == data.kab_kota?.toUpperCase(),
|
||||
);
|
||||
|
||||
if (selectedCity !== undefined) {
|
||||
setValue("kota", selectedCity?.id);
|
||||
}
|
||||
|
||||
const selectedDistrict: any = districts.find(
|
||||
(o: any) => o.disName == data.kec?.toUpperCase(),
|
||||
);
|
||||
|
||||
if (selectedDistrict !== undefined) {
|
||||
setValue("kecamatan", selectedDistrict?.id);
|
||||
}
|
||||
}
|
||||
} else if (Number(category) == 7) {
|
||||
const reqId =
|
||||
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dlZF9pbiI6ImxvZ2luX3RydWUiLCJpZF91c2VyX2FjY291bnQiOiJJRDExMyIsInVzZXJuYW1lIjoiaXdhbjc0M0BnbWFpbC5jb20iLCJub21lcktUUCI6bnVsbCwicm9sZSI6IjEiLCJyZWRpcmVjdF9sb2dpbl92YWxpZCI6IjM0IiwiY29udHJvbGxlciI6InN5c3RlbXMiLCJuYW1hX2xlbmdrYXAiOiJJd2FuIEphZWxhbmksIFMuS29tIiwiaWRXYXJnYSI6IjIwMTgxMjA2MTMwNTQ1Iiwia29kZV9yYWhhc2lhIjoiWGJqMHRRR2djWXdVMnYiLCJpZF9zZXNzaW9uIjoiMnRwMTZUV2VpTEhQN1o0RGpyYkt2TlVBelhHIiwicGVyc29uYWxfYXRhdV9sZW1iYWdhIjoiTEVNQkFHQSIsImV4cGlyZV9zZXNzaW9uIjoiMjAyMi0wMS0yNyAxNTowMzozNiJ9.Nzq3QqAlKaeKAdDujI9fGuj_mJcIIyWe8lvBI_Ui06o";
|
||||
const response = await getDataByNRP(reqId, id);
|
||||
const data = response?.data?.data_return[0];
|
||||
|
||||
console.log("Data :", data);
|
||||
if (data !== undefined) {
|
||||
setValue("firstName", data.nama);
|
||||
setValue("address", data.lokasi);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getCity = async (e: any) => {
|
||||
const res = await listCity(e);
|
||||
setCity(res?.data.data);
|
||||
};
|
||||
|
||||
const getDistricts = async (e: any) => {
|
||||
const res = await listDistricts(e);
|
||||
setDistricts(res?.data.data);
|
||||
};
|
||||
|
||||
const handleVerifyOTP = async () => {
|
||||
const otp = `${otp1}${otp2}${otp3}${otp4}${otp5}${otp6}`;
|
||||
|
||||
if (email != "" && otp.length == 6) {
|
||||
console.log("verify otp");
|
||||
loading();
|
||||
// const response = {
|
||||
// message: "success",
|
||||
// };
|
||||
|
||||
const response = await verifyOTP(email, otp);
|
||||
if (response?.error) {
|
||||
error(response?.message);
|
||||
return false;
|
||||
}
|
||||
close();
|
||||
// console.log(response);
|
||||
if (response?.message == "success") {
|
||||
console.log("success");
|
||||
setStepThreeActive(true);
|
||||
setFormProfile(true);
|
||||
setOtpValidate("");
|
||||
setValue("email", email);
|
||||
setValue("memberIdentity", userIdentity);
|
||||
handleIdentity(userIdentity);
|
||||
setDataToForm();
|
||||
} else {
|
||||
setOtpValidate("Kode OTP Tidak Valid");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
if (category != undefined) {
|
||||
const resInstiution = await listInstitusi(category);
|
||||
const res = await listProvince();
|
||||
setInstitution(resInstiution?.data.data);
|
||||
setProvince(res?.data.data);
|
||||
}
|
||||
}
|
||||
|
||||
initState();
|
||||
}, [category]);
|
||||
|
||||
useEffect(() => {
|
||||
function initState() {
|
||||
for (const element of institution) {
|
||||
const { id } = element;
|
||||
|
||||
if (id == institusi) {
|
||||
setInstitusiAddress(element.address);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initState();
|
||||
}, [institusi]);
|
||||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
if (category != undefined) {
|
||||
const resInstiution = await listInstitusi(category);
|
||||
const res = await listProvince();
|
||||
setInstitution(resInstiution?.data.data);
|
||||
setProvince(res?.data.data);
|
||||
}
|
||||
}
|
||||
|
||||
initState();
|
||||
}, [category]);
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
style={
|
||||
Number(category) < 5
|
||||
? {
|
||||
display: "none",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<div className="flex gap-12 justify-center">
|
||||
<div className="flex flex-row mt-4 mb-5">
|
||||
<ul className="absolute border border-[#f32d2d] w-[235px]">
|
||||
<li>
|
||||
<div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active" : ""}`}>
|
||||
<span>
|
||||
<b>1</b>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepTwoActive ? "active" : ""}`}>
|
||||
<span>
|
||||
<b>2</b>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={`text-center bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepThreeActive ? "active" : ""}`}>
|
||||
<span>
|
||||
<b>3</b>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row">
|
||||
<div className="gap-12"
|
||||
style={
|
||||
stepTwoActive && !formProfile
|
||||
? {
|
||||
display: "none",
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -65,7 +65,7 @@ const SidebarManagement = () => {
|
|||
// Render
|
||||
if (!hasMounted) return null;
|
||||
return (
|
||||
<div className="p-12 w-1/3">
|
||||
<div className="p-12 w-1/3 ">
|
||||
<div className="border rounded-2xl border-black m-4">
|
||||
<h1 className="text-xl p-5">Tentang Saya</h1>
|
||||
<div>
|
||||
|
|
@ -94,7 +94,7 @@ const SidebarManagement = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div className="p-4 gap-1">
|
||||
<Link href="/content-management/galery" className="mb-3">
|
||||
<div className={`${pathname?.includes("/content-management/galery") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
|
||||
<div className="flex items-center gap-2 text-lg">
|
||||
|
|
|
|||
|
|
@ -1,19 +1,14 @@
|
|||
import qs from "qs";
|
||||
import { getAPIDummy } from "./http-config/axiosCustom";
|
||||
import { httpPost } from "./http-config/http-base-service";
|
||||
import {
|
||||
httpGetInterceptor,
|
||||
httpGetInterceptorWithToken,
|
||||
httpPostInterceptor,
|
||||
} from "./http-config/http-interceptor-service";
|
||||
import { httpGetInterceptor, httpGetInterceptorWithToken, httpPostInterceptor } from "./http-config/http-interceptor-service";
|
||||
|
||||
export async function login(data: any) {
|
||||
const pathUrl = "signin";
|
||||
const headers = {
|
||||
'content-type': 'application/x-www-form-urlencoded',
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
};
|
||||
return httpPost(pathUrl, headers, qs.stringify(data));
|
||||
|
||||
}
|
||||
|
||||
export async function getProfile(token: any) {
|
||||
|
|
@ -35,4 +30,51 @@ export async function saveUser(data: any) {
|
|||
const url = "users/save";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
export async function saveInstitutes(data: any) {
|
||||
const url = "public/users/save-institutes";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
export async function postRegistration(data: any) {
|
||||
const url = "public/users/save";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
|
||||
export async function getDataByNIK(reqid: any, nik: any) {
|
||||
const url = `http://spitpolri.com/api/back_end/get_ktp?reqid=${reqid}&nik=${nik}`;
|
||||
return getAPIDummy(url);
|
||||
}
|
||||
|
||||
export async function listInstitusi(roleId: any) {
|
||||
const url = `public/users/institutes?categoryRoleId=${roleId}`;
|
||||
return httpGetInterceptor(url);
|
||||
}
|
||||
|
||||
export async function listProvince() {
|
||||
const url = "public/users/provinces";
|
||||
return httpGetInterceptor(url);
|
||||
}
|
||||
|
||||
export async function listCity(id: any) {
|
||||
const url = `public/users/cities?provId=${id}`;
|
||||
return httpGetInterceptor(url);
|
||||
}
|
||||
|
||||
export async function listDistricts(id: any) {
|
||||
const url = `public/users/districts?cityId=${id}`;
|
||||
return httpGetInterceptor(url);
|
||||
}
|
||||
|
||||
export async function getDataByNRP(reqid: any, nrp: any) {
|
||||
const url = `http://spitpolri.com/api/back_end/get_nrp?reqid=${reqid}&nrp=${nrp}`;
|
||||
return getAPIDummy(url);
|
||||
}
|
||||
|
||||
export async function getDataJournalist(cert: any) {
|
||||
const url = `public/users/search-journalist?cert=${cert}`;
|
||||
return httpGetInterceptor({ url });
|
||||
}
|
||||
|
||||
export async function getDataPersonil(nrp: any) {
|
||||
const url = `public/users/search-personil?nrp=${nrp}`;
|
||||
return httpGetInterceptor({ url });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,3 +113,7 @@ export async function getPublicSuggestionList(id: any) {
|
|||
const url = `media/public/suggestion?mediaId=${id}`;
|
||||
return httpGetInterceptor(url);
|
||||
}
|
||||
export async function verifyOTP(email: any, otp: any) {
|
||||
const url = `public/users/verify-otp?email=${email}&otp=${otp}`;
|
||||
return httpPostInterceptor(url);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue