feat(table component): row selection implementation

re #6
ueno-llc · Sep 24, 2020 · 731c7da · 731c7da
1 parent e17acf2
commit 731c7da
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 3 deletions.
diff --git a/docs/src/components-spec.json b/docs/src/components-spec.json
@@ -336,7 +336,9 @@
       "object-table": "checkbox",
       "epmty-message": "text"
     },
-    "events": {}
+    "events": {
+      "selectionChanged": "Fired when table row was selected/unselected"
+    }
   },
   "typography": {},
   "color": {}

diff --git a/src/components/beta/gux-table/example.html b/src/components/beta/gux-table/example.html
@@ -244,4 +244,49 @@ <h1>Data table with scroll</h1>
       </tr>
     </tbody>
   </table>
+</gux-table-beta>
+
+<h1>Object table with rows selection</h1>
+<gux-table-beta object-table selectable-rows>
+  <table slot="data">
+    <thead>
+      <tr data-row-id="head">
+        <th><gux-row-select></gux-row-select></th>
+        <th data-column-name="first-name">First name</th>
+        <th data-column-name="last-name">Last name</th>
+        <th data-column-name="age" data-cell-numeric>Age</th>
+        <th data-column-name="action" data-cell-action>Action</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr data-row-id="body-1">
+        <td><gux-row-select></gux-row-select></td>
+        <td>John</td>
+        <td>Doe</td>
+        <td data-cell-numeric>25</td>
+        <td data-cell-action>Delete</td>
+      </tr>
+      <tr data-row-id="body-2">
+        <td><gux-row-select></gux-row-select></td>
+        <td>Jane</td>
+        <td>Doe</td>
+        <td data-cell-numeric>23</td>
+        <td data-cell-action>Delete</td>
+      </tr>
+      <tr data-row-id="body-3">
+        <td><gux-row-select></gux-row-select></td>
+        <td>Jane</td>
+        <td>Doe</td>
+        <td data-cell-numeric>21</td>
+        <td data-cell-action>Delete</td>
+      </tr>
+      <tr data-row-id="body-4">
+        <td><gux-row-select></gux-row-select></td>
+        <td>Jane</td>
+        <td>Doe</td>
+        <td data-cell-numeric>23</td>
+        <td data-cell-action>Delete</td>
+      </tr>
+    </tbody>
+  </table>
 </gux-table-beta>
diff --git a/src/components/beta/gux-table/gux-row-select/gux-row-select.tsx b/src/components/beta/gux-table/gux-row-select/gux-row-select.tsx
@@ -0,0 +1,17 @@
+import { Component, h, Event, EventEmitter } from '@stencil/core';
+
+@Component({
+  tag: 'gux-row-select'
+})
+export class GuxRowSelect {
+  @Event()
+  selectRow: EventEmitter;
+
+  private handlerCheck(): void {
+    this.selectRow.emit();
+  }
+
+  render() {
+    return <gux-checkbox onCheck={this.handlerCheck.bind(this)}></gux-checkbox>;
+  }
+}
diff --git a/src/components/beta/gux-table/gux-row-select/readme.md b/src/components/beta/gux-table/gux-row-select/readme.md
@@ -0,0 +1,30 @@
+# gux-row-select
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Events
+
+| Event       | Description | Type               |
+| ----------- | ----------- | ------------------ |
+| `selectRow` |             | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [gux-checkbox](../../../stable/gux-checkbox)
+
+### Graph
+```mermaid
+graph TD;
+  gux-row-select --> gux-checkbox
+  style gux-row-select fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/beta/gux-table/gux-table.less b/src/components/beta/gux-table/gux-table.less
@@ -9,6 +9,7 @@
 @gux-table-row-hover: rgba(117, 168, 255, .24);
 @gux-table-scroll-divider: rgba(34, 37, 41, 0.1);
 @gux-table-scroll-thumb: #B5B6B7;
+@gux-table-row-hover-selection: fade(@gux-blue, 24%);
 
 gux-table-beta {
   display: block;
@@ -43,6 +44,13 @@ gux-table-beta {
         text-align: right;
       }
 
+      tr[data-row-id] th:first-child,
+      tr[data-row-id] td:first-child {
+        padding-left: 12px;
+        padding-right: 8px;
+        width: 16px;
+      }
+
       th:last-child, td:last-child {
         border-right-width: 0px;
       }
@@ -124,7 +132,13 @@ gux-table-beta {
           }
 
           tr:hover {
-            background: @gux-table-row-hover;
+            background: @gux-table-row-hover-selection;
+          }
+
+          tr[data-selected-row] {
+            td {
+              background: @gux-table-row-hover-selection;
+            }
           }
         }
       }

diff --git a/src/components/beta/gux-table/gux-table.tsx b/src/components/beta/gux-table/gux-table.tsx
@@ -5,7 +5,9 @@ import {
   Listen,
   Prop,
   readTask,
-  State
+  State,
+  Event,
+  EventEmitter
 } from '@stencil/core';
 import { buildI18nForComponent, GetI18nValue } from '../../../i18n';
 import tableResources from './i18n/en.json';
@@ -64,6 +66,11 @@ export class GuxTable {
   @Prop()
   emptyMessage: string;
 
+  /**
+   * Triggers when table row was selected/unselected
+   */
+  @Event() selectionChanged: EventEmitter;
+
   @Listen('scroll', { capture: true })
   onScroll(): void {
     const scrollLeft = this.tableContainer.querySelector('.gux-table-container')
@@ -79,6 +86,11 @@ export class GuxTable {
     }
   }
 
+  @Listen('selectRow')
+  onSelectRow(event): void {
+    this.prepareSelectableRows(event.target);
+  }
+
   private get tableContainer(): HTMLElement {
     return this.root.children[0] as HTMLElement;
   }
@@ -254,6 +266,69 @@ export class GuxTable {
     }
   }
 
+  private rowSelection(checkbox: HTMLGuxCheckboxElement): void {
+    const currentRow: HTMLElement =
+      checkbox.parentElement.parentElement.parentElement;
+    if (checkbox.checked) {
+      currentRow.setAttribute('data-selected-row', '');
+      this.selectionChanged.emit({
+        rowsIds: [currentRow.getAttribute('data-row-id')],
+        actionType: 'selected'
+      });
+    } else {
+      currentRow.removeAttribute('data-selected-row');
+      this.selectionChanged.emit({
+        rowsIds: [currentRow.getAttribute('data-row-id')],
+        actionType: 'unselected'
+      });
+    }
+  }
+
+  private allRowsSelection(mainCheckbox: HTMLGuxCheckboxElement): void {
+    mainCheckbox.checked = mainCheckbox.checked ? false : true;
+    const rowsSelectionCheckboxes: NodeList = this.tableContainer.querySelectorAll(
+      'tbody gux-checkbox'
+    );
+    const allAttributes: string[] = [];
+    rowsSelectionCheckboxes.forEach((checkbox: HTMLGuxCheckboxElement) => {
+      const parentTrElement: HTMLElement =
+        checkbox.parentElement.parentElement.parentElement;
+      allAttributes.push(parentTrElement.getAttribute('data-row-id'));
+      if (mainCheckbox.checked) {
+        checkbox.checked = true;
+        parentTrElement.setAttribute('data-selected-row', '');
+      } else {
+        checkbox.checked = false;
+        parentTrElement.removeAttribute('data-selected-row');
+      }
+    });
+    this.selectionChanged.emit({
+      rowsIds: allAttributes,
+      actionType: mainCheckbox.checked ? 'selected' : 'unselected'
+    });
+  }
+
+  private prepareSelectableRows(rowSelect): void {
+    const bodyCheckboxes: HTMLGuxCheckboxElement[] = Array.from(
+      this.tableContainer.querySelectorAll('tbody gux-checkbox')
+    );
+    const isNotAllCheckboxesSelected: boolean = !!bodyCheckboxes.find(
+      (checkbox: HTMLGuxCheckboxElement) => {
+        return !checkbox.checked;
+      }
+    );
+    const currentCheckbox: HTMLGuxCheckboxElement = rowSelect.children[0];
+    const mainCheckbox: HTMLGuxCheckboxElement = this.tableContainer.querySelector(
+      'thead gux-checkbox'
+    );
+    mainCheckbox.checked = !isNotAllCheckboxesSelected;
+    if (currentCheckbox === mainCheckbox) {
+      this.allRowsSelection(currentCheckbox);
+    } else {
+      this.rowSelection(currentCheckbox);
+    }
+  }
+
   render() {
     return (
       <div class={this.tableClasses}>

diff --git a/src/components/beta/gux-table/readme.md b/src/components/beta/gux-table/readme.md
@@ -14,6 +14,13 @@
 | `objectTable`  | `object-table`  | Indicates that object table specific styles should be applied    | `boolean` | `false`     |
 
 
+## Events
+
+| Event              | Description                                     | Type               |
+| ------------------ | ----------------------------------------------- | ------------------ |
+| `selectionChanged` | Triggers when table row was selected/unselected | `CustomEvent<any>` |
+
+
 ## Dependencies
 
 ### Depends on

diff --git a/src/components/stable/gux-checkbox/readme.md b/src/components/stable/gux-checkbox/readme.md
@@ -42,6 +42,19 @@ This component represents a checkbox with three possible states: `unchecked`, `c
 | `check` | Emits when the checked state changes. | `CustomEvent<boolean>` |
 
 
+## Dependencies
+
+### Used by
+
+ - [gux-row-select](../../beta/gux-table/gux-row-select)
+
+### Graph
+```mermaid
+graph TD;
+  gux-row-select --> gux-checkbox
+  style gux-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*