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

   1 <eg-string #materialDeleteFailedString i18n-text text="Disassociation of Course Material failed or was not allowed">
   2 </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">
   6 </eg-string>
   7 <eg-string #materialEditSuccessString i18n-text text="Update of Course Material succeeded"></eg-string>
   8 <eg-string #materialEditFailedString i18n-text text="Update of Course Material failed or was not allowed"></eg-string>
   9 <eg-string #MaterialAddDifferentLibraryString i18n-text text="Material exists at a different library"></eg-string>
  10
  11 <ng-template #dialogContent>
  12   <div class="modal-header bg-info" [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" i18n-aria-label aria-label="Close" (click)="close()">
  16         <span aria-hidden="true">&times;</span>
  17       </button>
  18     </ng-container>
  19   </div>
  20   <div [ngClass]="isDialog() ? 'modal-body' : ''">
  21     <div class="row">
  22       <ngb-tabset [ngClass]="isDialog() ? 'col-md-12' : 'col-md-4'" type="tabs">
  23         <ngb-tab title="Associate item" i18n-title>
  24           <ng-template ngbTabContent>
  25             <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
  26               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
  27                 <div class="input-group">
  28                   <div class="input-group-prepend">
  29                     <span class="input-group-text" i18n>Barcode</span>
  30                   </div>
  31                   <input type="text" class="flex-grow-1" [(ngModel)]="barcodeInput" (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'" placeholder-i18n
  43                     placeholder="e.g. Required" class="flex-grow-1" />
  44                 </div>
  45               </div>
  46             </div>
  47             <div class="row mt-3">
  48               <div class="col-lg-12 text-right">
  49                 <button class="btn btn-primary" [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  50                   (click)="associateItem(barcodeInput, relationshipInput)" i18n [disabled]="!barcodeInput">
  51                   Add Material
  52                 </button>
  53               </div>
  54             </div>
  55             <div class="row justify-content-center mt-3">
  56               <div class="col">
  57                 <h5 i18n>The following fields will be applied to the material
  58                   added, and reverted once the course is no longer associated
  59                   with the material.</h5>
  60               </div>
  61             </div>
  62             <div class="row mt-3">
  63               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
  64                 <div class="input-group">
  65                   <div class="input-group-prepend">
  66                     <div class="input-group-text">
  67                       <span i18n>Call Number</span>
  68                     </div>
  69                   </div>
  70                   <input type="text" [(ngModel)]="tempCallNumber"
  71                     [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  72                     (input)="isModifyingCallNumber = true" class="flex-grow-1" />
  73                   <div class="input-group-append">
  74                     <div class="input-group-text">
  75                       <input type="checkbox" [(ngModel)]="isModifyingCallNumber"
  76                         [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  77                         aria-label="Checkbox for setting a temporary Call Number" />
  78                     </div>
  79                   </div>
  80                 </div>
  81               </div>
  82               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
  83                 <div class="input-group">
  84                   <div class="input-group-prepend">
  85                     <div class="input-group-text">
  86                       <span i18n>Circulation Modifier</span>
  87                     </div>
  88                   </div>
  89                   <eg-combobox i18n-placeholder placeholder="Circulation Modifier..." idlClass="ccm" idlField="name"
  90                     [displayTemplate]="idlClassLabel" [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  91                     [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
  92                     (onChange)="tempCircMod = $event.id; isModifyingCircMod = true">
  93                   </eg-combobox>
  94                   <div class="input-group-append">
  95                     <div class="input-group-text">
  96                       <input type="checkbox" [(ngModel)]="isModifyingCircMod"
  97                         [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  98                         aria-label="Checkbox for setting a temporary Circulation Modifier" />
  99                     </div>
 100                   </div>
 101                 </div>
 102               </div>
 103             </div>
 104             <div class="row mt-3">
 105               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
 106                 <div class="input-group">
 107                   <div class="input-group-prepend">
 108                     <div class="input-group-text">
 109                       <span i18n>Item Status</span>
 110                     </div>
 111                   </div>
 112                   <eg-combobox i18n-placeholder placeholder="Item Status..." idlClass="ccs" idlField="name"
 113                     [displayTemplate]="idlClassLabel" [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 114                     [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
 115                     (onChange)="tempStatus = $event.id; isModifyingStatus = true">
 116                   </eg-combobox>
 117                   <div class="input-group-append">
 118                     <div class="input-group-text">
 119                       <input type="checkbox" [(ngModel)]="isModifyingStatus"
 120                         [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 121                         aria-label="Checkbox for setting a temporary Item Status" />
 122                     </div>
 123                   </div>
 124                 </div>
 125               </div>
 126               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 127                 <div class="input-group">
 128                   <div class="input-group-prepend">
 129                     <div class="input-group-text">
 130                       <span i18n>Shelving Location</span>
 131                     </div>
 132                   </div>
 133                   <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1"
 134                     [disabled]="currentCourse && currentCourse.is_archived() == 't'" [(ngModel)]="tempLocation"
 135                     (valueChange)="isModifyingLocation = true">
 136                   </eg-item-location-select>
 137                   <div class="input-group-append">
 138                     <div class="input-group-text">
 139                       <input type="checkbox" [(ngModel)]="isModifyingLocation"
 140                         [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 141                         aria-label="Checkbox for setting a temporary Shelving Location" />
 142                     </div>
 143                   </div>
 144                 </div>
 145               </div>
 146             </div>
 147           </ng-template>
 148         </ngb-tab>
 149         <ngb-tab title="Associate brief record" i18n-title>
 150           <ng-template ngbTabContent>
 151             <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 152               <div class="input-group">
 153                 <div class="input-group-prepend">
 154                   <span class="input-group-text" i18n>Relationship</span>
 155                 </div>
 156                 <input type="text" [(ngModel)]="relationshipInput"
 157                   [disabled]="currentCourse && currentCourse.is_archived() == 't'" placeholder-i18n
 158                   placeholder="e.g. Required" class="flex-grow-1" />
 159               </div>
 160             </div>
 161             <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 162               <div class="input-group">
 163                 <div class="input-group-prepend">
 164                   <span class="input-group-text" i18n>Relationship</span>
 165                 </div>
 166                 <input type="text" [(ngModel)]="relationshipInput"
 167                   [disabled]="currentCourse && currentCourse.is_archived() == 't'" placeholder-i18n
 168                   placeholder="e.g. Required" class="flex-grow-1" />
 169               </div>
 170             </div>
 171             <eg-marc-simplified-editor (xmlRecordEvent)="associateBriefRecord($event)" buttonLabel="Add material" i18n-buttonLabel>
 172               <eg-marc-simplified-editor-field tag="245" subfield="a"></eg-marc-simplified-editor-field>
 173               <eg-marc-simplified-editor-field tag="856" subfield="u"></eg-marc-simplified-editor-field>
 174               <eg-marc-simplified-editor-field tag="856" subfield="9" defaultValue="CONS"></eg-marc-simplified-editor-field>
 175               <eg-marc-simplified-editor-field tag="990" subfield="a" i18n-defaultValue
 176                 defaultValue="This record was created using the Course Materials Module -- please edit it there">
 177                 </eg-marc-simplified-editor-field>
 178             </eg-marc-simplified-editor>
 179           </ng-template>
 180         </ngb-tab>
 181         <ngb-tab title="Associate electronic resource from catalog" i18n-title>
 182           <ng-template ngbTabContent>
 183             <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
 184               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 185                 <div class="input-group">
 186                   <div class="input-group-prepend">
 187                     <span class="input-group-text" i18n>Relationship</span>
 188                   </div>
 189                   <input type="text" [(ngModel)]="relationshipInput"
 190                     [disabled]="currentCourse && currentCourse.is_archived() == 't'" class="flex-grow-1" />
 191                 </div>
 192               </div>
 193               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 194                 <div class="input-group">
 195                   <div class="input-group-prepend">
 196                     <label for="bib-id" class="input-group-text" i18n>Bibliographic Record ID</label>
 197                   </div>
 198                   <input type="text" [(ngModel)]="bibId" id="bib-id"
 199                     [disabled]="currentCourse && currentCourse.is_archived() == 't'" class="flex-grow-1" />
 200                 </div>
 201               </div>
 202             </div>
 203             <div class="row mt-3">
 204               <div class="col-lg-12 text-right">
 205                 <button class="btn btn-primary" i18n (click)="associateElectronicBibRecord()"
 206                   [disabled]="currentCourse && currentCourse.is_archived() == 't'">
 207                   Add Material
 208                 </button>
 209               </div>
 210             </div>
 211           </ng-template>
 212         </ngb-tab>
 213       </ngb-tabset>
 214
 215       <div class="mt-3" [ngClass]="isDialog() ? 'col-md-12' : 'col-md-8'">
 216         <eg-grid #materialsGrid [dataSource]="materialsDataSource">
 217           <eg-grid-toolbar-action label="Remove Selected" i18n-label (onClick)="deleteSelectedMaterials($event)">
 218           </eg-grid-toolbar-action>
 219           <eg-grid-toolbar-action label="Edit Selected" i18n-label (onClick)="editSelectedMaterials($event)">
 220           </eg-grid-toolbar-action>
 221           <eg-grid-column path="id" [index]=true [hidden]="true" label="ID" i18n-label></eg-grid-column>
 222           <eg-grid-column label="Barcode" i18n-label name="card" [cellTemplate]="barcodeCellTemplate"></eg-grid-column>
 223           <eg-grid-column label="Title" i18n-label name="title" [cellTemplate]="titleCellTemplate"></eg-grid-column>
 224           <eg-grid-column path="call_number.label" label="Call Number" i18n-label></eg-grid-column>
 225           <eg-grid-column path="call_number.prefix.label" [hidden]="true" label="Call Number Prefix" i18n-label hidden>
 226           </eg-grid-column>
 227           <eg-grid-column path="call_number.suffix.label" [hidden]="true" label="Call Number Suffix" i18n-label hidden>
 228           </eg-grid-column>
 229           <eg-grid-column path="circ_modifier" [hidden]="true" label="Circulation Modifier" i18n-label></eg-grid-column>
 230           <eg-grid-column path="circ_lib.shortname" label="Circulation Library" i18n-label></eg-grid-column>
 231           <eg-grid-column path="location.name" [hidden]="true" label="Shelving Location" i18n-label></eg-grid-column>
 232           <eg-grid-column path="status.name" [hidden]="true" label="Copy Status" i18n-label></eg-grid-column>
 233           <eg-grid-column path="relationship" label="Relationship" i18n-label></eg-grid-column>
 234         </eg-grid>
 235       </div>
 236     </div>
 237   </div>
 238 </ng-template>
 239 <ng-template #barcodeCellTemplate let-entry="row">
 240   <span *ngIf="entry.item()">
 241     <a class="pl-1" href="/eg/staff/cat/item/{{entry.item().id()}}">
 242       {{entry.item().barcode()}}
 243     </a>
 244   </span>
 245 </ng-template>
 246 <ng-template #titleCellTemplate let-entry="row">
 247   <a class="pl-1" routerLink="/staff/catalog/record/{{entry.record().id()}}">
 248     {{entry.record().wide_display_entry().title()}}
 249   </a>
 250 </ng-template>
 251 <ng-template #idlClassLabel let-r="result" i18n>
 252   {{r.label}}
 253 </ng-template>
 254
 255 <ng-container *ngIf="!isDialog()">
 256   <!-- in "inline" mode, render the grid pane right here -->
 257   <ng-container *ngTemplateOutlet="dialogContent">
 258   </ng-container>
 259 </ng-container>
 260
 261 <eg-fm-record-editor #editDialog idlClass='acmcm' [fieldOptions]="{course: {linkedSearchField: 'course_number'}}"
 262   [preloadLinkedValues]="true"
 263   hiddenFields="id,item,original_callnumber,original_status,original_location,original_circ_modifier,record">
 264 </eg-fm-record-editor>