Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //bugs and wensen table
- import { WorkItem } from "@/app/(licentie)/interfaces";
- import {
- Badge,
- DataGrid,
- DataGridBody,
- DataGridCell,
- DataGridHeader,
- DataGridHeaderCell,
- DataGridRow,
- Menu,
- MenuItem,
- MenuList,
- MenuPopover,
- MenuTrigger,
- TableCellLayout,
- TableColumnDefinition,
- Tooltip,
- createTableColumn,
- } from "@fluentui/react-components";
- import { useRef } from "react";
- import bugLogo from "../../../../../public/assets/Bug Rood.svg";
- import wensLogo from "../../../../../public/assets/wens.svg";
- import Image from "next/image";
- import { useAppContext } from "@/app/context";
- import Link from "next/link";
- import { getImageFromLicentie } from "@/core/utils/functions";
- import {DataGridProps} from "@fluentui-contrib/react-data-grid-react-window";
- const columnSizingOptions = {
- code: {
- minWidth: 80,
- defaultWidth: 100,
- },
- title: {
- minWidth: 300,
- defaultWidth: 600,
- },
- type: {
- minWidth: 150,
- defaultWidth: 200,
- },
- week: {
- minWidth: 120,
- defaultWidth: 180,
- },
- link: {
- minWidth: 120,
- defaultWidth: 120,
- },
- };
- function BugsWensenTable({ workItems, sortState, onSortChange }: { workItems: WorkItem[], sortState: Parameters<NonNullable<DataGridProps["onSortChange"]>>[1];
- onSortChange: (e: React.MouseEvent, sortState: Parameters<NonNullable<DataGridProps["onSortChange"]>>[1]) => void; }) {
- const { userData } = useAppContext();
- const refMap = useRef<Record<string, HTMLElement | null>>({});
- const getIterationPath = (item: WorkItem) => {
- const parts = item.fullIteration!.split("\\");
- const waveString = parts[2];
- return waveString;
- };
- const newLicentieString = (path: string) => {
- const modifiedString = path.replace(/[^\\]+\\[\d.]+\s*/g, "");
- return getImageFromLicentie(modifiedString);
- };
- const dataBalkcolumns: TableColumnDefinition<WorkItem>[] = [
- createTableColumn<WorkItem>({
- columnId: "code",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Code";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout>
- <Link
- href={`https://dev.azure.com/databalk/Debatic/_workitems/edit/${item.id}/`}
- target="_blank"
- style={{
- textDecoration: "underline",
- color: "#0e5f7f",
- }}
- >
- <Badge
- color="informative"
- style={{
- textDecoration: "underline",
- }}
- >
- {item.id}
- </Badge>
- </Link>
- </TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "title",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Title";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout>
- <Link
- href={`/ontwikkeling/${item.id}`}
- style={{
- color: "#0e5f7f",
- textDecoration: "underline",
- }}
- >
- {item.title}
- </Link>
- </TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "type",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Type";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout
- media={
- <Image
- src={item.type == "Product Backlog Item" ? wensLogo : bugLogo}
- width={30}
- height={30}
- alt="Bug icon"
- />
- }
- ></TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "fibo",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Fibo";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout>
- <Badge>{item.fibo ?? -1}</Badge>
- </TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "path",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Licentie";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout>
- <Tooltip
- content={newLicentieString(item?.path!).name}
- relationship="label"
- >
- <img
- src={newLicentieString(item?.path!).logo}
- alt="zaken-licentie"
- width={25}
- height={25}
- />
- </Tooltip>
- </TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "iteration",
- renderHeaderCell: () => {
- return "Versie";
- },
- renderCell: (item) => {
- return <TableCellLayout>{getIterationPath(item)}</TableCellLayout>;
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "full_iteration",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Sprint";
- },
- renderCell: (item) => {
- return <TableCellLayout>{item.iteration}</TableCellLayout>;
- },
- }),
- ];
- const columns: TableColumnDefinition<WorkItem>[] = [
- createTableColumn<WorkItem>({
- columnId: "code",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Code";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout>
- <Badge color="informative">{item.id}</Badge>
- </TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "title",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Title";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout>
- <Link
- href={`/ontwikkeling/${item.id}`}
- style={{
- color: "#0e5f7f",
- textDecoration: "underline",
- }}
- >
- {item.title}
- </Link>
- </TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "type",
- renderHeaderCell: () => {
- return "Type";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout
- media={
- <Image
- src={item.type == "Product Backlog Item" ? wensLogo : bugLogo}
- width={30}
- height={30}
- alt="Bug icon"
- />
- }
- ></TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "fibo",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Fibo";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout>
- <Badge>{item.fibo ?? -1}</Badge>
- </TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "path",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Licentie";
- },
- renderCell: (item) => {
- return (
- <TableCellLayout>
- <Tooltip
- content={newLicentieString(item?.path!).name}
- relationship="label"
- >
- <img
- src={newLicentieString(item?.path!).logo}
- alt="zaken-licentie"
- width={25}
- height={25}
- />
- </Tooltip>
- </TableCellLayout>
- );
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "iteration",
- renderHeaderCell: () => {
- return "Versie";
- },
- renderCell: (item) => {
- return <TableCellLayout>{getIterationPath(item)}</TableCellLayout>;
- },
- }),
- createTableColumn<WorkItem>({
- columnId: "full_iteration",
- compare: (a,b) => 0,
- renderHeaderCell: () => {
- return "Sprint";
- },
- renderCell: (item) => {
- return <TableCellLayout>{item.iteration}</TableCellLayout>;
- },
- }),
- ];
- return (
- <div
- style={{
- backgroundColor: "white",
- overflowY: "hidden",
- }}
- >
- {workItems.length == 0 ? (
- <div
- style={{
- padding: "20px 30px",
- textAlign: "center",
- fontSize: "1.1rem",
- }}
- >
- Geen bugs of wensen
- </div>
- ) : (
- <DataGrid
- items={workItems}
- columns={
- userData?.mail.includes("databalk") ? dataBalkcolumns : columns
- }
- sortable
- selectionMode="multiselect"
- resizableColumns
- columnSizingOptions={columnSizingOptions}
- sortState={sortState}
- onSortChange={onSortChange}
- >
- <DataGridHeader>
- <DataGridRow selectionCell={{ "aria-label": "Select all rows" }}>
- {({ renderHeaderCell, columnId }, dataGrid) =>
- dataGrid.resizableColumns ? (
- <Menu openOnContext>
- <MenuTrigger>
- <DataGridHeaderCell
- ref={(el) => (refMap.current[columnId] = el)}
- >
- {renderHeaderCell()}
- </DataGridHeaderCell>
- </MenuTrigger>
- <MenuPopover>
- <MenuList>
- <MenuItem
- onClick={dataGrid.columnSizing_unstable.enableKeyboardMode(
- columnId
- )}
- >
- Keyboard Column Resizing
- </MenuItem>
- </MenuList>
- </MenuPopover>
- </Menu>
- ) : (
- <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
- )
- }
- </DataGridRow>
- </DataGridHeader>
- <DataGridBody<WorkItem>>
- {({ item, rowId }) => (
- <DataGridRow<WorkItem>
- key={rowId}
- selectionCell={{ "aria-label": "Select row" }}
- >
- {({ renderCell }) => (
- <DataGridCell>{renderCell(item)}</DataGridCell>
- )}
- </DataGridRow>
- )}
- </DataGridBody>
- </DataGrid>
- )}
- </div>
- );
- }
- export default BugsWensenTable;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement