Course Page Improvements

- Improve UX of Course Page
- Properly disable inputs and buttons when course
is already archived.

Signed-off-by: Kyle Huckins <khuckins@catalyte.io>
 Changes to be committed:
	modified:   Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html
	modified:   Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.ts

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html
index 1d4cf90..82a87c9 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.html
@@ -1,22 +1,29 @@
-<eg-staff-banner bannerText=" {{currentCourse.course_number()}}: {{currentCourse.name()}}" 
-  i18n-bannerText class="mb-3" *ngIf="currentCourse">
+<eg-staff-banner
+  bannerText=" {{currentCourse.course_number()}}: {{currentCourse.name()}}"
+  i18n-bannerText class="mb-3" *ngIf="currentCourse"
+  [bannerStyle]="currentCourse.is_archived() == 't' ? 'alert-secondary' : null"
+  [bannerIcon]="currentCourse.is_archived() == 't' ? 'lock' : null">
 </eg-staff-banner>
 <ngb-tabset #surveyTabs [activeId]="surveyTab" class="mb-3">
   <ngb-tab title="Edit Course" i18n-title id="edit">
     <ng-template ngbTabContent>
-      <div class="col-lg-6 offset-lg-3 mt-3">
-        <div style="text-align: center;">
-          <button class="p-2 mb-3 btn btn-danger btn-lg" 
-            (click)="archiveCourse()">
-              Archive Course
+      <div class="row">
+        <div class="col-lg-3 mt-3">
+          <button class="p-2 mb-3 btn btn-danger btn-lg"
+            (click)="archiveCourse()" [disabled]="currentCourse && currentCourse.is_archived() == 't'">
+            <i class="material-icons align-middle"
+              *ngIf="currentCourse && currentCourse.is_archived() == 't'">block</i>
+            <span class="align-middle">Archive Course</span>
           </button>
         </div>
-        <eg-fm-record-editor displayMode="inline" 
-          hiddenFieldsList="id,is_archived"
-          idlClass="acmc" 
-          [preloadLinkedValues]="true"
-          [record]="currentCourse">
-        </eg-fm-record-editor>
+        <div class="col-lg-6 mt-3">
+          <eg-fm-record-editor displayMode="inline"
+            hiddenFieldsList="id,is_archived"
+            idlClass="acmc"
+            [preloadLinkedValues]="true"
+            [record]="currentCourse">
+          </eg-fm-record-editor>
+        </div>
       </div>
     </ng-template>
   </ngb-tab>
@@ -33,6 +40,7 @@
                 </div>
                 <input type="text" class="flex-grow-1" [(ngModel)]="barcodeInput"
                   (click)="$event.target.select()" 
+                  [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                   (keyup.enter)="associateItem(barcodeInput, relationshipInput)" />
               </div>
             </div>
@@ -43,7 +51,8 @@
                 <div class="input-group-prepend">
                   <span class="input-group-text" i18n>Relationship</span>
                 </div>
-                <input type="text" [(ngModel)]="relationshipInput" 
+                <input type="text" [(ngModel)]="relationshipInput"
+                  [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                   placeholder-i18n placeholder="e.g. Required"
                   class="flex-grow-1" />
               </div>
@@ -51,8 +60,12 @@
           </div>
           <div class="row mt-3">
             <div class="col-lg-12 text-right">
-              <button class="btn btn-primary" (click)="associateItem(barcodeInput, 
-                relationshipInput)" i18n [disabled]="!barcodeInput">Add Material</button>
+              <button class="btn btn-primary" 
+                [disabled]="currentCourse && currentCourse.is_archived() == 't'"
+                (click)="associateItem(barcodeInput, relationshipInput)"
+                i18n [disabled]="!barcodeInput">
+                Add Material
+              </button>
             </div>
           </div>
           <div class="row justify-content-center mt-3">
@@ -71,10 +84,12 @@
                   </div>
                 </div>
                 <input type="text" [(ngModel)]="tempCallNumber"
+                  [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                   (input)="isModifyingCallNumber = true" class="flex-grow-1" />
                 <div class="input-group-append">
                   <div class="input-group-text">
                     <input type="checkbox" [(ngModel)]="isModifyingCallNumber"
+                      [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                       aria-label="Checkbox for setting a temporary Call Number" />
                   </div>
                 </div>
@@ -91,12 +106,14 @@
                 </div>
                 <eg-combobox i18n-placeholder placeholder="Circulation Modifier..."
                   idlClass="ccm" idlField="name" [displayTemplate]="idlClassLabel"
+                  [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                   [asyncSupportsEmptyTermClick]="true" class="flex-grow-1" 
                   (onChange)="tempCircMod = $event.id; isModifyingCircMod = true">
                 </eg-combobox>
                 <div class="input-group-append">
                   <div class="input-group-text">
                     <input type="checkbox" [(ngModel)]="isModifyingCircMod"
+                      [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                       aria-label="Checkbox for setting a temporary Circulation Modifier" />
                   </div>
                 </div>
@@ -113,12 +130,14 @@
                 </div>
                 <eg-combobox i18n-placeholder placeholder="Item Status..."
                   idlClass="ccs" idlField="name" [displayTemplate]="idlClassLabel"
+                  [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                   [asyncSupportsEmptyTermClick]="true" class="flex-grow-1" 
                   (onChange)="tempStatus = $event.id; isModifyingStatus = true">
                 </eg-combobox>
                 <div class="input-group-append">
                   <div class="input-group-text">
                     <input type="checkbox" [(ngModel)]="isModifyingStatus"
+                      [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                       aria-label="Checkbox for setting a temporary Item Status" />
                   </div>
                 </div>
@@ -134,11 +153,13 @@
                   </div>
                 </div>
                 <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1" 
+                  [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                   [(ngModel)]="tempLocation" (valueChange)="isModifyingLocation = true">
                 </eg-item-location-select>
                 <div class="input-group-append">
                   <div class="input-group-text">
                     <input type="checkbox" [(ngModel)]="isModifyingLocation"
+                      [disabled]="currentCourse && currentCourse.is_archived() == 't'"
                       aria-label="Checkbox for setting a temporary Shelving Location" />
                   </div>
                 </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.ts b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.ts
index f5ed823..944bd64 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-page.component.ts
@@ -83,8 +83,8 @@ export class CoursePageComponent implements OnInit {
 
     // Edit Tab
     archiveCourse() {
-        this.course.disassociateMaterials(this.currentCourse).then(res => {
-            this.currentCourse.is_archived(true);
+        this.course.disassociateMaterials([this.currentCourse]).then(res => {
+            this.currentCourse.is_archived('t');
             this.pcrud.update(this.currentCourse).subscribe(val => {
                 console.debug('archived: ' + val);
                 this.archiveSuccessString.current()