From a5467d23a685de5fdc7bfcf51ce2d5fdc2fb6542 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sun, 9 Sep 2018 17:10:58 -0500
Subject: [PATCH] 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