Merge branch 'issue488'

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

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<ISyntax[]>)
+            .then(p => { this.setState({ syntaxes: p }); });
+    };
+
     fetchTags() {
         fetch("https://filterlists.com/api/v1/tags")
             .then(r => r.json() as Promise<ITag[]>)

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

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[]) =>
+    <select
+        onChange={(event: any) => props.onChange(event.target.value)}
+        style={{ width: "100%" }}
+        value={props.filter ? props.filter.value : "any"}>
+        <option value="any">Any</option>
+        {syntaxes.length > 0
+             ? syntaxes.sort((a, b) => a.name.localeCompare(b.name)).map(
+                 (s: ISyntax, i: number) => <option value={s.id} key={i}>{s.name}</option>)
+             : null}
+    </select>;
+
+const Cell = (listSyntaxId: number, syntaxes: ISyntax[]) =>
+    listSyntaxId
+    ? syntaxes.filter((s: ISyntax) => s.id === listSyntaxId)[0].name
+    : null;

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

src/FilterLists.Web/ClientApp/modules/home/interfaces/ISyntax.ts

@@ -0,0 +1,6 @@
+export interface ISyntax {
+    id: number;
+    filterListIds: number[];
+    name: string;
+    softwareIds: number[];
+};

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