LP1849212: Angular Course Page improvements, OPAC course search

[evergreen-equinox.git] / Open-ILS / src / eg2 / src / app / staff / admin / local / course-reserves / course-associate-users.component.html

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-users.component.html b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-users.component.html
index 079acd7..a0969bf 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-users.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-users.component.html
@@ -1,49 +1,81 @@
-<eg-string #deleteFailedString i18n-text text="Disassociation of Course Material failed or was not allowed"></eg-string>
-<eg-string #deleteSuccessString i18n-text text="Disassociation of Course Material succeeded"></eg-string>
-<eg-string #successString i18n-text text="Association of Course Material succeeded"></eg-string>
-<eg-string #failedString i18n-text text="Association of Course Material failed or was not allowed"></eg-string>
-<eg-string #differentLibraryString i18n-text text="Material exists at a different library"></eg-string>
+<eg-string #userDeleteFailedString i18n-text text="Removal of User failed or was not allowed"></eg-string>
+<eg-string #userDeleteSuccessString i18n-text text="Removal of User succeeded"></eg-string>
+<eg-string #userAddSuccessString i18n-text text="Addition of User succeeded"></eg-string>
+<eg-string #userAddFailedString i18n-text text="Addition of User failed or was not allowed"></eg-string>
+<eg-string #userEditSuccessString i18n-text text="Update of User succeeded"></eg-string>
+<eg-string #userEditFailedString i18n-text text="Update of User failed or was not allowed"></eg-string>
 
 <ng-template #dialogContent>
-  <div class="modal-header bg-info">
-    <h4 class="modal-title" i18n>Course Users</h4>
-    <button type="button" class="close"
-      i18n-aria-label aria-label="Close" (click)="close()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="modal-body">
-    <div class="row mt-4">
-      <div class="col-md-5">
-        <div class="input-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text" i18n>User Role</span>
+<div class="modal-header bg-info"
+  [ngClass]="isDialog() ? 'modal-header' : 'alert mt-3'">
+  <h4 class="modal-title" i18n>Course Users</h4>
+  <ng-container *ngIf="isDialog()">
+  <button type="button" class="close"
+    i18n-aria-label aria-label="Close" (click)="close()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+  </ng-container>
+</div>
+<div [ngClass]="isDialog() ? 'modal-body' : ''">
+  <div class="row">
+    <div [ngClass]="isDialog() ? 'col-md-12' : 'col-md-4'">
+      <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
+        <div class="d-flex"  [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
+          <div class="input-group">
+            <div class="input-group-prepend">
+              <span class="input-group-text" i18n>Patron Barcode</span>
+            </div>
+            <input type="text" class="flex-grow-1" [(ngModel)]="userBarcode"
+              (click)="$event.target.select()" 
+              [disabled]="currentCourse && currentCourse.is_archived() == 't'"
+              (keyup.enter)="associateUser(userBarcode)" />
           </div>
-          <input type="text" [(ngModel)]="userRoleInput" />
         </div>
-    </div>
-    <div class="row justify-content-center mt-3">
-    </div>
-      <div class="col-md-6">
-        <div class="input-group">
-          <div class="input-group-prepend">
-            <div class="input-group-text">
-              <span i18n>User</span>
+        <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
+          <div class="input-group">
+            <div class="input-group-prepend">
+              <span class="input-group-text" i18n>Role</span>
             </div>
+            <input type="text" [(ngModel)]="userRoleInput"
+              [disabled]="currentCourse && currentCourse.is_archived() == 't'"
+              placeholder-i18n placeholder="e.g. Student, TA, Instructor..."
+              class="flex-grow-1" />
           </div>
-            <input type="text" [(ngModel)]="new_usr" />
+        </div>
+      </div>
+      <div class="row mt-3">
+        <div [ngClass]="isDialog() ? 'offset-md-6 col-md-4' : 'col-md-6'">
+          <div class="input-group">
+            <div class="input-group-prepend">
+              <div class="input-group-text">
+                <span i18n>Is Public Role?</span>
+              </div>
+            </div>
+            <div class="input-group-append">
+              <div class="input-group-text">
+                <input type="checkbox" [(ngModel)]="isPublicRole"
+                  [disabled]="currentCourse && currentCourse.is_archived() == 't'"
+                  aria-label="Checkbox for allowing user to display on the OPAC Course Page" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-right" [ngClass]="isDialog() ? 'col-md-2' : 'col-md-6'">
+          <button class="btn btn-primary"
+            [disabled]="currentCourse && currentCourse.is_archived() == 't'"
+            i18n [disabled]="!userBarcode" (click)="associateUser(userBarcode)">
+            Add User
+          </button>
         </div>
       </div>
     </div>
-    <div class="col-md-0">
-        <button class="btn btn-outline-dark" (click)="associateUsers(userRoleInput)" i18n [disabled]="!new_usr || !userRoleInput">Add User</button>
-    </div>
-    <div class="mt-3">
-      <eg-grid #usersGrid [dataSource]="gridDataSource">
-        <eg-grid-toolbar-action label="Delete Selected" i18n-label (onClick)="deleteSelected($event)">
+    <div class="mt-3" [ngClass]="isDialog() ? 'col-md-12' : 'col-md-8'">
+      <eg-grid #usersGrid [dataSource]="usersDataSource">
+        <eg-grid-toolbar-action label="Remove Selected" i18n-label (onClick)="deleteSelectedUsers($event)">
+        </eg-grid-toolbar-action>
+        <eg-grid-toolbar-action label="Edit Selected" i18n-label (onClick)="editSelectedUsers($event)">
         </eg-grid-toolbar-action>
-        <eg-grid-column label="id" [index]=true [hidden]="true" i18n-label></eg-grid-column>
-        <eg-grid-column label="User Role" name="_usr_role" i18n-label></eg-grid-column>
+        <eg-grid-column label="ID" path="_id" [index]=true [hidden]="true" i18n-label></eg-grid-column>
         <eg-grid-column label="First Name" name="first_given_name" i18n-label></eg-grid-column>
         <eg-grid-column label="Second Name" name="second_given_name" i18n-label></eg-grid-column>
         <eg-grid-column label="Last Name" name="family_name" i18n-label></eg-grid-column>
@@ -52,6 +84,23 @@
         <eg-grid-column label="Preferred Second Name" name="pref_second_given_name"[hidden]="true"  i18n-label></eg-grid-column>
         <eg-grid-column label="Preferred Family Name" name="pref_family_name"[hidden]="true"  i18n-label></eg-grid-column>
         <eg-grid-column label="Preferred Suffix" name="pref_suffix" [hidden]="true" i18n-label></eg-grid-column>
+        <eg-grid-column label="User Role" name="_role" i18n-label></eg-grid-column>
+        <eg-grid-column label="Viewable on OPAC" name="_is_public" i18n-label datatype="bool"></eg-grid-column>
       </eg-grid>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+</div>
+</ng-template>
+
+<ng-container *ngIf="!isDialog()">
+  <!-- in "inline" mode, render the grid pane right here -->
+  <ng-container *ngTemplateOutlet="dialogContent">
+  </ng-container>
+</ng-container>
+
+<eg-fm-record-editor #editDialog
+  idlClass='acmcu'
+  [fieldOptions]="{course: {linkedSearchField: 'course_number'}}"
+  [preloadLinkedValues]="true"
+  hiddenFields="id,usr">
+</eg-fm-record-editor>
\ No newline at end of file