rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-06-05 22:06:03 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

added documentation for table components

Browse Source
This commit is contained in:
Nick A 2024-10-22 16:32:42 -04:00
parent e284acde02
commit f679a90abb
4 changed files with 120 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
compass/components/Table/ResourceIndex.tsx
View File

@ -8,6 +8,10 @@ import TagsInput from "@/components/TagsInput/Index";
import Resource from "@/utils/models/Resource"; import Resource from "@/utils/models/Resource";
import { DataPoint } from "@/components/Table/Table"; import { DataPoint } from "@/components/Table/Table";
/**
* Table componenet used for displaying resources
* @param props.resources List of resources to be displayed by the table
*/
export default function ResourceTable({ resources }: { resources: Resource[] }) { export default function ResourceTable({ resources }: { resources: Resource[] }) {
const columnHelper = createColumnHelper<Resource>(); const columnHelper = createColumnHelper<Resource>();
const [data, setData] = useState<DataPoint[]>([...resources]); const [data, setData] = useState<DataPoint[]>([...resources]);

206
compass/components/Table/ServiceIndex.tsx
View File

@ -1,101 +1,105 @@
import { Bars2Icon } from "@heroicons/react/24/solid"; import { Bars2Icon } from "@heroicons/react/24/solid";
import { useState } from "react"; import { useState } from "react";
import useTagsHandler from "@/components/TagsInput/TagsHandler"; import useTagsHandler from "@/components/TagsInput/TagsHandler";
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"; import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
import { Table } from "@/components/Table/Table"; import { Table } from "@/components/Table/Table";
import { RowOpenAction } from "@/components/Table/RowOpenAction"; import { RowOpenAction } from "@/components/Table/RowOpenAction";
import TagsInput from "@/components/TagsInput/Index"; import TagsInput from "@/components/TagsInput/Index";
import Service from "@/utils/models/Service"; import Service from "@/utils/models/Service";
import { DataPoint } from "@/components/Table/Table"; import { DataPoint } from "@/components/Table/Table";
export default function ServiceTable({ services }: { services: Service[] }) { /**
const columnHelper = createColumnHelper<Service>(); * Table componenet used for displaying services
const [data, setData] = useState<DataPoint[]>([...services]); * @param props.services List of services to be displayed by the table
*/
// TODO: Update preset options for services export default function ServiceTable({ services }: { services: Service[] }) {
const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([ const columnHelper = createColumnHelper<Service>();
"administrator", const [data, setData] = useState<DataPoint[]>([...services]);
"volunteer",
"employee", // TODO: Update preset options for services
]) const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
"administrator",
const handleRowUpdate = (updatedRow: DataPoint) => { "volunteer",
const dataIndex = data.findIndex((row) => row.id === updatedRow.id); "employee",
if (dataIndex !== -1) { ])
const updatedData = [...data];
updatedData[dataIndex] = updatedRow; const handleRowUpdate = (updatedRow: DataPoint) => {
setData(updatedData); const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
} if (dataIndex !== -1) {
}; const updatedData = [...data];
updatedData[dataIndex] = updatedRow;
const columns: ColumnDef<Service, any>[] = [ setData(updatedData);
columnHelper.accessor("name", { }
header: () => ( };
<>
<Bars2Icon className="inline align-top h-4" /> Name const columns: ColumnDef<Service, any>[] = [
</> columnHelper.accessor("name", {
), header: () => (
cell: (info) => ( <>
<RowOpenAction <Bars2Icon className="inline align-top h-4" /> Name
title={info.getValue()} </>
rowData={info.row.original} ),
onRowUpdate={handleRowUpdate} cell: (info) => (
/> <RowOpenAction
), title={info.getValue()}
}), rowData={info.row.original}
columnHelper.accessor("status", { onRowUpdate={handleRowUpdate}
header: () => ( />
<> ),
<Bars2Icon className="inline align-top h-4" /> Status }),
</> columnHelper.accessor("status", {
), header: () => (
cell: (info) => ( <>
<span className="ml-2 text-gray-500">{info.getValue()}</span> <Bars2Icon className="inline align-top h-4" /> Status
), </>
}), ),
columnHelper.accessor("program", { cell: (info) => (
header: () => ( <span className="ml-2 text-gray-500">{info.getValue()}</span>
<> ),
<Bars2Icon className="inline align-top h-4" /> Program }),
</> columnHelper.accessor("program", {
), header: () => (
cell: (info) => ( <>
<TagsInput <Bars2Icon className="inline align-top h-4" /> Program
presetValue={info.getValue()} </>
presetOptions={presetOptions} ),
setPresetOptions={setPresetOptions} cell: (info) => (
getTagColor={getTagColor} <TagsInput
/> presetValue={info.getValue()}
), presetOptions={presetOptions}
}), setPresetOptions={setPresetOptions}
columnHelper.accessor("requirements", { getTagColor={getTagColor}
header: () => ( />
<> ),
<Bars2Icon className="inline align-top h-4" /> Requirements }),
</> columnHelper.accessor("requirements", {
), header: () => (
cell: (info) => ( <>
// TODO: Setup different tag handler for requirements <Bars2Icon className="inline align-top h-4" /> Requirements
<TagsInput </>
presetValue={info.getValue()[0] !== "" ? info.getValue() : ["N/A"]} ),
presetOptions={presetOptions} cell: (info) => (
setPresetOptions={setPresetOptions} // TODO: Setup different tag handler for requirements
getTagColor={getTagColor} <TagsInput
/> presetValue={info.getValue()[0] !== "" ? info.getValue() : ["N/A"]}
), presetOptions={presetOptions}
}), setPresetOptions={setPresetOptions}
getTagColor={getTagColor}
columnHelper.accessor("summary", { />
header: () => ( ),
<> }),
<Bars2Icon className="inline align-top h-4" /> Summary
</> columnHelper.accessor("summary", {
), header: () => (
cell: (info) => ( <>
<span className="ml-2 text-gray-500">{info.getValue()}</span> <Bars2Icon className="inline align-top h-4" /> Summary
), </>
}), ),
]; cell: (info) => (
<span className="ml-2 text-gray-500">{info.getValue()}</span>
return <Table data={data} setData={setData} columns={columns} /> ),
}; }),
];
return <Table data={data} setData={setData} columns={columns} />
};

8
compass/components/Table/Table.tsx
View File

@ -47,7 +47,13 @@ const fuzzyFilter = (
return itemRank.passed; return itemRank.passed;
}; };
export const Table = ({ data, columns, setData }: TableProps) => { /**
* General componenet that holds shared functionality for any data table component
* @param props.data List of data, managed through state, to be held in the table
* @param props.setData State setter to be used for data manipulation methods
* @param props.columns Column definitions made with Tanstack columnHelper
*/
export const Table = ({ data, setData, columns }: TableProps) => {
const columnHelper = createColumnHelper<Resource>(); const columnHelper = createColumnHelper<Resource>();
useEffect(() => { useEffect(() => {
const sortedData = [...data].sort((a, b) => const sortedData = [...data].sort((a, b) =>

4
compass/components/Table/UserIndex.tsx
View File

@ -8,6 +8,10 @@ import TagsInput from "@/components/TagsInput/Index";
import User from "@/utils/models/User"; import User from "@/utils/models/User";
import { DataPoint } from "@/components/Table/Table"; import { DataPoint } from "@/components/Table/Table";
/**
* Table componenet used for displaying users
* @param props.users List of users to be displayed by the table
*/
export default function UserTable({ users }: { users: User[] }) { export default function UserTable({ users }: { users: User[] }) {
const columnHelper = createColumnHelper<User>(); const columnHelper = createColumnHelper<User>();
const [data, setData] = useState<DataPoint[]>([...users]); const [data, setData] = useState<DataPoint[]>([...users]);