docs: add example for row selection and update row hover (active)

hjalmers · Aug 7, 2023 · 8421d59 · 8421d59
1 parent b92df1e
commit 8421d59
Show file tree

Hide file tree

Showing 12 changed files with 3,073 additions and 422 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -29,7 +29,8 @@ export const parameters = {
           "Basic",
           "Sorting",
           "Nested data",
-          "Row click & hover",
+          "Row click & active state",
+          "Row selection",
           "Pagination",
           ["Setup", "Client-side", "Server-side"],
           "Custom templates",

diff --git a/documentation.json b/documentation.json
diff --git a/projects/docs/src/app/app-routing.module.ts b/projects/docs/src/app/app-routing.module.ts
@@ -12,6 +12,7 @@ import { RowHoverClickComponent } from './examples/row-hover-click/row-hover-cli
 import { FooterComponent } from './examples/footer/footer.component';
 import { SortingComponent } from './examples/sorting/sorting.component';
 import { ServerSidePaginationComponent } from './examples/server-side-pagination/server-side-pagination.component';
+import { RowSelectComponent } from './examples/row-select/row-select.component';
 
 const routes: Routes = [
   {
@@ -38,6 +39,10 @@ const routes: Routes = [
     path: 'row-hover-click',
     component: RowHoverClickComponent,
   },
+  {
+    path: 'row-select',
+    component: RowSelectComponent,
+  },
   {
     path: 'horizontal-table',
     component: HorizontalTableComponent,

diff --git a/projects/docs/src/app/app.module.ts b/projects/docs/src/app/app.module.ts
@@ -23,6 +23,7 @@ import { RowHoverClickComponent } from './examples/row-hover-click/row-hover-cli
 import { FooterComponent } from './examples/footer/footer.component';
 import { SortingComponent } from './examples/sorting/sorting.component';
 import { ServerSidePaginationComponent } from './examples/server-side-pagination/server-side-pagination.component';
+import { RowSelectComponent } from './examples/row-select/row-select.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import { ServerSidePaginationComponent } from './examples/server-side-pagination
     FooterComponent,
     SortingComponent,
     ServerSidePaginationComponent,
+    RowSelectComponent,
   ],
   imports: [
     BrowserModule,

diff --git a/projects/docs/src/app/examples/pagination/pagination.component.html b/projects/docs/src/app/examples/pagination/pagination.component.html
@@ -7,6 +7,7 @@
         formControlName="length"
         type="number"
         class="form-control"
+        min="0"
       />
     </div>
     <div class="form-group col-12 col-sm-auto">

diff --git a/projects/docs/src/app/examples/row-hover-click/row-hover-click.component.ts b/projects/docs/src/app/examples/row-hover-click/row-hover-click.component.ts
@@ -1,23 +1,33 @@
 import { Component } from '@angular/core';
 import { Story } from '@storybook/angular/types-6-0';
 import { ROW_HOVER_CLICK_SNIPPETS } from './row-hower-click.snippets';
-import { GtRowClickEvent, GtRowHoverEvent } from '@angular-generic-table/core';
+import {
+  GtRowClickEvent,
+  GtRowActiveEvent,
+  TableConfig,
+} from '@angular-generic-table/core';
 
 @Component({
   selector: 'docs-row-hover-click',
   template: `
     <div class="overflow-auto">
-      <button class="btn btn-secondary me-3" (click)="tableRef.hoverRow(1)">
-        Set hover state to second row
+      <button
+        class="btn btn-outline-primary me-3"
+        (click)="tableRef.activateRow(1)"
+      >
+        Mark second row as active
       </button>
-      <button class="btn btn-secondary" (click)="tableRef.hoverRow(null)">
-        Remove hover state
+      <button
+        class="btn btn-outline-primary"
+        (click)="tableRef.activateRow(null)"
+      >
+        Remove active state
       </button>
       <angular-generic-table
         [data]="data"
         [config]="config"
         (rowClick)="onRowClick($event)"
-        (rowHover)="onRowHover($event)"
+        (rowActive)="onRowHover($event)"
         #tableRef
       ></angular-generic-table>
     </div>
@@ -26,7 +36,7 @@ import { GtRowClickEvent, GtRowHoverEvent } from '@angular-generic-table/core';
   `,
   styles: [
     `
-      :host ::ng-deep .gt-hover {
+      :host ::ng-deep .gt-active {
         background-color: var(--bs-highlight-bg);
       }
     `,
@@ -48,22 +58,22 @@ export class RowHoverClickComponent {
       favoriteFood: 'Pizza',
     },
   ];
-  config = {
+  config: TableConfig = {
     columns: {
       firstName: {},
       lastName: {},
       gender: {},
       favoriteFood: {},
     },
     rowClick: true,
-    rowHover: true,
+    activateRowOnHover: true,
   };
 
   onRowClick(event: GtRowClickEvent) {
     console.log('row clicked', event);
     this.clicked = `clicked row number: ${event.index}`;
   }
-  onRowHover(event: GtRowHoverEvent) {
+  onRowHover(event: GtRowActiveEvent) {
     console.log('row hovered', event);
   }
 

diff --git a/projects/docs/src/app/examples/row-hover-click/row-hower-click.snippets.ts b/projects/docs/src/app/examples/row-hover-click/row-hower-click.snippets.ts
@@ -8,24 +8,24 @@ import { GtRowClickEvent, GtRowHoverEvent } from '@angular-generic-table/core';
 @Component({
   selector: 'row-hover-click-table',
   template: '<div class="overflow-auto">
-      <button class="btn btn-secondary me-3" (click)="tableRef.hoverRow(1)">
-        Set hover state to second row
+      <button class="btn btn-outline-primary me-3" (click)="tableRef.hoverRow(1)">
+        Mark second row as active
       </button>
-      <button class="btn btn-secondary" (click)="tableRef.hoverRow(null)">
-        Remove hover state
+      <button class="btn btn-outline-primary" (click)="tableRef.hoverRow(null)">
+        Remove active state
       </button>
       <angular-generic-table
         [data]="data"
         [config]="config"
         (rowClick)="onRowClick($event)"
-        (rowHover)="onRowHover($event)"
+        (rowActive)="onRowHover($event)"
         #tableRef
       ></angular-generic-table>
       {{ clicked }}
     </div>',
   styles: [
     \`
-      :host ::ng-deep .gt-hover {
+      :host ::ng-deep .gt-active {
         background-color: var(--bs-highlight-bg);
       }
     \`,
@@ -55,7 +55,7 @@ export class RowHoverClickComponent {
       favoriteFood: {},
     },
     rowClick: true,
-    rowHover: true,
+    activateRowOnHover: true,
   };
 
   onRowClick(event: GtRowClickEvent) {

diff --git a/projects/docs/src/app/examples/row-select/row-select.component.html b/projects/docs/src/app/examples/row-select/row-select.component.html
@@ -0,0 +1,73 @@
+<div class="row gy-3 gy-sm-0 gx-2 align-items-center">
+  <div class="col-12 col-sm-auto">
+    <button
+      class="btn w-100"
+      (click)="toggleRowHover()"
+      [class.btn-outline-primary]="!activateOnRowHover"
+      [class.btn-primary]="activateOnRowHover"
+    >
+      {{ activateOnRowHover ? "Disable on hover" : "Enable on hover" }}
+    </button>
+  </div>
+  <div class="col-12 col-sm-auto">
+    <button
+      class="btn w-100"
+      (click)="toggleRowNavigation()"
+      [class.btn-outline-primary]="!activateOnNavigation"
+      [class.btn-primary]="activateOnNavigation"
+    >
+      {{
+        activateOnNavigation
+          ? "Disable on keyboard navigation"
+          : "Enable on keyboard navigation"
+      }}
+    </button>
+  </div>
+  <div class="col-12 col-sm-auto">
+    <button
+      class="btn w-100"
+      [class.btn-outline-primary]="!isAllSelected"
+      [class.btn-primary]="isAllSelected"
+      (click)="toggleAll()"
+    >
+      {{ isAllSelected ? "Deselect all" : "Select all" }}
+    </button>
+  </div>
+</div>
+<div class="row gy-3 gy-sm-0 gx-2 align-items-center mt-3">
+  <div class="form-group col-12 col-sm-auto d-flex align-items-center">
+    <label for="length_input" class="text-nowrap me-2">Number of rows:</label>
+    <input
+      id="length_input"
+      [formControl]="lengthCtrl"
+      type="number"
+      class="form-control"
+      style="max-width: 60px"
+    />
+  </div>
+  <div class="col-12 col-sm-auto">
+    Selected rows: {{ (selection | keyvalue).length }}
+  </div>
+  <div class="col-12 col-sm-auto">
+    Active row id: {{ (activeRow$ | async)?.id ?? "none" }}
+  </div>
+</div>
+<div class="mx-n3 mx-sm-0 my-3 overflow-auto">
+  <angular-generic-table
+    [data]="data$"
+    [config]="config$"
+    [loading]="loading$"
+    [isRowSelectedFn]="isSelected"
+    [customClasses]="customClassNames"
+    (rowClick)="selectRow($event)"
+    (rowActive)="setActiveRow($event)"
+    (rowSelect)="selectRow($event)"
+    [selection]="selection"
+    #tableRef
+  >
+    <div class="table-loading gt-skeleton-loader"></div>
+    <div class="table-no-data alert alert-info mt-3">Table is empty</div>
+  </angular-generic-table>
+  <angular-generic-table-pagination [table]="tableRef">
+  </angular-generic-table-pagination>
+</div>