NRPT-198: Link records to collection (#515)

Author: KitArmstrong

angular/projects/admin-nrpti/src/app/mines/mines-collections-add-edit/mines-collections-add-edit.component.ts

@@ -2,6 +2,7 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import {Location} from '@angular/common';
 import moment from 'moment';
 import { DialogService } from 'ng2-bootstrap-modal';
 import { LoadingScreenService, Utils, StoreService } from 'nrpti-angular-components';
@@ -44,6 +45,7 @@ export class MinesCollectionsAddEditComponent implements OnInit, OnDestroy {
   constructor(
     public route: ActivatedRoute,
     public router: Router,
+    private location: Location,
     private recordUtils: RecordUtils,
     private factoryService: FactoryService,
     private loadingScreenService: LoadingScreenService,
@@ -172,7 +174,8 @@ export class MinesCollectionsAddEditComponent implements OnInit, OnDestroy {
           false
       ),
       collectionRecords: new FormArray(
-        (this.collectionState && this.getRecordsFormGroups(this.collectionState.collectionRecords)) ||
+        // If editing and have selected records then combine them with existing collection records.
+        (this.collectionState && this.getRecordsFormGroups(this.getUniqueRecords())) ||
           (this.collection && this.getRecordsFormGroups(this.collection.collectionRecords)) ||
           []
       )
@@ -192,6 +195,26 @@ export class MinesCollectionsAddEditComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * If records are arriving form the Records List screen then combine them
+   * with existing collection records, but make sure they are unique.
+   *
+   * @returns {obejct[]} Unique records.
+   */
+  getUniqueRecords() {
+    const records = this.collection && this.collection.collectionRecords || [];
+    const stateRecords = this.collectionState && this.collectionState.collectionRecords || [];
+    const collectionRecords = this.collection && this.collection.collectionRecords || [];
+
+    for (const stateRecord of stateRecords) {
+      if (!collectionRecords.find(collectionRecord => stateRecord._id === collectionRecord._id)) {
+        records.push(stateRecord);
+      }
+    }
+
+    return records;
+  }
+
   /**
    * Builds an array of records FormGroups, each with its own set of FormControls.
    *
@@ -413,7 +436,7 @@ export class MinesCollectionsAddEditComponent implements OnInit, OnDestroy {
       if (this.isEditing) {
         this.router.navigate(['mines', this.collection._master, 'collections', this.collection._id, 'detail']);
       } else {
-        this.router.navigate(['../'], { relativeTo: this.route });
+        this.location.back();
       }
     }
   }

angular/projects/admin-nrpti/src/app/mines/mines-collections-list/mines-collections-list.component.ts

@@ -10,7 +10,8 @@ import {
   LoadingScreenService,
   TableObject,
   TableTemplateUtils,
-  Utils
+  Utils,
+  StoreService,
 } from 'nrpti-angular-components';
 import { MinesCollectionsTableRowComponent } from '../mines-collections-rows/mines-collections-table-row.component';
 import {
@@ -21,6 +22,8 @@ import {
   DateFilterDefinition
 } from '../../../../../common/src/app/search-filter-template/filter-object';
 import { Mine } from '../../../../../common/src/app/models/bcmi/mine';
+import { StateIDs, StateStatus } from '../../../../../common/src/app/utils/record-constants';
+
 
 /**
  * Mine list page component.
@@ -75,11 +78,6 @@ export class MinesCollectionsListComponent implements OnInit, OnDestroy {
       name: 'Publish State',
       value: 'published',
       width: 'col-2'
-    },
-    {
-      name: '', // Buttons
-      width: 'col-1',
-      nosort: true
     }
   ];
 
@@ -88,11 +86,15 @@ export class MinesCollectionsListComponent implements OnInit, OnDestroy {
   public queryParams: Params;
   public mine: Mine;
 
+  // collection add edit state
+  public collectionState = null;
+
   constructor(
     public location: Location,
     public router: Router,
     public route: ActivatedRoute,
     public utils: Utils,
+    private storeService: StoreService,
     private loadingScreenService: LoadingScreenService,
     private tableTemplateUtils: TableTemplateUtils,
     private _changeDetectionRef: ChangeDetectorRef
@@ -157,6 +159,8 @@ export class MinesCollectionsListComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.loadingScreenService.setLoadingState(true, 'body');
 
+    this.setOrRemoveCollectionAddEditState();
+
     this.route.params.pipe(takeUntil(this.ngUnsubscribe)).subscribe((params: Params) => {
       this.queryParams = { ...params };
       // Get params from route, shove into the tableTemplateUtils so that we get a new dataset to work with.
@@ -325,6 +329,13 @@ export class MinesCollectionsListComponent implements OnInit, OnDestroy {
    * @memberof MinesCollectionsListComponent
    */
   ngOnDestroy(): void {
+    // When the component is destroying, if collectionAddEdit state exists, but the user hadn't clicked the
+    // 'Add to collection' button, then remove the state from the store.
+    const collectionAddEditState = this.storeService.getItem(StateIDs.collectionAddEdit);
+    if (collectionAddEditState && collectionAddEditState.status !== StateStatus.valid) {
+      this.storeService.removeItem(StateIDs.collectionAddEdit);
+    }
+
     this.loadingScreenService.setLoadingState(false, 'body');
 
     this.ngUnsubscribe.next();
@@ -356,6 +367,23 @@ export class MinesCollectionsListComponent implements OnInit, OnDestroy {
     this.submit();
   }
 
+
+  /**
+   * Sets the initial collectionState state, or removes it from the store if it is invalid.
+   *
+   * @memberof MinesRecordsListComponent
+   */
+  setOrRemoveCollectionAddEditState() {
+    const tempCollectionAddEditState = this.storeService.getItem(StateIDs.collectionAddEdit);
+    if (tempCollectionAddEditState) {
+      if (tempCollectionAddEditState.status === StateStatus.invalid) {
+        this.storeService.removeItem(StateIDs.collectionAddEdit);
+      } else {
+        this.collectionState = tempCollectionAddEditState;
+      }
+    }
+  }
+
   private clearQueryParamsFilters() {
     delete this.queryParams['keywords'];
     delete this.queryParams['isBcmiPublished'];

angular/projects/admin-nrpti/src/app/mines/mines-collections-rows/mines-collections-table-row.component.html

@@ -17,19 +17,20 @@
   </ng-template>
 </td>
 <td scope="row" class="col-1 d-xl-flex" (click)="$event.stopPropagation()">
-  <button class="btn" type="button" (click)="goToEdit()" title="Edit record">
+  <button class="btn" type="button" [disabled]="isEditingCollection" (click)="goToEdit()" title="Edit record">
     <i class="material-icons">create</i>
   </button>
-  <button mat-icon-button class="btn" [matMenuTriggerFor]="menu" title="More options" aria-label="More options menu">
+  <button mat-icon-button class="btn" [disabled]="isEditingCollection" [matMenuTriggerFor]="menu" title="More options" aria-label="More options menu">
     <i class="material-icons">more_vert</i>
   </button>
   <mat-menu #menu="matMenu">
-    <button mat-menu-item (click)="goToDetails()" title="View collection details">
+    <button mat-menu-item [disabled]="isEditingCollection" (click)="goToDetails()" title="View collection details">
       View Collection Details
     </button>
     <button
       mat-menu-item
       *ngIf="rowData.read && !rowData.read.includes('public')"
+      [disabled]="isEditingCollection"
       (click)="publishCollection()"
       title="Publish collection"
     >
@@ -38,12 +39,13 @@
     <button
       mat-menu-item
       *ngIf="rowData.read && rowData.read.includes('public')"
+      [disabled]="isEditingCollection"
       (click)="unpublishCollection()"
       title="Unpublish collection"
     >
       Unpublish Collection
     </button>
-    <button mat-menu-item (click)="deleteCollection()" title="Delete collection">
+    <button mat-menu-item [disabled]="isEditingCollection" (click)="deleteCollection()" title="Delete collection">
       Delete Collection
     </button>
   </mat-menu>

angular/projects/admin-nrpti/src/app/mines/mines-collections-rows/mines-collections-table-row.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectorRef, Component, HostListener, OnInit, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { DialogService } from 'ng2-bootstrap-modal';
-import { TableRowComponent } from 'nrpti-angular-components';
+import { TableRowComponent, StoreService } from 'nrpti-angular-components';
 import { ConfirmComponent } from '../../confirm/confirm.component';
 import { FactoryService } from '../../services/factory.service';
+import { StateIDs, StateStatus } from '../../../../../common/src/app/utils/record-constants';
 import { takeUntil, catchError } from 'rxjs/operators';
 import { Subject, of } from 'rxjs';
 
@@ -13,11 +14,13 @@ import { Subject, of } from 'rxjs';
   styleUrls: ['./mines-collections-table-row.component.scss']
 })
 export class MinesCollectionsTableRowComponent extends TableRowComponent implements OnInit, OnDestroy {
+  public isEditingCollection: boolean;
   private ngUnsubscribe: Subject<boolean> = new Subject<boolean>();
 
   constructor(
     private router: Router,
     private route: ActivatedRoute,
+    private storeService: StoreService,
     public changeDetectionRef: ChangeDetectorRef,
     public factoryService: FactoryService,
     private dialogService: DialogService
@@ -26,6 +29,8 @@ export class MinesCollectionsTableRowComponent extends TableRowComponent impleme
   }
 
   ngOnInit() {
+    this.setOrRemoveCollectionAddEditState();
+
     this.changeDetectionRef.detectChanges();
   }
 
@@ -38,7 +43,11 @@ export class MinesCollectionsTableRowComponent extends TableRowComponent impleme
    * @memberof MinesCollectionsTableRowComponent
    */
   @HostListener('click') onItemClicked() {
-    this.goToDetails();
+    if (this.isEditingCollection) {
+      this.goToEdit();
+    } else {
+      this.goToDetails();
+    }
   }
 
   /**
@@ -156,7 +165,29 @@ export class MinesCollectionsTableRowComponent extends TableRowComponent impleme
       });
   }
 
+  /**
+   * Sets the initial collectionState state, or removes it from the store if it is invalid.
+   *
+   * @memberof MinesRecordsListComponent
+   */
+  setOrRemoveCollectionAddEditState() {
+    const tempCollectionAddEditState = this.storeService.getItem(StateIDs.collectionAddEdit);
+    if (tempCollectionAddEditState) {
+      if (tempCollectionAddEditState.status === StateStatus.invalid) {
+        this.storeService.removeItem(StateIDs.collectionAddEdit);
+        this.isEditingCollection = false;
+      } else {
+        this.isEditingCollection = true;
+      }
+    }
+  }
+
   ngOnDestroy() {
+    const collectionAddEditState = this.storeService.getItem(StateIDs.collectionAddEdit);
+    if (collectionAddEditState && collectionAddEditState.status !== StateStatus.valid) {
+      this.storeService.removeItem(StateIDs.collectionAddEdit);
+    }
+
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();
   }

angular/projects/admin-nrpti/src/app/mines/mines-records-list/mines-records-list.component.html

@@ -52,6 +52,18 @@ <h1 id="name" class="m-0">{{ (mine && mine.name) || '-' }}</h1>
     </search-filter-template>
   </section>
 
+  <section class="d-flex justify-content-end">
+    <div>
+      <span ngbDropdown>
+        <button class="btn btn-primary" id="actionDropdown" ngbDropdownToggle>Actions</button>
+        <div class="dropdown-menu" aria-labelledby="actionDropdown" ngbDropdownMenu>
+          <button class="dropdown-item" [disabled]="!anySelectedRecords()" (click)="submitAddEditCollectionRecords()">Add to new Collection</button>
+          <button class="dropdown-item" [disabled]="!anySelectedRecords()" (click)="submitAddToExistingCollection()">Add to existing Collection</button>
+        </div>
+      </span>
+    </div>
+  </section>
+
   <section *ngIf="collectionState">
     <div class="d-flex justify-content-end mb-1">
       <div>

angular/projects/admin-nrpti/src/app/mines/mines-records-list/mines-records-list.component.ts

@@ -439,7 +439,7 @@ export class MinesRecordsListComponent implements OnInit, OnDestroy {
    * @memberof MinesRecordsListComponent
    */
   updateCollectionAddEditState(rowData: any, checked: boolean) {
-    if (!rowData || !this.collectionState) {
+    if (!rowData) {
       return;
     }
 
@@ -540,13 +540,34 @@ export class MinesRecordsListComponent implements OnInit, OnDestroy {
       }
     });
 
-    if (this.collectionState.collectionId) {
+    if (this.collectionState && this.collectionState.collectionId) {
       this.router.navigate(['mines', this.mine._id, 'collections', this.collectionState.collectionId, 'edit']);
     } else {
       this.router.navigate(['mines', this.mine._id, 'collections', 'add']);
     }
   }
 
+  /**
+   * Submit adding records to an existing collection.
+   *
+   * @memberof MinesRecordsListComponent
+   */
+  submitAddToExistingCollection() {
+    // Mark collectionAddEdit status as valid
+    this.storeService.setItem({
+      [StateIDs.collectionAddEdit]: {
+        ...this.storeService.getItem(StateIDs.collectionAddEdit),
+        status: StateStatus.valid
+      }
+    });
+
+    this.router.navigate(['mines', this.mine._id, 'collections']);
+  }
+
+  anySelectedRecords() {
+    return this.storeService.getItem(StateIDs.collectionAddEdit) ? true : false;
+  }
+
   /**
    * Cleanup on component destroy.
    *