Update : Action Button in AssReq

This commit is contained in:
percyfikri 2024-11-05 14:55:37 +07:00
parent e242dda425
commit f4eb4dd1ef
3 changed files with 44 additions and 40 deletions

View File

@ -23,7 +23,7 @@ export default function DashboardTable<T>({ table }: Props<T>) {
{headerGroup.headers.map((header) => ( {headerGroup.headers.map((header) => (
<TableHead <TableHead
key={header.id} key={header.id}
className={`px-6 py-3 text-left text-sm font-medium text-muted-foreground ${header.column.columnDef.header === 'Status' ? 'text-center' : ''}`} className={`px-6 py-3 text-left text-sm font-medium text-muted-foreground ${header.column.columnDef.header === 'Status' ? 'text-center' : (header.column.columnDef.header === 'Aksi' && window.location.pathname === '/assessmentRequest') ? 'text-center' : ''}`}
style={{ style={{
maxWidth: `${header.column.columnDef.maxSize}px`, maxWidth: `${header.column.columnDef.maxSize}px`,
width: `${header.getSize()}`, width: `${header.getSize()}`,

View File

@ -70,6 +70,7 @@
:root { :root {
--primary-color: #2555FF; --primary-color: #2555FF;
--hover-primary-color: #0032e6;
--levelOne-color: #FF2F32; --levelOne-color: #FF2F32;
--levelTwo-color: #FE6939; --levelTwo-color: #FE6939;
--levelThree-color: #EED42D; --levelThree-color: #EED42D;

View File

@ -8,8 +8,13 @@ import { createColumnHelper } from "@tanstack/react-table";
import { Badge } from "@/shadcn/components/ui/badge"; import { Badge } from "@/shadcn/components/ui/badge";
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import StartAssessmentModal from "@/modules/assessmentRequest/modals/ConfirmModal"; import StartAssessmentModal from "@/modules/assessmentRequest/modals/ConfirmModal";
import { TbListCheck, TbClipboardText } from "react-icons/tb"; import { TbListCheck, TbClipboardText, TbChevronDown, TbChevronUp, TbChevronRight } from "react-icons/tb";
import { NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent } from "@/shadcn/components/ui/navigation-menu";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/shadcn/components/ui/dropdown-menu";
export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequest/")({ export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequest/")({
component: UsersPage, component: UsersPage,
@ -141,48 +146,46 @@ export default function UsersPage() {
}, },
}), }),
columnHelper.display({ columnHelper.display({
header: "Actions", header: "Aksi",
cell: (props) => { cell: (props) => {
const status = props.row.original.status; const status = props.row.original.status;
const assessmentId = props.row.original.assessmentId; // Retrieve the assessmentId from the data row const assessmentId = props.row.original.assessmentId; // Retrieve the assessmentId from the data row
const [isOpen, setIsOpen] = useState(false);
return ( return (
<div className="flex gap-2"> <div className="flex items-center justify-center">
{/* Button Create Assessment */} <DropdownMenu onOpenChange={(open) => setIsOpen(open)}>
{status === "selesai" ? ( <DropdownMenuTrigger asChild>
<Button variant={"secondary"} disabled><TbClipboardText className="mr-2" />Mulai Asesmen</Button> <Button variant="secondary" className="pl-4 pr-2 rounded-lg bg-[--primary-color] text-white hover:bg-[--hover-primary-color] hover:text-white">
) : status === "diterima" ? ( Pilihan
<Button onClick={() => handleOpenModal(assessmentId ?? '')}> {isOpen ? <TbChevronDown className="ml-10" /> : <TbChevronRight className="ml-10" />}
<TbClipboardText className="mr-2" /> </Button>
Mulai Asesmen </DropdownMenuTrigger>
</Button> <DropdownMenuContent align="start" className="w-full">
) : status === "dalam pengerjaan" ? ( <DropdownMenuItem
<Button onClick={() => { onClick={() => {
// Direct to assessment page without showing modal if (status === "diterima") {
const newUrl = `/assessment?id=${assessmentId}`; handleOpenModal(assessmentId ?? '');
window.open(newUrl, "_blank"); } else if (status === "dalam pengerjaan") {
}}> const newUrl = `/assessment?id=${assessmentId}`;
<TbClipboardText className="mr-2" /> window.open(newUrl, "_blank");
Lanjutkan Asesmen }
</Button> }}
) : ( disabled={!(status === "diterima" || status === "dalam pengerjaan")}
<Button variant={"secondary"} disabled><TbClipboardText className="mr-2" /> >
Mulai Asesmen <TbClipboardText className="mr-2" />
</Button> Mulai Asesmen
)} </DropdownMenuItem>
<DropdownMenuItem
{/* Button View Result */} onClick={() => status === "selesai" || status === "belum diverifikasi" ? handleViewResult(assessmentId ?? '') : null}
{status === "selesai" || status === "belum diverifikasi" ? ( disabled={!(status === "selesai" || status === "belum diverifikasi")}
<Button variant={"outline"} onClick={()=>handleViewResult(assessmentId ?? '')}> >
<TbListCheck className="mr-2" /> <TbListCheck className="mr-2" />
Lihat Hasil Lihat Hasil
</Button> </DropdownMenuItem>
) : ( </DropdownMenuContent>
<Button variant={"outline"} disabled><TbListCheck className="mr-2" /> </DropdownMenu>
Lihat Hasil </div>
</Button>
)}
</div>
); );
}, },
}), }),