diff --git a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx
index 65fa396cf..767983bb3 100644
--- a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx
+++ b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx
@@ -1,14 +1,16 @@
import { Table } from 'antd';
import React from 'react';
-import { Description, SubscribeButton, TagCloud } from '../../shared';
+import { Description, LanguageCloud, SubscribeButton, TagCloud } from '../../shared';
import { nameof } from '../../utils';
import styles from './AllListsTable.module.css';
+import { Language } from './Language';
import { List } from './List';
import { Tag } from './Tag';
interface State {
lists: List[];
+ languages: Language[];
tags: Tag[];
pageSize: number;
pageSizeOptions: string[];
@@ -20,6 +22,7 @@ export class AllListsTable extends React.Component<{}, State> {
super(props);
this.state = {
lists: [],
+ languages: [],
tags: [],
pageSize: 0,
pageSizeOptions: [],
@@ -40,6 +43,11 @@ export class AllListsTable extends React.Component<{}, State> {
.then(json => (json as List[]).sort((a, b) => a.name.localeCompare(b.name)))
.then(lists => { this.setState({ lists: lists }); })
+ fetch("/api/v1/languages")
+ .then(response => response.json())
+ .then(json => (json as Language[]).sort((a, b) => a.name.localeCompare(b.name)))
+ .then(languages => { this.setState({ languages: languages }); })
+
fetch("/api/v1/tags")
.then(response => response.json())
.then(json => (json as Tag[]).sort((a, b) => a.name.localeCompare(b.name)))
@@ -92,12 +100,15 @@ export class AllListsTable extends React.Component<{}, State> {
title="Languages"
dataIndex={nameof("languageIds")}
+ sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, this.state.languages)}
+ width={125}
className={styles.nogrow}
- render={(text: string) => {text}
} />
+ render={(languageIds: number[]) =>
+ languageIds ? languageIds.includes(l.id))} /> : null} />
title="Tags"
dataIndex={nameof("tagIds")}
- sorter={(a, b) => this.tagSorter(a.tagIds, b.tagIds, this.state.tags)}
+ sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, this.state.tags)}
width={275}
className={styles.nogrow}
render={(tagIds: number[]) =>
@@ -113,20 +124,26 @@ export class AllListsTable extends React.Component<{}, State> {
);
}
- private tagSorter = (a: number[], b: number[], tags: Tag[]): number =>
- a && a.length
- ? b && b.length
- ? a.length === b.length
- ? tags.filter((t: Tag) => a.indexOf(t.id) > -1).map((t: Tag) => t.name).join().toLowerCase() > tags.filter((t: Tag) => b.indexOf(t.id) > -1).map((t: Tag) => t.name).join().toLowerCase()
- ? 1
- : -1
- : a.length > b.length
- ? -1
- : 1
- : -1
- : 1;
-
componentWillUnmount() {
window.removeEventListener('resize', this.updatePageSize);
}
-}
\ No newline at end of file
+}
+
+interface ArraySortableEntity {
+ id: number;
+ name: string;
+}
+
+const arraySorter = (a: number[], b: number[], entities: ArraySortableEntity[]): number =>
+ a && a.length
+ ? b && b.length
+ ? a.length === b.length
+ ? entities.filter((e: ArraySortableEntity) => a.indexOf(e.id) > -1).map((e: ArraySortableEntity) => e.name).join().toLowerCase()
+ > entities.filter((e: ArraySortableEntity) => b.indexOf(e.id) > -1).map((e: ArraySortableEntity) => e.name).join().toLowerCase()
+ ? 1
+ : -1
+ : a.length > b.length
+ ? -1
+ : 1
+ : -1
+ : 1;
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/modules/allListsTable/Language.ts b/src/FilterLists.Web.V2/src/modules/allListsTable/Language.ts
new file mode 100644
index 000000000..c453f42a6
--- /dev/null
+++ b/src/FilterLists.Web.V2/src/modules/allListsTable/Language.ts
@@ -0,0 +1,6 @@
+export interface Language {
+ id: number;
+ filterListIds: number[];
+ iso6391: string;
+ name: string;
+};
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/shared/index.ts b/src/FilterLists.Web.V2/src/shared/index.ts
index 7ed61c7b7..ee6d73771 100644
--- a/src/FilterLists.Web.V2/src/shared/index.ts
+++ b/src/FilterLists.Web.V2/src/shared/index.ts
@@ -1,5 +1,6 @@
import { SubscribeButton } from './buttons';
import { Description } from './Description';
+import { LanguageCloud } from './languageCloud';
import { TagCloud } from './tagCloud';
-export { SubscribeButton, Description, TagCloud };
+export { SubscribeButton, Description, LanguageCloud, TagCloud };
diff --git a/src/FilterLists.Web.V2/src/shared/languageCloud/LanguageCloud.module.css b/src/FilterLists.Web.V2/src/shared/languageCloud/LanguageCloud.module.css
new file mode 100644
index 000000000..3bee840b6
--- /dev/null
+++ b/src/FilterLists.Web.V2/src/shared/languageCloud/LanguageCloud.module.css
@@ -0,0 +1,4 @@
+/* allow for 2nd row's tags' bottom border to not be chopped in AllListsTable */
+.grow {
+ max-height: none !important;
+}
diff --git a/src/FilterLists.Web.V2/src/shared/languageCloud/LanguageCloud.tsx b/src/FilterLists.Web.V2/src/shared/languageCloud/LanguageCloud.tsx
new file mode 100644
index 000000000..44c474942
--- /dev/null
+++ b/src/FilterLists.Web.V2/src/shared/languageCloud/LanguageCloud.tsx
@@ -0,0 +1,21 @@
+import { Tag } from 'antd';
+import React from 'react';
+
+import styles from './LanguageCloud.module.css';
+
+interface LanguageData {
+ iso6391: string;
+ name: string;
+};
+
+interface Props {
+ languages: LanguageData[]
+};
+
+export const LanguageCloud = (props: Props): JSX.Element | null =>
+ props.languages && props.languages.length
+ ?
+ {props.languages.map((l: LanguageData, i: number) =>
+ {l.iso6391})}
+
+ : null;
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/shared/languageCloud/index.ts b/src/FilterLists.Web.V2/src/shared/languageCloud/index.ts
new file mode 100644
index 000000000..063a12c8e
--- /dev/null
+++ b/src/FilterLists.Web.V2/src/shared/languageCloud/index.ts
@@ -0,0 +1,3 @@
+import { LanguageCloud } from './LanguageCloud';
+
+export { LanguageCloud };
diff --git a/src/FilterLists.Web.V2/src/shared/tagCloud/TagCloud.tsx b/src/FilterLists.Web.V2/src/shared/tagCloud/TagCloud.tsx
index cf45551f7..9c93523c7 100644
--- a/src/FilterLists.Web.V2/src/shared/tagCloud/TagCloud.tsx
+++ b/src/FilterLists.Web.V2/src/shared/tagCloud/TagCloud.tsx
@@ -12,11 +12,10 @@ interface Props {
tags: TagData[]
};
-export const TagCloud = (props: Props): JSX.Element | null => {
- return props.tags && props.tags.length
+export const TagCloud = (props: Props): JSX.Element | null =>
+ props.tags && props.tags.length
?
{props.tags.map((t: TagData, i: number) =>
{t.name})}
- : null;
-};
\ No newline at end of file
+ : null;
\ No newline at end of file