prehistoric-systems/FilterLists
1
0
Fork 0
mirror of https://github.com/collinbarrett/FilterLists.git synced 2026-03-11 09:04:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

separate ListsTable and ListDetailsDrawer and wrap in Fragment

Browse source
This commit is contained in:
Collin M. Barrett 2019-08-31 10:09:03 -05:00
parent 1388300b20
commit 44afc4aceb
1 changed files with 74 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
View file

@ -23,74 +23,80 @@ export const ListsTable = (props: RouteComponentProps) => {
const tags = useTags();
const tablePageSize = useTablePageSizer();
const ListsTable = () =>
<Table<List>
dataSource={lists}
rowKey={record => record.id.toString()}
loading={lists.length ? false : true}
size="small"
pagination={{ size: "small", simple: true, style: { float: "left" }, pageSize: tablePageSize.pageSize }}
scroll={{ x: tablePageSize.isNarrowWindow ? undefined : 1200 }}>
<Table.Column<List>
title="Info"
dataIndex={nameof<List>("id")}
className={styles.nogrow}
fixed="left"
render={(_text: string, record: List) => <ListInfoButton list={record} {...props} />} />
<Table.Column<List>
title="Name"
dataIndex={nameof<List>("name")}
sorter={(a, b) => a.name.localeCompare(b.name)}
defaultSortOrder={"ascend"}
width={tablePageSize.isNarrowWindow ? undefined : 200}
className={styles.nogrow}
fixed="left"
render={(text: string) => <div>{text}</div>} />
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Description"
dataIndex={nameof<List>("description")}
className={styles.nogrow}
render={(_text: string, record: List) => <Description {...record} />} />}
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Software"
dataIndex={nameof<List>("syntaxId")}
className={styles.nogrow}
render={(text: string) => <div>{text}</div>} />}
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Languages"
dataIndex={nameof<List>("languageIds")}
sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, languages)}
width={125}
className={styles.nogrow}
render={(languageIds: number[]) => languageIds ? <LanguageCloud languages={languages.filter((l: Language) => languageIds.includes(l.id))} /> : null} />}
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Tags"
dataIndex={nameof<List>("tagIds")}
sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, tags)}
width={275}
className={styles.nogrow}
render={(tagIds: number[]) => tagIds ? <TagCloud tags={tags.filter((t: Tag) => tagIds.includes(t.id))} /> : null} />}
</Table>;
const ListDetailsDrawer = () =>
<Route path="/lists/:id" render={rp => {
const list = lists.find(l => l.id === +rp.match.params.id);
return list
? <ListInfoDrawer
list={list as List}
languages={list.languageIds && languages.filter((l: Language) => list.languageIds.includes(l.id))}
license={list.licenseId ? licenses.find((l: License) => list.licenseId === l.id) : undefined}
tags={list.tagIds && tags.filter((t: Tag) => list.tagIds.includes(t.id))}
{...props} />
: lists && lists.length && <Redirect to={{ pathname: "/", }} />
}} />;
return (
<span>
<Table<List>
dataSource={lists}
rowKey={record => record.id.toString()}
loading={lists.length ? false : true}
size="small"
pagination={{ size: "small", simple: true, style: { float: "left" }, pageSize: tablePageSize.pageSize }}
scroll={{ x: tablePageSize.isNarrowWindow ? undefined : 1200 }}>
<Table.Column<List>
title="Info"
dataIndex={nameof<List>("id")}
className={styles.nogrow}
fixed="left"
render={(_text: string, record: List) => <ListInfoButton list={record} {...props} />} />
<Table.Column<List>
title="Name"
dataIndex={nameof<List>("name")}
sorter={(a, b) => a.name.localeCompare(b.name)}
defaultSortOrder={"ascend"}
width={tablePageSize.isNarrowWindow ? undefined : 200}
className={styles.nogrow}
fixed="left"
render={(text: string) => <div>{text}</div>} />
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Description"
dataIndex={nameof<List>("description")}
className={styles.nogrow}
render={(_text: string, record: List) => <Description {...record} />} />}
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Software"
dataIndex={nameof<List>("syntaxId")}
className={styles.nogrow}
render={(text: string) => <div>{text}</div>} />}
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Languages"
dataIndex={nameof<List>("languageIds")}
sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, languages)}
width={125}
className={styles.nogrow}
render={(languageIds: number[]) => languageIds ? <LanguageCloud languages={languages.filter((l: Language) => languageIds.includes(l.id))} /> : null} />}
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Tags"
dataIndex={nameof<List>("tagIds")}
sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, tags)}
width={275}
className={styles.nogrow}
render={(tagIds: number[]) => tagIds ? <TagCloud tags={tags.filter((t: Tag) => tagIds.includes(t.id))} /> : null} />}
</Table>
<Route path="/lists/:id" render={rp => {
const list = lists.find(l => l.id === +rp.match.params.id);
return list
? <ListInfoDrawer
list={list as List}
languages={list.languageIds && languages.filter((l: Language) => list.languageIds.includes(l.id))}
license={list.licenseId ? licenses.find((l: License) => list.licenseId === l.id) : undefined}
tags={list.tagIds && tags.filter((t: Tag) => list.tagIds.includes(t.id))}
{...props} />
: lists && lists.length && <Redirect to={{ pathname: "/", }} />
}} />
</span>
<>
<ListsTable />
<ListDetailsDrawer />
</>
);
}