Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.html

   1
   2 <!-- BATCH ACTIONS -->
   3 <eg-acq-cancel-dialog #cancelDialog></eg-acq-cancel-dialog>
   4
   5 <div class="row mt-3">
   6   <div class="col-lg-1">
   7     <div ngbDropdown>
   8       <button class="btn btn-info btn-sm" ngbDropdownToggle i18n>Actions</button>
   9       <div ngbDropdownMenu>
  10         <a ngbDropdownItem routerLink="../brief-record"
  11           queryParamsHandling="merge" i18n>Add Brief Record</a>
  12         <div class="dropdown-divider"></div>
  13         <h6 class="dropdown-header" i18n>Selection List Actions</h6>
  14         <button ngbDropdownItem (click)="deleteLineitems()"
  15           [disabled]="!picklistId" i18n>Delete Selected Lineitems</button>
  16         <button ngbDropdownItem (click)="createPo()"
  17           [disabled]="!picklistId" i18n>Create Purchase Order from Selected Lineitems</button>
  18         <button ngbDropdownItem (click)="createPo(true)"
  19           [disabled]="!picklistId" i18n>Create Purchase Order from All Lineitems</button>
  20         <div class="dropdown-divider"></div>
  21         <h6 class="dropdown-header" i18n>Purchase Order Actions</h6>
  22         <button ngbDropdownItem (click)="receiveSelected()"
  23           [disabled]="!poId" i18n>Mark Selected Lineitems as Received</button>
  24         <button ngbDropdownItem (click)="unReceiveSelected()"
  25           [disabled]="!poId" i18n>Un-Receive Selected Lineitems</button>
  26         <button ngbDropdownItem (click)="cancelSelected()"
  27           [disabled]="!poId" i18n>Cancel Selected Lineitems</button>
  28       </div>
  29     </div>
  30   </div>
  31   <div class="col-lg-5">
  32     <input type="text" class="form-control" [(ngModel)]="batchNote"
  33       placeholder="New Line Item Note..." i18n-placeholder/>
  34   </div>
  35   <div class="col-lg-4 form-inline">
  36     <div class="form-check mr-2">
  37       <input class="form-check-input" type="checkbox"
  38         id="vendor-public" [(ngModel)]="noteIsPublic">
  39       <label class="form-check-label" for="vendor-public">
  40         Note is vendor-public
  41       </label>
  42     </div>
  43     <button class="btn btn-outline-dark" (click)="applyBatchNote()"
  44       [disabled]="!selectedIds().length" i18n>
  45       Apply To Selected
  46     </button>
  47   </div>
  48 </div>
  49
  50 <div *ngIf="batchFailure" class="row mt-2 p-2">
  51   <div class="col-lg-12 p-2 border border-danger label-with-material-icon" i18n>
  52     <span class="material-icons text-danger pr-2">report</span>
  53     Batch operation failed:
  54     {{batchFailure.textcode}} {{batchFailure.desc}}
  55
  56     <a class="ml-auto" href="javascript:;"
  57       (click)="batchFailure = null" title="Close" i18n-title>
  58       <span class="material-icons text-danger">close</span>
  59     </a>
  60   </div>
  61 </div>
  62
  63 <!-- NAVIGATION / EXPANDY -->
  64
  65 <div class="row mt-3 mb-1 border border-info rounded toolbar">
  66   <div class="col-lg-12 d-flex">
  67     <div class="d-flex justify-content-center flex-column h-100">
  68       <div class="form-check">
  69         <input class="form-check-input" id='toggle-page-cbox'
  70           [(ngModel)]="batchSelectPage" (change)="toggleSelectAll(false)" type="checkbox"/>
  71         <label class="form-check-label" for='toggle-page-cbox' i18n>Items In Page</label>
  72       </div>
  73     </div>
  74
  75     <div class="d-flex justify-content-center flex-column h-100 ml-3">
  76       <div class="form-check">
  77         <input class="form-check-input" id='toggle-all-cbox'
  78           [(ngModel)]="batchSelectAll" (change)="toggleSelectAll(true)" type="checkbox"/>
  79         <label class="form-check-label" for='toggle-all-cbox' i18n>All Items</label>
  80       </div>
  81     </div>
  82
  83     <div class="d-flex ml-3 justify-content-center flex-column h-100">
  84       <span class="font-italic" style="font-size:90%" i18n>
  85         {{selectedIds().length}} Selected
  86       </span>
  87     </div>
  88
  89     <div class="flex-1"></div>
  90
  91     <div class="btn-toolbar">
  92       <button type="button" (click)="toggleExpandAll()"
  93         class="btn btn-sm btn-outline-dark mr-1">
  94         <span title="Expand All" i18n-title *ngIf="!expandAll"
  95           class="material-icons mat-icon-in-button">unfold_more</span>
  96         <span title="Collapse All" i18n-title *ngIf="expandAll"
  97           class="material-icons mat-icon-in-button">unfold_less</span>
  98       </button>
  99       <button [disabled]="pager.isFirstPage()" type="button"
 100         class="btn btn-sm btn-outline-dark mr-1" (click)="pager.toFirst(); goToPage()">
 101         <span title="First Page" i18n-title
 102           class="material-icons mat-icon-in-button">first_page</span>
 103       </button>
 104       <button [disabled]="pager.isFirstPage()" type="button"
 105         class="btn btn-sm btn-outline-dark mr-1" (click)="pager.decrement(); goToPage()">
 106         <span title="Previous Page" i18n-title
 107             class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
 108       </button>
 109       <button [disabled]="pager.isLastPage()" type="button"
 110         class="btn btn-sm btn-outline-dark mr-1" (click)="pager.increment(); goToPage()">
 111         <span title="Next Page" i18n-title
 112           class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
 113       </button>
 114       <div ngbDropdown class="mr-1" placement="bottom-right">
 115         <button ngbDropdownToggle class="btn btn-outline-dark text-button">
 116           <span title="Select Row Count" i18n-title i18n>
 117             Rows {{pager.limit}}
 118           </span>
 119         </button>
 120         <div class="dropdown-menu" ngbDropdownMenu>
 121           <a class="dropdown-item" (click)="pageSizeChange(count)"
 122             *ngFor="let count of [5, 10, 25, 50, 100, 500, 1000, 10000]">
 123             <span class="ml-2">{{count}}</span>
 124           </a>
 125         </div>
 126       </div>
 127     </div><!-- buttons -->
 128   </div>
 129 </div>
 130
 131 <!-- LINEITEM LIST -->
 132
 133 <ng-container *ngFor="let li of pageOfLineitems">
 134   <div class="row mt-2 border-bottom pt-2 pb-2 li-state-{{li.state()}}">
 135     <div class="col-lg-12 d-flex">
 136       <div class="jacket-wrapper">
 137         <ng-container *ngIf="jacketIdent(li)">
 138           <a href="/opac/extras/ac/jacket/large/{{jacketIdent(li)}}">
 139             <img class="jacket"
 140               src='/opac/extras/ac/jacket/small/{{jacketIdent(li)}}'/>
 141           </a>
 142         </ng-container>
 143         <ng-container *ngIf="!jacketIdent(li)"><img class="jacket"/></ng-container>
 144       </div>
 145
 146       <div class="ml-2 flex-1"> <!-- lineitem summary info -->
 147         <div class="row">
 148           <div class="col-lg-12">
 149             <input type="checkbox" [(ngModel)]="selected[li.id()]"/>
 150             <a class="ml-2" queryParamsHandling="merge" [id]="li.id()"
 151               routerLink="./lineitem/{{li.id()}}/detail">
 152               {{displayAttr(li, 'title')}}
 153             </a>
 154           </div>
 155         </div>
 156         <div class="row">
 157           <div class="col-lg-12">
 158             <span class="pr-1">{{displayAttr(li, 'author')}}</span>
 159             <span class="pr-1">{{displayAttr(li, 'isbn')}}</span>
 160             <span class="pr-1">{{displayAttr(li, 'issn')}}</span>
 161             <span class="pr-1">{{displayAttr(li, 'edition')}}</span>
 162             <span class="pr-1">{{displayAttr(li, 'pubdate')}}</span>
 163             <span class="pr-1">{{displayAttr(li, 'publisher')}}</span>
 164             <span class="pr-1">{{li.source_label()}}</span>
 165           </div>
 166         </div>
 167         <div class="row" *ngIf="li.purchase_order()">
 168           <div class="col-lg-12">
 169             <eg-lineitem-order-summary [li]="li"></eg-lineitem-order-summary>
 170           </div>
 171         </div>
 172         <div class="row">
 173           <div class="col-lg-12">
 174             <span title="Lineitem ID" i18n-title i18n># {{li.id()}}</span>
 175             <span class="ml-1 mr-1" i18n> | </span>
 176             <span title="Existing Item Count" i18n-title i18n
 177               [ngClass]="{'text-danger font-weight-bold': existingCopyCounts[li.id()] > 0}">
 178               {{existingCopyCounts[li.id()]}}</span>
 179             <span class="ml-1 mr-1" i18n> | </span>
 180             <a class="label-with-material-icon" title="Items" i18n-title
 181               routerLink="./lineitem/{{li.id()}}/items" queryParamsHandling="merge">
 182               <span class="material-icons small mr-1">shopping_basket</span>
 183               <span i18n>Items ({{li.lineitem_details().length}})</span>
 184             </a>
 185             <span class="ml-1 mr-1" i18n> | </span>
 186             <a class="label-with-material-icon" title="Expand" i18n-title
 187               href="javascript:;" (click)="toggleShowExpand(li.id())">
 188               <ng-container *ngIf="showExpandFor != li.id()">
 189                 <span class="material-icons small mr-1">unfold_more</span>
 190                 <span i18n>Expand</span>
 191               </ng-container>
 192               <ng-container *ngIf="showExpandFor == li.id()">
 193                 <span class="material-icons small mr-1">unfold_less</span>
 194                 <span i18n>Collapse</span>
 195               </ng-container>
 196             </a>
 197             <span class="ml-1 mr-1" i18n> | </span>
 198             <a class="label-with-material-icon" title="Notes" i18n-title
 199               href="javascript:;" (click)="toggleShowNotes(li.id())">
 200               <span class="material-icons small mr-1">event_note</span>
 201               <span i18n>Notes ({{li.lineitem_notes().length}})</span>
 202               <span *ngIf="liHasAlerts(li)" class="text-danger material-icons"
 203                 title="Has Alerts" i18n-title>flag</span>
 204             </a>
 205             <span class="ml-1 mr-1" i18n> | </span>
 206             <a class="label-with-material-icon"
 207               routerLink="lineitem/{{li.id()}}/worksheet/">
 208               <span class="material-icons small mr-1">create</span>
 209               <span i18n>Worksheet</span>
 210             </a>
 211             <span class="ml-1 mr-1" i18n> | </span>
 212             <a class="label-with-material-icon"
 213               [queryParams]="{f: 'jub:id', val1: li.id()}"
 214               routerLink="/staff/acq/search/invoices">
 215               <span class="material-icons small mr-1">list</span>
 216               <span i18n>Invoice(s)</span>
 217             </a>
 218             <ng-container *ngIf="li.eg_bib_id()">
 219               <span class="ml-1 mr-1" i18n> | </span>
 220               <a class="label-with-material-icon mr-2"
 221                 routerLink="/staff/catalog/record/{{li.eg_bib_id()}}">
 222                 <span class="material-icons small mr-1">library_books</span>
 223                 <span i18n>Catalog</span>
 224               </a>
 225             </ng-container>
 226
 227             <ng-container *ngIf="!poId && li.purchase_order()">
 228               <span class="ml-1 mr-1" i18n> | </span>
 229               <a class="label-with-material-icon"
 230                 title="Purchase Order" i18n-title
 231                 routerLink="/staff/acq/po/{{li.purchase_order().id()}}">
 232                 <span class="material-icons small mr-1">center_focus_weak</span>
 233                 <span i18n>{{li.purchase_order().id()}}</span>
 234               </a>
 235             </ng-container>
 236             <ng-container *ngIf="!picklistId && li.picklist()">
 237               <span class="ml-1 mr-1" i18n> | </span>
 238               <a class="label-with-material-icon"
 239                 title="Selection List" i18n-title
 240                 routerLink="/staff/acq/picklist/{{li.picklist().id()}}">
 241                 <span class="material-icons small mr-1">widgets</span>
 242                 <span i18n>{{li.picklist().name()}}</span>
 243               </a>
 244             </ng-container>
 245             <ng-container *ngIf="li.provider()">
 246               <span class="ml-1 mr-1" i18n> | </span>
 247               <a class="label-with-material-icon"
 248                 title="Selection List" i18n-title
 249                 routerLink="/staff/acq/provider/{{li.provider().id()}}/details">
 250                 <span class="material-icons small mr-1">store</span>
 251                 <span i18n>{{li.provider().name()}}</span>
 252               </a>
 253             </ng-container>
 254           </div>
 255         </div>
 256       </div>
 257
 258       <!-- actions along the right -->
 259       <div class="d-flex flex-column justify-content-end">
 260         <div class="row">
 261           <div class="col-lg-12 d-flex">
 262           <div class="flex-1"> </div>
 263             <!-- w-auto allows the input group to stick to the right
 264                  as the status label grows -->
 265             <div class="input-group w-auto">
 266               <div class="input-group-prepend">
 267                 <div ngbDropdown>
 268                   <button class="btn btn-outline-dark btn-sm" ngbDropdownToggle
 269                     title="Order Identifier Type" i18n-title
 270                     [ngClass]="{'btn-warning': !selectedIdent(li)}">
 271                     <ng-container *ngIf="orderIdentTypes[li.id()]=='isbn'" i18n>ISBN</ng-container>
 272                     <ng-container *ngIf="orderIdentTypes[li.id()]=='upc'" i18n>UPC</ng-container>
 273                     <ng-container *ngIf="orderIdentTypes[li.id()]=='issn'" i18n>ISSN</ng-container>
 274                   </button>
 275                   <div ngbDropdownMenu>
 276                     <button class="btn-sm" ngbDropdownItem
 277                       (click)="orderIdentTypes[li.id()]='isbn'" i18n>ISBN</button>
 278                     <button class="btn-sm" ngbDropdownItem
 279                       (click)="orderIdentTypes[li.id()]='upc'" i18n>UPC</button>
 280                     <button class="btn-sm" ngbDropdownItem
 281                       (click)="orderIdentTypes[li.id()]='issn'" i18n>ISSN</button>
 282                   </div>
 283                 </div>
 284               </div>
 285               <eg-combobox [entries]="identOptions(li)" [smallFormControl]="true"
 286                 placeholder="Order Identifer..." i18n-placeholder
 287                 [allowFreeText]="true" [selectedId]="selectedIdent(li)"
 288                 (onChange)="orderIdentChanged(li, $event)">
 289               </eg-combobox>
 290             </div>
 291           </div>
 292         </div>
 293         <div class="row mt-2">
 294           <div class="col-lg-12 d-flex">
 295             <div class="flex-1"></div>
 296             <div class="mr-2">
 297               <ng-container [ngSwitch]="li.state()">
 298                 <div i18n
 299                   class="p-1 text-dark border border-dark bg-light rounded-lg"
 300                   *ngSwitchCase="'new'">New</div>
 301                 <div i18n
 302                   class="p-1 text-dark border border-dark bg-light rounded-lg"
 303                   *ngSwitchCase="'selector-ready'">Selector-Ready</div>
 304                 <div i18n
 305                   class="p-1 text-dark border border-dark bg-light rounded-lg"
 306                   *ngSwitchCase="'order-ready'">Order-Ready</div>
 307                 <div i18n
 308                   class="p-1 text-dark border border-dark bg-light rounded-lg"
 309                   *ngSwitchCase="'approved'">Approved</div>
 310                 <div i18n
 311                   class="p-1 text-dark border border-dark bg-light rounded-lg"
 312                   *ngSwitchCase="'pending-order'">Pending-Order</div>
 313                 <div i18n
 314                   class="p-1 text-primary border border-primary bg-light rounded-lg"
 315                   *ngSwitchCase="'on-order'">On-Order</div>
 316                 <div i18n
 317                   class="p-1 text-success border border-success bg-light rounded-lg"
 318                   *ngSwitchCase="'received'">Received</div>
 319                 <div i18n
 320                   class="p-1 text-danger border border-danger bg-light rounded-lg"
 321                   *ngSwitchCase="'cancelled'">Canceled</div>
 322               </ng-container>
 323             </div>
 324             <div class="mr-2">
 325               <div ngbDropdown>
 326                 <button class="btn btn-info btn-sm" ngbDropdownToggle i18n>Actions</button>
 327                 <div ngbDropdownMenu>
 328                   <button ngbDropdownItem [disabled]="li.state() != 'on-order'"
 329                     (click)="markReceived([li.id()])" i18n>Mark Received</button>
 330                   <button ngbDropdownItem [disabled]="li.state() != 'received'"
 331                     (click)="markUnReceived([li.id()])" i18n>Mark Un-Received</button>
 332                   <button ngbDropdownItem [disabled]="!liHasRealCopies(li)"
 333                     (click)="editHoldings(li)" i18n>Holdings Maintenance</button>
 334                   <a ngbDropdownItem routerLink="lineitem/{{li.id()}}/history"
 335                     queryParamsHandling="merge" i18n>View History</a>
 336                 </div>
 337               </div>
 338             </div>
 339             <div>
 340               <input type="text" class="form-control-sm medium"
 341                 [ngClass]="{'border border-danger text-danger': !liPriceIsValid(li)}"
 342                 placeholder='Price...' i18n-placeholder
 343                 (change)="liPriceChange(li)" [ngModel]="li.estimated_unit_price()"
 344                 (ngModelChange)="li.estimated_unit_price($event)"/>
 345             </div>
 346           </div>
 347         </div>
 348       </div>
 349     </div>
 350   </div>
 351
 352   <div class="row" *ngIf="showNotesFor == li.id()">
 353     <div class="col-lg-10 offset-lg-1 p-2 mt-2">
 354       <eg-lineitem-notes [lineitem]="li" (closeRequested)="showNotesFor = null">
 355       </eg-lineitem-notes>
 356     </div>
 357   </div>
 358   <div class="row" *ngIf="showExpandFor == li.id() || expandAll">
 359     <div class="col-lg-10 offset-lg-1 p-2 mt-2 shadow">
 360
 361       <!-- Note the flex values are set so they also match the layout
 362            of the list of copies in the copies component. -->
 363       <div class="div d-flex font-weight-bold">
 364         <div class="flex-1 p-1" i18n>Owning Branch</div>
 365         <div class="flex-1 p-1" i18n>Copy Location</div>
 366         <div class="flex-1 p-1" i18n>Collection Code</div>
 367         <div class="flex-1 p-1" i18n>Fund</div>
 368         <div class="flex-1 p-1" i18n>Circ Modifier</div>
 369         <div class="flex-1 p-1" i18n>Callnumber</div>
 370         <div class="flex-1 p-1" i18n>Barcode</div>
 371       </div>
 372       <div class="batch-copy-row" *ngFor="let copy of li.lineitem_details()">
 373         <eg-lineitem-copy-attrs [embedded]="true" [copy]="copy">
 374         </eg-lineitem-copy-attrs>
 375       </div>
 376     </div>
 377   </div>
 378 </ng-container>
 379
 380 <div class="row" *ngIf="loading">
 381   <div class="offset-lg-3 col-lg-6">
 382     <eg-progress-inline *ngIf="loading"></eg-progress-inline>
 383   </div>
 384 </div>
 385