diff --git a/src/FilterLists.Web/src/components/ListInfoDrawer.tsx b/src/FilterLists.Web/src/components/ListInfoDrawer.tsx
index f665103c9..41c6b9de1 100644
--- a/src/FilterLists.Web/src/components/ListInfoDrawer.tsx
+++ b/src/FilterLists.Web/src/components/ListInfoDrawer.tsx
@@ -63,7 +63,8 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
{props.syntax &&
}
+ definitionUrl={props.syntax.definitionUrl}
+ showLabel={true} />}
diff --git a/src/FilterLists.Web/src/components/SyntaxTag.tsx b/src/FilterLists.Web/src/components/SyntaxTag.tsx
index be50e6412..159442926 100644
--- a/src/FilterLists.Web/src/components/SyntaxTag.tsx
+++ b/src/FilterLists.Web/src/components/SyntaxTag.tsx
@@ -4,18 +4,19 @@ import * as React from 'react';
interface Props {
name: string;
definitionUrl: string;
+ showLabel?: boolean;
};
export const SyntaxTag = (props: Props) =>
props.name
- ? <>
-
Syntax:
+ ?
+ {props.showLabel && Syntax:
}
- >
+
: null;
const TagContents = (props: Props) =>
diff --git a/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx b/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx
index 066bfac9f..33d9f6281 100644
--- a/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx
+++ b/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx
@@ -11,6 +11,7 @@ import { License } from '../../interfaces/License';
import { List } from '../../interfaces/List';
import { Maintainer } from '../../interfaces/Maintainer';
import { Software } from '../../interfaces/Software';
+import { Syntax } from '../../interfaces/Syntax';
import { Tag as TagInterface } from '../../interfaces/Tag';
import { nameof } from '../../utils';
import { Description } from '../Description';
@@ -18,6 +19,7 @@ import { LanguageCloud } from '../languageCloud';
import { ListInfoButton } from '../ListInfoButton';
import { MaintainerCloud } from '../maintainerCloud';
import { SoftwareCloud, SoftwareIcon } from '../softwareCloud';
+import { SyntaxTag } from '../SyntaxTag';
import { TagCloud } from '../tagCloud';
import { arraySorter } from './arraySorter';
import styles from './ListsTable.module.css';
@@ -28,11 +30,12 @@ interface Props {
licenses: License[];
maintainers: Maintainer[];
software: Software[];
+ syntaxes: Syntax[];
tags: TagInterface[];
};
export const ListsTable = (props: RouteComponentProps & Props) => {
- const { lists, languages, licenses, maintainers, software, tags, ...routeComponentProps } = props;
+ const { lists, languages, licenses, maintainers, software, syntaxes, tags, ...routeComponentProps } = props;
const tablePageSize = useTablePageSizer();
const searchNameColumn = useSearchColumnFilter(nameof("name"));
const searchDescriptionColumn = useSearchColumnFilter(nameof("description"));
@@ -116,6 +119,39 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
syntaxId
? s.syntaxIds.includes(syntaxId))} />
: null} />}
+ {tablePageSize.isNarrowWindow
+ ? null
+ :
+ title="Syntax"
+ key="Syntax"
+ dataIndex={nameof("syntaxId")}
+ sorter={(a, b) => {
+ const syntaxA = syntaxes.find(s => s.id === a.syntaxId);
+ const syntaxB = syntaxes.find(s => s.id === b.syntaxId);
+ return syntaxA
+ ? syntaxB
+ ? syntaxA.name.localeCompare(syntaxB.name)
+ : -1
+ : 1;
+ }}
+ width={254}
+ className={styles.nogrow}
+ filters={syntaxes.map(s => ({
+ text: <>
+
+ ({visibleLists.filter(l => l.syntaxId && l.syntaxId === s.id).length})
+ >,
+ value: s.id.toString()
+ }))}
+ onFilter={(value, record) => record.syntaxId
+ ? record.syntaxId.toString() === value
+ : false}
+ render={(syntaxId: number) => {
+ const syntax = syntaxes.find(s => s.id === syntaxId);
+ return syntax
+ ?
+ : null
+ }} />}
{tablePageSize.isNarrowWindow
? null
:
diff --git a/src/FilterLists.Web/src/components/listsTable/ListsTableHoc.tsx b/src/FilterLists.Web/src/components/listsTable/ListsTableHoc.tsx
index 7a047ee2a..6b082fd59 100644
--- a/src/FilterLists.Web/src/components/listsTable/ListsTableHoc.tsx
+++ b/src/FilterLists.Web/src/components/listsTable/ListsTableHoc.tsx
@@ -21,6 +21,7 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
licenses={licenses}
maintainers={maintainers}
software={software}
+ syntaxes={syntaxes}
tags={tags}
{...props} />