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

   1 <eg-confirm-dialog #confirmDelVol
   2   i18n-dialogTitle i18n-dialogBody
   3   dialogTitle="Delete Call Number?"
   4   dialogBody="Delete {{deleteVolCount}} Call Number(s) and All Associated Item(s)?">
   5 </eg-confirm-dialog>
   6
   7 <eg-confirm-dialog #confirmDelCopy
   8   i18n-dialogTitle i18n-dialogBody
   9   dialogTitle="Delete Item?"
  10   dialogBody="Delete {{deleteCopyCount}} Item(s)?">
  11 </eg-confirm-dialog>
  12
  13 <div *ngIf="!volcopy.defaults.visible.batch_actions"
  14   class="bg-faint mb-2 p-1 border border-dark rounded">
  15   <button class="btn btn-sm btn-outline-dark label-with-material-icon"
  16     (click)="toggleBatchVisibility()">
  17     <span i18n>Batch Actions</span>
  18     <span class="material-icons">unfold_more</span>
  19   </button>
  20 </div>
  21
  22 <div *ngIf="volcopy.defaults.visible.batch_actions"
  23   class="row d-flex bg-faint mb-2 pb-1 pt-1 border border-dark rounded">
  24   <div class="p-1" [ngStyle]="{flex: flexAt(1)}">
  25     <div><label class="font-weight-bold" i18n>&nbsp;</label></div>
  26     <button class="btn btn-sm btn-outline-dark label-with-material-icon"
  27       (click)="toggleBatchVisibility()">
  28       <span i18n>Batch Actions</span>
  29       <span class="material-icons">unfold_less</span>
  30     </button>
  31   </div>
  32   <div class="p-1" [ngStyle]="{flex: flexAt(3)}">
  33     <ng-container *ngIf="displayColumn('classification')">
  34       <div><label class="font-weight-bold" i18n>Classification</label></div>
  35       <div>
  36         <eg-combobox [smallFormControl]="true" [(ngModel)]="batchVolClass">
  37           <eg-combobox-entry *ngFor="let cls of volcopy.commonData.acn_class"
  38             [entryId]="cls.id()" [entryLabel]="cls.name()">
  39           </eg-combobox-entry>
  40         </eg-combobox>
  41       </div>
  42     </ng-container>
  43   </div>
  44   <div class="p-1" [ngStyle]="{flex: flexAt(4)}">
  45     <ng-container *ngIf="displayColumn('prefix')">
  46       <div><label class="font-weight-bold" i18n>Prefix</label></div>
  47       <div>
  48         <eg-combobox [smallFormControl]="true" [(ngModel)]="batchVolPrefix">
  49           <eg-combobox-entry *ngFor="let pfx of volcopy.commonData.acn_prefix"
  50             [entryId]="pfx.id()" [entryLabel]="pfx.label()">
  51           </eg-combobox-entry>
  52         </eg-combobox>
  53       </div>
  54     </ng-container>
  55   </div>
  56   <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
  57     <div>
  58       <label class="font-weight-bold" i18n>
  59         Call Number Label
  60       </label>
  61     </div>
  62     <div>
  63       <eg-combobox [smallFormControl]="true"
  64         [allowFreeText]="true" [(ngModel)]="batchVolLabel">
  65         <eg-combobox-entry *ngFor="let label of recordVolLabels"
  66           [entryId]="label" [entryLabel]="label">
  67         </eg-combobox-entry>
  68       </eg-combobox>
  69     </div>
  70   </div>
  71   <div class="p-1" [ngStyle]="{flex: flexAt(6)}">
  72     <ng-container *ngIf="displayColumn('suffix')">
  73       <div><label class="font-weight-bold" i18n>Suffix</label></div>
  74       <div>
  75         <eg-combobox [smallFormControl]="true" [(ngModel)]="batchVolSuffix">
  76           <eg-combobox-entry *ngFor="let sfx of volcopy.commonData.acn_suffix"
  77             [entryId]="sfx.id()" [entryLabel]="sfx.label()">
  78           </eg-combobox-entry>
  79         </eg-combobox>
  80       </div>
  81     </ng-container>
  82   </div>
  83   <div class="p-1" [ngStyle]="{flex: flexAt(7)}">
  84     <div><label class="font-weight-bold" i18n>Batch</label></div>
  85     <div>
  86       <button class="btn btn-sm btn-outline-dark label-with-material-icon"
  87         (click)="batchVolApply()">
  88         <span i18n>Apply</span>
  89         <span class="material-icons">arrow_downward</span>
  90       </button>
  91     </div>
  92   </div>
  93   <!-- needed for consistent column widths -->
  94   <div class="p-1" [ngStyle]="{flex: flexAt(8)}"></div>
  95   <div class="p-1" [ngStyle]="{flex: flexAt(9)}"></div>
  96   <div class="p-1" [ngStyle]="{flex: flexAt(10)}"></div>
  97   <div class="p-1" [ngStyle]="{flex: flexAt(11)}"></div>
  98 </div>
  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">
 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">
 112           &#x2199;
 113         </button>
 114       </ng-container>
 115     </span>
 116   </div>
 117   <div class="p-1" [ngStyle]="{flex: flexAt(3)}">
 118     <ng-container *ngIf="displayColumn('classification')">
 119       <span class="font-weight-bold" i18n>Classification
 120         <ng-container *ngIf="expand !== 3">
 121           <button title="Expand Column" i18n-title
 122             class="material-icon-button" (click)="expand = 3">
 123             &#x2197;
 124           </button>
 125         </ng-container>
 126         <ng-container *ngIf="expand === 3">
 127           <button title="Shrink Column" i18n-title
 128             class="material-icon-button" (click)="expand = null">
 129             &#x2199;
 130           </button>
 131         </ng-container>
 132       </span>
 133     </ng-container>
 134   </div>
 135   <div class="p-1" [ngStyle]="{flex: flexAt(4)}">
 136     <ng-container *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">
 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">
 147             &#x2199;
 148           </button>
 149         </ng-container>
 150       </span>
 151     </ng-container>
 152   </div>
 153   <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
 154     <span class="font-weight-bold" i18n>Call Number Label
 155       <ng-container *ngIf="expand !== 5">
 156         <button title="Expand Column" i18n-title
 157           class="material-icon-button" (click)="expand = 5">
 158           &#x2197;
 159         </button>
 160       </ng-container>
 161       <ng-container *ngIf="expand === 5">
 162         <button title="Shrink Column" i18n-title
 163           class="material-icon-button" (click)="expand = null">
 164           &#x2199;
 165         </button>
 166       </ng-container>
 167     </span>
 168   </div>
 169   <div class="p-1" [ngStyle]="{flex: flexAt(6)}">
 170     <ng-container *ngIf="displayColumn('suffix')">
 171       <span class="font-weight-bold" i18n>Suffix
 172         <ng-container *ngIf="expand !== 6">
 173           <button title="Expand Column" i18n-title
 174             class="material-icon-button" (click)="expand = 6">
 175             &#x2197;
 176           </button>
 177         </ng-container>
 178         <ng-container *ngIf="expand === 6">
 179           <button title="Shrink Column" i18n-title
 180             class="material-icon-button" (click)="expand = null">
 181             &#x2199;
 182           </button>
 183         </ng-container>
 184       </span>
 185     </ng-container>
 186   </div>
 187   <div class="p-1" [ngStyle]="{flex: flexAt(7)}">
 188     <label class="font-weight-bold" i18n></label>
 189   </div>
 190   <!--
 191     When hiding the copy_number column, absorb its colum width to
 192     take advantage of the space and to ensure the main columns still
 193     line up with the batch updater row sitting above
 194   -->
 195   <div class="p-1" [ngStyle]="{flex: flexAt(8)}">
 196     <span class="font-weight-bold" i18n>Barcode
 197       <ng-container *ngIf="expand !== 8">
 198         <button title="Expand Column" i18n-title
 199           class="material-icon-button" (click)="expand = 8">
 200           &#x2197;
 201         </button>
 202       </ng-container>
 203       <ng-container *ngIf="expand === 8">
 204         <button title="Shrink Column" i18n-title
 205           class="material-icon-button" (click)="expand = null">
 206           &#x2199;
 207         </button>
 208       </ng-container>
 209     </span>
 210   </div>
 211   <div class="p-1" [ngStyle]="{flex: flexAt(9)}">
 212     <ng-container *ngIf="displayColumn('copy_number_vc')">
 213       <label class="font-weight-bold" i18n>Item #</label>
 214     </ng-container>
 215   </div>
 216   <div class="p-1" [ngStyle]="{flex: flexAt(10)}">
 217     <ng-container *ngIf="displayColumn('copy_part')">
 218       <span class="font-weight-bold" i18n>Part
 219         <ng-container *ngIf="expand !== 10">
 220           <button title="Expand Column" i18n-title
 221             class="material-icon-button" (click)="expand = 10">
 222             &#x2197;
 223           </button>
 224         </ng-container>
 225         <ng-container *ngIf="expand === 10">
 226           <button title="Shrink Column" i18n-title
 227             class="material-icon-button" (click)="expand = null">
 228             &#x2199;
 229           </button>
 230         </ng-container>
 231       </span>
 232     </ng-container>
 233   </div>
 234   <div class="p-1" [ngStyle]="{flex: flexAt(11)}"></div>
 235 </div>
 236
 237 <ng-container *ngFor="let orgNode of context.orgNodes(); let orgIdx = index">
 238   <ng-container *ngFor="let volNode of orgNode.children; let volIdx = index">
 239     <ng-container *ngFor="let copyNode of volNode.children; let copyIdx = index">
 240       <div class="row d-flex mt-1" [ngClass]="{'vol-row': copyIdx === 0}">
 241         <div class="p-1" [ngStyle]="{flex: flexAt(1)}">
 242           <div class="d-flex">
 243             <div class="flex-1 pl-1">
 244               <ng-container *ngIf="copyIdx === 0 && volIdx === 0">
 245                 <span>{{orgNode.target.shortname()}}</span>
 246               </ng-container>
 247             </div>
 248             <ng-container *ngIf="copyIdx === 0 && volIdx === 0 && (
 249               context.sessionType === 'record' || context.sessionType === 'mixed')">
 250               <div class="pr-1">
 251                 <ng-template #addOrgTmpl>
 252                   <eg-org-select [limitPerms]="['CREATE_VOLUME']"
 253                     placeholder="Select Location..." i18n-placeholder
 254                     [hideOrgs]="volcopy.hideVolOrgs"
 255                     (onChange)="addVol($event); addOrgPopover.close()">
 256                   </eg-org-select>
 257                 </ng-template>
 258
 259                 <button class="btn btn-sm material-icon-button p-1"
 260                   placement="bottom" [ngbPopover]="addOrgTmpl"
 261                   autoClose="outside" #addOrgPopover="ngbPopover"
 262                   i18n-popoverTitle="Add Call Number For Location"
 263                   i18n-title title="Add Call Number For Location">
 264                   <span class="material-icons">add_circle_outline</span>
 265                 </button>
 266               </div>
 267             </ng-container>
 268             <ng-container *ngIf="copyIdx === 0">
 269               <div class="pr-1">
 270                 <ng-template #editOrgTmpl>
 271                   <eg-org-select [limitPerms]="['CREATE_VOLUME']"
 272                     placeholder="Select Location..." i18n-placeholder
 273                     [hideOrgs]="volcopy.hideVolOrgs"
 274                     (onChange)="editVolOwner(volNode, $event); editOrgPopover.close()">
 275                   </eg-org-select>
 276                 </ng-template>
 277
 278                 <button class="btn btn-sm material-icon-button p-1"
 279                   placement="bottom" [ngbPopover]="editOrgTmpl"
 280                   autoClose="outside" #editOrgPopover="ngbPopover"
 281                   i18n-popoverTitle="Edit Call Number Owning Location"
 282                   i18n-title title="Edit Call Number Owning Location">
 283                   <span class="material-icons">edit</span>
 284                 </button>
 285               </div>
 286             </ng-container>
 287           </div>
 288         </div>
 289         <div class="p-1" [ngStyle]="{flex: flexAt(3)}">
 290           <ng-container *ngIf="displayColumn('classification')">
 291             <ng-container *ngIf="copyIdx === 0">
 292               <eg-combobox
 293                 [selectedId]="volNode.target.label_class()"
 294                 [smallFormControl]="true"
 295                 [required]="true"
 296                 (onChange)="applyVolValue(volNode.target, 'label_class', $event ? $event.id : null)">
 297                 <eg-combobox-entry *ngFor="let cls of volcopy.commonData.acn_class"
 298                   [entryId]="cls.id()" [entryLabel]="cls.name()">
 299                 </eg-combobox-entry>
 300               </eg-combobox>
 301             </ng-container>
 302           </ng-container>
 303         </div>
 304         <div class="p-1" [ngStyle]="{flex: flexAt(4)}">
 305           <ng-container *ngIf="displayColumn('prefix')">
 306             <ng-container *ngIf="copyIdx === 0">
 307               <eg-combobox
 308                 [selectedId]="volNode.target.prefix()"
 309                 [required]="true"
 310                 [smallFormControl]="true"
 311                 (onChange)="applyVolValue(volNode.target, 'prefix', $event ? $event.id : null)">
 312                 <eg-combobox-entry
 313                   [entryId]="-1" entryLabel="<None>" i18n-entryLabel>
 314                 </eg-combobox-entry>
 315                 <eg-combobox-entry *ngFor="let pfx of volcopy.commonData.acn_prefix"
 316                   [entryId]="pfx.id()" [entryLabel]="pfx.label()">
 317                 </eg-combobox-entry>
 318               </eg-combobox>
 319             </ng-container>
 320           </ng-container>
 321         </div>
 322         <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
 323           <ng-container *ngIf="copyIdx === 0">
 324             <input class="form-control form-control-sm" type="text"
 325               spellcheck="false"
 326               [required]="true"
 327               [ngClass]="{invalid: !volNode.target.label()}"
 328               [ngModel]="volNode.target.label()"
 329               (change)="applyVolValue(volNode.target, 'label', $event.target.value)">
 330           </ng-container>
 331         </div>
 332         <div class="p-1" [ngStyle]="{flex: flexAt(6)}">
 333           <ng-container *ngIf="displayColumn('suffix')">
 334             <ng-container *ngIf="copyIdx === 0">
 335               <eg-combobox
 336                 [selectedId]="volNode.target.suffix()"
 337                 [required]="true"
 338                 [smallFormControl]="true"
 339                 (onChange)="applyVolValue(volNode.target, 'suffix', $event ? $event.id : null)">
 340                 <eg-combobox-entry
 341                   [entryId]="-1" entryLabel="<None>" i18n-entryLabel>
 342                 </eg-combobox-entry>
 343                 <eg-combobox-entry *ngFor="let sfx of volcopy.commonData.acn_suffix"
 344                   [entryId]="sfx.id()" [entryLabel]="sfx.label()">
 345                 </eg-combobox-entry>
 346               </eg-combobox>
 347             </ng-container>
 348           </ng-container>
 349         </div>
 350         <div class="p-1" [ngStyle]="{flex: flexAt(7)}">
 351           <ng-container *ngIf="copyIdx === 0">
 352             <ng-container
 353               *ngIf="context.sessionType === 'record' || context.sessionType === 'mixed'">
 354               <button class="btn btn-sm material-icon-button p-1"
 355                 (click)="createVols(orgNode, 1)"
 356                 i18n-title title="Add Call Number">
 357                 <span class="material-icons">add_circle_outline</span>
 358               </button>
 359
 360               <ng-template #addVolCountTmpl>
 361                 <div i18n>Add How Many Call Numbers</div>
 362                 <div class="form-inline mt-1">
 363                   <input type="number" class="form-control form-control-sm"
 364                     id='add-vol-popover'
 365                     (keyup.enter)="createVolsFromPopover(orgNode, addVolsPopover)"
 366                     [(ngModel)]="addVolCount" [required]="true" min="1"/>
 367                   <button class="btn btn-sm btn-success ml-1"
 368                     (click)="createVolsFromPopover(orgNode, addVolsPopover)"
 369                     i18n>Add</button>
 370                 </div>
 371               </ng-template>
 372
 373               <button class="btn btn-sm material-icon-button p-1"
 374                 [disabled]="context.sessionType === 'copy' || context.sessionType === 'vol'"
 375                 (shown)="focusElement('add-vol-popover')"
 376                 placement="bottom" [ngbPopover]="addVolCountTmpl"
 377                 autoClose="outside" #addVolsPopover="ngbPopover"
 378                 i18n-popoverTitle="Add Call Numbers"
 379                 i18n-title title="Add Call Numbers">
 380                 <span class="material-icons">playlist_add</span>
 381               </button>
 382
 383               <button class="btn btn-sm material-icon-button p-1"
 384                 (click)="deleteVol(volNode)"
 385                 i18n-title title="Remove Call Number">
 386                 <span class="material-icons">remove_circle_outline</span>
 387               </button>
 388
 389             </ng-container>
 390           </ng-container>
 391         </div>
 392         <div class="p-1" [ngStyle]="{flex: flexAt(8)}">
 393           <div class="d-flex">
 394             <!--
 395               Barcode value is not required for new copies, since those
 396               without a barcode will be ignored.
 397             -->
 398             <input type="text" class="form-control form-control-sm"
 399               title="{{copyStatLabel(copyNode.target)}}"
 400               id="barcode-input-{{copyNode.target.id()}}"
 401               spellcheck="false" [required]="true"
 402               placeholder="New Barcode..." i18n-placeholder
 403               [disabled]="volcopy.copyStatIsMagic(copyNode.target.status())"
 404               [ngClass]="{
 405                 'text-danger': copyNode.target._dupe_barcode,
 406                 'invalid': !copyNode.target.barcode() && !copyNode.target.isnew()
 407               }"
 408               (change)="barcodeChanged(copyNode.target, $event.target.value)"
 409               (ngModelChange)="copyNode.target.barcode($event)"
 410               (keyup.enter)="selectNextBarcode(copyNode.target.id())"
 411               (keyup.shift.enter)="selectNextBarcode(copyNode.target.id(), true)"
 412               (focus)="$event.target.select()"
 413               [ngModel]="copyNode.target.barcode()"
 414               (ngModelChange)="applyCopyValue(copyNode.target, 'barcode', $event)"/>
 415           </div>
 416           <div *ngIf="copyNode.target._dupe_barcode"
 417             class="alert alert-danger font-italic p-1" i18n>
 418             Duplicate Barcode
 419           </div>
 420         </div>
 421         <div class="p-1" [ngStyle]="{flex: flexAt(9)}">
 422           <ng-container *ngIf="displayColumn('copy_number_vc')">
 423             <input type="number" min="1" class="form-control form-control-sm"
 424               [ngModel]="copyNode.target.copy_number()"
 425               (ngModelChange)="applyCopyValue(copyNode.target, 'copy_number', $event)"/>
 426           </ng-container>
 427         </div>
 428         <div class="p-1" [ngStyle]="{flex: flexAt(10)}">
 429         <ng-container *ngIf="displayColumn('copy_part')">
 430             <eg-combobox
 431               [selectedId]="copyNode.target.parts()[0] ? copyNode.target.parts()[0].id() : null"
 432               [smallFormControl]="true" [allowFreeText]="true"
 433               (onChange)="copyPartChanged(copyNode, $event)">
 434               <eg-combobox-entry
 435                 *ngFor="let part of volcopy.bibParts[volNode.target.record()]"
 436                 [entryId]="part.id()" [entryLabel]="part.label()">
 437               </eg-combobox-entry>
 438             </eg-combobox>
 439           </ng-container>
 440         </div>
 441         <div class="p-1" [ngStyle]="{flex: flexAt(11)}">
 442           <ng-container *ngIf="context.sessionType !== 'copy'">
 443
 444             <button class="btn btn-sm material-icon-button p-1"
 445               (click)="createCopies(volNode, 1)" i18n-title title="Add Item">
 446               <span class="material-icons">add_circle_outline</span>
 447             </button>
 448
 449             <ng-template #addCopyCountTmpl>
 450               <div i18n>Add How Many Items</div>
 451               <div class="form-inline mt-1">
 452                 <input type="number" class="form-control form-control-sm"
 453                   id="add-copy-popover"
 454                   (keyup.enter)="createCopiesFromPopover(volNode, addCopiesPopover)"
 455                   [(ngModel)]="addCopyCount" [required]="true" min="1"/>
 456                 <button class="btn btn-sm btn-success ml-1"
 457                   (click)="createCopiesFromPopover(volNode, addCopiesPopover)"
 458                   i18n>Add</button>
 459               </div>
 460             </ng-template>
 461
 462             <button class="btn btn-sm material-icon-button p-1"
 463               placement="left" [ngbPopover]="addCopyCountTmpl"
 464               autoClose="outside" #addCopiesPopover="ngbPopover"
 465               i18n-popoverTitle="Add Items" i18n-title title="Add Items"
 466               (shown)="focusElement('add-copy-popover')">
 467               <span class="material-icons">playlist_add</span>
 468             </button>
 469
 470             <button class="btn btn-sm material-icon-button p-1"
 471               (click)="deleteCopy(copyNode)" i18n-title title="Remove Item">
 472               <span class="material-icons">remove_circle_outline</span>
 473             </button>
 474
 475           </ng-container>
 476         </div>
 477       </div>
 478     </ng-container>
 479   </ng-container>
 480 </ng-container>
 481
 482 <hr/>
 483