Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.html

   1 <eg-confirm-dialog
   2   #confirmDelVol
   3   i18n-dialogTitle i18n-dialogBody
   4   dialogTitle="Delete Call Number?"
   5   dialogBody="Delete {{deleteVolCount}} Call Number(s) and All Associated Item(s)?">
   6 </eg-confirm-dialog>
   7
   8 <eg-confirm-dialog
   9   #confirmDelCopy
  10   i18n-dialogTitle i18n-dialogBody
  11   dialogTitle="Delete Item?"
  12   dialogBody="Delete {{deleteCopyCount}} Item(s)?">
  13 </eg-confirm-dialog>
  14
  15 <div class="row d-flex bg-faint mb-2 pb-1 pt-1 border border-dark rounded">
  16   <div class="p-1" [ngStyle]="{flex: flexAt(1)}"> </div>
  17   <div class="p-1" [ngStyle]="{flex: flexAt(2)}"> </div>
  18   <div class="p-1" [ngStyle]="{flex: flexAt(3)}" *ngIf="displayColumn('classification')">
  19     <div><label class="font-weight-bold" i18n>Classification</label></div>
  20     <div>
  21       <eg-combobox [smallFormControl]="true" [(ngModel)]="batchVolClass">
  22         <eg-combobox-entry *ngFor="let cls of volcopy.commonData.acn_class"
  23           [entryId]="cls.id()" [entryLabel]="cls.name()">
  24         </eg-combobox-entry>
  25       </eg-combobox>
  26     </div>
  27   </div>
  28   <div class="p-1" [ngStyle]="{flex: flexAt(4)}" *ngIf="displayColumn('prefix')">
  29     <div><label class="font-weight-bold" i18n>Prefix</label></div>
  30     <div>
  31       <eg-combobox [smallFormControl]="true" [(ngModel)]="batchVolPrefix">
  32         <eg-combobox-entry *ngFor="let pfx of volcopy.commonData.acn_prefix"
  33           [entryId]="pfx.id()" [entryLabel]="pfx.label()">
  34         </eg-combobox-entry>
  35       </eg-combobox>
  36     </div>
  37   </div>
  38   <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
  39     <div>
  40       <label class="font-weight-bold label-with-material-icon" i18n>
  41         Call Number Label
  42       </label>
  43     </div>
  44     <div>
  45       <eg-combobox [smallFormControl]="true"
  46         [allowFreeText]="true" [(ngModel)]="batchVolLabel">
  47         <eg-combobox-entry *ngFor="let label of recordVolLabels"
  48           [entryId]="label" [entryLabel]="label">
  49         </eg-combobox-entry>
  50       </eg-combobox>
  51     </div>
  52   </div>
  53   <div class="p-1" [ngStyle]="{flex: flexAt(6)}" *ngIf="displayColumn('suffix')">
  54     <div><label class="font-weight-bold" i18n>Suffix</label></div>
  55     <div>
  56       <eg-combobox [smallFormControl]="true" [(ngModel)]="batchVolSuffix">
  57         <eg-combobox-entry *ngFor="let sfx of volcopy.commonData.acn_suffix"
  58           [entryId]="sfx.id()" [entryLabel]="sfx.label()">
  59         </eg-combobox-entry>
  60       </eg-combobox>
  61     </div>
  62   </div>
  63   <div class="p-1" [ngStyle]="{flex: flexAt(7)}">
  64     <div><label class="font-weight-bold" i18n>Batch</label></div>
  65     <div>
  66       <button class="btn btn-sm btn-outline-dark label-with-material-icon"
  67         (click)="batchVolApply()">
  68         <span i18n>Apply</span>
  69         <span class="material-icons">arrow_downward</span>
  70       </button>
  71     </div>
  72   </div>
  73   <div class="p-1" [ngStyle]="{flex: flexAt(8)}">
  74     <ng-container *ngIf="displayColumn('generate_barcodes')">
  75       <div><label class="font-weight-bold" i18n>Generate Barcodes</label></div>
  76       <button class="btn btn-sm btn-outline-dark label-with-material-icon"
  77        (click)="generateBarcodes()">
  78        <span i18n>Generate</span>
  79        <span class="material-icons">arrow_downward</span>
  80       </button>
  81     </ng-container>
  82   </div>
  83   <div class="p-1" [ngStyle]="{flex: flexSpan(9, 10)}">
  84     <ng-container *ngIf="displayColumn('generate_barcodes')">
  85       <div><label class="font-weight-bold" i18n>Checkdigit</label></div>
  86       <div class="form-check form-check-inline">
  87         <input class="form-check-input" type="checkbox"
  88           (change)="saveUseCheckdigit()"
  89           id="use-checkdigit" [(ngModel)]="useCheckdigit"/>
  90         <label class="form-check-label" for="use-checkdigit" i18n>
  91           Use Checkdigit
  92         </label>
  93       </div>
  94     </ng-container>
  95   </div>
  96 </div>
  97
  98
  99
 100 <div class="row d-flex mt-2 mb-2">
 101   <div class="p-1" [ngStyle]="{flex: flexAt(1)}">
 102     <span class="font-weight-bold" i18n>Owning Library
 103       <ng-container *ngIf="expand !== 1">
 104         <button title="Expand Column" i18n-title
 105           class="material-icon-button" (click)="expand = 1" i18n>
 106           &#x2197;
 107         </button>
 108       </ng-container>
 109       <ng-container *ngIf="expand === 1">
 110         <button title="Shrink Column" i18n-title
 111           class="material-icon-button" (click)="expand = null" i18n>
 112           &#x2199;
 113         </button>
 114       </ng-container>
 115     </span>
 116   </div>
 117   <div class="p-1" [ngStyle]="{flex: flexAt(2)}">
 118     <label class="font-weight-bold" i18n>Call Numbers</label>
 119   </div>
 120   <div class="p-1" [ngStyle]="{flex: flexAt(3)}" *ngIf="displayColumn('classification')">
 121     <span class="font-weight-bold" i18n>Classification
 122       <ng-container *ngIf="expand !== 3">
 123         <button title="Expand Column" i18n-title
 124           class="material-icon-button" (click)="expand = 3" i18n>
 125           &#x2197;
 126         </button>
 127       </ng-container>
 128       <ng-container *ngIf="expand === 3">
 129         <button title="Shrink Column" i18n-title
 130           class="material-icon-button" (click)="expand = null" i18n>
 131           &#x2199;
 132         </button>
 133       </ng-container>
 134     </span>
 135   </div>
 136   <div class="p-1" [ngStyle]="{flex: flexAt(4)}" *ngIf="displayColumn('prefix')">
 137     <span class="font-weight-bold" i18n>Prefix
 138       <ng-container *ngIf="expand !== 4">
 139         <button title="Expand Column" i18n-title
 140           class="material-icon-button" (click)="expand = 4" i18n>
 141           &#x2197;
 142         </button>
 143       </ng-container>
 144       <ng-container *ngIf="expand === 4">
 145         <button title="Shrink Column" i18n-title
 146           class="material-icon-button" (click)="expand = null" i18n>
 147           &#x2199;
 148         </button>
 149       </ng-container>
 150     </span>
 151   </div>
 152   <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
 153     <span class="font-weight-bold" i18n>Call Number Label
 154       <ng-container *ngIf="expand !== 5">
 155         <button title="Expand Column" i18n-title
 156           class="material-icon-button" (click)="expand = 5" i18n>
 157           &#x2197;
 158         </button>
 159       </ng-container>
 160       <ng-container *ngIf="expand === 5">
 161         <button title="Shrink Column" i18n-title
 162           class="material-icon-button" (click)="expand = null" i18n>
 163           &#x2199;
 164         </button>
 165       </ng-container>
 166     </span>
 167   </div>
 168   <div class="p-1" [ngStyle]="{flex: flexAt(6)}" *ngIf="displayColumn('suffix')">
 169     <span class="font-weight-bold" i18n>Suffix
 170       <ng-container *ngIf="expand !== 6">
 171         <button title="Expand Column" i18n-title
 172           class="material-icon-button" (click)="expand = 6" i18n>
 173           &#x2197;
 174         </button>
 175       </ng-container>
 176       <ng-container *ngIf="expand === 6">
 177         <button title="Shrink Column" i18n-title
 178           class="material-icon-button" (click)="expand = null" i18n>
 179           &#x2199;
 180         </button>
 181       </ng-container>
 182     </span>
 183   </div>
 184   <div class="p-1" [ngStyle]="{flex: flexAt(7)}">
 185     <label class="font-weight-bold" i18n>Items</label>
 186   </div>
 187   <!--
 188     When hiding the copy_number column, absorb its colum width to
 189     take advantage of the space and to ensure the main columns still
 190     line up with the batch updater row sitting above
 191   -->
 192   <div class="p-1"
 193     [ngStyle]="{flex: displayColumn('copy_number_vc') ? flexAt(8) : flexSpan(8, 9)}">
 194     <span class="font-weight-bold" i18n>Barcode
 195       <ng-container *ngIf="expand !== 8">
 196         <button title="Expand Column" i18n-title
 197           class="material-icon-button" (click)="expand = 8" i18n>
 198           &#x2197;
 199         </button>
 200       </ng-container>
 201       <ng-container *ngIf="expand === 8">
 202         <button title="Shrink Column" i18n-title
 203           class="material-icon-button" (click)="expand = null" i18n>
 204           &#x2199;
 205         </button>
 206       </ng-container>
 207     </span>
 208   </div>
 209   <div class="p-1" [ngStyle]="{flex: flexAt(9)}" *ngIf="displayColumn('copy_number_vc')">
 210     <label class="font-weight-bold" i18n>Item #</label>
 211   </div>
 212   <div class="p-1" [ngStyle]="{flex: flexAt(10)}">
 213     <span class="font-weight-bold" i18n>Part
 214       <ng-container *ngIf="expand !== 10">
 215         <button title="Expand Column" i18n-title
 216           class="material-icon-button" (click)="expand = 10" i18n>
 217           &#x2197;
 218         </button>
 219       </ng-container>
 220       <ng-container *ngIf="expand === 10">
 221         <button title="Shrink Column" i18n-title
 222           class="material-icon-button" (click)="expand = null" i18n>
 223           &#x2199;
 224         </button>
 225       </ng-container>
 226     </span>
 227   </div>
 228 </div>
 229
 230 <ng-container *ngFor="let orgNode of context.orgNodes(); let orgIdx = index">
 231   <ng-container *ngFor="let volNode of orgNode.children; let volIdx = index">
 232     <ng-container *ngFor="let copyNode of volNode.children; let copyIdx = index">
 233       <div class="row d-flex mt-1" [ngClass]="{'vol-row': copyIdx == 0}">
 234         <div class="p-1" [ngStyle]="{flex: flexAt(1)}">
 235           <ng-container *ngIf="copyIdx == 0">
 236             <span>{{orgNode.target.shortname()}}</span>
 237             {{sessionType}}
 238             <ng-container *ngIf="context.sessionType == 'record' || context.sessionType == 'mixed'">
 239               <button class="clear-button" (click)="deleteVol(volNode)"
 240                 title="Delete Call Number {{volNode.target.label()}}" i18n-title>
 241                 <span class="material-icons">clear</span>
 242               </button>
 243             </ng-container>
 244           </ng-container>
 245         </div>
 246         <div class="p-1" [ngStyle]="{flex: flexAt(2)}">
 247           <ng-container *ngIf="copyIdx == 0 && volIdx == 0">
 248             <input type="number" class="form-control form-control-sm"
 249               [disabled]="context.sessionType == 'copy' || context.sessionType == 'vol'"
 250               [required]="true" [min]="existingVolCount(orgNode)"
 251               [ngModel]="orgNode.children.length"
 252               (ngModelChange)="volCountChanged(orgNode, $event)"/>
 253           </ng-container>
 254         </div>
 255         <div class="p-1" [ngStyle]="{flex: flexAt(3)}" *ngIf="displayColumn('classification')">
 256           <ng-container *ngIf="copyIdx == 0">
 257             <eg-combobox
 258               [selectedId]="volNode.target.label_class()"
 259               [smallFormControl]="true"
 260               [required]="true"
 261               (onChange)="applyVolValue(volNode.target, 'label_class', $event ? $event.id : null)">
 262               <eg-combobox-entry *ngFor="let cls of volcopy.commonData.acn_class"
 263                 [entryId]="cls.id()" [entryLabel]="cls.name()">
 264               </eg-combobox-entry>
 265             </eg-combobox>
 266           </ng-container>
 267         </div>
 268         <div class="p-1" [ngStyle]="{flex: flexAt(4)}" *ngIf="displayColumn('prefix')">
 269           <ng-container *ngIf="copyIdx == 0">
 270             <eg-combobox
 271               [selectedId]="volNode.target.prefix()"
 272               [required]="true"
 273               [smallFormControl]="true"
 274               (onChange)="applyVolValue(volNode.target, 'prefix', $event ? $event.id : null)">
 275               <eg-combobox-entry
 276                 [entryId]="-1" entryLabel="<None>" i18n-entryLabel>
 277               </eg-combobox-entry>
 278               <eg-combobox-entry *ngFor="let pfx of volcopy.commonData.acn_prefix"
 279                 [entryId]="pfx.id()" [entryLabel]="pfx.label()">
 280               </eg-combobox-entry>
 281             </eg-combobox>
 282           </ng-container>
 283         </div>
 284         <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
 285           <ng-container *ngIf="copyIdx == 0">
 286             <input class="form-control form-control-sm" type="text"
 287               spellcheck="false"
 288               [required]="true"
 289               [ngClass]="{invalid: !volNode.target.label()}"
 290               [ngModel]="volNode.target.label()"
 291               (change)="applyVolValue(volNode.target, 'label', $event.target.value)">
 292           </ng-container>
 293         </div>
 294         <div class="p-1" [ngStyle]="{flex: flexAt(6)}" *ngIf="displayColumn('suffix')">
 295           <ng-container *ngIf="copyIdx == 0">
 296             <eg-combobox
 297               [selectedId]="volNode.target.suffix()"
 298               [required]="true"
 299               [smallFormControl]="true"
 300               (onChange)="applyVolValue(volNode.target, 'suffix', $event ? $event.id : null)">
 301               <eg-combobox-entry
 302                 [entryId]="-1" entryLabel="<None>" i18n-entryLabel>
 303               </eg-combobox-entry>
 304               <eg-combobox-entry *ngFor="let sfx of volcopy.commonData.acn_suffix"
 305                 [entryId]="sfx.id()" [entryLabel]="sfx.label()">
 306               </eg-combobox-entry>
 307             </eg-combobox>
 308           </ng-container>
 309         </div>
 310         <div class="p-1" [ngStyle]="{flex: flexAt(7)}">
 311           <ng-container *ngIf="copyIdx == 0">
 312             <input type="number" class="form-control form-control-sm"
 313               [disabled]="context.sessionType == 'copy'"
 314               [required]="true" [min]="existingCopyCount(volNode)"
 315               [ngModel]="volNode.children.length"
 316               (ngModelChange)="copyCountChanged(volNode, $event)"/>
 317           </ng-container>
 318         </div>
 319         <div class="p-1"
 320           [ngStyle]="{flex: displayColumn('copy_number_vc') ? flexAt(8) : flexSpan(8, 9)}">
 321           <div class="d-flex">
 322             <ng-container *ngIf="context.sessionType != 'copy'">
 323               <button class="clear-button" (click)="deleteCopy(copyNode)"
 324                 [disabled]="volcopy.restrictCopyDelete(copyNode.target.status())"
 325                 title="Delete Item {{copyNode.target.barcode()}}" i18n-title>
 326                 <span class="material-icons">clear</span>
 327               </button>
 328             </ng-container>
 329
 330             <!--
 331               Barcode value is not required for new copies, since those
 332               without a barcode will be ignored.
 333             -->
 334             <input type="text" class="form-control form-control-sm"
 335               title="{{copyStatLabel(copyNode.target)}}"
 336               id="barcode-input-{{copyNode.target.id()}}"
 337               spellcheck="false" [required]="true"
 338               placeholder="New Barcode..." i18n-placeholder
 339               [disabled]="volcopy.copyStatIsMagic(copyNode.target.status())"
 340               [ngClass]="{
 341                 'text-danger': copyNode.target._dupe_barcode,
 342                 'invalid': !copyNode.target.barcode() && !copyNode.target.isnew()
 343               }"
 344               (change)="barcodeChanged(copyNode.target, $event.target.value)"
 345               (ngModelChange)="copyNode.target.barcode($event)"
 346               (keyup.enter)="selectNextBarcode(copyNode.target.id())"
 347               (keyup.shift.enter)="selectNextBarcode(copyNode.target.id(), true)"
 348               (focus)="$event.target.select()"
 349               [ngModel]="copyNode.target.barcode()"
 350               (ngModelChange)="applyCopyValue(copyNode.target, 'barcode', $event)"/>
 351           </div>
 352           <div *ngIf="copyNode.target._dupe_barcode"
 353             class="alert alert-danger font-italic p-1" i18n>
 354             Duplicate Barcode
 355           </div>
 356         </div>
 357         <div class="p-1" [ngStyle]="{flex: flexAt(9)}" *ngIf="displayColumn('copy_number_vc')">
 358           <input type="number" min="1" class="form-control form-control-sm"
 359             [ngModel]="copyNode.target.copy_number()"
 360             (ngModelChange)="applyCopyValue(copyNode.target, 'copy_number', $event)"/>
 361         </div>
 362         <div class="p-1" [ngStyle]="{flex: flexAt(10)}">
 363           <ng-container *ngIf="!recordHasParts(volNode.target.record())">
 364             <label i18n>N/A</label>
 365           </ng-container>
 366           <ng-container *ngIf="recordHasParts(volNode.target.record())">
 367             <eg-combobox
 368               [selectedId]="copyNode.target.parts()[0] ? copyNode.target.parts()[0].id() : null"
 369               [smallFormControl]="true"
 370               (onChange)="copyPartChanged(copyNode, $event)">
 371               <eg-combobox-entry
 372                 *ngFor="let part of volcopy.bibParts[volNode.target.record()]"
 373                 [entryId]="part.id()" [entryLabel]="part.label()">
 374               </eg-combobox-entry>
 375             </eg-combobox>
 376           </ng-container>
 377         </div>
 378       </div>
 379     </ng-container>
 380   </ng-container>
 381 </ng-container>
 382
 383 <hr/>
 384
 385 <div class="row d-flex">
 386
 387   <div class="p-1" [ngStyle]="{flex: flexSpan(1, 2)}">
 388     <eg-org-select #newVolOrg [applyDefault]="true"
 389       [limitPerms]="['CREATE_VOLUME']" [hideOrgs]="volcopy.hideVolOrgs">
 390     </eg-org-select>
 391   </div>
 392
 393   <div class="p-1" [ngStyle]="{flex: flexSpan(3, 4)}">
 394     <button class="btn btn-outline-dark ml-2"
 395       (click)="addVol(newVolOrg.selectedOrg())" i18n>
 396       Add Call Number
 397     </button>
 398   </div>
 399
 400   <div class="p-1" [ngStyle]="{flex: flexAt(5)}"></div>
 401   <div class="p-1" [ngStyle]="{flex: flexAt(6)}"></div>
 402   <div class="p-1" [ngStyle]="{flex: flexAt(7)}"></div>
 403
 404   <div class="p-1 pl-3" [ngStyle]="{flex: flexAt(8)}">
 405     <ng-container *ngIf="displayColumn('generate_barcodes')">
 406       <button class="btn btn-sm btn-outline-dark mr-2"
 407         (click)="generateBarcodes()" i18n>Generate Barcodes</button>
 408     </ng-container>
 409   </div>
 410
 411   <div class="p-1" [ngStyle]="{flex: flexSpan(9, 10)}">
 412     <ng-container *ngIf="displayColumn('generate_barcodes')">
 413       <div class="form-check form-check-inline mr-2">
 414         <input class="form-check-input" type="checkbox"
 415           (change)="saveUseCheckdigit()"
 416           id="use-checkdigit-2" [(ngModel)]="useCheckdigit"/>
 417         <label class="form-check-label" for="use-checkdigit-2" i18n>
 418           Use Checkdigit
 419         </label>
 420       </div>
 421     </ng-container>
 422   </div>
 423 </div>
 424