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