311 lines
11 KiB
TypeScript
311 lines
11 KiB
TypeScript
import * as React from "react";
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
|
|
import { Eye, MoreVertical, SquarePen, Trash2, Upload } from "lucide-react";
|
|
import { cn, getCookiesDecrypt } from "@/lib/utils";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuItem,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { format } from "date-fns";
|
|
import { Link } from "@/components/navigation";
|
|
import { useRouter } from "next/navigation";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { deleteCategory } from "@/service/settings/settings";
|
|
import { deleteTaskTa } from "@/service/task";
|
|
import { error, loading } from "@/lib/swal";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import Swal from "sweetalert2";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const useTableColumns = (
|
|
activeTab: "ta" | "daily" | "special" | "mabes-koor",
|
|
) => {
|
|
const t = useTranslations("Table");
|
|
const columns: ColumnDef<any>[] = [
|
|
{
|
|
accessorKey: "no",
|
|
header: t("no", { defaultValue: "No" }),
|
|
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
|
},
|
|
{
|
|
accessorKey: "title",
|
|
header: t("title", { defaultValue: "Title" }),
|
|
cell: ({ row }) => (
|
|
<div>
|
|
<span>{row.getValue("title")}</span>
|
|
{row.original.isForward && (
|
|
<Button
|
|
variant={"outline"}
|
|
color="primary"
|
|
size="sm"
|
|
className="ml-3 rounded-xl"
|
|
>
|
|
Forward
|
|
</Button>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
|
|
{
|
|
accessorKey: "uniqueCode",
|
|
header: t("code", { defaultValue: "Code" }),
|
|
cell: ({ row }) => <span>{row.getValue("uniqueCode")}</span>,
|
|
},
|
|
|
|
{
|
|
accessorKey: "createdAt",
|
|
header: t("upload-date", { defaultValue: "Upload Date" }),
|
|
cell: ({ row }) => {
|
|
const createdAt = row.getValue("createdAt") as
|
|
| string
|
|
| number
|
|
| undefined;
|
|
|
|
const formattedDate =
|
|
createdAt && !isNaN(new Date(createdAt).getTime())
|
|
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
|
|
: "-";
|
|
return <span className="whitespace-nowrap">{formattedDate}</span>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: "Status",
|
|
cell: ({ row }) => {
|
|
const isActive = row.original.isActive;
|
|
const isDone = row.original.isDone;
|
|
|
|
let statusText = "";
|
|
if (isDone) {
|
|
statusText = "Selesai";
|
|
} else if (isActive) {
|
|
statusText = "Aktif";
|
|
} else {
|
|
statusText = "Nonaktif";
|
|
}
|
|
|
|
const statusColors: Record<string, string> = {
|
|
Aktif: "bg-primary/20 text-primary",
|
|
Selesai: "bg-success/20 text-success",
|
|
Nonaktif: "bg-gray-200 text-gray-500",
|
|
};
|
|
|
|
const statusStyles = statusColors[statusText] || "default";
|
|
|
|
return (
|
|
<Badge className={cn("rounded-full px-5", statusStyles)}>
|
|
{statusText}
|
|
</Badge>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
accessorKey: "action",
|
|
header: t("action", { defaultValue: "Action" }),
|
|
enableHiding: false,
|
|
cell: ({ row }) => {
|
|
const router = useRouter();
|
|
const createdById = row.original?.createdBy?.id;
|
|
const userId = Number(getCookiesDecrypt("uie"));
|
|
const MySwal = withReactContent(Swal);
|
|
const roleId = Number(getCookiesDecrypt("urie")) || 0;
|
|
const isTabTA = activeTab === "ta";
|
|
const isTabMabesKoor = activeTab === "mabes-koor";
|
|
|
|
const isCreator = Number(createdById) === Number(userId);
|
|
const canView = true;
|
|
|
|
const canEdit = (isTabTA || isTabMabesKoor) && isCreator;
|
|
|
|
const canDelete = (isTabTA || isTabMabesKoor) && isCreator;
|
|
|
|
const canUpload = activeTab === "mabes-koor";
|
|
|
|
async function deleteProcess(id: any) {
|
|
loading();
|
|
const resDelete = await deleteTaskTa(id);
|
|
|
|
if (resDelete?.error) {
|
|
error(resDelete.message);
|
|
return false;
|
|
}
|
|
success();
|
|
}
|
|
|
|
function success() {
|
|
MySwal.fire({
|
|
title: "Sukses",
|
|
icon: "success",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "OK",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
}
|
|
|
|
const TaskDelete = (id: any) => {
|
|
MySwal.fire({
|
|
title: "Hapus Data",
|
|
text: "",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#3085d6",
|
|
confirmButtonColor: "#d33",
|
|
confirmButtonText: "Hapus",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
deleteProcess(id);
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
// <DropdownMenu>
|
|
// <DropdownMenuTrigger asChild>
|
|
// <Button
|
|
// size="icon"
|
|
// className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
|
// >
|
|
// <span className="sr-only">Open menu</span>
|
|
// <MoreVertical className="h-4 w-4 text-default-800" />
|
|
// </Button>
|
|
// </DropdownMenuTrigger>
|
|
// <DropdownMenuContent className="p-0" align="end">
|
|
// {/* {(roleId == 11 || roleId == 12 || roleId == 19) && ( */}
|
|
// {(roleId == 11 ||
|
|
// roleId == 12 ||
|
|
// roleId == 19 ||
|
|
// roleId == 3) && (
|
|
// <Link href={`/contributor/task-ta/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>
|
|
// </Link>
|
|
// )}
|
|
// {roleId == 11 ||
|
|
// (roleId == 3 && (
|
|
// <Link href={`/contributor/task-ta/update/${row.original.id}`}>
|
|
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
// <SquarePen className="w-4 h-4 me-1.5" />
|
|
// Edit
|
|
// </DropdownMenuItem>
|
|
// </Link>
|
|
// ))}
|
|
// {(roleId == 12 || roleId == 19) && (
|
|
// <Link
|
|
// href={`/contributor/task-ta/upload-task/${row.original.id}`}
|
|
// >
|
|
// <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
// <Upload className="w-4 h-4 me-1.5" />
|
|
// Upload Tugas
|
|
// </DropdownMenuItem>
|
|
// </Link>
|
|
// )}
|
|
// {roleId == 11 ||
|
|
// (roleId == 3 && (
|
|
// <DropdownMenuItem
|
|
// onClick={() => TaskDelete(row.original.id)}
|
|
// 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
|
|
// </DropdownMenuItem>
|
|
// ))}
|
|
// </DropdownMenuContent>
|
|
// </DropdownMenu>
|
|
<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 align="end" className="p-0">
|
|
{/* VIEW */}
|
|
{/* <Link href={`/contributor/task-ta/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>
|
|
</Link> */}
|
|
{/* VIEW */}
|
|
<Link
|
|
href={
|
|
activeTab === "special"
|
|
? `/contributor/task/detail/${row.original.id}`
|
|
: `/contributor/task-ta/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>
|
|
</Link>
|
|
{roleId === 19 && (
|
|
<Link
|
|
href={`/contributor/task-ta/upload-task/${row.original.id}`}
|
|
>
|
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
<Upload className="w-4 h-4 me-1.5" />
|
|
Upload Tugas
|
|
</DropdownMenuItem>
|
|
</Link>
|
|
)}
|
|
|
|
{/* UPLOAD (MABES → KOOR TAB) */}
|
|
{activeTab === "mabes-koor" && roleId === 11 && (
|
|
<Link
|
|
href={`/contributor/task-ta/upload-task/${row.original.id}`}
|
|
>
|
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
<Upload className="w-4 h-4 me-1.5" />
|
|
Upload Tugas
|
|
</DropdownMenuItem>
|
|
</Link>
|
|
)}
|
|
|
|
{/* EDIT (TAB TA & CREATOR ONLY) */}
|
|
{canEdit && (
|
|
<Link href={`/contributor/task-ta/update/${row.original.id}`}>
|
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
<SquarePen className="w-4 h-4 me-1.5" />
|
|
Edit
|
|
</DropdownMenuItem>
|
|
</Link>
|
|
)}
|
|
|
|
{/* DELETE (TAB TA & CREATOR ONLY) */}
|
|
{canDelete && (
|
|
<DropdownMenuItem
|
|
onClick={() => TaskDelete(row.original.id)}
|
|
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
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
return columns;
|
|
};
|
|
|
|
export default useTableColumns;
|