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

Merge branch 'issue-336'

Browse source
This commit is contained in:
Collin Barrett 2018-09-09 19:23:00 -05:00
commit 5ec3b6f0fa
1 changed files with 73 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/FilterLists.Web/ClientApp/components/Home.tsx
View file

@ -15,9 +15,19 @@ interface IHomeState {
loadingSoftware: boolean;
languages: ILanguageDto[];
loadingLanguages: boolean;
columnVisibility: IColumnVisibility[];
pageSize: number;
}
const columnVisibilityDefaults = [
{ column: "Name", visible: true },
{ column: "Software", visible: true },
{ column: "Tags", visible: true },
{ column: "Languages", visible: true },
{ column: "Updated Date", visible: true },
{ column: "Details", visible: true }
];
export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
constructor(props: any) {
super(props);
@ -30,6 +40,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
loadingSoftware: true,
languages: [],
loadingLanguages: true,
columnVisibility: columnVisibilityDefaults,
pageSize: 20
};
this.updatePageSize = this.updatePageSize.bind(this);
@ -46,6 +57,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
: <div>
{Home.renderTagline(this.state)}
{Home.renderFilterListsTable(this.state)}
{this.renderColumnVisibilityCheckboxes()}
</div>;
return <div>
{contents}
@ -90,7 +102,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
updatePageSize() {
this.setState({
pageSize: Math.max(Math.floor((window.innerHeight - 361) / 52), 5)
pageSize: Math.max(Math.floor((window.innerHeight - 386) / 52), 5)
});
}
@ -117,7 +129,10 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
.includes(filter.value.toUpperCase()),
sortMethod: (a: any, b: any) => a.toUpperCase() > b.toUpperCase() ? 1 : -1,
Cell: (cell: any) => <h2 className="mb-0">{cell.value}</h2>,
style: { overflow: "visible" }
style: { overflow: "visible" },
show: state.columnVisibility.filter((c: IColumnVisibility) => {
return c.column === "Name";
})[0].visible
},
{
Header: "Software Support",
@ -141,7 +156,10 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
Cell: () => null,
width: 250,
headerClassName: "d-none d-md-block",
className: "d-none d-md-block"
className: "d-none d-md-block",
show: state.columnVisibility.filter((c: IColumnVisibility) => {
return c.column === "Software";
})[0].visible
},
{
Header: "Tags",
@ -157,7 +175,10 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
}} title={e.description}>{e.name}</span>)}</div>,
width: 200,
headerClassName: "d-none d-md-block",
className: "d-none d-md-block"
className: "d-none d-md-block",
show: state.columnVisibility.filter((c: IColumnVisibility) => {
return c.column === "Tags";
})[0].visible
},
{
Header: "Languages",
@ -179,11 +200,15 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
</select>,
sortable: false,
Cell: (cell: any) => <div className="fl-tag-container">{cell.value.map(
(e: any) => <span className="badge badge-secondary" title={e.name}>{e.iso6391}</span>)}</div>,
(e: any) => <span className="badge badge-secondary" title={e.name}>{e.iso6391}</span>)
}</div>,
style: { whiteSpace: "inherit" },
width: 100,
headerClassName: "d-none d-md-block",
className: "d-none d-md-block"
className: "d-none d-md-block",
show: state.columnVisibility.filter((c: IColumnVisibility) => {
return c.column === "Languages";
})[0].visible
},
{
Header: "Updated",
@ -199,7 +224,10 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
style: { whiteSpace: "inherit" },
width: 100,
headerClassName: "d-none d-md-block",
className: "d-none d-md-block"
className: "d-none d-md-block",
show: state.columnVisibility.filter((c: IColumnVisibility) => {
return c.column === "Updated Date";
})[0].visible
},
{
Header: "Details",
@ -219,7 +247,10 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
</button>}
</div>,
style: { textAlign: "center" },
width: 90
width: 90,
show: state.columnVisibility.filter((c: IColumnVisibility) => {
return c.column === "Details";
})[0].visible
}
]}
SubComponent={(row: any) => {
@ -229,6 +260,35 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
}}
className="-striped -highlight"/>;
}
private renderColumnVisibilityCheckboxes() {
return <div className="d-none d-md-block text-right">
Visible:&nbsp;&nbsp;{this.state.columnVisibility.map((c: IColumnVisibility) => this.renderColumnVisibilityCheckbox(c))}
</div>;
};
private renderColumnVisibilityCheckbox(props: IColumnVisibility) {
return <div className="form-check form-check-inline">
<input className="form-check-input" type="checkbox"id={`checkbox${props.column.replace(/\s+/g, "")}`} defaultChecked={props.visible} onChange={() => this.checkColumn(props)}/>
<label className="form-check-label" htmlFor={`checkbox${props.column.replace(/\s+/g, "")}`}>{props.column}</label>
</div>;
}
private checkColumn(props: IColumnVisibility) {
const columnVisibility = this.state.columnVisibility;
const index = this.findWithAttr(columnVisibility, "column", props.column);
columnVisibility[index].visible = !columnVisibility[index].visible;
this.forceUpdate();
}
private findWithAttr(array: any, attr: any, value: any) {
for (let i = 0; i < array.length; i += 1) {
if (array[i][attr] === value) {
return i;
}
}
return -1;
}
}
interface ISoftwareDto {
@ -259,4 +319,9 @@ interface IListTagDto {
name: string;
colorHex: string;
description: string;
}
interface IColumnVisibility {
column: string;
visible: boolean;
}