diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx index be3c8e4c0..e107909f9 100644 --- a/src/FilterLists.Web/ClientApp/components/Home.tsx +++ b/src/FilterLists.Web/ClientApp/components/Home.tsx @@ -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, IHomeState> { constructor(props: any) { super(props); @@ -30,6 +40,7 @@ export class Home extends React.Component, 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, IHomeState> { :
{Home.renderTagline(this.state)} {Home.renderFilterListsTable(this.state)} + {this.renderColumnVisibilityCheckboxes()}
; return
{contents} @@ -90,7 +102,7 @@ export class Home extends React.Component, 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, IHomeState> { .includes(filter.value.toUpperCase()), sortMethod: (a: any, b: any) => a.toUpperCase() > b.toUpperCase() ? 1 : -1, Cell: (cell: any) =>

{cell.value}

, - 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, 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, IHomeState> { }} title={e.description}>{e.name})}
, 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, IHomeState> { , sortable: false, Cell: (cell: any) =>
{cell.value.map( - (e: any) => {e.iso6391})}
, + (e: any) => {e.iso6391}) + }, 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, 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, IHomeState> { } , 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, IHomeState> { }} className="-striped -highlight"/>; } + + private renderColumnVisibilityCheckboxes() { + return
+ Visible:  {this.state.columnVisibility.map((c: IColumnVisibility) => this.renderColumnVisibilityCheckbox(c))} +
; + }; + + private renderColumnVisibilityCheckbox(props: IColumnVisibility) { + return
+ this.checkColumn(props)}/> + +
; + } + + 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; } \ No newline at end of file