add Maintainers column. closes #455

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 }
 ];
 

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),

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[]) =>
+    <select
+        onChange={(event: any) => props.onChange(event.target.value)}
+        style={{ width: "100%" }}
+        value={props.filter ? props.filter.value : "any"}>
+        <option value="any">Any</option>
+        {maintainers.length > 0
+             ? maintainers.sort((a, b) => a.name.localeCompare(b.name))
+             .map((m: IMaintainer, i: number) => <option value={m.id} key={i}>{m.name}</option>)
+             : null}
+    </select>;
+
+const Cell = (maintainerIds: number[], maintainers: IMaintainer[]) =>
+    maintainerIds
+    ? <div className="fl-tag-container">
+          {maintainers.filter((m: IMaintainer) => maintainerIds.indexOf(m.id) > -1)
+              .map((m: IMaintainer, i: number) => <span key={i}>{m.name}</span>)}
+      </div>
+    : null;

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,