diff --git a/src/FilterLists.Web/ClientApp/modules/home/Home.tsx b/src/FilterLists.Web/ClientApp/modules/home/Home.tsx index 54b25ef9c..249320651 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/Home.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/Home.tsx @@ -6,6 +6,7 @@ const columnVisibilityDefaults: IColumnVisibility[] = [ { column: "Software", visible: true }, { column: "Tags", visible: true }, { column: "Languages", visible: true }, + { column: "Maintainers", visible: false }, { column: "Updated Date", visible: true } ]; diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx index fbfdb1501..f36e36a38 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx @@ -4,7 +4,7 @@ import "../../../../utils/loader.css"; import ReactTable from "react-table"; import "react-table/react-table.css"; import "./listsTable.css"; -import { DetailsButton, Languages, Name, Software, Tags, UpdatedDate } from "./columns"; +import { DetailsButton, Languages, Maintainers, Name, Software, Tags, UpdatedDate } from "./columns"; import { IListDetails } from "../../components/detailsExpander"; import { DetailsExpander } from "../../components"; @@ -26,6 +26,7 @@ export const ListsTable = (props: IProps) => showPageSizeOptions={false} columns={[ Name, + Maintainers(props.columnVisibility, props.maintainers), Software(props.columnVisibility, props.software), Tags(props.columnVisibility, props.tags), Languages(props.columnVisibility, props.languages), diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/Maintainers.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/Maintainers.tsx new file mode 100644 index 000000000..7ad1cdc2e --- /dev/null +++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/Maintainers.tsx @@ -0,0 +1,49 @@ +import * as React from "react"; +import { Column, Filter } from "react-table"; +import { IColumnVisibility, IMaintainer } from "../../../interfaces"; + +export const Maintainers = (columnVisibility: IColumnVisibility[], maintainers: IMaintainer[]) => +({ + Header: "Maintainers", + accessor: "maintainerIds", + filterable: true, + filterMethod: (f: Filter, r: any[]) => filterMethod(f, r, maintainers), + Filter: ({ filter, onChange }: any) => Filter({ onChange, filter }, maintainers), + Cell: (c: any) => Cell(c.value, maintainers), + width: 215, + headerClassName: "d-none d-md-block", + className: "d-none d-md-block", + show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Maintainers")[0].visible +} as Column); + +const filterMethod = (f: Filter, r: any[], maintainers: IMaintainer[]): boolean => { + const listMaintainerIds: number[] = r[f.id as any]; + if (f.value === "any") { + return true; + } else if (listMaintainerIds) { + const maintainerFiltered = maintainers.filter((m: IMaintainer) => m.id === parseInt(f.value))[0]; + return listMaintainerIds.indexOf(maintainerFiltered.id) > -1; + } else { + return false; + } +}; + +const Filter = (props: any, maintainers: IMaintainer[]) => + ; + +const Cell = (maintainerIds: number[], maintainers: IMaintainer[]) => + maintainerIds + ?
+ {maintainers.filter((m: IMaintainer) => maintainerIds.indexOf(m.id) > -1) + .map((m: IMaintainer, i: number) => {m.name})} +
+ : null; \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/index.ts b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/index.ts index 26e25dab1..d6e1cc65a 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/index.ts +++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/index.ts @@ -1,5 +1,6 @@ import { DetailsButton } from "./DetailsButton"; import { Languages } from "./Languages"; +import { Maintainers } from "./Maintainers"; import { Name } from "./Name"; import { Software } from "./Software"; import { Tags } from "./Tags"; @@ -8,6 +9,7 @@ import { UpdatedDate } from "./UpdatedDate"; export { DetailsButton, Languages, + Maintainers, Name, Software, Tags,