Open-ILS/src/eg2/src/app/staff/admin/local/course-reserves/course-associate-material.component.html

   1
   2 <eg-string #materialDeleteFailedString i18n-text text="Disassociation of Course Material failed or was not allowed"></eg-string>
   3 <eg-string #materialDeleteSuccessString i18n-text text="Disassociation of Course Material succeeded"></eg-string>
   4 <eg-string #materialAddSuccessString i18n-text text="Association of Course Material succeeded"></eg-string>
   5 <eg-string #materialAddFailedString i18n-text text="Association of Course Material failed or was not allowed"></eg-string>
   6 <eg-string #materialEditSuccessString i18n-text text="Update of Course Material succeeded"></eg-string>
   7 <eg-string #materialEditFailedString i18n-text text="Update of Course Material failed or was not allowed"></eg-string>
   8 <eg-string #MaterialAddDifferentLibraryString i18n-text text="Material exists at a different library"></eg-string>
   9
  10 <ng-template #dialogContent>
  11 <div class="modal-header bg-info"
  12   [ngClass]="isDialog() ? 'modal-header' : 'alert mt-3'">
  13   <h4 class="modal-title" i18n>Course Materials</h4>
  14   <ng-container *ngIf="isDialog()">
  15   <button type="button" class="close"
  16     i18n-aria-label aria-label="Close" (click)="close()">
  17     <span aria-hidden="true">&times;</span>
  18   </button>
  19   </ng-container>
  20 </div>
  21 <div [ngClass]="isDialog() ? 'modal-body' : ''">
  22   <div class="row">
  23     <div [ngClass]="isDialog() ? 'col-md-12' : 'col-md-4'">
  24       <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
  25         <div class="d-flex"  [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
  26           <div class="input-group">
  27             <div class="input-group-prepend">
  28               <span class="input-group-text" i18n>Barcode</span>
  29             </div>
  30             <input type="text" class="flex-grow-1" [(ngModel)]="barcodeInput"
  31               (click)="$event.target.select()"
  32               [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  33               (keyup.enter)="associateItem(barcodeInput, relationshipInput)" />
  34           </div>
  35         </div>
  36         <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
  37           <div class="input-group">
  38             <div class="input-group-prepend">
  39               <span class="input-group-text" i18n>Relationship</span>
  40             </div>
  41             <input type="text" [(ngModel)]="relationshipInput"
  42               [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  43               placeholder-i18n placeholder="e.g. Required"
  44               class="flex-grow-1" />
  45           </div>
  46         </div>
  47       </div>
  48       <div class="row mt-3">
  49         <div class="col-lg-12 text-right">
  50           <button class="btn btn-primary"
  51             [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  52             (click)="associateItem(barcodeInput, relationshipInput)"
  53             i18n [disabled]="!barcodeInput">
  54             Add Material
  55           </button>
  56         </div>
  57       </div>
  58       <div class="row justify-content-center mt-3">
  59         <div class="col">
  60           <h5 i18n>The following fields will be applied to the material
  61                 added, and reverted once the course is no longer associated
  62                 with the material.</h5>
  63         </div>
  64       </div>
  65       <div class="row mt-3">
  66         <div class="d-flex"  [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
  67           <div class="input-group">
  68             <div class="input-group-prepend">
  69               <div class="input-group-text">
  70                 <span i18n>Call Number</span>
  71               </div>
  72             </div>
  73             <input type="text" [(ngModel)]="tempCallNumber"
  74               [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  75               (input)="isModifyingCallNumber = true" class="flex-grow-1" />
  76             <div class="input-group-append">
  77               <div class="input-group-text">
  78                 <input type="checkbox" [(ngModel)]="isModifyingCallNumber"
  79                   [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  80                   aria-label="Checkbox for setting a temporary Call Number" />
  81               </div>
  82             </div>
  83           </div>
  84         </div>
  85         <div class="d-flex"  [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
  86           <div class="input-group">
  87             <div class="input-group-prepend">
  88               <div class="input-group-text">
  89                 <span i18n>Circulation Modifier</span>
  90               </div>
  91             </div>
  92             <eg-combobox i18n-placeholder placeholder="Circulation Modifier..."
  93               idlClass="ccm" idlField="name" [displayTemplate]="idlClassLabel"
  94               [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  95               [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
  96               (onChange)="tempCircMod = $event.id; isModifyingCircMod = true">
  97             </eg-combobox>
  98             <div class="input-group-append">
  99               <div class="input-group-text">
 100                 <input type="checkbox" [(ngModel)]="isModifyingCircMod"
 101                   [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 102                   aria-label="Checkbox for setting a temporary Circulation Modifier" />
 103               </div>
 104             </div>
 105           </div>
 106         </div>
 107       </div>
 108       <div class="row mt-3">
 109         <div class="d-flex"  [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
 110           <div class="input-group">
 111             <div class="input-group-prepend">
 112               <div class="input-group-text">
 113                 <span i18n>Item Status</span>
 114               </div>
 115             </div>
 116             <eg-combobox i18n-placeholder placeholder="Item Status..."
 117               idlClass="ccs" idlField="name" [displayTemplate]="idlClassLabel"
 118               [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 119               [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
 120               (onChange)="tempStatus = $event.id; isModifyingStatus = true">
 121             </eg-combobox>
 122             <div class="input-group-append">
 123               <div class="input-group-text">
 124                 <input type="checkbox" [(ngModel)]="isModifyingStatus"
 125                   [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 126                   aria-label="Checkbox for setting a temporary Item Status" />
 127               </div>
 128             </div>
 129           </div>
 130         </div>
 131         <div class="d-flex"  [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 132           <div class="input-group">
 133             <div class="input-group-prepend">
 134               <div class="input-group-text">
 135                 <span i18n>Shelving Location</span>
 136               </div>
 137             </div>
 138             <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1"
 139               [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 140               [(ngModel)]="tempLocation" (valueChange)="isModifyingLocation = true">
 141             </eg-item-location-select>
 142             <div class="input-group-append">
 143               <div class="input-group-text">
 144                 <input type="checkbox" [(ngModel)]="isModifyingLocation"
 145                   [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 146                   aria-label="Checkbox for setting a temporary Shelving Location" />
 147               </div>
 148             </div>
 149           </div>
 150         </div>
 151       </div>
 152     </div>
 153
 154     <div class="mt-3" [ngClass]="isDialog() ? 'col-md-12' : 'col-md-8'">
 155       <eg-grid #materialsGrid [dataSource]="materialsDataSource">
 156         <eg-grid-toolbar-action label="Remove Selected" i18n-label (onClick)="deleteSelectedMaterials($event)">
 157         </eg-grid-toolbar-action>
 158         <eg-grid-toolbar-action label="Edit Selected" i18n-label (onClick)="editSelectedMaterials($event)">
 159         </eg-grid-toolbar-action>
 160         <eg-grid-column path="_id" [index]=true [hidden]="true" label="ID" i18n-label></eg-grid-column>
 161         <eg-grid-column label="Barcode" i18n-label name="card" [cellTemplate]="barcodeCellTemplate"></eg-grid-column>
 162         <eg-grid-column label="Title" i18n-label name="title" [cellTemplate]="titleCellTemplate"></eg-grid-column>
 163         <eg-grid-column path="call_number.label" label="Call Number" i18n-label></eg-grid-column>
 164         <eg-grid-column path="call_number.prefix.label" [hidden]="true" label="Call Number Prefix" i18n-label hidden></eg-grid-column>
 165         <eg-grid-column path="call_number.suffix.label" [hidden]="true" label="Call Number Suffix" i18n-label hidden></eg-grid-column>
 166         <eg-grid-column path="circ_modifier" [hidden]="true" label="Circulation Modifier" i18n-label></eg-grid-column>
 167         <eg-grid-column path="circ_lib.shortname" label="Circulation Library" i18n-label></eg-grid-column>
 168         <eg-grid-column path="location.name" [hidden]="true" label="Shelving Location" i18n-label></eg-grid-column>
 169         <eg-grid-column path="status.name" [hidden]="true" label="Copy Status" i18n-label></eg-grid-column>
 170         <eg-grid-column path="_relationship" label="Relationship" i18n-label></eg-grid-column>
 171       </eg-grid>
 172     </div>
 173   </div>
 174 </div>
 175 </ng-template>
 176 <ng-template #barcodeCellTemplate let-entry="row">
 177 <span>
 178   <a class="pl-1"
 179     href="/eg/staff/cat/item/{{entry.id()}}">
 180     {{entry.barcode()}}
 181   </a>
 182 </span>
 183 </ng-template>
 184 <ng-template #titleCellTemplate let-entry="row">
 185 <span>
 186   <a class="pl-1"
 187     href="/eg/staff/cat/catalog/record/{{entry.call_number().record()}}">
 188     {{entry._title}}
 189   </a>
 190 </span>
 191 </ng-template>
 192 <ng-template #idlClassLabel let-r="result" i18n>
 193 {{r.label}}
 194 </ng-template>
 195
 196 <ng-container *ngIf="!isDialog()">
 197   <!-- in "inline" mode, render the grid pane right here -->
 198   <ng-container *ngTemplateOutlet="dialogContent">
 199   </ng-container>
 200 </ng-container>
 201
 202 <eg-fm-record-editor #editDialog
 203   idlClass='acmcm'
 204   [fieldOptions]="{course: {linkedSearchField: 'course_number'}}"
 205   [preloadLinkedValues]="true"
 206   hiddenFields="id,item,original_callnumber,original_status,original_location,original_circ_modifier,record">
 207 </eg-fm-record-editor>