feat:detail list task plan, admin view

This commit is contained in:
Rama Priyanto 2024-12-30 20:23:15 +07:00
parent b8384b17ff
commit 6ebea4da2d
7 changed files with 448 additions and 105 deletions

View File

@ -0,0 +1,170 @@
"use client";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { close, loading } from "@/config/swal";
import { Link } from "@/i18n/routing";
import {
getPlanningDailyByTypeId,
getPlanningPagination,
} from "@/service/agenda-setting/agenda-setting";
import { htmlToString, textEllipsis } from "@/utils/globals";
import { MoreVertical } from "lucide-react";
import { useEffect, useState } from "react";
export default function ExpandedData(props: { datas: any }) {
const { datas } = props;
const [isOpen, setIsOpen] = useState("");
const [getData, setGetData] = useState<any>();
const handleIsOpen = (id: string) => {
setIsOpen(id);
};
useEffect(() => {
if (isOpen !== "") {
fetchData();
}
}, [isOpen]);
async function fetchData() {
loading();
const response = await getPlanningPagination(0, "", 10, 1, 1, isOpen);
close();
setupData(response.data?.data);
}
function setupData(rawData: any) {
if (rawData != undefined) {
const dataContent = rawData?.content;
const data = [];
for (const [i, element] of dataContent.entries()) {
element.no = i + 1;
data.push(element);
}
setGetData(data);
}
}
return (
<table>
<tr>
<th className="text-left">Judul Perencanaan</th>
<th>Batas Waktu</th>
<th>Status</th>
<th>Aksi</th>
</tr>
{datas?.map((data: any) => (
<>
<tr key={data.id}>
<th className="text-left font-normal text-sm">
<a onClick={() => handleIsOpen(data.id)}>{data.title}</a>
</th>
<th
className="font-normal text-sm"
onClick={() =>
`disinni igninn membuat state untuk mennyimpan data isOpen`
}
>
{data.date}
</th>
<th className="font-normal text-sm">{data.status}</th>
<th className="flex justify-center text-sm">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/curator/task-plan/mediahub/create-daily/detail/${data.id}`}
>
Detail
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/curator/task-plan/mediahub/create-daily/edit/${data.id}`}
>
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<a className="text-red-600">Delete</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</th>
</tr>
<Collapsible
open={isOpen === data.id}
onOpenChange={() => handleIsOpen(data.id)}
>
<CollapsibleContent className="space-y-2 w-full text-xs">
<tr className="space-x-2">
<th className="px-3">No</th>
<th className="text-left">Judul Perencanaan</th>
<th className="text-left px-3">Nama Pembuat</th>
<th className="text-left px-3">Batas Waktu</th>
<th className="text-left px-3">Status</th>
<th>Aksi</th>
</tr>
{getData?.map((row: any) => (
<tr key={row.id}>
<td className="px-3">{row.no}</td>
<td>{row.title}</td>
<td className="text-left px-3">{row.createdByName}</td>
<td className="text-left px-3">{row.date}</td>
<td className="text-left px-3">{row.status}</td>
<td className="flex justify-center text-sm">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/curator/task-plan/mediahub/create-weekly/detail/${data.id}`}
>
Detail
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/curator/task-plan/mediahub/create-weekly/edit/${data.id}`}
>
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<a className="text-red-600">Delete</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</td>
</tr>
))}
</CollapsibleContent>
</Collapsible>
</>
))}
</table>
);
}

View File

@ -26,6 +26,8 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import ExpandedData from "./expand-list-view";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -33,11 +35,7 @@ const columns: ColumnDef<any>[] = [
header: "No", header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>, cell: ({ row }) => <span>{row.getValue("no")}</span>,
}, },
// {
// accessorKey: "title",
// header: "Judul Perencanaan",
// cell: ({ row }) => <span>{row.getValue("title")}</span>,
// },
{ {
accessorKey: "title", accessorKey: "title",
header: "Judul Perencanaan", header: "Judul Perencanaan",
@ -52,54 +50,7 @@ const columns: ColumnDef<any>[] = [
<DialogHeader> <DialogHeader>
<DialogTitle>Rencanaan Mingguan</DialogTitle> <DialogTitle>Rencanaan Mingguan</DialogTitle>
</DialogHeader> </DialogHeader>
<table> <ExpandedData datas={datas} />
<tr>
<th className="text-left">Judul Perencanaan</th>
<th>Batas Waktu</th>
<th>Status</th>
<th>Aksi</th>
</tr>
{datas?.map((data: any) => (
<tr key={data.id}>
<th className="text-left font-normal text-sm">
{data.title}
</th>
<th className="font-normal text-sm">{data.date}</th>
<th className="font-normal text-sm">{data.status}</th>
<th className="flex justify-center text-sm">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/curator/task-plan/mediahub/create-weekly/detail/${data.id}`}
>
Detail
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/curator/task-plan/mediahub/create-weekly/edit/${data.id}`}
>
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<a className="text-red-600">Delete</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</th>
</tr>
))}
</table>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

View File

@ -26,6 +26,7 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import ExpandedData from "./expand-list-view";
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
@ -52,54 +53,7 @@ const columns: ColumnDef<any>[] = [
<DialogHeader> <DialogHeader>
<DialogTitle>Rencanaan Mingguan</DialogTitle> <DialogTitle>Rencanaan Mingguan</DialogTitle>
</DialogHeader> </DialogHeader>
<table> <ExpandedData datas={datas} />
<tr>
<th className="text-left">Judul Perencanaan</th>
<th>Batas Waktu</th>
<th>Status</th>
<th>Aksi</th>
</tr>
{datas?.map((data: any) => (
<tr key={data.id}>
<th className="text-left font-normal text-sm">
{data.title}
</th>
<th className="font-normal text-sm">{data.date}</th>
<th className="font-normal text-sm">{data.status}</th>
<th className="flex justify-center text-sm">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/curator/task-plan/medsos-mediahub/create-weekly/detail/${data.id}`}
>
Detail
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link
href={`/curator/task-plan/medsos-mediahub/create-weekly/edit/${data.id}`}
>
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<a className="text-red-600">Hapus</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</th>
</tr>
))}
</table>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

View File

@ -32,6 +32,7 @@ export type Group = {
export function getMenuList(pathname: string, t: any): Group[] { export function getMenuList(pathname: string, t: any): Group[] {
const roleId = getCookiesDecrypt("urie"); const roleId = getCookiesDecrypt("urie");
console.log("roleId");
const levelNumber = getCookiesDecrypt("ulne"); const levelNumber = getCookiesDecrypt("ulne");
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
@ -1676,6 +1677,265 @@ export function getMenuList(pathname: string, t: any): Group[] {
], ],
}, },
]; ];
} else if (Number(roleId) === 2) {
menusSelected = [
{
groupLabel: t("apps"),
id: "dashboard",
menus: [
{
id: "dashboard",
href: "/dashboard",
label: t("dashboard"),
active: pathname.includes("/dashboard"),
icon: "material-symbols:dashboard",
submenus: [
{
href: "/dashboard",
label: "Executive",
active: pathname === "/dashboard",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/dashboard/breakdown",
label: "Breakdown",
active: pathname === "/dashboard/breakdown",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
{
groupLabel: "",
id: "agenda-setting",
menus: [
{
id: "agenda-setting",
href: "/contributor/agenda-setting",
label: t("agenda-setting"),
active: pathname.includes("/agenda-setting"),
icon: "iconoir:journal-page",
submenus: [],
},
],
},
{
groupLabel: "",
id: "management-user",
menus: [
{
id: "management-user-menu",
href: "/adminn/management-user",
label: "Management User",
active: pathname.includes("/management-user"),
icon: "clarity:users-solid",
submenus: [],
},
],
},
{
groupLabel: "",
id: "content-production",
menus: [
{
id: "content-production",
href: "/curator/content-production",
label: t("content-production"),
active: pathname.includes("/content-production"),
icon: "fluent:content-view-gallery-16-regular",
submenus: [],
},
],
},
{
groupLabel: "",
id: "pattern-relation",
menus: [
{
id: "pattern-relation",
href: "/curator/pattern-relation",
label: t("pattern-relation"),
active: pathname.includes("/pattern-relation"),
icon: "oui:app-index-pattern",
submenus: [],
},
],
},
{
groupLabel: "",
id: "performance-polda",
menus: [
{
id: "performance-polda",
href: "/admin/performance-polda",
label: t("performance-polda"),
active: pathname.includes("/admin/performance-polda"),
icon: "ant-design:signal-filled",
submenus: [],
},
],
},
{
groupLabel: "",
id: "analysis",
menus: [
{
id: "analysis",
href: "/admin/analysis",
label: t("analysis"),
active: pathname.includes("/task-plan"),
icon: "mdi:chart-line",
submenus: [
{
href: "/admin/analysis/magement-content",
label: t("management-content"),
active: pathname === "/admin/analysis/magement-content",
icon: "",
children: [],
},
{
href: "/admin/analysis/schedule",
label: t("schedule"),
active: pathname === "/admin/analysis/schedule",
icon: "heroicons:shopping-cart",
children: [],
},
{
href: "/admin/analysis/feedback-center",
label: "Feedback Center",
active: pathname === "/admin/analysis/feedback-center",
icon: "heroicons:shopping-cart",
children: [],
},
{
href: "/admin/analysis/emergency-issue",
label: "Emergency Issue",
active: pathname === "/admin/analysis/emergency-issue",
icon: "heroicons:shopping-cart",
children: [],
},
],
},
],
},
{
groupLabel: "",
id: "media-tracking",
menus: [
{
id: "media-tracking",
href: "/curator/media-tracking",
label: t("media-tracking"),
active: pathname.includes("/media-tracking"),
icon: "material-symbols:map-search-outline",
submenus: [
{
href: "/admin/media-tracking/media-online",
label: "Media Onlinne",
active: pathname === "/media-tracking/media-online",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/media-tracking/news",
label: "Tracking Beritra Hari Ini",
active: pathname === "/media-tracking/news",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
{
groupLabel: "",
id: "contest",
menus: [
{
id: "contest",
href: "/shared/contest",
label: t("contest"),
active: pathname.includes("/contest"),
icon: "ic:outline-emoji-events",
submenus: [],
},
],
},
{
groupLabel: "",
id: "communication",
menus: [
{
id: "communication",
href: "/shared/communication",
label: t("communication"),
active: pathname.includes("/communication"),
icon: "token:chat",
submenus: [],
},
],
},
{
groupLabel: "",
id: "feedback",
menus: [
{
id: "feedback",
href: "/curator/feedback",
label: t("feedback"),
active: pathname.includes("/feedback"),
icon: "mdi:feedback-outline",
submenus: [],
},
],
},
{
groupLabel: "",
id: "broadcast",
menus: [
{
id: "broadcast",
href: "/admin/broadcast",
label: "Broadcast",
active: pathname.includes("/broadcast"),
icon: "mdi:broadcast",
submenus: [],
},
],
},
{
groupLabel: "",
id: "experts",
menus: [
{
id: "experts",
href: "/admin/add-experts",
label: t("add-experts"),
active: pathname.includes("/add-experts"),
icon: "majesticons:user",
submenus: [],
},
],
},
{
groupLabel: "",
id: "settings",
menus: [
{
id: "settings",
href: "/admin/settings",
label: t("settings"),
active: pathname.includes("/settinng"),
icon: "material-symbols:settings",
submenus: [],
},
],
},
];
} }
return menusSelected; return menusSelected;

View File

@ -294,7 +294,11 @@
"purchaseList": "Purchase List", "purchaseList": "Purchase List",
"sellers": "Sellers", "sellers": "Sellers",
"typography": "Typography", "typography": "Typography",
"colors": "Colors" "colors": "Colors",
"performance-polda": "Performance Polda",
"analysis": "Analysis",
"management-content": "Management Content",
"add-experts": "Add Experts"
}, },
"Changelog": { "Changelog": {
"version": "Version's", "version": "Version's",

View File

@ -146,7 +146,7 @@
"forward": "Forward", "forward": "Forward",
"collaboration": "Collaboration", "collaboration": "Collaboration",
"account-report": "Account Report", "account-report": "Account Report",
"settings": "Settings", "settings": "Pengaturan",
"feedback": "Feedback", "feedback": "Feedback",
"content-production": "Produksi Konten", "content-production": "Produksi Konten",
"pattern-relation": "Pola & Relasi", "pattern-relation": "Pola & Relasi",
@ -294,7 +294,11 @@
"purchaseList": "Purchase List", "purchaseList": "Purchase List",
"sellers": "Sellers", "sellers": "Sellers",
"typography": "Typography", "typography": "Typography",
"colors": "Colors" "colors": "Colors",
"performance-polda": "Performa Polda",
"analysis": "Analisa",
"management-content": "Manajemen Konten",
"add-experts": "Tambah Tenaga Ahli"
}, },
"Changelog": { "Changelog": {
"version": "Version's", "version": "Version's",

View File

@ -22,7 +22,7 @@ export async function getPlanningDailyByTypeId(
date: string, date: string,
typeId: number typeId: number
) { ) {
const url = `planning/pagination/daily?enablePage=1&size=${size}&page=${page}&date=${date}&typeId=${typeId}${ const url = `planning/pagination/daily?enablePage=1&time=1&size=${size}&page=${page}&date=${date}&typeId=${typeId}${
parentId ? `&parentId=${parentId}` : "" parentId ? `&parentId=${parentId}` : ""
}`; }`;
return getAPIInterceptor(url); return getAPIInterceptor(url);