From 30302a93072898276c40b079d4ef4b57d71b6be2 Mon Sep 17 00:00:00 2001
From: "Gachuhi.Chiuri" <gachuhi.karanja@eclectics.io>
Date: Mon, 5 Jun 2023 09:45:40 +0300
Subject: [PATCH] feat: Add column visibility control feature

Implemented a new feature that allows users to show or hide columns in the table view. Added a dropdown menu that lists all available columns, providing users with the ability to toggle the visibility of each column. This enhances the user experience by allowing customization and focusing on the relevant data.
---
 src/app/columns/column-toggle.component.ts | 97 +++++++++++++++++++++-
 1 file changed, 96 insertions(+), 1 deletion(-)

diff --git a/src/app/columns/column-toggle.component.ts b/src/app/columns/column-toggle.component.ts
index 3e00fd247..a4beb9f36 100644
--- a/src/app/columns/column-toggle.component.ts
+++ b/src/app/columns/column-toggle.component.ts
@@ -37,8 +37,74 @@ import { ColumnMode } from 'projects/swimlane/ngx-datatable/src/public-api';
           </li>
         </ul>
       </div>
+      <div class="selected-column">
+        <h4>Dropdown</h4>
+        <form>
+          <div class="multiselect">
+            <div class="selectBox" (click)="showCheckboxes()">
+              <select>
+                <option>Show/Hide Column</option>
+              </select>
+              <div class="overSelect"></div>
+            </div>
+            <div id="checkboxes">
+              <label for="select/unselect">
+                <input
+                  type="checkbox"
+                  id="select/Unselect"
+                  [checked]="allColumnsChecked"
+                  (click)="allColumnsChecked ? uncheckAll() : checkAll()"
+                />{{ allColumnsChecked ? 'Unselect All' : 'Select All' }}</label
+              >
+              <label *ngFor="let col of allColumns" [for]="col.name">
+                <input type="checkbox" [id]="col.name" [checked]="isChecked(col)" (click)="toggle(col)" />{{
+                  col.name
+                }}</label
+              >
+            </div>
+          </div>
+        </form>
+      </div>
     </div>
-  `
+  `,
+  styles: [
+    `
+      .multiselect {
+        width: 200px;
+        margin: 0 auto;
+      }
+
+      .selectBox {
+        position: relative;
+      }
+
+      .selectBox select {
+        width: 100%;
+        font-weight: bold;
+      }
+
+      .overSelect {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+      }
+
+      #checkboxes {
+        display: none;
+        border: 1px #dadada solid;
+      }
+
+      #checkboxes label {
+        display: block;
+      }
+
+      #checkboxes label:hover {
+        background-color: #1e90ff;
+      }
+    `
+  ]
 })
 export class ColumnToggleComponent {
   rows = [
@@ -60,6 +126,9 @@ export class ColumnToggleComponent {
 
   ColumnMode = ColumnMode;
 
+  allColumnsChecked: boolean = true;
+  expanded: boolean = false;
+
   toggle(col) {
     const isChecked = this.isChecked(col);
 
@@ -79,4 +148,30 @@ export class ColumnToggleComponent {
       }) !== undefined
     );
   }
+
+  checkAll() {
+    this.columns = this.allColumns;
+    this.allColumnsChecked = true;
+  }
+
+  uncheckAll() {
+    if (this.columns.length == 0) {
+      this.columns = this.allColumns;
+      this.allColumnsChecked = true;
+    } else {
+      this.columns = [];
+      this.allColumnsChecked = false;
+    }
+  }
+
+  showCheckboxes() {
+    var checkboxes = document.getElementById('checkboxes');
+    if (!this.expanded) {
+      checkboxes.style.display = 'block';
+      this.expanded = true;
+    } else {
+      checkboxes.style.display = 'none';
+      this.expanded = false;
+    }
+  }
 }