Merge pull request #80 from microsoft/multi-select

ability add a 'multi-select' regulation

Author: mkslalom

src/app/app.module.ts

@@ -21,7 +21,8 @@ import { DownloadDialogComponent }    from './dialogs/download-dialog.component'
 import { HowToDialogComponent }    from './dialogs/howto-dialog.component';
 import { PurchaseDialogComponent }    from './dialogs/purchase-dialog.component';
 import { ErrorsDialogComponent }    from './dialogs/errors-dialog.component';
-import { CharterContentComponent }    from './dialogs/charter-content.component';
+import { CharterContentComponent } from './dialogs/charter-content.component';
+import { MultiSelectRegsDialogComponent } from './dialogs/multi-select-regs-dialog.component';
 import { MessagesComponent }    from './messages/messages.component';
 import { GraphComponent }      from './graph/graph.component';
 import { TreeModule } from 'angular-tree-component';
@@ -67,7 +68,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { injectHighlightBodyPipe, injectHighlightSectionPipe, getCommentTextPipe } from './pipes/HighlightPipe';
 import { getNodeColorPipe, getNodeIconPipe, getNodeIconAltPipe, getBodyPipe, getSectionPipe, getConnectionsTextPipe } from './pipes/NodePipe';
-import { formatDatePipe } from './pipes/FormatDatePipe'
+import { formatDatePipe } from './pipes/FormatDatePipe'
 
 @NgModule({
   imports: [
@@ -128,7 +129,8 @@ import { formatDatePipe } from './pipes/FormatDatePipe'
     HowToDialogComponent,
     PurchaseDialogComponent,
     ErrorsDialogComponent,
-    CharterContentComponent
+    CharterContentComponent,
+    MultiSelectRegsDialogComponent
   ],
   declarations: [
     AppComponent,
@@ -148,6 +150,7 @@ import { formatDatePipe } from './pipes/FormatDatePipe'
     StandardMapSearchComponent,
     GraphComponent,
     CharterContentComponent,
+    MultiSelectRegsDialogComponent,
 
     injectHighlightBodyPipe,
     injectHighlightSectionPipe,

src/app/dialogs.service.ts

@@ -10,6 +10,7 @@ import { DownloadDialogComponent } from './dialogs/download-dialog.component';
 import { HowToDialogComponent } from './dialogs/howto-dialog.component';
 import { ErrorsDialogComponent } from './dialogs/errors-dialog.component';
 import { PurchaseDialogComponent } from './dialogs/purchase-dialog.component';
+import { MultiSelectRegsDialogComponent } from './dialogs/multi-select-regs-dialog.component';
 
 import { CookieService } from 'ngx-cookie-service';
 
@@ -27,16 +28,18 @@ export class DialogsService {
 		//sideNav.close();
 
 		var dialogType = null;
-    switch (dialogId) {
+        switch (dialogId) {
 			case 'about': dialogType = AboutDialogComponent; break;
 			case 'changelog': dialogType = ChangeLogDialogComponent; break;
 			case 'contribute': dialogType = ContributeDialogComponent; break;
 			case 'credits': dialogType = CreditsDialogComponent; break;
 			case 'disclaimer': dialogType = DisclaimerDialogComponent; break;
 			case 'download': dialogType = DownloadDialogComponent; break;
 			case 'howto': dialogType = HowToDialogComponent; break;
-      case 'purchase': dialogType = PurchaseDialogComponent; break;
-      case 'errors': dialogType = ErrorsDialogComponent; break;
+            case 'purchase': dialogType = PurchaseDialogComponent; break;
+            case 'errors': dialogType = ErrorsDialogComponent; break;
+            case 'multi-select-reg': dialogType = MultiSelectRegsDialogComponent; break;
+        
 		}
 
 		if (dialogType) {

src/app/dialogs/multi-select-regs-dialog.component.css

@@ -0,0 +1,2 @@
+.select-list {
+}

src/app/dialogs/multi-select-regs-dialog.component.html

@@ -0,0 +1,17 @@
+<h2 mat-dialog-title>Multi-select Regulations</h2>
+<mat-dialog-content class="mat-typography">
+  <mat-selection-list #regs class="select-list">
+    <mat-list-option *ngFor="let reg of dataSource" [value]="reg.id">
+      {{reg.title}}
+    </mat-list-option>
+  </mat-selection-list>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial (click)="addRegulations()">Ok</button>
+</mat-dialog-actions>
+
+
+<!-- Copyright 2019 Google LLC. All Rights Reserved.
+    Use of this source code is governed by an MIT-style license that
+    can be found in the LICENSE file at http://angular.io/license -->

src/app/dialogs/multi-select-regs-dialog.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { MatList, MatSelectionList } from '@angular/material/list';
+import { CategoryList, GraphService } from '../graph.service';
+
+@Component({
+  selector: 'multi-select-regs-dialog',
+  templateUrl: './multi-select-regs-dialog.component.html',
+  styleUrls: ['./multi-select-regs-dialog.component.css']
+})
+export class MultiSelectRegsDialogComponent {
+  dataSource: CategoryList = null;
+  @ViewChild(MatSelectionList) regs: MatSelectionList;
+
+  constructor(public graphService: GraphService) {
+  }
+
+  ngOnInit() {
+    this.graphService.getDocTypes().subscribe(data => {
+      let excludeIds = [
+        'ISO',
+        'All',
+        'Multi'
+      ];
+
+      this.dataSource = data.filter(f => {
+        return !excludeIds.includes(f.id);
+      });
+    });
+  }
+
+  addRegulations() {
+    var selection = this.regs.selectedOptions.selected;
+
+    // Add the All tab with a filter and override the title to "Multi"
+    this.graphService.addTab('All', selection.map(s => {
+      return s.value;
+    }), 'Multi');
+  }
+}

src/app/graph.service.ts

@@ -200,7 +200,7 @@ export class GraphService {
       return this.graphTabs.length < 3;
   }
 
-  public addTab(id: string) {
+  public addTab(id: string, filterTopLevelKeys: string[] = null, customName: string = null) {
       if (!this.canAdd)
           return;
 
@@ -209,7 +209,21 @@ export class GraphService {
           var newTab = new GraphTab(this, null, doc);
 
           newTab.nodes = doc.children;
-          newTab.column.nodes = doc.children;
+
+          // Filter the top level nodes if desired
+          if (filterTopLevelKeys) {
+            newTab.nodes = doc.children.filter(c => {
+              var rootKey = c.id.replace(/_/g, ''); // The 'all' structure has _,  where the menu choice has those stripped. Remove them for comparison.
+              return filterTopLevelKeys.includes(rootKey);
+            });
+          }
+
+          // Override the tab name if desired
+          if (customName)
+            newTab.title = customName;
+
+          // Reference this data from the column view.
+          newTab.column.nodes = newTab.nodes;
 
           this.graphTabs.push(newTab);
           this.ensureISOIsInMiddle();

src/app/graph/graph.component.html

@@ -16,7 +16,7 @@
             <span class="example-spacer"></span>
             <button mat-button aria-label="Add Regulation Tab" [matMenuTriggerFor]="menu" class="add-button" [class.button-disabled]="!graphService.canAdd"><mat-icon>add_box</mat-icon></button>
             <mat-menu #menu="matMenu">
-              <button mat-menu-item *ngFor="let d of getMenuOptions()" (click)="graphService.addTab(d.id)">{{d.title}}</button>
+              <button mat-menu-item *ngFor="let d of getMenuOptions()" (click)="addTab(d.id)">{{d.title}}</button>
             </mat-menu>
           </div>
 

src/app/graph/graph.component.ts

@@ -74,16 +74,28 @@ export class GraphComponent implements OnInit, OnDestroy {
     }
 
     public getMenuOptions(): any[] {
-        var result = [];
+      var result = [];
 
-        if (this.graphService.canAdd)
-        {
-            for (var t of this.graphCategories)
-                if (!this.graphService.graphTabs.find(g => g.id == t.id))
-                    result.push(t);
-        }
+      if (this.graphService.canAdd) {
+        const existing = this.graphService.graphTabs.map(t => t.id);
+        for (var t of this.graphCategories)
+          if ((t.id == 'Multi' || t.id == 'All') && (existing.includes('All') || existing.includes('Multi'))) {
+            // dont compare all to multi, or either to itself
+          }
+          else if (!existing.includes(t.id)) {
+            // if it doesnt exist, add it
+            result.push(t);
+          }
+      }
+
+      return result;
+    }
 
-        return result;
+    private addTab(id: string) {
+      if (id == 'Multi')
+        this.dialogService.openDialog('multi-select-reg');
+      else
+        this.graphService.addTab(id);
     }
 
     //private DrawTable(data: DAG) {

utils/importer.js

@@ -362,6 +362,17 @@ function importXlsx() {
 
           allDocs.push(allDoc);
 
+          // Create multi-doc metadata
+          var multiDoc = {
+              "type": "Multi-Select",
+              "id": "Multi",
+              "rev": 1,
+              "children": [],
+              "langs": []
+          };
+
+          allDocs.push(multiDoc);
+
           var db = {
             "changelog": changeLog,
             "docs": allDocs