Merge pull request #20746 from votdev/datatable_selection

mgr/dashboard v2: Introduce CdTableSelection model

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 import { CdTableColumn } from '../../../shared/models/cd-table-column';
+import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
 import { RgwDaemonService } from '../services/rgw-daemon.service';
 
@@ -45,7 +46,7 @@ export class RgwDaemonListComponent {
       });
   }
 
-  beforeShowDetails(selected: Array<object>) {
-    return selected.length === 1;
+  beforeShowDetails(selection: CdTableSelection) {
+    return selection.hasSingleSelection;
   }
 }

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html

@@ -51,8 +51,8 @@
                  class="bootstrap oadatatable"
                  [cssClasses]="paginationClasses"
                  [selectionType]="selectionType"
-                 [selected]="selected"
-                 (select)="toggleExpandRow()"
+                 [selected]="selection.selected"
+                 (select)="onSelect()"
                  [sorts]="sorts"
                  [columns]="columns"
                  [columnMode]="columnMode"

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts

@@ -20,6 +20,7 @@ import 'rxjs/add/observable/timer';
 import { Observable } from 'rxjs/Observable';
 
 import { CdTableColumn } from '../../models/cd-table-column';
+import { CdTableSelection } from '../../models/cd-table-selection';
 import { TableDetailsDirective } from '../table-details.directive';
 
 @Component({
@@ -79,13 +80,17 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
    */
   @Output() fetchData = new EventEmitter();
 
+  /**
+   * Use this variable to access the selected row(s).
+   */
+  selection = new CdTableSelection();
+
   cellTemplates: {
     [key: string]: TemplateRef<any>
   } = {};
   selectionType: string = undefined;
   search = '';
   rows = [];
-  selected = [];
   loadingIndicator = true;
   paginationClasses = {
     pagerLeftArrow: 'i fa fa-angle-double-left',
@@ -201,9 +206,14 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     this.updating = false;
   }
 
+  onSelect() {
+    this.selection.update();
+    this.toggleExpandRow();
+  }
+
   toggleExpandRow() {
-    if (this.selected.length > 0) {
-      this.table.rowDetail.toggleExpandRow(this.selected[0]);
+    if (this.selection.hasSelection) {
+      this.table.rowDetail.toggleExpandRow(this.selection.first());
     } else {
       this.detailTemplate.viewContainerRef.clear();
     }
@@ -214,7 +224,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
       return;
     }
     if (_.isFunction(this.beforeShowDetails)) {
-      if (!this.beforeShowDetails(this.selected)) {
+      if (!this.beforeShowDetails(this.selection)) {
         return;
       }
     }
@@ -224,7 +234,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     const cmpRef = this.detailTemplate.viewContainerRef.createComponent(
       this.componentFactoryResolver.resolveComponentFactory(factoryClass)
     );
-    cmpRef.instance.selected = this.selected;
+    cmpRef.instance.selected = this.selection.selected;
   }
 
   updateFilter(event?) {

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/models/cd-table-selection.ts

@@ -0,0 +1,24 @@
+export class CdTableSelection {
+  selected: any[] = [];
+  hasMultiSelection: boolean;
+  hasSingleSelection: boolean;
+  hasSelection: boolean;
+
+  constructor() {
+    this.update();
+  }
+
+  /**
+   * Recalculate the variables based on the current number
+   * of selected rows.
+   */
+  update() {
+    this.hasSelection = this.selected.length > 0;
+    this.hasSingleSelection = this.selected.length === 1;
+    this.hasMultiSelection = this.selected.length > 1;
+  }
+
+  first() {
+    return this.hasSelection ? this.selected[0] : null;
+  }
+}