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-confirm-dialog #confirmOtherLibraryDialog
  11   i18n-dialogTitle i18n-dialogBody
  12   dialogTitle="Material from a different library"
  13   dialogBody="This material has {{itemCircLib}} as its circulation library. Are you sure you want to add it to {{currentCourse.course_number()}}?">
  14 </eg-confirm-dialog>
  15
  16 <ng-template #dialogContent>
  17   <div class="modal-header bg-info" [ngClass]="isDialog() ? 'modal-header' : 'alert mt-3'">
  18     <h4 class="modal-title" i18n>Course Materials</h4>
  19     <ng-container *ngIf="isDialog()">
  20       <button type="button" class="close" i18n-aria-label aria-label="Close" (click)="close()">
  21         <span aria-hidden="true">&times;</span>
  22       </button>
  23     </ng-container>
  24   </div>
  25   <div [ngClass]="isDialog() ? 'modal-body' : ''">
  26     <div class="row">
  27       <div [ngClass]="isDialog() ? 'col-md-12' : 'col-md-4'">
  28         <ul ngbNav #associateNav="ngbNav" class="nav-tabs">
  29           <li ngbNavItem>
  30             <a ngbNavLink i18n>Associate item</a>
  31             <ng-template ngbNavContent>
  32               <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
  33                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12'">
  34                   <div class="input-group">
  35                     <div class="input-group-prepend">
  36                       <label for="associate-item-barcode" class="input-group-text" i18n>Barcode</label>
  37                     </div>
  38                     <input type="text" class="flex-grow-1" id="associate-item-barcode"
  39                       [(ngModel)]="barcodeInput" (click)="$event.target.select()"
  40                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'"
  41                       />
  42                   </div>
  43                 </div>
  44                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
  45                   <div class="input-group">
  46                     <div class="input-group-prepend">
  47                       <span class="input-group-text" i18n>Relationship</span>
  48                     </div>
  49                     <input type="text" [(ngModel)]="relationshipInput"
  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-prepend">
  66                       <div class="input-group-text">
  67                         <label for="associate-item-temp-call-number" i18n>Call Number</label>
  68                       </div>
  69                     </div>
  70                     <input type="text" [(ngModel)]="tempCallNumber" label="associate-item-temp-call-number"
  71                       [disabled]="currentCourse && (courseIsArchived || 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 && (courseIsArchived || 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 && (courseIsArchived || 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 && (courseIsArchived || 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 && (courseIsArchived || 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 && (courseIsArchived || 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 && (courseIsArchived || 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 && (courseIsArchived || 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               <div class="row mt-3">
 148                 <div class="col-lg-12 text-right">
 149                   <button class="btn btn-primary" [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'"
 150                     (click)="associateItem(barcodeInput, relationshipInput)" i18n [disabled]="!barcodeInput">
 151                     Add Material
 152                   </button>
 153                 </div>
 154               </div>
 155             </ng-template>
 156           </li>
 157           <li ngbNavItem>
 158             <a ngbNavLink i18n>Associate brief record</a>
 159             <ng-template ngbNavContent>
 160               <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 161                 <div class="input-group">
 162                   <div class="input-group-prepend">
 163                     <span class="input-group-text" i18n>Relationship</span>
 164                   </div>
 165                   <input type="text" [(ngModel)]="relationshipInput"
 166                     [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" placeholder-i18n
 167                     placeholder="e.g. Required" class="flex-grow-1" />
 168                 </div>
 169               </div>
 170               <eg-marc-simplified-editor (xmlRecordEvent)="associateBriefRecord($event)"
 171               buttonLabel="Add material" i18n-buttonLabel defaultMarcForm="o">
 172                 <eg-marc-simplified-editor-field tag="245" ind1="0" ind2="0">
 173                   <eg-marc-simplified-editor-subfield code="a"></eg-marc-simplified-editor-subfield>
 174                 </eg-marc-simplified-editor-field>
 175                 <eg-marc-simplified-editor-field tag="856" ind1="4" ind2="0">
 176                   <eg-marc-simplified-editor-subfield code="u"></eg-marc-simplified-editor-subfield>
 177                   <eg-marc-simplified-editor-subfield code="y"></eg-marc-simplified-editor-subfield>
 178                   <eg-marc-simplified-editor-subfield code="9" [defaultValue]="currentCourse.owning_lib().shortname()"></eg-marc-simplified-editor-subfield>
 179                 </eg-marc-simplified-editor-field>
 180                 <eg-marc-simplified-editor-field tag="990">
 181                   <eg-marc-simplified-editor-subfield code="a" i18n-defaultValue
 182                     defaultValue="This record was created using the Course Materials Module -- please edit it there">
 183                   </eg-marc-simplified-editor-subfield>
 184                 </eg-marc-simplified-editor-field>
 185               </eg-marc-simplified-editor>
 186             </ng-template>
 187           </li>
 188           <li ngbNavItem>
 189             <a ngbNavLink>Associate electronic resource from catalog</a>
 190             <ng-template ngbNavContent>
 191               <div class="row" [ngClass]="isDialog() ? '' : 'mt-3'">
 192                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 193                   <div class="input-group">
 194                     <div class="input-group-prepend">
 195                       <label for="bib-id" class="input-group-text" i18n>Bibliographic Record ID</label>
 196                     </div>
 197                     <input type="text" [(ngModel)]="bibId" id="bib-id"
 198                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" class="flex-grow-1" />
 199                   </div>
 200                 </div>
 201                 <div class="d-flex" [ngClass]="isDialog() ? 'col-md-6' : 'col-md-12 mt-3'">
 202                   <div class="input-group">
 203                     <div class="input-group-prepend">
 204                       <span class="input-group-text" i18n>Relationship</span>
 205                     </div>
 206                     <input type="text" [(ngModel)]="relationshipInput"
 207                       [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'" class="flex-grow-1" />
 208                   </div>
 209                 </div>
 210               </div>
 211               <div class="row mt-3">
 212                 <div class="col-lg-12 text-right">
 213                   <button class="btn btn-primary" i18n (click)="associateElectronicBibRecord()"
 214                     [disabled]="currentCourse && (courseIsArchived || currentCourse.is_archived()) == 't'">
 215                     Add Material
 216                   </button>
 217                 </div>
 218               </div>
 219             </ng-template>
 220           </li>
 221         </ul>
 222         <div [ngbNavOutlet]="associateNav"></div>
 223       </div>
 224
 225       <div class="mt-3" [ngClass]="isDialog() ? 'col-md-12' : 'col-md-8'">
 226         <eg-grid #materialsGrid [dataSource]="materialsDataSource" [useLocalSort]="true" [disablePaging]="true">
 227           <eg-grid-toolbar-action label="Remove Selected" i18n-label (onClick)="deleteSelectedMaterials($event)">
 228           </eg-grid-toolbar-action>
 229           <eg-grid-toolbar-action label="Edit Selected" i18n-label (onClick)="editSelectedMaterials($event)">
 230           </eg-grid-toolbar-action>
 231           <eg-grid-column path="id" [index]=true [hidden]="true" label="ID" i18n-label></eg-grid-column>
 232           <eg-grid-column label="Barcode" i18n-label name="barcode" [cellTemplate]="barcodeCellTemplate"></eg-grid-column>
 233           <eg-grid-column label="Title" i18n-label name="title" flex="3" [cellTemplate]="titleCellTemplate"></eg-grid-column>
 234           <eg-grid-column path="item.call_number.label" label="Call Number" i18n-label></eg-grid-column>
 235           <eg-grid-column path="item.call_number.prefix.label" [hidden]="true" label="Call Number Prefix" i18n-label hidden>
 236           </eg-grid-column>
 237           <eg-grid-column path="item.call_number.suffix.label" [hidden]="true" label="Call Number Suffix" i18n-label hidden>
 238           </eg-grid-column>
 239           <eg-grid-column path="item.circ_modifier" [hidden]="true" label="Circulation Modifier" i18n-label></eg-grid-column>
 240           <eg-grid-column path="item.circ_lib.shortname" label="Circulation Library" i18n-label></eg-grid-column>
 241           <eg-grid-column path="item.location.name" [hidden]="true" label="Shelving Location" i18n-label></eg-grid-column>
 242           <eg-grid-column path="item.status.name" [hidden]="true" label="Item Status" i18n-label></eg-grid-column>
 243           <eg-grid-column path="original_circ_modifier.name" [hidden]="true" label="Original Circulation Modifier" i18n-label></eg-grid-column>
 244           <eg-grid-column path="original_location.name" [hidden]="true" label="Original Shelving Location" i18n-label></eg-grid-column>
 245           <eg-grid-column path="original_status.name" [hidden]="true" label="Original Item Status" i18n-label></eg-grid-column>
 246           <eg-grid-column path="relationship" label="Relationship" i18n-label></eg-grid-column>
 247         </eg-grid>
 248       </div>
 249     </div>
 250   </div>
 251 </ng-template>
 252 <ng-template #barcodeCellTemplate let-entry="row">
 253   <span *ngIf="entry.item()">
 254     <a class="pl-1" href="/eg/staff/cat/item/{{entry.item().id()}}">
 255       {{entry.item().barcode()}}
 256     </a>
 257   </span>
 258 </ng-template>
 259 <ng-template #titleCellTemplate let-entry="row">
 260   <a class="pl-1" routerLink="/staff/catalog/record/{{entry.record().id()}}">
 261     {{entry.record().wide_display_entry().title()}}
 262   </a>
 263 </ng-template>
 264 <ng-template #idlClassLabel let-r="result" i18n>
 265   {{r.label}}
 266 </ng-template>
 267 <ng-template #acmcTemplate
 268   let-field="field" let-record="record">
 269   <eg-combobox idlClass="acmc" [required]="true"
 270     [selectedId]="record['course']()"
 271     (onChange)="($event) ? record['course']($event.id) : ''">
 272   </eg-combobox>
 273 </ng-template>
 274
 275 <ng-container *ngIf="!isDialog()">
 276   <!-- in "inline" mode, render the grid pane right here -->
 277   <ng-container *ngTemplateOutlet="dialogContent">
 278   </ng-container>
 279 </ng-container>
 280
 281 <eg-fm-record-editor #editDialog idlClass='acmcm' [fieldOptions]="{course: {customTemplate:{template:acmcTemplate}}}"
 282   [preloadLinkedValues]="true"
 283   hiddenFields="id,item,original_callnumber,original_status,original_location,original_circ_modifier,record,temporary_record">
 284 </eg-fm-record-editor>