Adding the logic for logging out with non empty ART basket geneontolo…

…gy/noctua-annotation-review#30
geneontology · Jan 12, 2021 · 6d8375f · 6d8375f
1 parent 4af1549
commit 6d8375f
Show file tree

Hide file tree

Showing 10 changed files with 401 additions and 9 deletions.
diff --git a/src/@noctua.search/components/art-basket/art-basket.component.ts b/src/@noctua.search/components/art-basket/art-basket.component.ts
@@ -74,8 +74,6 @@ export class ArtBasketComponent implements OnInit, OnDestroy {
     this.noctuaSearchMenuService.scrollTo(q);
   }
 
-
-
   remove(cam: Cam) {
     this.camsService.removeCamFromReview(cam);
     this.noctuaReviewSearchService.removeFromArtBasket(cam.id);

diff --git a/src/@noctua.search/components/dialogs/cams-unsaved/cams-unsaved.component.html b/src/@noctua.search/components/dialogs/cams-unsaved/cams-unsaved.component.html
@@ -0,0 +1,28 @@
+<div class="dialog-content-wrapper">
+  <mat-toolbar class="mat-primary m-0">
+    <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <span class="title dialog-title">
+        Unsaved CHanges (Annotation Review Tool) </span>
+      <span fxFlex></span>
+      <button mat-stroked-button (click)="close()" class="noc-rounded-button noc-sm" aria-label="Close dialog">
+        <mat-icon>close</mat-icon> Close
+      </button>
+    </mat-toolbar-row>
+  </mat-toolbar>
+  <div class="noc-dialog-body  noc-form-section">
+    Replace {{occurrences}} occurrences across {{models}} models
+    <div>
+      <div *ngFor="let model of (groupedEntities | keys)">
+        {{model.key}}
+        <div *ngFor="let entity of model.value">
+          {{entity.label}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="m-0 p-16 noc-dialog-footer" fxLayout="row" fxLayoutAlign="space-between center">
+    <span fxFlex></span>
+    <button (click)='close()' type="button" mat-raised-button color="" class="mr-8">Cancel</button>
+    <button (click)="save()" type="button" mat-raised-button color="primary">Replace</button>
+  </div>
+</div>
diff --git a/src/@noctua.search/components/dialogs/cams-unsaved/cams-unsaved.component.scss b/src/@noctua.search/components/dialogs/cams-unsaved/cams-unsaved.component.scss
@@ -0,0 +1,220 @@
+@import "src/@noctua/scss/noctua";
+@import "src/@noctua.common/scss/noctua.common";
+$primary: map-get($theme, primary);
+$accent: map-get($theme, accent);
+
+:host {
+
+  @include media-breakpoint('xs') {
+    width: 100%;
+  }
+
+  @include media-breakpoint-up('sm') {
+    width: 1200px;
+  }
+
+  .noc-dialog-body {
+    margin: 0;
+    padding: 0;
+    @include deep-width(100%);
+    max-height: 65vh;
+    overflow: auto;
+  }
+
+  .mat-dialog-container {
+    padding: 0;
+  }
+
+  .mat-dialog-content {}
+
+  .dialog-content-wrapper {
+    width: 100%;
+    @include deep-width(100%);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .noc-section-header {
+    padding: 8px 8px;
+    @include deep-height(100px);
+  }
+
+  .noc-matched-count {
+    display: flex;
+    flex-direction: row;
+    justify-items: center;
+    align-items: center;
+    padding: 0 10px;
+    height: 100%;
+  }
+
+  .noc-cam-replace {
+    @include deep-width(2000px);
+  }
+
+  .noc-left-compare,
+  .noc-right-compare {
+    @include deep-width(50%);
+  }
+
+  .noc-left-compare {
+    border-right: #be97f1 double 2px;
+  }
+
+  .noc-cam-heading {
+    margin-bottom: 4px;
+    padding: 0 10px;
+    @include deep-height(40px);
+    width: 100%;
+    //min-height: 35px;
+    background-color: #FFF;
+    font-size: 12px;
+
+    @include mat-elevation(2);
+
+    .noc-cam-title {
+      max-width: 400px !important;
+    }
+
+    .noc-cam-heading-section {
+      height: 100%;
+
+      .noc-section-label {
+        font-size: 12px;
+        color: #555;
+      }
+    }
+
+    .noc-title {
+      padding-left: 8px;
+      padding-right: 8px;
+      max-width: 250px;
+
+      strong {
+        font-size: 12px;
+      }
+    }
+
+    .noc-model-state {
+      padding-left: 8px;
+      padding-right: 8px;
+      max-width: 150px;
+    }
+
+    mat-icon-button {
+      border-radius: 0 !important;
+    }
+  }
+
+
+  mat-chip {
+    font-size: 12px;
+    font-weight: normal;
+    @include deep-height(25px);
+    max-width: 200px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .noc-chip-label {
+      padding: 0 8px 0 4px;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .noc-icon-action {
+        font-size: 10px;
+        background-color: transparent;
+
+        &:hover {
+          font-size: 14px;
+          color: #222;
+        }
+      }
+    }
+
+    &.noc-table-chip {
+      padding: 0;
+      @include deep-height(25px);
+      font-size: 10px;
+
+      .noc-icon,
+      .noc-icon-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 25px;
+        width: 25px;
+        border-radius: 50%;
+        color: #777;
+        font-size: 14px;
+      }
+
+      .noc-icon-action {
+        font-size: 10px;
+        background-color: transparent;
+
+        &:hover {
+          font-size: 14px;
+          color: #222;
+          background-color: rgba(#000000, 0.2);
+        }
+
+      }
+
+      @include noc-chip-color(#DDD);
+
+      &.noc-user-chip {
+        @include noc-chip-color(#bbc9cc);
+
+        .noc-icon {
+          color: #59939e
+        }
+      }
+
+      &.noc-date-chip {
+        @include noc-chip-color(#aee9f5);
+      }
+
+      &.noc-state-chip {
+        &.noc-development {
+          @include noc-chip-color(#f4c89c);
+          // border: #d59f80 solid 1px;/
+        }
+
+        &.noc-production {
+          @include noc-chip-color(#b6f1cc);
+          // border: #d59f80 solid 1px;/
+        }
+
+        &.noc-review {
+          @include noc-chip-color(#d8f6a3);
+          // border: #d59f80 solid 1px;/
+        }
+      }
+
+    }
+  }
+
+
+  .noc-form-container {
+    background-color: #EEE;
+    padding: 20px 10px;
+  }
+
+  .noc-toolbar {
+    padding: 0px 20px;
+    height: 40px;
+    width: 100%;
+    background-color: #F2F2F2;
+    border-bottom: #BBB solid 1px;
+
+    .noc-title {
+      line-height: 38px;
+      color: #555;
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+
+}
diff --git a/src/@noctua.search/components/dialogs/cams-unsaved/cams-unsaved.component.ts b/src/@noctua.search/components/dialogs/cams-unsaved/cams-unsaved.component.ts
@@ -0,0 +1,87 @@
+
+import { Component, OnDestroy, OnInit, ViewChild, Input, Inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatDrawer } from '@angular/material/sidenav';
+import { Subject } from 'rxjs';
+
+
+import {
+  Cam,
+  AnnotonType,
+  NoctuaUserService,
+  NoctuaFormConfigService,
+  NoctuaFormMenuService,
+  NoctuaAnnotonFormService,
+  noctuaFormConfig,
+  CamsService,
+  AnnotonNode,
+  EntityLookup,
+  NoctuaLookupService,
+  EntityDefinition,
+  Entity
+} from 'noctua-form-base';
+
+import { takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import { NoctuaDataService } from '@noctua.common/services/noctua-data.service';
+import { NoctuaSearchService } from '@noctua.search/services/noctua-search.service';
+import { noctuaAnimations } from '@noctua/animations';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormGroup, FormControl } from '@angular/forms';
+import { NoctuaReviewSearchService } from '@noctua.search/services/noctua-review-search.service';
+import { groupBy } from 'lodash';
+
+@Component({
+  selector: 'noc-cams-unsaved-dialog',
+  templateUrl: './cams-unsaved.component.html',
+  styleUrls: ['./cams-unsaved.component.scss'],
+  animations: noctuaAnimations,
+})
+export class CamsUnsavedDialogComponent implements OnInit, OnDestroy {
+  groupedEntities;
+  occurrences = 0;
+  models = 0;
+
+
+  private _unsubscribeAll: Subject<any>;
+
+  constructor
+    (
+      private _matDialogRef: MatDialogRef<CamsUnsavedDialogComponent>,
+      @Inject(MAT_DIALOG_DATA) private _data: any,
+      private camsService: CamsService,
+      private noctuaLookupService: NoctuaLookupService,
+      private noctuaDataService: NoctuaDataService,
+      public noctuaReviewSearchService: NoctuaReviewSearchService,
+      public noctuaSearchService: NoctuaSearchService,
+      public noctuaUserService: NoctuaUserService,
+      public noctuaFormConfigService: NoctuaFormConfigService,
+      public noctuaAnnotonFormService: NoctuaAnnotonFormService,
+      public noctuaFormMenuService: NoctuaFormMenuService) {
+    this._unsubscribeAll = new Subject();
+  }
+
+  ngOnInit(): void {
+    const self = this;
+
+    this.groupedEntities = groupBy(
+      this.noctuaReviewSearchService.matchedEntities, 'modelId') as { string: Entity[] };
+
+    this.models = Object.keys(this.groupedEntities).length;
+    this.occurrences = this.noctuaReviewSearchService.matchedCount;
+  }
+
+  ngOnDestroy(): void {
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  save() {
+    this._matDialogRef.close(true);
+  }
+
+  close() {
+    this._matDialogRef.close();
+  }
+}
+
+
diff --git a/src/@noctua.search/noctua-search.module.ts b/src/@noctua.search/noctua-search.module.ts
@@ -16,6 +16,7 @@ import { ArtBasketComponent } from './components/art-basket/art-basket.component
 import { ReviewFormComponent } from './components/review-form/review-form.component';
 import { CamsReplaceConfirmDialogComponent } from './components/dialogs/cams-replace-confirm/cams-replace-confirm.component';
 import { CamsReviewChangesDialogComponent } from './components/dialogs/cams-review-changes/cams-review-changes.component';
+import { CamsUnsavedDialogComponent } from './components/dialogs/cams-unsaved/cams-unsaved.component';
 
 @NgModule({
     declarations: [
@@ -30,6 +31,7 @@ import { CamsReviewChangesDialogComponent } from './components/dialogs/cams-revi
         ReviewFormComponent,
         CamsReplaceConfirmDialogComponent,
         CamsReviewChangesDialogComponent,
+        CamsUnsavedDialogComponent,
     ],
     imports: [
         CommonModule,
@@ -51,6 +53,7 @@ import { CamsReviewChangesDialogComponent } from './components/dialogs/cams-revi
         ReviewFormComponent,
         CamsReplaceConfirmDialogComponent,
         CamsReviewChangesDialogComponent,
+        CamsUnsavedDialogComponent,
     ]
 })
 export class NoctuaSearchBaseModule {