From da0586ef797cf9f256bf0fbd7000d2f3097cca06 Mon Sep 17 00:00:00 2001 From: "Collin M. Barrett" Date: Fri, 28 Sep 2018 20:11:41 -0500 Subject: [PATCH] wip add Syntax to table filtering affects Software column due to shared accessor... ref #488 --- .../ClientApp/modules/home/Home.tsx | 4 +- .../ClientApp/modules/home/HomeContainer.tsx | 11 ++++- .../home/components/listsTable/ListsTable.tsx | 6 ++- .../components/listsTable/columns/Syntax.tsx | 45 +++++++++++++++++++ .../components/listsTable/columns/index.ts | 2 + .../modules/home/interfaces/ISyntax.ts | 6 +++ .../modules/home/interfaces/index.ts | 3 +- 7 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/Syntax.tsx create mode 100644 src/FilterLists.Web/ClientApp/modules/home/interfaces/ISyntax.ts diff --git a/src/FilterLists.Web/ClientApp/modules/home/Home.tsx b/src/FilterLists.Web/ClientApp/modules/home/Home.tsx index 165f7965d..8bc7ad97d 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/Home.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/Home.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { IColumnVisibility, ILanguage, ILicense, IList, IMaintainer, ISoftware, ITag } from "./interfaces"; +import { IColumnVisibility, ILanguage, ILicense, IList, IMaintainer, ISoftware, ISyntax, ITag } from "./interfaces"; import { ListsTable, Oneliner } from "./components"; const columnVisibilityDefaults: IColumnVisibility[] = [ @@ -8,6 +8,7 @@ const columnVisibilityDefaults: IColumnVisibility[] = [ { column: "Tags", visible: true }, { column: "Updated", visible: false }, { column: "Rules", visible: false }, + { column: "Syntax", visible: false }, { column: "License", visible: false }, { column: "Maintainers", visible: false } ]; @@ -19,6 +20,7 @@ interface IProps { maintainers: IMaintainer[]; ruleCount: number; software: ISoftware[]; + syntaxes: ISyntax[]; tags: ITag[]; }; diff --git a/src/FilterLists.Web/ClientApp/modules/home/HomeContainer.tsx b/src/FilterLists.Web/ClientApp/modules/home/HomeContainer.tsx index 4859bb74e..ea15d3818 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/HomeContainer.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/HomeContainer.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import "isomorphic-fetch"; -import { ILanguage, ILicense, IList, IMaintainer, ISoftware, ITag } from "./interfaces"; +import { ILanguage, ILicense, IList, IMaintainer, ISoftware, ISyntax, ITag } from "./interfaces"; import { Home } from "./Home"; interface IState { @@ -10,6 +10,7 @@ interface IState { maintainers: IMaintainer[]; ruleCount: number; software: ISoftware[]; + syntaxes: ISyntax[]; tags: ITag[]; }; @@ -23,6 +24,7 @@ export class HomeContainer extends React.Component<{}, IState> { maintainers: [], ruleCount: 0, software: [], + syntaxes: [], tags: [] }; } @@ -33,6 +35,7 @@ export class HomeContainer extends React.Component<{}, IState> { this.fetchLists(); this.fetchMaintainers(); this.fetchSoftware(); + this.fetchSyntaxes(); this.fetchTags(); this.fetchRuleCount(); }; @@ -67,6 +70,12 @@ export class HomeContainer extends React.Component<{}, IState> { .then(p => { this.setState({ software: p }); }); }; + fetchSyntaxes() { + fetch("https://filterlists.com/api/v1/syntaxes") + .then(r => r.json() as Promise) + .then(p => { this.setState({ syntaxes: p }); }); + }; + fetchTags() { fetch("https://filterlists.com/api/v1/tags") .then(r => r.json() as Promise) 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 1dfdd9b73..74f225098 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx @@ -1,10 +1,10 @@ import * as React from "react"; -import { IColumnVisibility, ILanguage, ILicense, IList, IMaintainer, ISoftware, ITag } from "../../interfaces"; +import { IColumnVisibility, ILanguage, ILicense, IList, IMaintainer, ISoftware, ISyntax, ITag } from "../../interfaces"; import "../../../../utils/loader.css"; import ReactTable from "react-table"; import "react-table/react-table.css"; import "./listsTable.css"; -import { DetailsButton, Languages, License, Maintainers, Name, RuleCount, Software, Tags, UpdatedDate } from +import { DetailsButton, Languages, License, Maintainers, Name, RuleCount, Software, Syntax, Tags, UpdatedDate } from "./columns"; import { IListDetails } from "../../components/detailsExpander"; import { DetailsExpander } from "../../components"; @@ -15,6 +15,7 @@ interface IProps { lists: IList[]; maintainers: IMaintainer[]; software: ISoftware[]; + syntaxes: ISyntax[]; tags: ITag[]; columnVisibility: IColumnVisibility[]; pageSize: number; @@ -33,6 +34,7 @@ export const ListsTable = (props: IProps) => Tags(props.columnVisibility, props.tags), UpdatedDate(props.columnVisibility), RuleCount(props.columnVisibility), + Syntax(props.columnVisibility, props.syntaxes), License(props.columnVisibility, props.licenses), Maintainers(props.columnVisibility, props.maintainers), DetailsButton diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/Syntax.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/Syntax.tsx new file mode 100644 index 000000000..dce84ff9f --- /dev/null +++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/Syntax.tsx @@ -0,0 +1,45 @@ +import * as React from "react"; +import { Column, Filter } from "react-table"; +import { IColumnVisibility, ISyntax } from "../../../interfaces"; + +export const Syntax = (columnVisibility: IColumnVisibility[], syntaxes: ISyntax[]) => ({ + Header: "Syntax", + accessor: "syntaxId", + filterable: true, + filterMethod: (f: Filter, r: any[]) => filterMethod(f, r, syntaxes), + Filter: ({ filter, onChange }: any) => Filter({ onChange, filter }, syntaxes), + Cell: (c: any) => Cell(c.value, syntaxes), + width: 155, + show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Syntax")[0].visible +} as Column); + +const filterMethod = (f: Filter, r: any[], syntaxes: ISyntax[]): boolean => { + const listSyntaxId: number = r[f.id as any]; + if (f.value === "any") { + return true; + } else if (listSyntaxId) { + const syntaxFiltered = syntaxes.filter((s: ISyntax) => s.id === parseInt(f.value)); + return syntaxFiltered[0].id + ? syntaxFiltered[0].id === listSyntaxId + : false; + } else { + return false; + } +}; + +const Filter = (props: any, syntaxes: ISyntax[]) => + ; + +const Cell = (listSyntaxId: number, syntaxes: ISyntax[]) => + listSyntaxId + ? syntaxes.filter((s: ISyntax) => s.id === listSyntaxId)[0].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 ed9f55949..8e73ae5b6 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 @@ -5,6 +5,7 @@ import { Maintainers } from "./Maintainers"; import { Name } from "./Name"; import { RuleCount } from "./RuleCount"; import { Software } from "./Software"; +import { Syntax } from "./Syntax"; import { Tags } from "./Tags"; import { UpdatedDate } from "./UpdatedDate"; @@ -16,6 +17,7 @@ export { Name, RuleCount, Software, + Syntax, Tags, UpdatedDate }; \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/modules/home/interfaces/ISyntax.ts b/src/FilterLists.Web/ClientApp/modules/home/interfaces/ISyntax.ts new file mode 100644 index 000000000..cfba374af --- /dev/null +++ b/src/FilterLists.Web/ClientApp/modules/home/interfaces/ISyntax.ts @@ -0,0 +1,6 @@ +export interface ISyntax { + id: number; + filterListIds: number[]; + name: string; + softwareIds: number[]; +}; \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/modules/home/interfaces/index.ts b/src/FilterLists.Web/ClientApp/modules/home/interfaces/index.ts index 3994a1711..6a72c288c 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/interfaces/index.ts +++ b/src/FilterLists.Web/ClientApp/modules/home/interfaces/index.ts @@ -4,9 +4,9 @@ import { ILicense } from "./ILicense"; import { IList } from "./IList"; import { IMaintainer } from "./IMaintainer"; import { ISoftware } from "./ISoftware"; +import { ISyntax } from "./ISyntax"; import { ITag } from "./ITag"; - export { IColumnVisibility, ILanguage, @@ -14,5 +14,6 @@ export { IList, IMaintainer, ISoftware, + ISyntax, ITag }; \ No newline at end of file