This commit is contained in:
Anang Yusman 2025-07-28 14:18:59 +08:00
commit f151ccecba
4 changed files with 93 additions and 27 deletions

View File

@ -69,6 +69,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
import { error } from "@/lib/swal"; import { error } from "@/lib/swal";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { close, loading } from "@/config/swal";
// Types // Types
interface Category { interface Category {
@ -163,6 +164,7 @@ export default function FormConvertSPIT() {
const router = useRouter(); const router = useRouter();
const t = useTranslations("Form"); const t = useTranslations("Form");
const { id } = useParams() as { id: string }; const { id } = useParams() as { id: string };
const [isAlreadySaved, setIsAlreadySaved] = useState(false);
// Form state // Form state
const { const {
@ -198,35 +200,33 @@ export default function FormConvertSPIT() {
const [showRewriteEditor, setShowRewriteEditor] = useState(false); const [showRewriteEditor, setShowRewriteEditor] = useState(false);
const [isGeneratingRewrite, setIsGeneratingRewrite] = useState(false); const [isGeneratingRewrite, setIsGeneratingRewrite] = useState(false);
const [isLoadingRewrite, setIsLoadingRewrite] = useState(false); const [isLoadingRewrite, setIsLoadingRewrite] = useState(false);
// Media state
const [detailThumb, setDetailThumb] = useState<string[]>([]); const [detailThumb, setDetailThumb] = useState<string[]>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null); const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const [files, setFiles] = useState<FileType[]>([]); const [files, setFiles] = useState<FileType[]>([]);
const [filePlacements, setFilePlacements] = useState<string[][]>([]); const [filePlacements, setFilePlacements] = useState<string[][]>([]);
// Content rewrite state
const [articleIds, setArticleIds] = useState<string[]>([]); const [articleIds, setArticleIds] = useState<string[]>([]);
const [selectedArticleId, setSelectedArticleId] = useState<string | null>( const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
null null
); );
const [articleBody, setArticleBody] = useState<string>(""); const [articleBody, setArticleBody] = useState<string>("");
// Form data state
const [tags, setTags] = useState<string[]>([]); const [tags, setTags] = useState<string[]>([]);
const [publishedFor, setPublishedFor] = useState<string[]>([]); const [publishedFor, setPublishedFor] = useState<string[]>([]);
const [inputRef] = useState(useRef<HTMLInputElement>(null)); const [inputRef] = useState(useRef<HTMLInputElement>(null));
// User permissions
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
const roleId = getCookiesDecrypt("urie"); const roleId = getCookiesDecrypt("urie");
const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); const [isUserMabesApprover, setIsUserMabesApprover] = useState(false);
// Initialize component
useEffect(() => { useEffect(() => {
initializeComponent(); initializeComponent();
}, []); }, []);
// useEffect(() => {
// const savedFlag = localStorage.getItem(`spit_saved_${id}`);
// if (savedFlag === "true") {
// setIsAlreadySaved(true);
// }
// }, [id]);
useEffect(() => { useEffect(() => {
checkUserPermissions(); checkUserPermissions();
}, [userLevelId, roleId]); }, [userLevelId, roleId]);
@ -294,9 +294,12 @@ export default function FormConvertSPIT() {
}; };
const loadDetail = async () => { const loadDetail = async () => {
loading()
try { try {
const response = await detailSPIT(id); const response = await detailSPIT(id);
const details = response?.data?.data; const details = response?.data?.data;
setIsAlreadySaved(details?.isPublish ? true : false)
if (!details) { if (!details) {
throw new Error("Detail not found"); throw new Error("Detail not found");
@ -323,13 +326,11 @@ export default function FormConvertSPIT() {
details.contentRewriteDescription || "" details.contentRewriteDescription || ""
); );
// Set category
if (details.categoryId) { if (details.categoryId) {
setSelectedCategoryId(details.categoryId); setSelectedCategoryId(details.categoryId);
await loadTags(details.categoryId); await loadTags(details.categoryId);
} }
// Set tags
if (details.contentTag) { if (details.contentTag) {
const initialTags = details.contentTag const initialTags = details.contentTag
.split(",") .split(",")
@ -340,9 +341,9 @@ export default function FormConvertSPIT() {
console.error("Failed to load detail:", error); console.error("Failed to load detail:", error);
throw error; throw error;
} }
close()
}; };
// Event handlers
const handleCategoryChange = async (categoryId: string) => { const handleCategoryChange = async (categoryId: string) => {
const id = Number(categoryId); const id = Number(categoryId);
setSelectedCategoryId(id); setSelectedCategoryId(id);
@ -601,6 +602,9 @@ export default function FormConvertSPIT() {
await convertSPIT(requestData); await convertSPIT(requestData);
// localStorage.setItem(`spit_saved_${id}`, "true");
// setIsAlreadySaved(true);
MySwal.fire({ MySwal.fire({
title: "Success", title: "Success",
text: "Data saved successfully", text: "Data saved successfully",
@ -608,7 +612,8 @@ export default function FormConvertSPIT() {
confirmButtonColor: "#3085d6", confirmButtonColor: "#3085d6",
}).then(() => { }).then(() => {
// router.push("/in/contributor/content/spit"); // router.push("/in/contributor/content/spit");
router.replace(`${window.location.pathname}?id=${id}`); // router.replace(`${window.location.pathname}?id=${id}`);
loadDetail()
}); });
} catch (error) { } catch (error) {
console.error("Failed to save:", error); console.error("Failed to save:", error);
@ -1163,16 +1168,29 @@ export default function FormConvertSPIT() {
<CardContent className="pt-6"> <CardContent className="pt-6">
<Button <Button
type="submit" type="submit"
className="w-full" className="w-full mb-4"
disabled={isSubmitting || isSaving} disabled={isSubmitting || isSaving || isAlreadySaved}
> >
{isSubmitting || isSaving ? ( {isSubmitting || isSaving ? (
<Loader2 className="h-4 w-4 mr-2 animate-spin" /> <Loader2 className="h-4 w-4 mr-2 animate-spin" />
) : ( ) : (
<Save className="h-4 w-4 mr-2" /> <Save className="h-4 w-4 mr-2" />
)} )}
{isSubmitting || isSaving ? "Saving..." : "Save Changes"} {isAlreadySaved
? "Already Saved"
: isSubmitting || isSaving
? "Saving..."
: "Save Changes"}
</Button> </Button>
{isAlreadySaved && (
<Alert variant="soft">
<CheckCircle className="h-4 w-4 text-red-500" />
<AlertDescription className="text-red-500">
Konten sudah disimpan. Anda tidak dapat menyimpan ulang.
</AlertDescription>
</Alert>
)}
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

View File

@ -218,8 +218,23 @@ const HeroModal = ({
}; };
}, []); }, []);
// const initFetch = async () => {
// const response = await listPopUp(
// group === "mabes"
// ? ""
// : group === "polda" && poldaName
// ? poldaName
// : group === "satker" && satkerName
// ? "satker-" + satkerName
// : "",
// locale == "en"
// );
// const interstitial = response?.data?.data || [];
// setHeroData(interstitial);
// };
const initFetch = async () => { const initFetch = async () => {
const response = await listPopUp( const response = await listStaticBanner(
group === "mabes" group === "mabes"
? "" ? ""
: group === "polda" && poldaName : group === "polda" && poldaName
@ -227,10 +242,17 @@ const HeroModal = ({
: group === "satker" && satkerName : group === "satker" && satkerName
? "satker-" + satkerName ? "satker-" + satkerName
: "", : "",
locale == "en" locale === "en"
); );
const interstitial = response?.data?.data || [];
setHeroData(interstitial); const banners = response?.data?.data || [];
const enrichedData = banners.map((item: any) => ({
...item,
fileTypeId: item?.fileType?.id ?? null,
}));
setHeroData(enrichedData);
}; };
const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => { const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {

View File

@ -2,7 +2,11 @@ import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import "swiper/css/bundle"; import "swiper/css/bundle";
import "swiper/css/navigation"; import "swiper/css/navigation";
import { getHeroData, listPopUp, listStaticBanner } from "@/service/landing/landing"; import {
getHeroData,
listPopUp,
listStaticBanner,
} from "@/service/landing/landing";
import Link from "next/link"; import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation"; import { useParams, usePathname, useRouter } from "next/navigation";
import { import {
@ -207,8 +211,23 @@ const HeroModal = ({
}; };
}, []); }, []);
// const initFetch = async () => {
// const response = await listPopUp(
// group === "mabes"
// ? ""
// : group === "polda" && poldaName
// ? poldaName
// : group === "satker" && satkerName
// ? "satker-" + satkerName
// : "",
// locale == "en"
// );
// const interstitial = response?.data?.data || [];
// setHeroData(interstitial);
// };
const initFetch = async () => { const initFetch = async () => {
const response = await listPopUp( const response = await listStaticBanner(
group === "mabes" group === "mabes"
? "" ? ""
: group === "polda" && poldaName : group === "polda" && poldaName
@ -216,10 +235,17 @@ const HeroModal = ({
: group === "satker" && satkerName : group === "satker" && satkerName
? "satker-" + satkerName ? "satker-" + satkerName
: "", : "",
locale == "en" locale === "en"
); );
const interstitial = response?.data?.data || [];
setHeroData(interstitial); const banners = response?.data?.data || [];
const enrichedData = banners.map((item: any) => ({
...item,
fileTypeId: item?.fileType?.id ?? null,
}));
setHeroData(enrichedData);
}; };
const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => { const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {

View File

@ -348,12 +348,12 @@ const HeroNew = (props: { group?: string }) => {
initFetch(); initFetch();
}, []); }, []);
// Show hero modal after 20 seconds when website is fully loaded // Show hero modal after 5 seconds when website is fully loaded
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
console.log("Show modal popup"); console.log("Show modal popup");
setShowModal(true); setShowModal(true);
}, 30000); // 30 seconds }, 5000);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, []); }, []);