feat: update banner and pop up
This commit is contained in:
parent
4250c2ec78
commit
ddc2484cc3
|
|
@ -28,7 +28,7 @@ import { useSearchParams } from "next/navigation";
|
||||||
import { close, loading } from "@/config/swal";
|
import { close, loading } from "@/config/swal";
|
||||||
import { Link, useRouter } from "@/i18n/routing";
|
import { Link, useRouter } from "@/i18n/routing";
|
||||||
import columns from "./popup-column";
|
import columns from "./popup-column";
|
||||||
import { listBanner, listStaticBanner } from "@/service/settings/settings";
|
import { getListPopUp, listBanner, listStaticBanner } from "@/service/settings/settings";
|
||||||
import { listDataPopUp } from "@/service/broadcast/broadcast";
|
import { listDataPopUp } from "@/service/broadcast/broadcast";
|
||||||
|
|
||||||
const PopUpListTable = () => {
|
const PopUpListTable = () => {
|
||||||
|
|
@ -84,32 +84,21 @@ const PopUpListTable = () => {
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (dataChange) {
|
if (dataChange) {
|
||||||
router.push("/admin/settings/banner");
|
router.push("/admin/settings/popup");
|
||||||
}
|
}
|
||||||
getListBanner();
|
getPopUp();
|
||||||
}, [dataChange]);
|
}, [dataChange]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
getListBanner();
|
getPopUp();
|
||||||
// getListStaticBanner();
|
// getListStaticBanner();
|
||||||
}, [page, showData]);
|
}, [page, showData]);
|
||||||
|
|
||||||
async function getListBanner() {
|
async function getPopUp() {
|
||||||
loading();
|
loading();
|
||||||
let temp: any;
|
let temp: any;
|
||||||
|
|
||||||
// const response = await listDataPopUp(
|
const response = await getListPopUp();
|
||||||
// page - 1,
|
|
||||||
// showData,
|
|
||||||
// "",
|
|
||||||
// categoryFilter?.sort().join(","),
|
|
||||||
// statusFilter?.sort().join(",")
|
|
||||||
// );
|
|
||||||
// const data = response?.data?.data?.content;
|
|
||||||
// console.log("banner", data);
|
|
||||||
// setGetData(data);
|
|
||||||
|
|
||||||
const response = await listBanner();
|
|
||||||
const data = response?.data?.data?.content;
|
const data = response?.data?.data?.content;
|
||||||
console.log("banner", data);
|
console.log("banner", data);
|
||||||
setGetData(data);
|
setGetData(data);
|
||||||
|
|
@ -119,6 +108,7 @@ const PopUpListTable = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{table &&
|
||||||
<Table className="overflow-hidden mt-10">
|
<Table className="overflow-hidden mt-10">
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
|
@ -137,8 +127,8 @@ const PopUpListTable = () => {
|
||||||
))}
|
))}
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{table.getRowModel().rows?.length ? (
|
{table?.getRowModel()?.rows?.length ? (
|
||||||
table.getRowModel().rows.map((row) => (
|
table?.getRowModel()?.rows.map((row) => (
|
||||||
<TableRow
|
<TableRow
|
||||||
key={row.id}
|
key={row.id}
|
||||||
data-state={row.getIsSelected() && "selected"}
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
|
@ -160,6 +150,7 @@ const PopUpListTable = () => {
|
||||||
)}
|
)}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -237,7 +237,7 @@ const ContentListPopUp = () => {
|
||||||
|
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
|
||||||
const handleBanner = async (ids: number[]) => {
|
const handlePopUp = async (ids: number[]) => {
|
||||||
try {
|
try {
|
||||||
await Promise.all(ids.map((id) => setPopUp(id, true)));
|
await Promise.all(ids.map((id) => setPopUp(id, true)));
|
||||||
toast({
|
toast({
|
||||||
|
|
@ -413,7 +413,7 @@ const ContentListPopUp = () => {
|
||||||
<span>Pilih Semua</span>
|
<span>Pilih Semua</span>
|
||||||
</div>
|
</div>
|
||||||
{selectedItems.length > 0 && (
|
{selectedItems.length > 0 && (
|
||||||
<Button color="primary" onClick={() => handleBanner(selectedItems)}>
|
<Button color="primary" onClick={() => handlePopUp(selectedItems)}>
|
||||||
Jadikan PopUp
|
Jadikan PopUp
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -315,11 +315,11 @@ const EventCalender = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-2">
|
{/* <div className="flex gap-2">
|
||||||
<button className="px-4 py-2 bg-gray-300 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-600 transition-colors">
|
<button className="px-4 py-2 bg-gray-300 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-600 transition-colors">
|
||||||
{t("share", { defaultValue: "Share" })}
|
{t("share", { defaultValue: "Share" })}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
|
|
@ -41,24 +41,6 @@ const HeroModal = ({
|
||||||
const swiperRef = useRef<SwiperClass | null>(null);
|
const swiperRef = useRef<SwiperClass | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchCategories() {
|
|
||||||
const url = "https://netidhub.com/api/csrf";
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Fetch error: ", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchCategories();
|
|
||||||
initFetch();
|
initFetch();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
@ -269,32 +251,39 @@ const HeroNewPolda = (props: { group?: string }) => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchCategories() {
|
|
||||||
const url = "https://netidhub.com/api/csrf";
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Fetch error: ", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchCategories();
|
|
||||||
initFetch();
|
initFetch();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const initFetch = async () => {
|
const initFetch = async () => {
|
||||||
const response = await getHeroData(locale == "en");
|
const request = {
|
||||||
console.log(response);
|
title: "",
|
||||||
|
page: 0,
|
||||||
|
size: 5,
|
||||||
|
sortBy: "createdAt",
|
||||||
|
contentTypeId:
|
||||||
|
selectedTab == "image"
|
||||||
|
? "1"
|
||||||
|
: selectedTab == "video"
|
||||||
|
? "2"
|
||||||
|
: selectedTab == "text"
|
||||||
|
? "3"
|
||||||
|
: selectedTab == "audio"
|
||||||
|
? "4"
|
||||||
|
: "",
|
||||||
|
group:
|
||||||
|
props.group == "mabes"
|
||||||
|
? ""
|
||||||
|
: props.group == "polda" && poldaName && String(poldaName)?.length > 1
|
||||||
|
? poldaName
|
||||||
|
: props.group == "satker" &&
|
||||||
|
satkerName &&
|
||||||
|
String(satkerName)?.length > 1
|
||||||
|
? "satker-" + satkerName
|
||||||
|
: "",
|
||||||
|
isInt: locale == "en" ? true : false,
|
||||||
|
};
|
||||||
|
const response = await getListContent(request);
|
||||||
let data = response?.data?.data?.content;
|
let data = response?.data?.data?.content;
|
||||||
setHeroData(data);
|
|
||||||
|
|
||||||
if (
|
if (
|
||||||
data &&
|
data &&
|
||||||
|
|
@ -318,6 +307,7 @@ const HeroNewPolda = (props: { group?: string }) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fecthNewContent();
|
fecthNewContent();
|
||||||
}, [selectedTab]);
|
}, [selectedTab]);
|
||||||
|
|
||||||
const fecthNewContent = async () => {
|
const fecthNewContent = async () => {
|
||||||
console.log("Satker Name : ", satkerName);
|
console.log("Satker Name : ", satkerName);
|
||||||
const request = {
|
const request = {
|
||||||
|
|
@ -348,7 +338,6 @@ const HeroNewPolda = (props: { group?: string }) => {
|
||||||
isInt: locale == "en" ? true : false,
|
isInt: locale == "en" ? true : false,
|
||||||
};
|
};
|
||||||
const response = await getListContent(request);
|
const response = await getListContent(request);
|
||||||
console.log("category", response);
|
|
||||||
setNewContent(response?.data?.data?.content);
|
setNewContent(response?.data?.data?.content);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -80,6 +80,7 @@ const HeroModal = ({
|
||||||
: "";
|
: "";
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
console.log("Show modal popup list");
|
||||||
initFetch();
|
initFetch();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
@ -103,10 +104,9 @@ const HeroModal = ({
|
||||||
locale == "en"
|
locale == "en"
|
||||||
);
|
);
|
||||||
|
|
||||||
const banners = response?.data?.data || [];
|
const interstitial = response?.data?.data || [];
|
||||||
|
console.log("banner Modal", interstitial);
|
||||||
console.log("banner Modal", banners);
|
setHeroData(interstitial);
|
||||||
setHeroData(banners);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -230,6 +230,7 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fecthNewContent();
|
fecthNewContent();
|
||||||
}, [selectedTab]);
|
}, [selectedTab]);
|
||||||
|
|
||||||
const fecthNewContent = async () => {
|
const fecthNewContent = async () => {
|
||||||
console.log("Satker Name : ", satkerName);
|
console.log("Satker Name : ", satkerName);
|
||||||
const request = {
|
const request = {
|
||||||
|
|
@ -315,6 +316,7 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
// Show hero modal after 20 seconds when website is fully loaded
|
// Show hero modal after 20 seconds when website is fully loaded
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
|
console.log("Show modal popup");
|
||||||
setShowModal(true);
|
setShowModal(true);
|
||||||
}, 30000); // 30 seconds
|
}, 30000); // 30 seconds
|
||||||
|
|
||||||
|
|
@ -322,32 +324,39 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchCategories() {
|
|
||||||
const url = "https://netidhub.com/api/csrf";
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
return data;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Fetch error: ", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchCategories();
|
|
||||||
initFetch();
|
initFetch();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const initFetch = async () => {
|
const initFetch = async () => {
|
||||||
const response = await getHeroData(locale == "en");
|
const request = {
|
||||||
console.log(response);
|
title: "",
|
||||||
|
page: 0,
|
||||||
|
size: 5,
|
||||||
|
sortBy: "createdAt",
|
||||||
|
contentTypeId:
|
||||||
|
selectedTab == "image"
|
||||||
|
? "1"
|
||||||
|
: selectedTab == "video"
|
||||||
|
? "2"
|
||||||
|
: selectedTab == "text"
|
||||||
|
? "3"
|
||||||
|
: selectedTab == "audio"
|
||||||
|
? "4"
|
||||||
|
: "",
|
||||||
|
group:
|
||||||
|
props.group == "mabes"
|
||||||
|
? ""
|
||||||
|
: props.group == "polda" && poldaName && String(poldaName)?.length > 1
|
||||||
|
? poldaName
|
||||||
|
: props.group == "satker" &&
|
||||||
|
satkerName &&
|
||||||
|
String(satkerName)?.length > 1
|
||||||
|
? "satker-" + satkerName
|
||||||
|
: "",
|
||||||
|
isInt: locale == "en" ? true : false,
|
||||||
|
};
|
||||||
|
const response = await getListContent(request);
|
||||||
let data = response?.data?.data?.content;
|
let data = response?.data?.data?.content;
|
||||||
setHeroData(data);
|
|
||||||
|
|
||||||
if (data) {
|
if (data) {
|
||||||
const resStatic = await listStaticBanner(
|
const resStatic = await listStaticBanner(
|
||||||
|
|
@ -363,8 +372,8 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
locale == "en"
|
locale == "en"
|
||||||
);
|
);
|
||||||
|
|
||||||
for (let i = 0; i < resStatic?.data?.data?.length; i++) {
|
for (let i = resStatic?.data?.data?.length; i >= 0 ; i--) {
|
||||||
const media = resStatic?.data.data[i]?.mediaUpload;
|
const media = resStatic?.data?.data[i];
|
||||||
if (!media) continue;
|
if (!media) continue;
|
||||||
media.fileTypeId = media?.fileType?.id ?? null;
|
media.fileTypeId = media?.fileType?.id ?? null;
|
||||||
data = data.filter((item: any) => item.id != media.id);
|
data = data.filter((item: any) => item.id != media.id);
|
||||||
|
|
@ -399,7 +408,7 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
<div className="flex items-start justify-center mx-auto w-auto">
|
<div className="flex items-start justify-center mx-auto w-auto">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{showModal && (
|
{showModal && (
|
||||||
<HeroModal onClose={() => setShowModal(false)} group="mabes" />
|
<HeroModal onClose={() => setShowModal(false)} group={props.group || "mabes"} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
|
|
@ -466,7 +475,7 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
</Carousel>
|
</Carousel>
|
||||||
|
|
||||||
<div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-4 w-[520px] bg-black/40 p-4 rounded-lg z-10">
|
<div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-4 w-[520px] bg-black/40 p-4 rounded-lg z-10">
|
||||||
{content?.slice(0, 3).map((item: any) => (
|
{newContent?.slice(0, 3).map((item: any) => (
|
||||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
|
<li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
|
||||||
<div className="flex-shrink-0 w-32 rounded-lg">
|
<div className="flex-shrink-0 w-32 rounded-lg">
|
||||||
<Image
|
<Image
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,11 @@ export default function LocalSwitcher() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const storedLang = getLanguage();
|
const storedLang = getLanguage();
|
||||||
|
|
||||||
|
if (pathname.includes("polda")){
|
||||||
|
startTransition(() => {
|
||||||
|
router.replace(pathname, { locale: "in" });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
if (!storedLang) {
|
if (!storedLang) {
|
||||||
setLanguage("in");
|
setLanguage("in");
|
||||||
setSelectedLang("in");
|
setSelectedLang("in");
|
||||||
|
|
@ -50,6 +55,7 @@ export default function LocalSwitcher() {
|
||||||
router.replace(pathname, { locale: storedLang });
|
router.replace(pathname, { locale: storedLang });
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const onSelectChange = (nextLocale: string) => {
|
const onSelectChange = (nextLocale: string) => {
|
||||||
|
|
|
||||||
|
|
@ -153,6 +153,11 @@ export async function deleteAdvertisements(id: string | number) {
|
||||||
return httpDeleteInterceptor(url);
|
return httpDeleteInterceptor(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getListPopUp() {
|
||||||
|
const url = `media/interstitial/pagination`;
|
||||||
|
return httpGetInterceptor(url);
|
||||||
|
}
|
||||||
|
|
||||||
export async function setPopUp(id: number, status: boolean) {
|
export async function setPopUp(id: number, status: boolean) {
|
||||||
const url = `media/interstitial?id=${id}&status=${status}`;
|
const url = `media/interstitial?id=${id}&status=${status}`;
|
||||||
return httpPostInterceptor(url);
|
return httpPostInterceptor(url);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue