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             <div class="pr-1">
 249               <ng-container *ngIf="copyIdx == 0 && volIdx == 0 && (
 250                 context.sessionType == 'record' || context.sessionType == 'mixed')">
 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                     (click)="addVolOrg=null">
 265                     <span class="material-icons">add_circle_outline</span>
 266                   </button>
 267               </ng-container>
 268             </div>
 269           </div>
 270         </div>
 271         <div class="p-1" [ngStyle]="{flex: flexAt(3)}">
 272           <ng-container *ngIf="displayColumn('classification')">
 273             <ng-container *ngIf="copyIdx == 0">
 274               <eg-combobox
 275                 [selectedId]="volNode.target.label_class()"
 276                 [smallFormControl]="true"
 277                 [required]="true"
 278                 (onChange)="applyVolValue(volNode.target, 'label_class', $event ? $event.id : null)">
 279                 <eg-combobox-entry *ngFor="let cls of volcopy.commonData.acn_class"
 280                   [entryId]="cls.id()" [entryLabel]="cls.name()">
 281                 </eg-combobox-entry>
 282               </eg-combobox>
 283             </ng-container>
 284           </ng-container>
 285         </div>
 286         <div class="p-1" [ngStyle]="{flex: flexAt(4)}">
 287           <ng-container *ngIf="displayColumn('prefix')">
 288             <ng-container *ngIf="copyIdx == 0">
 289               <eg-combobox
 290                 [selectedId]="volNode.target.prefix()"
 291                 [required]="true"
 292                 [smallFormControl]="true"
 293                 (onChange)="applyVolValue(volNode.target, 'prefix', $event ? $event.id : null)">
 294                 <eg-combobox-entry
 295                   [entryId]="-1" entryLabel="<None>" i18n-entryLabel>
 296                 </eg-combobox-entry>
 297                 <eg-combobox-entry *ngFor="let pfx of volcopy.commonData.acn_prefix"
 298                   [entryId]="pfx.id()" [entryLabel]="pfx.label()">
 299                 </eg-combobox-entry>
 300               </eg-combobox>
 301             </ng-container>
 302           </ng-container>
 303         </div>
 304         <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
 305           <ng-container *ngIf="copyIdx == 0">
 306             <input class="form-control form-control-sm" type="text"
 307               spellcheck="false"
 308               [required]="true"
 309               [ngClass]="{invalid: !volNode.target.label()}"
 310               [ngModel]="volNode.target.label()"
 311               (change)="applyVolValue(volNode.target, 'label', $event.target.value)">
 312           </ng-container>
 313         </div>
 314         <div class="p-1" [ngStyle]="{flex: flexAt(6)}">
 315           <ng-container *ngIf="displayColumn('suffix')">
 316             <ng-container *ngIf="copyIdx == 0">
 317               <eg-combobox
 318                 [selectedId]="volNode.target.suffix()"
 319                 [required]="true"
 320                 [smallFormControl]="true"
 321                 (onChange)="applyVolValue(volNode.target, 'suffix', $event ? $event.id : null)">
 322                 <eg-combobox-entry
 323                   [entryId]="-1" entryLabel="<None>" i18n-entryLabel>
 324                 </eg-combobox-entry>
 325                 <eg-combobox-entry *ngFor="let sfx of volcopy.commonData.acn_suffix"
 326                   [entryId]="sfx.id()" [entryLabel]="sfx.label()">
 327                 </eg-combobox-entry>
 328               </eg-combobox>
 329             </ng-container>
 330           </ng-container>
 331         </div>
 332         <div class="p-1" [ngStyle]="{flex: flexAt(7)}">
 333           <ng-container *ngIf="copyIdx == 0">
 334             <ng-container
 335               *ngIf="context.sessionType == 'record' || context.sessionType == 'mixed'">
 336               <button class="btn btn-sm material-icon-button p-1"
 337                 (click)="createVols(orgNode, 1)"
 338                 i18n-title title="Add Call Number">
 339                 <span class="material-icons">add_circle_outline</span>
 340               </button>
 341
 342               <ng-template #addVolCountTmpl>
 343                 <div i18n>Add How Many Call Numbers</div>
 344                 <div class="form-inline mt-1">
 345                   <input type="number" class="form-control form-control-sm"
 346                     id='add-vol-popover'
 347                     (keyup.enter)="createVolsFromPopover(orgNode, addVolsPopover)"
 348                     [(ngModel)]="addVolCount" [required]="true" min="1"/>
 349                   <button class="btn btn-sm btn-success ml-1"
 350                     (click)="createVolsFromPopover(orgNode, addVolsPopover)"
 351                     i18n>Add</button>
 352                 </div>
 353               </ng-template>
 354
 355               <button class="btn btn-sm material-icon-button p-1"
 356                 [disabled]="context.sessionType == 'copy' || context.sessionType == 'vol'"
 357                 (shown)="focusElement('add-vol-popover')"
 358                 placement="bottom" [ngbPopover]="addVolCountTmpl"
 359                 autoClose="outside" #addVolsPopover="ngbPopover"
 360                 i18n-popoverTitle="Add Call Numbers"
 361                 i18n-title title="Add Call Numbers">
 362                 <span class="material-icons">playlist_add</span>
 363               </button>
 364
 365               <button class="btn btn-sm material-icon-button p-1"
 366                 (click)="deleteVol(volNode)"
 367                 i18n-title title="Remove Call Number">
 368                 <span class="material-icons">remove_circle_outline</span>
 369               </button>
 370
 371             </ng-container>
 372           </ng-container>
 373         </div>
 374         <div class="p-1" [ngStyle]="{flex: flexAt(8)}">
 375           <div class="d-flex">
 376             <!--
 377               Barcode value is not required for new copies, since those
 378               without a barcode will be ignored.
 379             -->
 380             <input type="text" class="form-control form-control-sm"
 381               title="{{copyStatLabel(copyNode.target)}}"
 382               id="barcode-input-{{copyNode.target.id()}}"
 383               spellcheck="false" [required]="true"
 384               placeholder="New Barcode..." i18n-placeholder
 385               [disabled]="volcopy.copyStatIsMagic(copyNode.target.status())"
 386               [ngClass]="{
 387                 'text-danger': copyNode.target._dupe_barcode,
 388                 'invalid': !copyNode.target.barcode() && !copyNode.target.isnew()
 389               }"
 390               (change)="barcodeChanged(copyNode.target, $event.target.value)"
 391               (ngModelChange)="copyNode.target.barcode($event)"
 392               (keyup.enter)="selectNextBarcode(copyNode.target.id())"
 393               (keyup.shift.enter)="selectNextBarcode(copyNode.target.id(), true)"
 394               (focus)="$event.target.select()"
 395               [ngModel]="copyNode.target.barcode()"
 396               (ngModelChange)="applyCopyValue(copyNode.target, 'barcode', $event)"/>
 397           </div>
 398           <div *ngIf="copyNode.target._dupe_barcode"
 399             class="alert alert-danger font-italic p-1" i18n>
 400             Duplicate Barcode
 401           </div>
 402         </div>
 403         <div class="p-1" [ngStyle]="{flex: flexAt(9)}">
 404           <ng-container *ngIf="displayColumn('copy_number_vc')">
 405             <input type="number" min="1" class="form-control form-control-sm"
 406               [ngModel]="copyNode.target.copy_number()"
 407               (ngModelChange)="applyCopyValue(copyNode.target, 'copy_number', $event)"/>
 408           </ng-container>
 409         </div>
 410         <div class="p-1" [ngStyle]="{flex: flexAt(10)}">
 411         <ng-container *ngIf="displayColumn('copy_part')">
 412             <eg-combobox
 413               [selectedId]="copyNode.target.parts()[0] ? copyNode.target.parts()[0].id() : null"
 414               [smallFormControl]="true" [allowFreeText]="true"
 415               (onChange)="copyPartChanged(copyNode, $event)">
 416               <eg-combobox-entry
 417                 *ngFor="let part of volcopy.bibParts[volNode.target.record()]"
 418                 [entryId]="part.id()" [entryLabel]="part.label()">
 419               </eg-combobox-entry>
 420             </eg-combobox>
 421           </ng-container>
 422         </div>
 423         <div class="p-1" [ngStyle]="{flex: flexAt(11)}">
 424           <ng-container *ngIf="context.sessionType != 'copy'">
 425
 426             <button class="btn btn-sm material-icon-button p-1"
 427               (click)="createCopies(volNode, 1)" i18n-title title="Add Item">
 428               <span class="material-icons">add_circle_outline</span>
 429             </button>
 430
 431             <ng-template #addCopyCountTmpl>
 432               <div i18n>Add How Many Items</div>
 433               <div class="form-inline mt-1">
 434                 <input type="number" class="form-control form-control-sm"
 435                   id="add-copy-popover"
 436                   (keyup.enter)="createCopiesFromPopover(volNode, addCopiesPopover)"
 437                   [(ngModel)]="addCopyCount" [required]="true" min="1"/>
 438                 <button class="btn btn-sm btn-success ml-1"
 439                   (click)="createCopiesFromPopover(volNode, addCopiesPopover)"
 440                   i18n>Add</button>
 441               </div>
 442             </ng-template>
 443
 444             <button class="btn btn-sm material-icon-button p-1"
 445               placement="left" [ngbPopover]="addCopyCountTmpl"
 446               autoClose="outside" #addCopiesPopover="ngbPopover"
 447               i18n-popoverTitle="Add Items" i18n-title title="Add Items"
 448               (shown)="focusElement('add-copy-popover')">
 449               <span class="material-icons">playlist_add</span>
 450             </button>
 451
 452             <button class="btn btn-sm material-icon-button p-1"
 453               (click)="deleteCopy(copyNode)" i18n-title title="Remove Item">
 454               <span class="material-icons">remove_circle_outline</span>
 455             </button>
 456
 457           </ng-container>
 458         </div>
 459       </div>
 460     </ng-container>
 461   </ng-container>
 462 </ng-container>
 463
 464 <hr/>
 465