Working on the logic for logging out and basket not saved. Adding save …

…geneontology/noctua-annotation-review#30
geneontology · Jan 13, 2021 · 018d648 · 018d648
1 parent 6d8375f
commit 018d648
Show file tree

Hide file tree

Showing 10 changed files with 258 additions and 223 deletions.
diff --git a/src/@noctua.search/components/art-basket/art-basket.component.html b/src/@noctua.search/components/art-basket/art-basket.component.html
@@ -28,6 +28,11 @@
           [matTooltipPosition]="'below'" [matTooltipShowDelay]="1000">
           Undo
         </button>
+        <button class="noc-rounded-button noc-xs noc-action-button" mat-stroked-button
+          (click)="saveCam(cam); $event.stopPropagation()" color="primary" matTooltip="Save Model Changes"
+          [matTooltipPosition]="'below'" [matTooltipShowDelay]="1000">
+          Save
+        </button>
       </div>
       <div class="noc-item-body w-100-p" fxLayout="row" fxLayoutAlign="start center">
         <div class="w-100-p h-100-p" fxLayout="column" fxLayoutAlign="start start">

diff --git a/src/@noctua.search/components/art-basket/art-basket.component.ts b/src/@noctua.search/components/art-basket/art-basket.component.ts
@@ -65,7 +65,6 @@ export class ArtBasketComponent implements OnInit, OnDestroy {
 
         this.summary = summary;
       });
-
   }
 
   selectItem(artBasketItem: ArtBasketItem) {
@@ -189,8 +188,6 @@ export class ArtBasketComponent implements OnInit, OnDestroy {
       }
     };
 
-
-
     const options = {
       cancelLabel: 'Go Back',
       confirmLabel: 'Submit'

diff --git a/src/@noctua.search/components/dialogs/cams-review-changes/cams-review-changes.component.html b/src/@noctua.search/components/dialogs/cams-review-changes/cams-review-changes.component.html
@@ -6,40 +6,64 @@
     </mat-toolbar-row>
   </mat-toolbar>
   <div class="noc-dialog-body  noc-form-section">
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <div fxFlex="200px">
-        Summary
+    <div class="noc-stats-results" fxLayout="column" fxLayoutAlign="start center">
+      <div class="noc-stat-summary">
+        <span class="noc-number">
+          {{summary?.stats.totalChanges }}
+        </span>
+        changes across
+        <span class="noc-number">
+          {{summary?.stats.camsCount }} models
+        </span>
       </div>
-      <div fxFlex>
-        Details
-      </div>
-    </div>
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <div fxFlex="200px">
-        Models
-      </div>
-      <div fxFlex>
-        {{summary?.stats.camss}}
-      </div>
-    </div>
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <div fxFlex="200px">
-        Terms
+      <table fxFlex="1 1 auto" mat-table class="noc-summary-table" [dataSource]="stats"
+        [@animateStagger]="{value:'50'}">
+        <ng-container matColumnDef="category">
+          <th mat-header-cell *matHeaderCellDef fxFlex="250px" fxLayout="row" fxLayoutAlign="start center">
+            Category
+          </th>
+          <td mat-cell *matCellDef="let stat" fxFlex="250px" class="noc-title" fxLayout="row"
+            fxLayoutAlign="start center">
+            {{stat.category }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="count">
+          <th mat-header-cell *matHeaderCellDef fxFlex="" fxLayout="row" fxLayoutAlign="start center">Changes</th>
+          <td mat-cell *matCellDef="let stat" fxFlex="" fxLayout="row" fxLayoutAlign="start center">
+            {{stat.count}}
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row (click)="$event.stopPropagation()" *matRowDef="let stat; columns: displayedColumns;">
+        </tr>
+      </table>
+      <!--   <div fxLayout="row" fxLayoutAlign="start center">
+        <div fxFlex="200px">
+          Summary
+        </div>
+        <div fxFlex>
+          Details
+        </div>
       </div>
-      <div fxFlex>
-        <div *ngFor="let modelSummary of summary.details">
-          <div *ngFor="let term of modelSummary.changes?.terms">
-            <div *ngFor="let termHistory of term.termHistory">
-              {{term.label}} -> {{termHistory.label}}
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <div fxFlex="200px">
+          Terms
+        </div>
+        <div fxFlex>
+          <div *ngFor="let modelSummary of summary">
+            <div *ngFor="let term of modelSummary.changes?.terms">
+              <div *ngFor="let termHistory of term.termHistory">
+                {{term.label}} -> {{termHistory.label}}
+              </div>
             </div>
           </div>
         </div>
-      </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">Go Back</button>
     <button (click)="save()" type="button" mat-raised-button color="warn">Save</button>
   </div>
-</div>
+</div>
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
@@ -9,20 +9,81 @@
       </button>
     </mat-toolbar-row>
   </mat-toolbar>
-  <div class="noc-dialog-body  noc-form-section">
+  <div class="noc-dialog-body  noc-form-section" noctuaPerfectScrollbar>
     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}}
+    It looks like you have pending changes for Annotation Review Tool.
+    .If you leave before saving, your basket changes will be lost
+
+    <div *ngFor="let cam of cams" class="noc-group-row"
+      [ngClass]="{'noc-selected': cam.id===camsService.currentMatch?.modelId}" fxLayout="column"
+      fxLayoutAlign="start stretch">
+      <div *ngIf="cam.modified" class="noc-modified-header w-100-p" fxLayout="row" fxLayoutAlign="start center">
+        <div class="noc-title">Modified Model:
         </div>
+        (<strong class="mr-4">{{cam.modifiedStats?.totalChanges}}</strong> change(s) )
+        <span fxFlex></span>
+        <button class="noc-rounded-button noc-xs noc-action-button" mat-stroked-button
+          (click)="resetCam(cam); $event.stopPropagation()" color="primary" matTooltip="Undo Model Changes"
+          [matTooltipPosition]="'below'" [matTooltipShowDelay]="1000">
+          Undo
+        </button>
+      </div>
+      <div class="noc-item-body w-100-p" fxLayout="row" fxLayoutAlign="start center">
+        <div class="w-100-p h-100-p" fxLayout="column" fxLayoutAlign="start start">
+          <div class="noc-item" fxLayout="row wrap" fxLayoutAlign="start center">
+            <div class="noc-title">Title:</div> {{cam.title}}
+          </div>
+          <div class="noc-item" fxLayout="row" fxLayoutAlign="start center">
+            <div class="noc-title">State:</div> {{cam.state?.label}}
+          </div>
+          <div *ngIf="cam.moreDetail" class="w-100-p">
+            <div class="noc-item" fxLayout="row wrap" fxLayoutAlign="start center">
+              <div class="noc-title">Contributors:</div>
+              <div class="mr-8" *ngFor="let contributor of cam.contributors" matTooltip="{{contributor.name}}"
+                [matTooltipPosition]="'below'" [matTooltipShowDelay]="1000">
+                {{contributor.name ? contributor.name :contributor.orcid}};
+              </div>
+            </div>
+            <div class="noc-item" fxLayout="row wrap" fxLayoutAlign="start center">
+              <div class="noc-title">Groups:</div>
+              <span class="" *ngFor="let group of cam.groups" matTooltip="{{group.name}}" [matTooltipPosition]="'below'"
+                [matTooltipShowDelay]="1000">
+                <div class="noc-chip-label">
+                  {{group.name ? group.name :group.url}}
+                </div>
+              </span>
+            </div>
+            <div class="noc-item" fxLayout="row" fxLayoutAlign="start center">
+              <div class="noc-title">Open In:</div>
+              <a class="mr-4" [href]='cam.model?.modelInfo?.noctuaFormUrl' target="_blank">
+                Noctua Form
+              </a>
+              <span>&#8226;</span>
+              <a class="ml-4" [href]='cam.model?.modelInfo?.graphEditorUrl' target="_blank">
+                Noctua Graph
+              </a>
+            </div>
+          </div>
+          <div class="noc-item">
+            <a (click)="$event.stopPropagation();cam.moreDetail =!cam.moreDetail" class="noc-more-details-button">
+              <span *ngIf="!cam.moreDetail">More Details
+                <fa-icon [icon]="['fas', 'angle-double-down']"></fa-icon>
+              </span>
+              <span *ngIf="cam.moreDetail">Less Details
+                <fa-icon [icon]="['fas', 'angle-double-up']"></fa-icon>
+              </span>
+            </a>
+          </div>
+        </div>
+        <span fxFlex></span>
+        <button class="noc-remove-button" mat-icon-button (click)="remove(cam)" color="warn">X</button>
       </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>
+    <button (click)='close()' type="button" mat-raised-button color="" class="mr-8">Clear List</button>
+    <button (click)="save()" type="button" mat-raised-button color="primary">Save Changes</button>
   </div>
 </div>