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