Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 2x 416x 15x 15x 22x 416x 416x 416x 416x 416x 416x 416x 416x 416x 416x 416x 416x 15x | import SectionsTableBase from "main/components/SectionsTableBase";
import {
formatDays,
formatInstructors,
formatLocation,
formatTime,
formatStatus,
enrollmentFraction,
getSection,
getSectionField,
renderInfoLink,
renderDetailPageLink,
} from "main/utils/sectionUtils.jsx";
import { yyyyqToQyy } from "main/utils/quarterUtilities";
const formatGeneralEducation = (generalEducation) =>
(generalEducation ?? []).map((ge) => ge.geCode.trim()).join(", ");
export default function GEAreaTable({ generalEducation }) {
const testid = "GEAreaTable";
const columns = [
{
id: "expander", // Unique ID for the expander column
header: ({ table }) => (
<button
data-testid={`${testid}-expand-all-rows`}
{...{
onClick: table.getToggleAllRowsExpandedHandler(),
}}
>
{table.getIsAllRowsExpanded() ? "➖" : "➕"}
</button>
),
cell: ({ row }) =>
row.getCanExpand() ? (
<button
data-testid={`${testid}-row-${row.index}-expand-button`}
{...{
onClick: row.getToggleExpandedHandler(),
style: { cursor: "pointer" },
}}
>
{row.getIsExpanded() ? "➖" : "➕"}
</button>
) : (
<span data-testid={`${testid}-row-${row.index}-cannot-expand`} />
),
// This is important for indenting sub-rows
// We'll apply this style in the render, but you can define it here too
// For sub-rows, you might want to adjust cell content for clarity
},
{
header: "Quarter",
accessorKey: "quarter",
cell: ({ row }) =>
row.original.quarter ? yyyyqToQyy(row.original.quarter) : "",
},
{
accessorKey: "courseId",
header: "Course ID",
cell: ({ row }) => {
return renderDetailPageLink(row, testid);
},
},
{
accessorKey: "title",
header: "Title",
},
{
header: "GE Areas",
id: "generalEducation",
cell: ({ row }) => formatGeneralEducation(row.original.generalEducation),
},
{
header: "Status",
accessorKey: "status",
cell: ({ row }) => formatStatus(getSection(row)),
},
{
header: "Enrolled",
accessorKey: "enrolled",
cell: ({ row }) => enrollmentFraction(row),
},
{
id: "location",
header: "Location",
cell: ({ row }) => formatLocation(getSection(row).timeLocations),
},
{
id: "days",
header: "Days",
cell: ({ row }) => formatDays(getSection(row).timeLocations),
},
{
id: "time",
header: "Time",
cell: ({ row }) => formatTime(getSection(row).timeLocations),
},
{
id: "instructor",
header: "Instructor",
cell: ({ row }) => formatInstructors(getSection(row).instructors),
},
{
accessorKey: "enrollCode",
header: "Enroll Code",
cell: ({ row }) => getSectionField(row, "enrollCode"),
},
{
header: "Info",
id: "info",
cell: ({ row }) => renderInfoLink(row, testid),
},
];
return (
<>
<SectionsTableBase
columns={columns}
data={generalEducation}
testid={testid}
/>
</>
);
}
|