fix:file media detail
This commit is contained in:
commit
2837f7d96a
|
|
@ -11,6 +11,7 @@ import {
|
|||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { format } from "date-fns";
|
||||
import { Link } from "@/i18n/routing";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
|
|
@ -154,12 +155,12 @@ const columns: ColumnDef<any>[] = [
|
|||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<a href="/en/task/detail/[id]">
|
||||
<Link href={`/contributor/content/image/detail/${row.original.id}`}>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Eye className="w-4 h-4 me-1.5" />
|
||||
View
|
||||
</DropdownMenuItem>
|
||||
</a>
|
||||
</Link>
|
||||
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
||||
<Trash2 className="w-4 h-4 me-1.5" />
|
||||
Delete
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
"use client";
|
||||
|
||||
import ContentCategory from "@/components/landing-page/content-category";
|
||||
import HeaderBannerSatker from "@/components/landing-page/header-banner-satker";
|
||||
import NewContent from "@/components/landing-page/new-content";
|
||||
import WelcomeSatker from "@/components/landing-page/welcome-satker";
|
||||
import React from "react";
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<div>
|
||||
<HeaderBannerSatker />
|
||||
<WelcomeSatker />
|
||||
<NewContent type="latest" />
|
||||
<NewContent type="popular" />
|
||||
<ContentCategory />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import LayoutProvider from "@/providers/layout.provider";
|
||||
import LayoutContentProvider from "@/providers/content.provider";
|
||||
import DashCodeSidebar from "@/components/partials/sidebar";
|
||||
import DashCodeFooter from "@/components/partials/footer";
|
||||
import ThemeCustomize from "@/components/partials/customizer";
|
||||
import DashCodeHeader from "@/components/partials/header";
|
||||
|
||||
import { redirect } from "@/components/navigation";
|
||||
import Footer from "@/components/landing-page/footer";
|
||||
import Navbar from "@/components/landing-page/navbar";
|
||||
|
||||
const layout = async ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default layout;
|
||||
|
|
@ -27,12 +27,33 @@ import {
|
|||
createMedia,
|
||||
getTagsBySubCategoryId,
|
||||
listEnableCategory,
|
||||
rejectFiles,
|
||||
submitApproval,
|
||||
} from "@/service/content/content";
|
||||
import { detailMedia } from "@/service/curated-content/curated-content";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { MailIcon } from "lucide-react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/free-mode";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/thumbs";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
|
||||
import {
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { loading } from "@/config/swal";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { error } from "@/lib/swal";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -48,6 +69,13 @@ type Category = {
|
|||
name: string;
|
||||
};
|
||||
|
||||
type FileType = {
|
||||
id: number;
|
||||
url: string;
|
||||
thumbnailFileUrl: string;
|
||||
fileName: string;
|
||||
};
|
||||
|
||||
type Detail = {
|
||||
id: string;
|
||||
title: string;
|
||||
|
|
@ -62,12 +90,20 @@ type Detail = {
|
|||
thumbnailLink: string;
|
||||
tags: string;
|
||||
statusName: string;
|
||||
isPublish: boolean;
|
||||
needApprovalFromLevel: number;
|
||||
files: FileType[];
|
||||
uploadedById: number;
|
||||
};
|
||||
|
||||
export default function FormImageDetail() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const router = useRouter();
|
||||
const userId = getCookiesDecrypt("uie");
|
||||
const userLevelId = getCookiesDecrypt("ulie");
|
||||
const roleId = getCookiesDecrypt("urie");
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const { id } = useParams() as { id: string };
|
||||
console.log(id);
|
||||
const editor = useRef(null);
|
||||
|
|
@ -77,23 +113,22 @@ export default function FormImageDetail() {
|
|||
const taskId = Cookies.get("taskId");
|
||||
const scheduleId = Cookies.get("scheduleId");
|
||||
const scheduleType = Cookies.get("scheduleType");
|
||||
|
||||
const [status, setStatus] = useState("");
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||
const [tags, setTags] = useState<any[]>([]);
|
||||
const [detail, setDetail] = useState<Detail>();
|
||||
const [detail, setDetail] = useState<any>();
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
|
||||
const [description, setDescription] = useState("");
|
||||
const [main, setMain] = useState<any>([]);
|
||||
const [detailThumb, setDetailThumb] = useState<any>([]);
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
|
||||
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [unitSelection, setUnitSelection] = useState({
|
||||
allUnit: false,
|
||||
mabes: false,
|
||||
polda: false,
|
||||
polres: false,
|
||||
});
|
||||
const [files, setFiles] = useState<FileType[]>([]);
|
||||
const [rejectedFiles, setRejectedFiles] = useState<number[]>([]);
|
||||
const [isMabesApprover, setIsMabesApprover] = useState(false);
|
||||
|
||||
let fileTypeId = "1";
|
||||
|
||||
|
|
@ -117,21 +152,16 @@ export default function FormImageDetail() {
|
|||
// }
|
||||
// };
|
||||
|
||||
const handleRemoveTag = (index: any) => {
|
||||
setTags((prevTags) => prevTags.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files) {
|
||||
const files = Array.from(event.target.files);
|
||||
setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
|
||||
console.log("DATAFILE::", selectedFiles);
|
||||
useEffect(() => {
|
||||
if (
|
||||
userLevelId != undefined &&
|
||||
roleId != undefined &&
|
||||
userLevelId == "216" &&
|
||||
roleId == "3"
|
||||
) {
|
||||
setIsMabesApprover(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveImage = (index: number) => {
|
||||
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
|
||||
};
|
||||
}, [userLevelId, roleId]);
|
||||
|
||||
const handleCheckboxChange = (id: number) => {
|
||||
setSelectedPublishers((prev) =>
|
||||
|
|
@ -177,8 +207,15 @@ export default function FormImageDetail() {
|
|||
if (id) {
|
||||
const response = await detailMedia(id);
|
||||
const details = response.data?.data;
|
||||
|
||||
console.log("detail", details);
|
||||
setFiles(details?.files);
|
||||
setDetail(details);
|
||||
setMain({
|
||||
type: details?.fileType.name,
|
||||
url: details?.files[0]?.url,
|
||||
names: details?.files[0]?.fileName,
|
||||
format: details?.files[0]?.format,
|
||||
});
|
||||
|
||||
if (details.publishedForObject) {
|
||||
const publisherIds = details.publishedForObject.map(
|
||||
|
|
@ -207,56 +244,92 @@ export default function FormImageDetail() {
|
|||
initState();
|
||||
}, [refresh, setValue]);
|
||||
|
||||
const save = async (data: ImageSchema) => {
|
||||
const requestData = {
|
||||
...data,
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
htmlDescription: data.description,
|
||||
fileTypeId,
|
||||
categoryId: selectedTarget,
|
||||
subCategoryId: selectedTarget,
|
||||
uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
|
||||
statusId: "1",
|
||||
publishedFor: "6",
|
||||
creatorName: data.creatorName,
|
||||
tags: "siap",
|
||||
isYoutube: false,
|
||||
isInternationalMedia: false,
|
||||
};
|
||||
|
||||
const response = await createMedia(requestData);
|
||||
console.log("Form Data Submitted:", requestData);
|
||||
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
text: "Data berhasil disimpan.",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then(() => {
|
||||
router.push("/en/contributor/content/image");
|
||||
});
|
||||
const actionApproval = (e: string) => {
|
||||
setStatus(e);
|
||||
setModalOpen(true);
|
||||
setDescription("");
|
||||
};
|
||||
|
||||
const onSubmit = (data: ImageSchema) => {
|
||||
MySwal.fire({
|
||||
title: "Simpan Data",
|
||||
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "Simpan",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
save(data);
|
||||
}
|
||||
const submit = async () => {
|
||||
if (
|
||||
(description?.length > 1 && Number(status) == 3) ||
|
||||
Number(status) == 2 ||
|
||||
Number(status) == 4
|
||||
) {
|
||||
MySwal.fire({
|
||||
title: "Simpan Approval",
|
||||
text: "",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "Simpan",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
save();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
async function save() {
|
||||
const data = {
|
||||
mediaUploadId: id,
|
||||
statusId: status,
|
||||
message: description,
|
||||
files: [],
|
||||
// files: isMabesApprover ? getPlacement() : [],
|
||||
};
|
||||
|
||||
loading();
|
||||
const response = await submitApproval(data);
|
||||
|
||||
if (response?.error) {
|
||||
error(response.message);
|
||||
return false;
|
||||
}
|
||||
|
||||
const dataReject = {
|
||||
listFiles: rejectedFiles,
|
||||
};
|
||||
|
||||
const resReject = await rejectFiles(dataReject);
|
||||
|
||||
if (resReject?.error) {
|
||||
error(resReject.message);
|
||||
return false;
|
||||
}
|
||||
|
||||
close();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleDeleteFileApproval(id: number) {
|
||||
const selectedFiles = files.filter((file) => file.id != id);
|
||||
setFiles(selectedFiles);
|
||||
const rejects = rejectedFiles;
|
||||
rejects.push(id);
|
||||
setRejectedFiles(rejects);
|
||||
}
|
||||
const handleMain = (
|
||||
type: string,
|
||||
url: string,
|
||||
names: string,
|
||||
format: string
|
||||
) => {
|
||||
console.log("Test 3 :", type, url, names, format);
|
||||
setMain({
|
||||
type,
|
||||
url,
|
||||
names,
|
||||
format,
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<form>
|
||||
{detail !== undefined ? (
|
||||
<div className="flex lg:flex-row gap-10">
|
||||
<Card className="w-full lg:w-8/12">
|
||||
|
|
@ -413,14 +486,16 @@ export default function FormImageDetail() {
|
|||
<div className="space-y-2">
|
||||
<Label>Tag</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detail?.tags?.split(",").map((tag, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
className="border rounded-md px-2 py-2"
|
||||
>
|
||||
{tag.trim()}
|
||||
</Badge>
|
||||
))}
|
||||
{detail?.tags
|
||||
?.split(",")
|
||||
.map((tag: string, index: number) => (
|
||||
<Badge
|
||||
key={index}
|
||||
className="border rounded-md px-2 py-2"
|
||||
>
|
||||
{tag.trim()}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -469,6 +544,196 @@ export default function FormImageDetail() {
|
|||
<p>Keterangan:</p>
|
||||
<p className="text-sm text-slate-400">{detail?.statusName}</p>
|
||||
</div>
|
||||
{/* {detail?.isPublish == false ? (
|
||||
<div className="p-3">
|
||||
<Button className="bg-blue-600">Publish</Button>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)} */}
|
||||
{Number(detail?.needApprovalFromLevel) == Number(userLevelId) ? (
|
||||
Number(detail?.uploadedById) == Number(userId) ? (
|
||||
""
|
||||
) : (
|
||||
<div className="flex flex-col gap-2 p-3">
|
||||
<Button
|
||||
onClick={() => actionApproval("2")}
|
||||
color="primary"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:check" className="mr-3" /> Setujui
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("3")}
|
||||
className="bg-orange-400 hover:bg-orange-300"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:comment-o" className="mr-3" /> Revisi
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => actionApproval("4")}
|
||||
color="destructive"
|
||||
type="button"
|
||||
>
|
||||
<Icon icon="fa:times" className="mr-3" />
|
||||
Tolak
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent size="md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Berikan Komentar</DialogTitle>
|
||||
</DialogHeader>
|
||||
{status == "2"
|
||||
? files?.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="flex flex-row gap-2 items-center"
|
||||
>
|
||||
<img src={file.url} className="w-[200px]" />
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex justify-between text-sm">
|
||||
{file.fileName}
|
||||
<a>
|
||||
<Icon icon="humbleicons:times" color="red" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Semua
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Nasional
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Wilayah
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Internasional
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
: ""}
|
||||
<div className="flex flex-col gap-4">
|
||||
<Textarea
|
||||
placeholder="Type your message here."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{status == "3" || status == "4" ? (
|
||||
<div className="flex flex-row gap-2">
|
||||
<Badge
|
||||
color={
|
||||
description === "Kualitas media kurang baik"
|
||||
? "primary"
|
||||
: "default"
|
||||
}
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
setDescription("Kualitas media kurang baik")
|
||||
}
|
||||
>
|
||||
Kualitas media kurang baik
|
||||
</Badge>
|
||||
|
||||
<Badge
|
||||
color={
|
||||
description === "Deskripsi kurang lengkap"
|
||||
? "primary"
|
||||
: "default"
|
||||
}
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
setDescription("Deskripsi kurang lengkap")
|
||||
}
|
||||
>
|
||||
Deskripsi kurang lengkap
|
||||
</Badge>
|
||||
<Badge
|
||||
color={
|
||||
description === "Judul kurang tepat"
|
||||
? "primary"
|
||||
: "default"
|
||||
}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setDescription("Judul kurang tepat")}
|
||||
>
|
||||
Judul kurang tepat
|
||||
</Badge>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-row gap-2">
|
||||
<Badge
|
||||
color={
|
||||
description === "Konten sangat bagus"
|
||||
? "primary"
|
||||
: "default"
|
||||
}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setDescription("Konten sangat bagus")}
|
||||
>
|
||||
Konten sangat bagus
|
||||
</Badge>
|
||||
<Badge
|
||||
color={
|
||||
description === "Konten menarik"
|
||||
? "primary"
|
||||
: "default"
|
||||
}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setDescription("Konten menarik")}
|
||||
>
|
||||
Konten menarik
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button type="button" color="primary">
|
||||
Submit
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
color="destructive"
|
||||
onClick={() => setModalOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -421,14 +421,6 @@ export default function FormImage() {
|
|||
// MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
|
||||
};
|
||||
|
||||
// function showProgress() {
|
||||
// $('#modalProgress').modal('show');
|
||||
// }
|
||||
|
||||
// function hideProgress() {
|
||||
// $('#modalProgress').modal('hide');
|
||||
// }
|
||||
|
||||
const onSubmit = (data: ImageSchema) => {
|
||||
MySwal.fire({
|
||||
title: "Simpan Data",
|
||||
|
|
|
|||
|
|
@ -2,50 +2,51 @@ import React, { useState } from "react";
|
|||
import { Button } from "../ui/button";
|
||||
import { Reveal } from "./Reveal";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Link } from "@/i18n/routing";
|
||||
|
||||
const Division = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [seeAllValue, setSeeAllValue] = useState(false);
|
||||
|
||||
const regions = [
|
||||
{ name: "SIBER", logo: "/assets/satker/siber.png" },
|
||||
{ name: "DIVKUM", logo: "/assets/satker/divkum.png" },
|
||||
{ name: "PUSKEU", logo: "/assets/satker/puskeu.png" },
|
||||
{ name: "SSDM", logo: "/assets/satker/ssdm.png" },
|
||||
{ name: "ITWASUM", logo: "/assets/satker/itwasum.png" },
|
||||
{ name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" },
|
||||
{ name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" },
|
||||
{ name: "BRIMOB", logo: "/assets/satker/brimob.png" },
|
||||
{ name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" },
|
||||
{ name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" },
|
||||
{ name: "BINMAS", logo: "/assets/satker/binmas.png" },
|
||||
{ name: "DIV TIK", logo: "/assets/satker/div-tik.png" },
|
||||
{ name: "SPRIPIM", logo: "/assets/satker/spripim.png" },
|
||||
{ name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" },
|
||||
{ name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
|
||||
{ name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" },
|
||||
{ name: "BAHARKAM", logo: "/assets/satker/baharkam.png" },
|
||||
{ name: "POLAIRUD", logo: "/assets/satker/polairud.png" },
|
||||
{ name: "POLAIR", logo: "/assets/satker/polair.png" },
|
||||
{ name: "POLUDARA", logo: "/assets/satker/poludara.png" },
|
||||
{ name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" },
|
||||
{ name: "AKPOL", logo: "/assets/satker/akpol.png" },
|
||||
{ name: "KORLANTAS", logo: "/assets/satker/korlantas.png" },
|
||||
{ name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" },
|
||||
{ name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" },
|
||||
{ name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" },
|
||||
{ name: "SLOG", logo: "/assets/satker/slog.png" },
|
||||
{ name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" },
|
||||
{ name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" },
|
||||
{ name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" },
|
||||
{ name: "SETUM", logo: "/assets/satker/setum.png" },
|
||||
{ name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" },
|
||||
{ name: "DENSUS 88", logo: "/assets/satker/densus88.png" },
|
||||
{ name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" },
|
||||
{ name: "SOPS", logo: "/assets/satker/sops.png" },
|
||||
{ name: "SRENA", logo: "/assets/satker/srena.png" },
|
||||
{ name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" },
|
||||
{ name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" },
|
||||
{ name: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" },
|
||||
{ name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
|
||||
{ name: "PUSKEU", slug: "puskeu", logo: "/assets/satker/puskeu.png" },
|
||||
{ name: "SSDM", slug: "ssdm", logo: "/assets/satker/ssdm.png" },
|
||||
{ name: "ITWASUM", slug: "itwasum", logo: "/assets/satker/itwasum.png" },
|
||||
{ name: "STIK-PTIK", slug: "stik-ptik", logo: "/assets/satker/stik-ptik.png" },
|
||||
{ name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/assets/satker/satuan-kerja-polri.png" },
|
||||
{ name: "BRIMOB", slug: "brimob", logo: "/assets/satker/brimob.png" },
|
||||
{ name: "DIV HUMAS", slug: "div-humas", logo: "/assets/satker/div-humas.png" },
|
||||
{ name: "PUSLITBANG", slug: "puslitbang", logo: "/assets/satker/puslitbang.png" },
|
||||
{ name: "BINMAS", slug: "binmas", logo: "/assets/satker/binmas.png" },
|
||||
{ name: "DIV TIK", slug: "div-tik", logo: "/assets/satker/div-tik.png" },
|
||||
{ name: "SPRIPIM", slug: "spripim", logo: "/assets/satker/spripim.png" },
|
||||
{ name: "DIVPROPRAM", slug: "divpropram", logo: "/assets/satker/div-propram.png" },
|
||||
{ name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
|
||||
{ name: "PUSDOKKES", slug: "pusdokkes", logo: "/assets/satker/pusdokkes.png" },
|
||||
{ name: "BAHARKAM", slug: "baharkam", logo: "/assets/satker/baharkam.png" },
|
||||
{ name: "POLAIRUD", slug: "polairud", logo: "/assets/satker/polairud.png" },
|
||||
{ name: "POLAIR", slug: "polair", logo: "/assets/satker/polair.png" },
|
||||
{ name: "POLUDARA", slug: "poludara", logo: "/assets/satker/poludara.png" },
|
||||
{ name: "LEMDIKLAT", slug: "lemdiklat", logo: "/assets/satker/lemdiklat.png" },
|
||||
{ name: "AKPOL", slug: "akpol", logo: "/assets/satker/akpol.png" },
|
||||
{ name: "KORLANTAS", slug: "korlantas", logo: "/assets/satker/korlantas.png" },
|
||||
{ name: "PUSINAFIS", slug: "pusinafis", logo: "/assets/satker/pusinafis.png" },
|
||||
{ name: "PUSJARAH", slug: "pusjarah", logo: "/assets/satker/pusjarah.png" },
|
||||
{ name: "PUSIKNAS", slug: "pusiknas", logo: "/assets/satker/pusiknas.png" },
|
||||
{ name: "SLOG", slug: "slog", logo: "/assets/satker/slog.png" },
|
||||
{ name: "BAINTELKAM", slug: "baintelkam", logo: "/assets/satker/baintelkam.jpg" },
|
||||
{ name: "BARESKRIM", slug: "bareskrim", logo: "/assets/satker/bareskrim.png" },
|
||||
{ name: "DIVHUBINTER", slug: "divhubinter", logo: "/assets/satker/divhubinter.png" },
|
||||
{ name: "SETUM", slug: "setum", logo: "/assets/satker/setum.png" },
|
||||
{ name: "PUSLABFOR", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" },
|
||||
{ name: "DENSUS 88", slug: "densus-88", logo: "/assets/satker/densus88.png" },
|
||||
{ name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/assets/satker/sahli-kapolri.png" },
|
||||
{ name: "SOPS", slug: "sops", logo: "/assets/satker/sops.png" },
|
||||
{ name: "SRENA", slug: "srena", logo: "/assets/satker/srena.png" },
|
||||
{ name: "SESPIM POLRI", slug: "sespim-polri", logo: "/assets/satker/sespim-polri.png" },
|
||||
{ name: "SETUPA POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" },
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
@ -70,22 +71,22 @@ const Division = () => {
|
|||
{regions.map((region, index) =>
|
||||
!seeAllValue ? (
|
||||
index < 7 ? (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
) : (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<Link href={`/satker/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
"use client";
|
||||
import { listData } from "@/service/landing/landing";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { getPublicLocaleTimestamp } from "@/utils/globals";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
|
||||
const HeaderBannerSatker = () => {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const satkerName: any = params?.satker_name;
|
||||
const asPath: any = usePathname();
|
||||
const [content, setContent] = useState([]);
|
||||
|
||||
const [isBannerLoading, setIsBannerLoading] = useState(true);
|
||||
const [centerPadding, setCenterPadding] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
// async function initState() {
|
||||
// const res = await listCarousel();
|
||||
// setContent(res.data?.data);
|
||||
// setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
|
||||
// }
|
||||
|
||||
async function fetchData() {
|
||||
const res = await listData("1", "", "", 5, 0, "createdAt", "", "", satkerName);
|
||||
let data = res?.data?.data?.content;
|
||||
setContent(data);
|
||||
setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
|
||||
setIsBannerLoading(false);
|
||||
console.log("Done");
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, [params?.page]);
|
||||
|
||||
const settings = {
|
||||
className: "center",
|
||||
// centerMode: true,
|
||||
infinite: true,
|
||||
centerPadding,
|
||||
slidesToShow: 2,
|
||||
autoplay: true,
|
||||
speed: 1500,
|
||||
autoplaySpeed: 15_000,
|
||||
focusOnSelect: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: "60px",
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: "20px",
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="p-6 lg:px-16 flex flex-col lg:flex-row">
|
||||
{isBannerLoading ? (
|
||||
<SkeletonTheme highlightColor="#f2f2f2">
|
||||
<Skeleton className="w-[100%] h-[480px]" />
|
||||
</SkeletonTheme>
|
||||
) : (
|
||||
<div className="mt-3">
|
||||
<Carousel className="w-full h-full">
|
||||
<CarouselContent>
|
||||
{content?.map((row: any) => (
|
||||
<CarouselItem key={row?.id} className="basis-1/2">
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<img src={row?.thumbnailLink} alt="" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
|
||||
<Link
|
||||
href={
|
||||
Number(row.fileType?.id) == 1
|
||||
? `${asPath.includes("/satker/") == true ? asPath : ""}/image/detail/${row.slug}`
|
||||
: Number(row.fileType?.id) == 2
|
||||
? `/video/detail/${row.slug}`
|
||||
: Number(row.fileType?.id) == 3
|
||||
? `/document/detail/${row.slug}`
|
||||
: `/audio/detail/${row.slug}`
|
||||
}
|
||||
>
|
||||
<h3>{row.title}</h3>
|
||||
</Link>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
|
||||
{getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
|
||||
<Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderBannerSatker;
|
||||
|
|
@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
|
|||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
||||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { capitalize } from "@/utils/globals";
|
||||
|
||||
const WelcomePolda = () => {
|
||||
const router = useRouter();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
"use client";
|
||||
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
||||
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { capitalize } from "@/utils/globals";
|
||||
|
||||
const WelcomeSatker = () => {
|
||||
const router = useRouter();
|
||||
const asPath: any = usePathname();
|
||||
const params = useParams();
|
||||
const satkerName: any = params?.satker_name;
|
||||
const [categorySelect, setCategorySelect] = useState("0");
|
||||
const [search, setSearch] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
function initState() {
|
||||
console.log(categorySelect);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, [categorySelect]);
|
||||
|
||||
return (
|
||||
<section className="w-full py-8 px-4 ">
|
||||
<div className="max-w-screen-xl mx-auto text-center">
|
||||
{/* Heading */}
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
|
||||
Selamat Datang di <span className="text-[#bb3523] dark:text-white">Satker</span> <span className="capitalize">{satkerName.replace("-", " ")}</span>
|
||||
</h1>
|
||||
<div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
|
||||
<p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
|
||||
Liputan resmi yang bersumber dari kegiatan Polri di Satker <span className="capitalize">{satkerName.replace("-", " ")}</span>
|
||||
</p>
|
||||
|
||||
{/* Search Form */}
|
||||
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
|
||||
{/* Dropdown */}
|
||||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
|
||||
<svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
Konten
|
||||
<svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiYoutube className="mr-2" />
|
||||
Audio Visual
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiMusic className="mr-2" />
|
||||
Audio
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiImage className="mr-2" />
|
||||
Foto
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiFile className="mr-2" />
|
||||
Teks
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
|
||||
<span className="material-icons text-black dark:text-white px-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" placeholder="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
|
||||
{/* Button */}
|
||||
<button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WelcomeSatker;
|
||||
|
|
@ -13,6 +13,7 @@ export async function login(data: any) {
|
|||
'content-type': 'application/x-www-form-urlencoded',
|
||||
};
|
||||
return httpPost(pathUrl, headers, qs.stringify(data));
|
||||
|
||||
}
|
||||
|
||||
export async function getProfile(token: any) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
|
||||
import {
|
||||
httpGetInterceptor,
|
||||
httpPostInterceptor,
|
||||
} from "../http-config/http-interceptor-service";
|
||||
|
||||
// export async function listDataAll(
|
||||
// isForSelf,
|
||||
|
|
@ -174,3 +177,13 @@ export async function convertSPIT(data: any) {
|
|||
const url = "media/spit/convert";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
|
||||
export async function submitApproval(data: any) {
|
||||
const url = "media/approval";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
|
||||
export async function rejectFiles(data: any) {
|
||||
const url = "media/file/rejects";
|
||||
return httpPostInterceptor(url, data);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue