Merge pull request #343 from severinbeauvais/PRC-1028

PRC-1028: prevent create/publish/edit/save when app is retired

src/app/applications/application-add-edit/application-add-edit.component.html

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="title-container">
       <div class="title-container__title">
-        <h1><span class="text-muted">Crown land File: {{application['clFile']}} &nbsp;&rsaquo;&nbsp; </span>
+        <h1><span class="text-muted">Crown land File: {{application.clFile}} &nbsp;&rsaquo;&nbsp; </span>
           {{!application._id ? 'Create' : 'Edit'}} Application
         </h1>
         <span class="title-container__sub text-muted">Disposition Transaction: {{application.tantalisID}}</span>
@@ -11,21 +11,36 @@ <h1><span class="text-muted">Crown land File: {{application['clFile']}} &nbsp;&r
         <button class="btn btn-light" type="button" title="Cancel changes" (click)="cancelChanges()">
           Cancel
         </button>
-        <button class="btn btn-primary" type="button" title="Submit new application"
-          *ngIf="!application._id" (click)="addApplication()" [disabled]="isSubmitting">
-          <i class="spinner rotating" [hidden]="!isSubmitting"></i>
-          <span>{{isSubmitting ? 'Saving' : 'Save'}}</span>
-        </button>
-        <button class="btn btn-primary" type="button" title="Save application"
-          *ngIf="application._id && application.isPublished === false" (click)="saveApplication()" [disabled]="isSaving">
-          <i class="spinner rotating" [hidden]="!isSaving"></i>
-          <span>{{isSaving ? 'Saving' : 'Save'}}</span>
-        </button>
-        <button class="publish-btn btn btn-primary" type="button" title="Publish Changes"
-          *ngIf="application._id && application.isPublished === true" (click)="saveApplication()" [disabled]="isSaving">
-          <i class="spinner rotating" [hidden]="!isSaving"></i>
-          <span>{{isSaving ? 'Publishing' : 'Publish Changes'}}</span>
-        </button>
+        <div class="btn-container">
+          <button class="btn btn-primary ml-1" type="button" title="Submit new application"
+            *ngIf="!application._id"
+            (click)="addApplication()"
+            [disabled]="isSubmitting || application.isRetired">
+            <i class="spinner rotating" [hidden]="!isSubmitting"></i>
+            <span>{{isSubmitting ? 'Saving' : 'Save'}}</span>
+          </button>
+          <span title="You cannot save a retired application"></span>
+        </div>
+        <div class="btn-container">
+          <button class="btn btn-primary ml-1" type="button" title="Save application"
+            *ngIf="application._id && application.isPublished === false"
+            (click)="saveApplication()"
+            [disabled]="isSaving || application.isRetired">
+            <i class="spinner rotating" [hidden]="!isSaving"></i>
+            <span>{{isSaving ? 'Saving' : 'Save'}}</span>
+          </button>
+          <span title="You cannot save a retired application"></span>
+        </div>
+        <div class="btn-container">
+          <button class="publish-btn btn btn-primary ml-1" type="button" title="Publish changes"
+            *ngIf="application._id && application.isPublished === true"
+            (click)="saveApplication()"
+            [disabled]="isSaving || application.isRetired">
+            <i class="spinner rotating" [hidden]="!isSaving"></i>
+            <span>{{isSaving ? 'Publishing' : 'Publish Changes'}}</span>
+          </button>
+          <span title="You cannot publish changes to a retired application"></span>
+        </div>
       </div>
     </div>
   </div>
@@ -83,7 +98,7 @@ <h1><span class="text-muted">Crown land File: {{application['clFile']}} &nbsp;&r
         <div class="form-group">
           <label>Applicant(s)</label>
           <div class="applicant-display">
-            {{application['applicants'] || 'No Applicant on this File'}}
+            {{application.applicants || 'No Applicant on this File'}}
           </div>
         </div>
 

src/app/applications/application-add-edit/application-add-edit.component.scss

@@ -67,3 +67,16 @@ form {
   padding: 0.75rem 1rem;
   background: #f7f8fa;
 }
+
+.btn-container {
+  position: relative;
+  display: inline-block;
+
+  button:disabled + span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

src/app/applications/application-detail/application-detail.component.html

@@ -2,29 +2,38 @@
   <div class="container">
     <div class="title-container">
       <div class="title-container__title">
-        <h1>Crown land File: {{application['clFile']}}</h1>
+        <h1>Crown land File: {{application.clFile}}</h1>
         <span class="title-container__sub text-muted">Disposition Transaction: {{application.tantalisID}}</span>
       </div>
       <div class="title-container__actions">
-        <button class="btn btn-light" type="button" [routerLink]="['/a', application._id, 'edit']">
-          Edit
-        </button>
-        <button class="btn btn-primary" type="button"
-          *ngIf="!application.isPublished && !isRetired"
-          (click)="publishApplication()"
-          [disabled]="isPublishing">
-          <i class="spinner rotating" [hidden]="!isPublishing"></i>
-          <span>{{isPublishing ? 'Publishing' : 'Publish'}}</span>
-        </button>
-        <button class="btn btn-primary" type="button"
+        <div class="btn-container">
+          <button class="btn btn-light" type="button" title="Edit application"
+            [routerLink]="['/a', application._id, 'edit']"
+            [disabled]="application.isRetired">
+            Edit
+          </button>
+          <span title="You cannot edit a retired application"></span>
+        </div>
+        <div class="btn-container">
+          <button class="btn btn-primary ml-1" type="button" title="Publish application"
+            *ngIf="!application.isPublished"
+            (click)="publishApplication()"
+            [disabled]="isPublishing || application.isRetired">
+            <i class="spinner rotating" [hidden]="!isPublishing"></i>
+            <span>{{isPublishing ? 'Publishing' : 'Publish'}}</span>
+          </button>
+          <span title="You cannot publish a retired application"></span>
+        </div>
+        <!-- NB: you CAN unpublish a retired application -->
+        <button class="btn btn-primary ml-1" type="button" title="Unpublish application"
           *ngIf="application.isPublished"
           (click)="unPublishApplication()"
           [disabled]="isUnpublishing">
           <i class="spinner rotating" [hidden]="!isUnpublishing"></i>
           <span>{{isUnpublishing ? 'Unpublishing' : 'Unpublish'}}</span>
         </button>
         <span class="vert-pipe">&nbsp;</span>
-        <button class="btn btn-icon" title="Remove this application from PRC"
+        <button class="btn btn-icon" title="Remove this application from ACRFD"
           (click)="deleteApplication()"
           [disabled]="isDeleting">
           <i class="material-icons">
@@ -38,19 +47,19 @@ <h1>Crown land File: {{application['clFile']}}</h1>
 
 <div class="bottom-container" *ngIf="application">
   <div class="container">
-    <ngb-alert type="primary" [dismissible]="false" *ngIf="application['retireDate'] && !isRetired">
+    <ngb-alert type="primary" [dismissible]="false" *ngIf="application.retireDate && !application.isRetired">
       <div class="alert-contents">
         <i class="material-icons">warning</i>
         <div class="alert-msg">
-          This application will be visible on the public website until {{application['retireDate'] | date:'longDate'}}.
+          This application will be visible on the public website until {{application.retireDate | date:'longDate'}}.
         </div>
       </div>
     </ngb-alert>
-    <ngb-alert type="warning" [dismissible]="false" *ngIf="application['retireDate'] && isRetired">
+    <ngb-alert type="warning" [dismissible]="false" *ngIf="application.retireDate && application.isRetired">
       <div class="alert-contents">
         <i class="material-icons">warning</i>
         <div class="alert-msg">
-          This application was removed from the public website on {{application['retireDate'] | date:'longDate'}}.
+          This application was removed from the public website on {{application.retireDate | date:'longDate'}}.
         </div>
       </div>
     </ngb-alert>
@@ -77,7 +86,7 @@ <h2>Details</h2>
                   <ul class="nv-list">
                     <li>
                       <span class="name">Applicant(s):</span>
-                      <span class="value">{{application['applicants'] || 'No Applicant on this File'}}</span>
+                      <span class="value">{{application.applicants || 'No Applicant on this File'}}</span>
                     </li>
                     <li>
                       <span class="name">Purpose/Subpurpose:</span>
@@ -227,7 +236,7 @@ <h3 class="title">Comment Period Details</h3>
               </li>
             </ul>
             <div class="btn-container">
-              <button class="cta-btn btn btn-sm btn-outline-primary" type="button"
+              <button class="cta-btn btn btn-sm btn-outline-primary" type="button" title="Review comments"
                 [routerLink]="['/comments', application._id]">
                 Review Comments<span *ngIf="application['numComments'] >= 0">&nbsp;({{application['numComments']}})</span>
               </button>
@@ -265,11 +274,13 @@ <h3 class="title">Application Decision</h3>
               </ul>
             </div>
             <div class="btn-container">
-              <button class="cta-btn btn btn-sm btn-outline-primary" type="button"
+              <button class="cta-btn btn btn-sm btn-outline-primary" type="button" title="Edit decision"
                 [routerLink]="['/a', application._id, 'edit']"
+                [disabled]="application.isRetired"
                 fragment="appDecision">
                 Edit Decision
               </button>
+              <span title="You cannot edit the decision of a retired application"></span>
             </div>
           </div>
         </div>

src/app/applications/application-detail/application-detail.component.scss

@@ -144,4 +144,26 @@ section {
 
 ngb-alert {
   margin-bottom: 1.5rem;
+}
+
+.btn-container {
+  position: relative;
+
+  button:disabled + span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.title-container__actions .btn-container {
+  display: inline-block;
+}
+
+.btn-container .cta-btn:disabled + span {
+  width: 12rem;
+  left: 50%;
+  margin-left: -6rem;
 }

src/app/applications/application-detail/application-detail.component.ts

@@ -6,7 +6,6 @@ import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/takeUntil';
 import 'rxjs/add/operator/concat';
 import { of } from 'rxjs';
-import * as moment from 'moment';
 
 import { ConfirmComponent } from 'app/confirm/confirm.component';
 import { Application } from 'app/models/application';
@@ -28,7 +27,6 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy {
   public isPublishing = false;
   public isUnpublishing = false;
   public isDeleting = false;
-  public isRetired = false;
   public application: Application = null;
   private snackBarRef: MatSnackBarRef<SimpleSnackBar> = null;
   private ngUnsubscribe: Subject<boolean> = new Subject<boolean>();
@@ -54,10 +52,6 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy {
         (data: { application: Application }) => {
           if (data.application) {
             this.application = data.application;
-            // set flag if retire date is in the past
-            if (this.application['retireDate']) {
-              this.isRetired = moment(this.application['retireDate']).isBefore();
-            }
           } else {
             alert('Uh-oh, couldn\'t load application');
             // application not found --> navigate back to search

src/app/applications/application-list/application-list.component.html

@@ -24,11 +24,11 @@ <h2>Crown Lands Applications in British Columbia</h2>
       <table class="table application-table">
         <thead class="application-table__sort-header">
           <tr>
-            <th class="application-table__name-col sortable" (click)="sort('client')">Applicant(s)
-              <i class="sort" [ngClass]="{'sort-asc': (column == 'client' && direction < 0), 'sort-desc': (column == 'client' && direction > 0) }" aria-hidden="true"></i>
+            <th class="application-table__name-col sortable" (click)="sort('applicants')">Applicant(s)
+              <i class="sort" [ngClass]="{'sort-asc': (column == 'applicants' && direction < 0), 'sort-desc': (column == 'applicants' && direction > 0) }" aria-hidden="true"></i>
             </th>
-            <th class="application-table__cl_file-col sortable" (click)="sort('cl_file')">CL File
-              <i class="sort" [ngClass]="{'sort-asc': (column == 'cl_file' && direction < 0), 'sort-desc': (column == 'cl_file' && direction > 0) }" aria-hidden="true"></i>
+            <th class="application-table__cl_file-col sortable" (click)="sort('clFile')">CL File
+              <i class="sort" [ngClass]="{'sort-asc': (column == 'clFile' && direction < 0), 'sort-desc': (column == 'clFile' && direction > 0) }" aria-hidden="true"></i>
             </th>
             <th class="application-table__purpose-col sortable" (click)="sort('purpose')">Purpose / Subpurpose
               <i class="sort" [ngClass]="{'sort-asc': (column == 'purpose' && direction < 0), 'sort-desc': (column == 'purpose' && direction > 0) }" aria-hidden="true"></i>
@@ -54,9 +54,9 @@ <h2>Crown Lands Applications in British Columbia</h2>
                     <i class="material-icons open-icon">arrow_drop_down</i>
                     <i class="material-icons close-icon">arrow_drop_up</i>
                   </a>
-                  <span class="accordion__collapse-header--column application-table__name-col">{{app['applicants'] || '-'}}</span>
+                  <span class="accordion__collapse-header--column application-table__name-col">{{app.applicants || '-'}}</span>
                   <span class="accordion__collapse-header--column application-table__cl_file-col">
-                    <a [routerLink]="['/a', app._id]">{{app['clFile'] || '-'}}</a>
+                    <a [routerLink]="['/a', app._id]">{{app.clFile || '-'}}</a>
                   </span>
                   <span class="accordion__collapse-header--column application-table__purpose-col">{{app.purpose || '-'}} / {{app.subpurpose || '-'}}</span>
                   <span class="accordion__collapse-header--column application-table__region-col">{{app.region || '-'}}</span>

src/app/applications/application-resolver.service.ts

@@ -39,7 +39,7 @@ export class ApplicationDetailResolver implements Resolve<Application> {
 
       // 7-digit CL File number for display
       if (application.cl_file) {
-        application['clFile'] = application.cl_file.toString().padStart(7, '0');
+        application.clFile = application.cl_file.toString().padStart(7, '0');
       }
 
       // user-friendly application status
@@ -52,12 +52,14 @@ export class ApplicationDetailResolver implements Resolve<Application> {
       // derive unique applicants
       if (application.client) {
         const clients = application.client.split(', ');
-        application['applicants'] = _.uniq(clients).join(', ');
+        application.applicants = _.uniq(clients).join(', ');
       }
 
       // derive retire date
       if (application.statusHistoryEffectiveDate && [this.applicationService.DECISION_APPROVED, this.applicationService.DECISION_NOT_APPROVED, this.applicationService.ABANDONED].includes(appStatusCode)) {
-        application['retireDate'] = moment(application.statusHistoryEffectiveDate).endOf('day').add(6, 'months');
+        application.retireDate = moment(application.statusHistoryEffectiveDate).endOf('day').add(6, 'months').toDate();
+        // set flag if retire date is in the past
+        application.isRetired = moment(application.retireDate).isBefore();
       }
 
       return of(application);

src/app/applications/review-comments/review-comments.component.html

@@ -8,7 +8,7 @@
     </div>
     <div class="title-container">
       <div class="title-container__title">
-        <h1>Review Comments for Crown Land File: {{application['clFile']}}</h1>
+        <h1>Review Comments for Crown Land File: {{application.clFile}}</h1>
       </div>
       <div class="title-container__actions">
         <button class="btn btn-light" (click)="exportToExcel()" [disabled]="comments.length === 0">

src/app/applications/review-comments/review-comments.component.ts

@@ -159,13 +159,13 @@ export class ReviewCommentsComponent implements OnInit, OnDestroy {
               delete document.isDeleted;
             });
             // add necessary properties
-            // comment['applicants'] = this.application['applicants']; // FUTURE
-            comment['cl_file'] = this.application['clFile'];
+            // comment.applicants = this.application.applicants; // FUTURE
+            comment['cl_file'] = this.application.clFile;
             return this.flatten_fastest(comment);
           });
 
           const excelFileName = 'comments-'
-            + this.application['applicants'].replace(/\s/g, '_')
+            + this.application.applicants.replace(/\s/g, '_')
             + moment(new Date()).format('-YYYYMMDD');
           const columnOrder: Array<string> = [
             'cl_file',

src/app/models/application.ts

@@ -26,11 +26,16 @@ export class Application {
   tenureStage: string;
   type: string;
   statusHistoryEffectiveDate: Date = null;
+  tags: Array<string> = [];
 
   region: string; // region code derived from Business Unit
   appStatus: string; // user-friendly application status
   cpStatus: string; // user-friendly comment period status
 
+  clFile: string;
+  applicants: string;
+  retireDate: Date = null;
+  isRetired = false;
   isPublished = false; // depends on tags; see below
 
   // associated data
@@ -58,6 +63,9 @@ export class Application {
     this.region       = obj && obj.region       || null;
     this.appStatus    = obj && obj.appStatus    || null;
     this.cpStatus     = obj && obj.cpStatus     || null;
+    this.clFile       = obj && obj.clFile       || null;
+    this.applicants   = obj && obj.applicants   || null;
+    this.isRetired    = obj && obj.isRetired    || null;
 
     if (obj && obj.publishDate) {
       this.publishDate = new Date(obj.publishDate);
@@ -67,6 +75,10 @@ export class Application {
       this.statusHistoryEffectiveDate = new Date(obj.statusHistoryEffectiveDate);
     }
 
+    if (obj && obj.retireDate) {
+      this.retireDate = new Date(obj.retireDate);
+    }
+
     // replace \\n (JSON format) with newlines
     if (obj && obj.description) {
       this.description = obj.description.replace(/\\n/g, '\n');
@@ -82,6 +94,13 @@ export class Application {
       }
     }
 
+    // copy tags
+    if (obj && obj.tags) {
+      for (const tag of obj.tags) {
+        this.tags.push(tag);
+      }
+    }
+
     if (obj && obj.currentPeriod) {
       this.currentPeriod = new CommentPeriod(obj.currentPeriod);
     }