From 8e5c1e57ab78a489f8c3e1755bf4ea1aabbe4101 Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Sun, 9 Sep 2018 17:10:58 -0500
Subject: [PATCH 1/4] wip

---
 .../ClientApp/components/Home.tsx             | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index be3c8e4c0..dd2e4e4b2 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -15,6 +15,7 @@ interface IHomeState {
     loadingSoftware: boolean;
     languages: ILanguageDto[];
     loadingLanguages: boolean;
+    columnVisibility: IColumnVisibility[];
     pageSize: number;
 }
 
@@ -30,6 +31,14 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
             loadingSoftware: true,
             languages: [],
             loadingLanguages: true,
+            columnVisibility: [
+                { column: "name", visible: true },
+                { column: "software", visible: true },
+                { column: "tags", visible: true },
+                { column: "languages", visible: true },
+                { column: "updatedDate", visible: true },
+                { column: "details", visible: true }
+            ],
             pageSize: 20
         };
         this.updatePageSize = this.updatePageSize.bind(this);
@@ -45,6 +54,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
               </p>
             : <div>
                   {Home.renderTagline(this.state)}
+                  {this.renderColumnVisibilityCheckboxes()}
                   {Home.renderFilterListsTable(this.state)}
               </div>;
         return <div>
@@ -102,6 +112,19 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                </p>;
     }
 
+    private renderColumnVisibilityCheckboxes() {
+        return <div className="d-none d-md-block">
+                   {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="inlineCheckbox" defaultChecked={props.visible}/>
+                   <label className="form-check-label" htmlFor="inlineCheckbox">{props.column}</label>
+               </div>;
+    }
+
     private static renderFilterListsTable(state: IHomeState) {
         return <ReactTable
                    data={state.lists}
@@ -259,4 +282,9 @@ interface IListTagDto {
     name: string;
     colorHex: string;
     description: string;
+}
+
+interface IColumnVisibility {
+    column: string;
+    visible: boolean;
 }
\ No newline at end of file

From 0928b662f2f0b8958d829ee153e20a6ac6be1bea Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Sun, 9 Sep 2018 17:36:15 -0500
Subject: [PATCH 2/4] add cbxes below table

ref #336
---
 .../ClientApp/components/Home.tsx             | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index dd2e4e4b2..aed99e46b 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -32,12 +32,12 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
             languages: [],
             loadingLanguages: true,
             columnVisibility: [
-                { column: "name", visible: true },
-                { column: "software", visible: true },
-                { column: "tags", visible: true },
-                { column: "languages", visible: true },
-                { column: "updatedDate", visible: true },
-                { column: "details", visible: true }
+                { 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 }
             ],
             pageSize: 20
         };
@@ -54,8 +54,8 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
               </p>
             : <div>
                   {Home.renderTagline(this.state)}
-                  {this.renderColumnVisibilityCheckboxes()}
                   {Home.renderFilterListsTable(this.state)}
+                  {this.renderColumnVisibilityCheckboxes()}
               </div>;
         return <div>
                    {contents}
@@ -100,7 +100,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)
         });
     }
 
@@ -113,15 +113,15 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
     }
 
     private renderColumnVisibilityCheckboxes() {
-        return <div className="d-none d-md-block">
-                   {this.state.columnVisibility.map((c: IColumnVisibility) => this.renderColumnVisibilityCheckbox(c))}
+        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="inlineCheckbox" defaultChecked={props.visible}/>
-                   <label className="form-check-label" htmlFor="inlineCheckbox">{props.column}</label>
+                   <input className="form-check-input" type="checkbox" id={`checkbox${props.column.replace(/\s+/g, "")}` } defaultChecked={props.visible}/>
+                   <label className="form-check-label" htmlFor={`checkbox${props.column.replace(/\s+/g, "")}`}>{props.column}</label>
                </div>;
     }
 

From 88322b511091be042f29b5bd492e26b1705f5acb Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Sun, 9 Sep 2018 17:55:36 -0500
Subject: [PATCH 3/4] add dynamic show props on columns

ref #336
---
 .../ClientApp/components/Home.tsx             | 77 ++++++++++++-------
 1 file changed, 49 insertions(+), 28 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index aed99e46b..88a6a426a 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -19,6 +19,15 @@ interface IHomeState {
     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);
@@ -31,14 +40,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
             loadingSoftware: true,
             languages: [],
             loadingLanguages: true,
-            columnVisibility: [
-                { 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 }
-            ],
+            columnVisibility: columnVisibilityDefaults,
             pageSize: 20
         };
         this.updatePageSize = this.updatePageSize.bind(this);
@@ -112,19 +114,6 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                </p>;
     }
 
-    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}/>
-                   <label className="form-check-label" htmlFor={`checkbox${props.column.replace(/\s+/g, "")}`}>{props.column}</label>
-               </div>;
-    }
-
     private static renderFilterListsTable(state: IHomeState) {
         return <ReactTable
                    data={state.lists}
@@ -140,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",
@@ -164,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",
@@ -180,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",
@@ -202,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",
@@ -222,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",
@@ -242,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) => {
@@ -252,6 +260,19 @@ 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} />
+                   <label className="form-check-label" htmlFor={`checkbox${props.column.replace(/\s+/g, "")}`}>{props.column}</label>
+               </div>;
+    }
 }
 
 interface ISoftwareDto {

From b793e5180a2eb813ff3c5067590fa2901deba544 Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Sun, 9 Sep 2018 19:22:50 -0500
Subject: [PATCH 4/4] it works!

closes #336
---
 .../ClientApp/components/Home.tsx              | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index 88a6a426a..e107909f9 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -269,10 +269,26 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
 
     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} />
+                   <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 {