rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-09 14:00:15 -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 { 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[] }) {
const columnHelper = createColumnHelper<Resource>();
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 { useState } from "react";
import useTagsHandler from "@/components/TagsInput/TagsHandler";
import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
import { Table } from "@/components/Table/Table";
import { RowOpenAction } from "@/components/Table/RowOpenAction";
import TagsInput from "@/components/TagsInput/Index";
import Service from "@/utils/models/Service";
import { DataPoint } from "@/components/Table/Table";
export default function ServiceTable({ services }: { services: Service[] }) {
const columnHelper = createColumnHelper<Service>();
const [data, setData] = useState<DataPoint[]>([...services]);
// TODO: Update preset options for services
const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
"administrator",
"volunteer",
"employee",
])
const handleRowUpdate = (updatedRow: DataPoint) => {
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
if (dataIndex !== -1) {
const updatedData = [...data];
updatedData[dataIndex] = updatedRow;
setData(updatedData);
}
};
const columns: ColumnDef<Service, any>[] = [
columnHelper.accessor("name", {
header: () => (
<>
<Bars2Icon className="inline align-top h-4" /> Name
</>
),
cell: (info) => (
<RowOpenAction
title={info.getValue()}
rowData={info.row.original}
onRowUpdate={handleRowUpdate}
/>
),
}),
columnHelper.accessor("status", {
header: () => (
<>
<Bars2Icon className="inline align-top h-4" /> Status
</>
),
cell: (info) => (
<span className="ml-2 text-gray-500">{info.getValue()}</span>
),
}),
columnHelper.accessor("program", {
header: () => (
<>
<Bars2Icon className="inline align-top h-4" /> Program
</>
),
cell: (info) => (
<TagsInput
presetValue={info.getValue()}
presetOptions={presetOptions}
setPresetOptions={setPresetOptions}
getTagColor={getTagColor}
/>
),
}),
columnHelper.accessor("requirements", {
header: () => (
<>
<Bars2Icon className="inline align-top h-4" /> Requirements
</>
),
cell: (info) => (
// TODO: Setup different tag handler for requirements
<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
</>
),
cell: (info) => (
<span className="ml-2 text-gray-500">{info.getValue()}</span>
),
}),
];
return <Table data={data} setData={setData} columns={columns} />
};
import { Bars2Icon } from "@heroicons/react/24/solid";
import { useState } from "react";
import useTagsHandler from "@/components/TagsInput/TagsHandler";
import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
import { Table } from "@/components/Table/Table";
import { RowOpenAction } from "@/components/Table/RowOpenAction";
import TagsInput from "@/components/TagsInput/Index";
import Service from "@/utils/models/Service";
import { DataPoint } from "@/components/Table/Table";
/**
* Table componenet used for displaying services
* @param props.services List of services to be displayed by the table
*/
export default function ServiceTable({ services }: { services: Service[] }) {
const columnHelper = createColumnHelper<Service>();
const [data, setData] = useState<DataPoint[]>([...services]);
// TODO: Update preset options for services
const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
"administrator",
"volunteer",
"employee",
])
const handleRowUpdate = (updatedRow: DataPoint) => {
const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
if (dataIndex !== -1) {
const updatedData = [...data];
updatedData[dataIndex] = updatedRow;
setData(updatedData);
}
};
const columns: ColumnDef<Service, any>[] = [
columnHelper.accessor("name", {
header: () => (
<>
<Bars2Icon className="inline align-top h-4" /> Name
</>
),
cell: (info) => (
<RowOpenAction
title={info.getValue()}
rowData={info.row.original}
onRowUpdate={handleRowUpdate}
/>
),
}),
columnHelper.accessor("status", {
header: () => (
<>
<Bars2Icon className="inline align-top h-4" /> Status
</>
),
cell: (info) => (
<span className="ml-2 text-gray-500">{info.getValue()}</span>
),
}),
columnHelper.accessor("program", {
header: () => (
<>
<Bars2Icon className="inline align-top h-4" /> Program
</>
),
cell: (info) => (
<TagsInput
presetValue={info.getValue()}
presetOptions={presetOptions}
setPresetOptions={setPresetOptions}
getTagColor={getTagColor}
/>
),
}),
columnHelper.accessor("requirements", {
header: () => (
<>
<Bars2Icon className="inline align-top h-4" /> Requirements
</>
),
cell: (info) => (
// TODO: Setup different tag handler for requirements
<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
</>
),
cell: (info) => (
<span className="ml-2 text-gray-500">{info.getValue()}</span>
),
}),
];
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;
};
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>();
useEffect(() => {
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 { 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[] }) {
const columnHelper = createColumnHelper<User>();
const [data, setData] = useState<DataPoint[]>([...users]);