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
  10 <eg-alert-dialog #otherLibraryNoPermissionsAlert
  11   i18n-dialogTitle i18n-dialogBody
  12   dialogTitle="Insufficient permissions"
  13   dialogBody="This material has {{itemCircLib}} as its circulation library, where you do not have UPDATE_COPY permissions.  You cannot attach this item without UPDATE_COPY permissions.">
  14 </eg-alert-dialog>
  15
  16 <eg-confirm-dialog #confirmOtherLibraryDialog
  17   i18n-dialogTitle i18n-dialogBody
  18   dialogTitle="Material from a different library"
  19   dialogBody="This material has {{itemCircLib}} as its circulation library. Are you sure you want to add it to {{currentCourse.course_number()}}?">
  20 </eg-confirm-dialog>
  21
  22 <ng-template #dialogContent>
  23   <div class="modal-header bg-info" [ngClass]="isDialog() ? 'modal-header' : 'alert mt-3'">
  24     <h4 class="modal-title" i18n>Course Materials</h4>
  25     <ng-container *ngIf="isDialog()">
  26       <button type="button" class="close" i18n-aria-label aria-label="Close" (click)="close()">
  27         <span aria-hidden="true">&times;</span>
  28       </button>
  29     </ng-container>
  30   </div>
  31   <div [ngClass]="isDialog() ? 'modal-body' : ''">
  32     <div class="row">
  33       <div [ngClass]="isDialog() ? 'col-md-12' : 'col-md-4'">
  34         <ul ngbNav #associateNav="ngbNav" class="nav-tabs" [keyboard]="true" [roles]="false" role="tablist">
  35           <li role="presentation" ngbNavItem>
  36             <a role="tab" ngbNavLink i18n>Associate item</a>
  37             <ng-template ngbNavContent>
  38               <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
  39                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
  40                   <div class="input-group">
  41                     <div class="input-group-prepend">
  42                       <label for="associate-item-barcode" class="input-group-text" i18n>Barcode</label>
  43                     </div>
  44                     <input type="text" class="flex-grow-1" id="associate-item-barcode"
  45                       [(ngModel)]="barcodeInput" (click)="$event.target.select()"
  46                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
  47                       />
  48                   </div>
  49                 </div>
  50                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
  51                   <div class="input-group">
  52                     <div class="input-group-prepend">
  53                       <label for="associate-item-relationship" class="input-group-text" i18n>Relationship</label>
  54                     </div>
  55                     <input type="text" [(ngModel)]="relationshipInput" id="associate-item-relationship"
  56                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" placeholder-i18n
  57                       placeholder="e.g. Required" class="flex-grow-1" />
  58                   </div>
  59                 </div>
  60               </div>
  61               <div class="row justify-content-center mt-3">
  62                 <div class="col">
  63                   <h5 i18n>The following fields will be applied to the material
  64                     added, and reverted once the course is no longer associated
  65                     with the material.</h5>
  66                 </div>
  67               </div>
  68               <div class="row mt-3">
  69                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
  70                   <div class="input-group">
  71                     <div class="input-group-prepend">
  72                       <div class="input-group-text">
  73                         <label for="associate-item-temp-call-number" i18n>Call Number</label>
  74                       </div>
  75                     </div>
  76                     <input type="text" [(ngModel)]="tempCallNumber" id="associate-item-temp-call-number"
  77                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
  78                       (input)="isModifyingCallNumber = true" class="flex-grow-1" />
  79                     <div class="input-group-append">
  80                       <div class="input-group-text">
  81                         <input type="checkbox" [(ngModel)]="isModifyingCallNumber"
  82                           [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
  83                           aria-label="Checkbox for setting a temporary Call Number" />
  84                       </div>
  85                     </div>
  86                   </div>
  87                 </div>
  88                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
  89                   <div class="input-group">
  90                     <div class="input-group-prepend">
  91                       <div class="input-group-text">
  92                         <label for="temp-circ-mod" i18n>Circulation Modifier</label>
  93                       </div>
  94                     </div>
  95                     <eg-combobox i18n-placeholder placeholder="Circulation Modifier..." idlClass="ccm" idlField="name"
  96                       [displayTemplate]="idlClassLabel" [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
  97                       [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
  98                       domId="temp-circ-mod"
  99                       (onChange)="tempCircMod = $event.id; isModifyingCircMod = true">
 100                     </eg-combobox>
 101                     <div class="input-group-append">
 102                       <div class="input-group-text">
 103                         <input type="checkbox" [(ngModel)]="isModifyingCircMod"
 104                           [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
 105                           aria-label="Checkbox for setting a temporary Circulation Modifier" />
 106                       </div>
 107                     </div>
 108                   </div>
 109                 </div>
 110               </div>
 111               <div class="row mt-3">
 112                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
 113                   <div class="input-group">
 114                     <div class="input-group-prepend">
 115                       <div class="input-group-text">
 116                         <label for="temp-item-status" i18n>Item Status</label>
 117                       </div>
 118                     </div>
 119                     <eg-combobox i18n-placeholder placeholder="Item Status..." idlClass="ccs" idlField="name"
 120                       [displayTemplate]="idlClassLabel" [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
 121                       [asyncSupportsEmptyTermClick]="true" class="flex-grow-1"
 122                       domId="temp-item-status"
 123                       (onChange)="tempStatus = $event.id; isModifyingStatus = true">
 124                     </eg-combobox>
 125                     <div class="input-group-append">
 126                       <div class="input-group-text">
 127                         <input type="checkbox" [(ngModel)]="isModifyingStatus"
 128                           [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
 129                           aria-label="Checkbox for setting a temporary Item Status" />
 130                       </div>
 131                     </div>
 132                   </div>
 133                 </div>
 134                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 135                   <div class="input-group">
 136                     <div class="input-group-prepend">
 137                       <div class="input-group-text">
 138                         <label for="temp-location" i18n>Shelving Location</label>
 139                       </div>
 140                     </div>
 141                     <eg-item-location-select permFilter="MANAGE_RESERVES" class="flex-grow-1" domId="temp-location"
 142                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" [(ngModel)]="tempLocation"
 143                       (valueChange)="isModifyingLocation = true">
 144                     </eg-item-location-select>
 145                     <div class="input-group-append">
 146                       <div class="input-group-text">
 147                         <input type="checkbox" [(ngModel)]="isModifyingLocation"
 148                           [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
 149                           aria-label="Checkbox for setting a temporary Shelving Location" />
 150                       </div>
 151                     </div>
 152                   </div>
 153                 </div>
 154               </div>
 155               <div class="row mt-3">
 156                 <div class="col-lg-12 text-right">
 157                   <button class="btn btn-primary" [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'"
 158                     (click)="associateItem(barcodeInput, relationshipInput)" i18n [disabled]="!barcodeInput">
 159                     Add Material
 160                   </button>
 161                 </div>
 162               </div>
 163             </ng-template>
 164           </li>
 165           <li role="presentation" ngbNavItem>
 166             <a role="tab" ngbNavLink i18n>Associate brief record</a>
 167             <ng-template ngbNavContent>
 168               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 169                 <div class="input-group">
 170                   <div class="input-group-prepend">
 171                     <label class="input-group-text" for="brief-relationship" i18n>Relationship</label>
 172                   </div>
 173                   <input type="text" [(ngModel)]="relationshipInput" id="brief-relationship"
 174                     [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" placeholder-i18n
 175                     placeholder="e.g. Required" class="flex-grow-1" />
 176                 </div>
 177               </div>
 178               <eg-marc-simplified-editor (xmlRecordEvent)="associateBriefRecord($event)"
 179               buttonLabel="Add material" i18n-buttonLabel defaultMarcForm="o">
 180                 <eg-marc-simplified-editor-field tag="245" ind1="0" ind2="0">
 181                   <eg-marc-simplified-editor-subfield code="a"></eg-marc-simplified-editor-subfield>
 182                 </eg-marc-simplified-editor-field>
 183                 <eg-marc-simplified-editor-field tag="856" ind1="4" ind2="0">
 184                   <eg-marc-simplified-editor-subfield code="u"></eg-marc-simplified-editor-subfield>
 185                   <eg-marc-simplified-editor-subfield code="y"></eg-marc-simplified-editor-subfield>
 186                   <eg-marc-simplified-editor-subfield code="9" [defaultValue]="currentCourse.owning_lib().shortname()"></eg-marc-simplified-editor-subfield>
 187                 </eg-marc-simplified-editor-field>
 188                 <eg-marc-simplified-editor-field tag="990">
 189                   <eg-marc-simplified-editor-subfield code="a" i18n-defaultValue
 190                     defaultValue="This record was created using the Course Materials Module -- please edit it there">
 191                   </eg-marc-simplified-editor-subfield>
 192                 </eg-marc-simplified-editor-field>
 193               </eg-marc-simplified-editor>
 194             </ng-template>
 195           </li>
 196           <li role="presentation" ngbNavItem>
 197             <a ngbNavLink role="tab">Associate electronic resource from catalog</a>
 198             <ng-template ngbNavContent>
 199               <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
 200                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 201                   <div class="input-group">
 202                     <div class="input-group-prepend">
 203                       <label for="bib-id" class="input-group-text" i18n>Bibliographic Record ID</label>
 204                     </div>
 205                     <input type="text" [(ngModel)]="bibId" id="bib-id"
 206                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" class="flex-grow-1" />
 207                   </div>
 208                 </div>
 209                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 210                   <div class="input-group">
 211                     <div class="input-group-prepend">
 212                       <label class="input-group-text" for="electronic-relationship" i18n>Relationship</label>
 213                     </div>
 214                     <input type="text" [(ngModel)]="relationshipInput" id="electronic-relationship"
 215                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'" class="flex-grow-1" />
 216                   </div>
 217                 </div>
 218               </div>
 219               <div class="row mt-3">
 220                 <div class="col-lg-12 text-right">
 221                   <button class="btn btn-primary" i18n (click)="associateElectronicBibRecord()"
 222                     [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) === 't'">
 223                     Add Material
 224                   </button>
 225                 </div>
 226               </div>
 227             </ng-template>
 228           </li>
 229         </ul>
 230         <div [ngbNavOutlet]="associateNav"></div>
 231       </div>
 232
 233       <div class="mt-3" [ngClass]="isDialog() ? 'col-md-12' : 'col-md-8'">
 234         <eg-grid #materialsGrid [dataSource]="materialsDataSource" [useLocalSort]="true" [disablePaging]="true">
 235           <eg-grid-toolbar-action label="Remove Selected" i18n-label (onClick)="deleteSelectedMaterials($event)">
 236           </eg-grid-toolbar-action>
 237           <eg-grid-toolbar-action label="Edit Selected" i18n-label (onClick)="editSelectedMaterials($event)">
 238           </eg-grid-toolbar-action>
 239           <eg-grid-column path="id" [index]=true [hidden]="true" label="ID" i18n-label></eg-grid-column>
 240           <eg-grid-column label="Barcode" i18n-label name="barcode" [cellTemplate]="barcodeCellTemplate"></eg-grid-column>
 241           <eg-grid-column label="Title" i18n-label name="title" flex="3" [cellTemplate]="titleCellTemplate"></eg-grid-column>
 242           <eg-grid-column path="item.call_number.label" label="Call Number" i18n-label></eg-grid-column>
 243           <eg-grid-column path="item.call_number.prefix.label" [hidden]="true" label="Call Number Prefix" i18n-label hidden>
 244           </eg-grid-column>
 245           <eg-grid-column path="item.call_number.suffix.label" [hidden]="true" label="Call Number Suffix" i18n-label hidden>
 246           </eg-grid-column>
 247           <eg-grid-column path="item.circ_modifier" [hidden]="true" label="Circulation Modifier" i18n-label></eg-grid-column>
 248           <eg-grid-column path="item.circ_lib.shortname" label="Circulation Library" i18n-label></eg-grid-column>
 249           <eg-grid-column path="item.location.name" [hidden]="true" label="Shelving Location" i18n-label></eg-grid-column>
 250           <eg-grid-column path="item.status.name" [hidden]="true" label="Item Status" i18n-label></eg-grid-column>
 251           <eg-grid-column path="original_circ_modifier.name" [hidden]="true" label="Original Circulation Modifier" i18n-label></eg-grid-column>
 252           <eg-grid-column path="original_location.name" [hidden]="true" label="Original Shelving Location" i18n-label></eg-grid-column>
 253           <eg-grid-column path="original_status.name" [hidden]="true" label="Original Item Status" i18n-label></eg-grid-column>
 254           <eg-grid-column path="relationship" label="Relationship" i18n-label></eg-grid-column>
 255         </eg-grid>
 256       </div>
 257     </div>
 258   </div>
 259 </ng-template>
 260 <ng-template #barcodeCellTemplate let-entry="row">
 261   <span *ngIf="entry.item()">
 262     <a class="pl-1" href="/eg/staff/cat/item/{{entry.item().id()}}">
 263       {{entry.item().barcode()}}
 264     </a>
 265   </span>
 266 </ng-template>
 267 <ng-template #titleCellTemplate let-entry="row">
 268   <a class="pl-1" routerLink="/staff/catalog/record/{{entry.record().id()}}">
 269     {{entry.record().wide_display_entry().title()}}
 270   </a>
 271 </ng-template>
 272 <ng-template #idlClassLabel let-r="result" i18n>
 273   {{r.label}}
 274 </ng-template>
 275 <ng-template #acmcTemplate
 276   let-field="field" let-record="record">
 277   <eg-combobox idlClass="acmc" [required]="true"
 278     [selectedId]="record['course']()"
 279     (onChange)="($event) ? record['course']($event.id) : ''">
 280   </eg-combobox>
 281 </ng-template>
 282
 283 <ng-container *ngIf="!isDialog()">
 284   <!-- in "inline" mode, render the grid pane right here -->
 285   <ng-container *ngTemplateOutlet="dialogContent">
 286   </ng-container>
 287 </ng-container>
 288
 289 <eg-fm-record-editor #editDialog idlClass='acmcm' [fieldOptions]="{course: {customTemplate:{template:acmcTemplate}}}"
 290   [preloadLinkedValues]="true"
 291   hiddenFields="id,item,original_callnumber,original_status,original_location,original_circ_modifier,record,temporary_record">
 292 </eg-fm-record-editor>