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       <div [ngClass]="isDialog() ? 'col-md-12' : 'col-md-4'">
  23         <ul ngbNav #associateNav="ngbNav" class="nav-tabs">
  24           <li ngbNavItem>
  25             <a ngbNavLink i18n>Associate item</a>
  26             <ng-template ngbNavContent>
  27               <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
  28                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
  29                   <div class="input-group">
  30                     <div class="input-group-prepend">
  31                       <label for="associate-item-barcode" class="input-group-text" i18n>Barcode</label>
  32                     </div>
  33                     <input type="text" class="flex-grow-1" id="associate-item-barcode"
  34                       [(ngModel)]="barcodeInput" (click)="$event.target.select()"
  35                       [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  36                       (keyup.enter)="associateItem(barcodeInput, relationshipInput)" />
  37                   </div>
  38                 </div>
  39                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
  40                   <div class="input-group">
  41                     <div class="input-group-prepend">
  42                       <span class="input-group-text" i18n>Relationship</span>
  43                     </div>
  44                     <input type="text" [(ngModel)]="relationshipInput"
  45                       [disabled]="currentCourse && currentCourse.is_archived() == 't'" placeholder-i18n
  46                       placeholder="e.g. Required" class="flex-grow-1" />
  47                   </div>
  48                 </div>
  49               </div>
  50               <div class="row mt-3">
  51                 <div class="col-lg-12 text-right">
  52                   <button class="btn btn-primary" [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  53                     (click)="associateItem(barcodeInput, relationshipInput)" 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                         <label for="associate-item-temp-call-number" i18n>Call Number</label>
  71                       </div>
  72                     </div>
  73                     <input type="text" [(ngModel)]="tempCallNumber" label="associate-item-temp-call-number"
  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..." idlClass="ccm" idlField="name"
  93                       [displayTemplate]="idlClassLabel" [disabled]="currentCourse && currentCourse.is_archived() == 't'"
  94                       [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
  95                       (onChange)="tempCircMod = $event.id; isModifyingCircMod = true">
  96                     </eg-combobox>
  97                     <div class="input-group-append">
  98                       <div class="input-group-text">
  99                         <input type="checkbox" [(ngModel)]="isModifyingCircMod"
 100                           [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 101                           aria-label="Checkbox for setting a temporary Circulation Modifier" />
 102                       </div>
 103                     </div>
 104                   </div>
 105                 </div>
 106               </div>
 107               <div class="row mt-3">
 108                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
 109                   <div class="input-group">
 110                     <div class="input-group-prepend">
 111                       <div class="input-group-text">
 112                         <span i18n>Item Status</span>
 113                       </div>
 114                     </div>
 115                     <eg-combobox i18n-placeholder placeholder="Item Status..." idlClass="ccs" idlField="name"
 116                       [displayTemplate]="idlClassLabel" [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 117                       [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
 118                       (onChange)="tempStatus = $event.id; isModifyingStatus = true">
 119                     </eg-combobox>
 120                     <div class="input-group-append">
 121                       <div class="input-group-text">
 122                         <input type="checkbox" [(ngModel)]="isModifyingStatus"
 123                           [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 124                           aria-label="Checkbox for setting a temporary Item Status" />
 125                       </div>
 126                     </div>
 127                   </div>
 128                 </div>
 129                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 130                   <div class="input-group">
 131                     <div class="input-group-prepend">
 132                       <div class="input-group-text">
 133                         <span i18n>Shelving Location</span>
 134                       </div>
 135                     </div>
 136                     <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1"
 137                       [disabled]="currentCourse && currentCourse.is_archived() == 't'" [(ngModel)]="tempLocation"
 138                       (valueChange)="isModifyingLocation = true">
 139                     </eg-item-location-select>
 140                     <div class="input-group-append">
 141                       <div class="input-group-text">
 142                         <input type="checkbox" [(ngModel)]="isModifyingLocation"
 143                           [disabled]="currentCourse && currentCourse.is_archived() == 't'"
 144                           aria-label="Checkbox for setting a temporary Shelving Location" />
 145                       </div>
 146                     </div>
 147                   </div>
 148                 </div>
 149               </div>
 150             </ng-template>
 151           </li>
 152           <li ngbNavItem>
 153             <a ngbNavLink i18n>Associate brief record</a>
 154             <ng-template ngbNavContent>
 155               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 156                 <div class="input-group">
 157                   <div class="input-group-prepend">
 158                     <span class="input-group-text" i18n>Relationship</span>
 159                   </div>
 160                   <input type="text" [(ngModel)]="relationshipInput"
 161                     [disabled]="currentCourse && currentCourse.is_archived() == 't'" placeholder-i18n
 162                     placeholder="e.g. Required" class="flex-grow-1" />
 163                 </div>
 164               </div>
 165               <eg-marc-simplified-editor (xmlRecordEvent)="associateBriefRecord($event)"
 166               buttonLabel="Add material" i18n-buttonLabel defaultMarcForm="o">
 167                 <eg-marc-simplified-editor-field tag="245" ind1="0" ind2="0">
 168                   <eg-marc-simplified-editor-subfield code="a"></eg-marc-simplified-editor-subfield>
 169                 </eg-marc-simplified-editor-field>
 170                 <eg-marc-simplified-editor-field tag="856" ind1="4" ind2="0">
 171                   <eg-marc-simplified-editor-subfield code="u"></eg-marc-simplified-editor-subfield>
 172                   <eg-marc-simplified-editor-subfield code="y"></eg-marc-simplified-editor-subfield>
 173                   <eg-marc-simplified-editor-subfield code="9" [defaultValue]="currentCourse.owning_lib().shortname()"></eg-marc-simplified-editor-subfield>
 174                 </eg-marc-simplified-editor-field>
 175                 <eg-marc-simplified-editor-field tag="990">
 176                   <eg-marc-simplified-editor-subfield code="a" i18n-defaultValue
 177                     defaultValue="This record was created using the Course Materials Module -- please edit it there">
 178                   </eg-marc-simplified-editor-subfield>
 179                 </eg-marc-simplified-editor-field>
 180               </eg-marc-simplified-editor>
 181             </ng-template>
 182           </li>
 183           <li ngbNavItem>
 184             <a ngbNavLink>Associate electronic resource from catalog</a>
 185             <ng-template ngbNavContent>
 186               <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
 187                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 188                   <div class="input-group">
 189                     <div class="input-group-prepend">
 190                       <label for="bib-id" class="input-group-text" i18n>Bibliographic Record ID</label>
 191                     </div>
 192                     <input type="text" [(ngModel)]="bibId" id="bib-id"
 193                       [disabled]="currentCourse && currentCourse.is_archived() == 't'" class="flex-grow-1" />
 194                   </div>
 195                 </div>
 196                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 197                   <div class="input-group">
 198                     <div class="input-group-prepend">
 199                       <span class="input-group-text" i18n>Relationship</span>
 200                     </div>
 201                     <input type="text" [(ngModel)]="relationshipInput"
 202                       [disabled]="currentCourse && currentCourse.is_archived() == 't'" class="flex-grow-1" />
 203                   </div>
 204                 </div>
 205               </div>
 206               <div class="row mt-3">
 207                 <div class="col-lg-12 text-right">
 208                   <button class="btn btn-primary" i18n (click)="associateElectronicBibRecord()"
 209                     [disabled]="currentCourse && currentCourse.is_archived() == 't'">
 210                     Add Material
 211                   </button>
 212                 </div>
 213               </div>
 214             </ng-template>
 215           </li>
 216         </ul>
 217         <div [ngbNavOutlet]="associateNav"></div>
 218       </div>
 219
 220       <div class="mt-3" [ngClass]="isDialog() ? 'col-md-12' : 'col-md-8'">
 221         <eg-grid #materialsGrid [dataSource]="materialsDataSource" [useLocalSort]="true" [disablePaging]="true">
 222           <eg-grid-toolbar-action label="Remove Selected" i18n-label (onClick)="deleteSelectedMaterials($event)">
 223           </eg-grid-toolbar-action>
 224           <eg-grid-toolbar-action label="Edit Selected" i18n-label (onClick)="editSelectedMaterials($event)">
 225           </eg-grid-toolbar-action>
 226           <eg-grid-column path="id" [index]=true [hidden]="true" label="ID" i18n-label></eg-grid-column>
 227           <eg-grid-column label="Barcode" i18n-label name="barcode" [cellTemplate]="barcodeCellTemplate"></eg-grid-column>
 228           <eg-grid-column label="Title" i18n-label name="title" flex="3" [cellTemplate]="titleCellTemplate"></eg-grid-column>
 229           <eg-grid-column path="item.call_number.label" label="Call Number" i18n-label></eg-grid-column>
 230           <eg-grid-column path="item.call_number.prefix.label" [hidden]="true" label="Call Number Prefix" i18n-label hidden>
 231           </eg-grid-column>
 232           <eg-grid-column path="item.call_number.suffix.label" [hidden]="true" label="Call Number Suffix" i18n-label hidden>
 233           </eg-grid-column>
 234           <eg-grid-column path="item.circ_modifier" [hidden]="true" label="Circulation Modifier" i18n-label></eg-grid-column>
 235           <eg-grid-column path="item.circ_lib.shortname" label="Circulation Library" i18n-label></eg-grid-column>
 236           <eg-grid-column path="item.location.name" [hidden]="true" label="Shelving Location" i18n-label></eg-grid-column>
 237           <eg-grid-column path="item.status.name" [hidden]="true" label="Item Status" i18n-label></eg-grid-column>
 238           <eg-grid-column path="original_circ_modifier.name" [hidden]="true" label="Original Circulation Modifier" i18n-label></eg-grid-column>
 239           <eg-grid-column path="original_location.name" [hidden]="true" label="Original Shelving Location" i18n-label></eg-grid-column>
 240           <eg-grid-column path="original_status.name" [hidden]="true" label="Original Item Status" i18n-label></eg-grid-column>
 241           <eg-grid-column path="relationship" label="Relationship" i18n-label></eg-grid-column>
 242         </eg-grid>
 243       </div>
 244     </div>
 245   </div>
 246 </ng-template>
 247 <ng-template #barcodeCellTemplate let-entry="row">
 248   <span *ngIf="entry.item()">
 249     <a class="pl-1" href="/eg/staff/cat/item/{{entry.item().id()}}">
 250       {{entry.item().barcode()}}
 251     </a>
 252   </span>
 253 </ng-template>
 254 <ng-template #titleCellTemplate let-entry="row">
 255   <a class="pl-1" routerLink="/staff/catalog/record/{{entry.record().id()}}">
 256     {{entry.record().wide_display_entry().title()}}
 257   </a>
 258 </ng-template>
 259 <ng-template #idlClassLabel let-r="result" i18n>
 260   {{r.label}}
 261 </ng-template>
 262
 263 <ng-container *ngIf="!isDialog()">
 264   <!-- in "inline" mode, render the grid pane right here -->
 265   <ng-container *ngTemplateOutlet="dialogContent">
 266   </ng-container>
 267 </ng-container>
 268
 269 <eg-fm-record-editor #editDialog idlClass='acmcm' [fieldOptions]="{course: {linkedSearchField: 'course_number'}}"
 270   [preloadLinkedValues]="true"
 271   hiddenFields="id,item,original_callnumber,original_status,original_location,original_circ_modifier,record,temporary_record">
 272 </eg-fm-record-editor>