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

   1
   2 <!-- BATCH ACTIONS -->
   3 <eg-acq-cancel-dialog recordType="li" #cancelDialog></eg-acq-cancel-dialog>
   4 <eg-acq-delete-lineitems-dialog #deleteLineitemsDialog></eg-acq-delete-lineitems-dialog>
   5 <eg-acq-add-copies-dialog #addCopiesDialog></eg-acq-add-copies-dialog>
   6 <eg-acq-bib-finder-dialog #bibFinderDialog></eg-acq-bib-finder-dialog>
   7 <eg-acq-batch-update-copies-dialog #batchUpdateCopiesDialog></eg-acq-batch-update-copies-dialog>
   8 <eg-acq-link-invoice-dialog #linkInvoiceDialog></eg-acq-link-invoice-dialog>
   9 <eg-acq-claim-policy-dialog #claimPolicyDialog></eg-acq-claim-policy-dialog>
  10 <eg-acq-manage-claims-dialog #manageClaimsDialog></eg-acq-manage-claims-dialog>
  11 <eg-acq-export-attributes-dialog #exportAttributesDialog></eg-acq-export-attributes-dialog>
  12 <eg-lineitem-alert-dialog #confirmAlertsDialog></eg-lineitem-alert-dialog>
  13
  14 <eg-string #lineItemsUpdatedString i18n-text text="Line Item(s) Updated"></eg-string>
  15
  16 <eg-alert-dialog #noActionableLIs i18n-dialogBody
  17   dialogBody="None of the selected line items are suitable for the action.">
  18 </eg-alert-dialog>
  19 <eg-confirm-dialog #selectorReadyConfirmDialog
  20   i18n-dialogTitle i18n-dialogBody
  21   dialogTitle="Confirm Line Item Change"
  22   dialogBody="Mark selected line item(s) as ready for selector?">
  23 </eg-confirm-dialog>
  24 <eg-confirm-dialog #orderReadyConfirmDialog
  25   i18n-dialogTitle i18n-dialogBody
  26   dialogTitle="Confirm Line Item Change"
  27   dialogBody="Mark selected line item(s) as ready for order?">
  28 </eg-confirm-dialog>
  29
  30 <div class="col-lg-6 offset-lg-3" *ngIf="saving">
  31   <eg-progress-inline [max]="progressMax" [value]="progressValue">
  32   </eg-progress-inline>
  33 </div>
  34
  35 <div class="row" *ngIf="loading">
  36   <div class="offset-lg-3 col-lg-6">
  37     <eg-progress-inline *ngIf="loading"></eg-progress-inline>
  38   </div>
  39 </div>
  40
  41 <div class="row mt-3" *ngIf="poId || picklistId">
  42   <div class="col-lg-1">
  43     <div ngbDropdown>
  44       <button class="btn btn-info btn-sm" ngbDropdownToggle i18n>Actions</button>
  45       <div ngbDropdownMenu>
  46         <a ngbDropdownItem routerLink="./brief-record"
  47           [disabled]="isActivatedPo()"
  48           queryParamsHandling="merge" i18n>Add Brief Record</a>
  49         <button ngbDropdownItem (click)="deleteLineitems()"
  50           [disabled]="!canDeleteLis() || !selectedIds().length" i18n>Delete Selected Line Items</button>
  51         <button ngbDropdownItem (click)="addCopiesToLineitems()"
  52           [disabled]="isActivatedPo() || !selectedIds().length" i18n>Add Items to Selected Line Items</button>
  53         <button ngbDropdownItem (click)="batchUpdateCopiesOnLineitems()"
  54           [disabled]="isActivatedPo() || !selectedIds().length" i18n>Batch Update Items on Selected Line Items</button>
  55         <button ngbDropdownItem (click)="exportSingleAttributeList()"
  56           [disabled]="!selectedIds().length" i18n>Export Single Attribute List for Selected Line Items</button>
  57         <div class="dropdown-divider"></div>
  58         <h6 class="dropdown-header" i18n>Selection List Actions</h6>
  59         <button ngbDropdownItem (click)="markSelectorReady()"
  60           [disabled]="!picklistId" i18n>Mark Selected Line Items as Ready for Selector</button>
  61         <button ngbDropdownItem (click)="markOrderReady()"
  62           [disabled]="!picklistId" i18n>Mark Selected Line Items as Ready for Order</button>
  63         <button ngbDropdownItem (click)="createPo()"
  64           [disabled]="!picklistId" i18n>Create Purchase Order from Selected Line Items</button>
  65         <button ngbDropdownItem (click)="createPo(true)"
  66           [disabled]="!picklistId" i18n>Create Purchase Order from All Line Items</button>
  67         <div class="dropdown-divider"></div>
  68         <h6 class="dropdown-header" i18n>Purchase Order Actions</h6>
  69         <a ngbDropdownItem routerLink="./create-assets"
  70           [disabled]="!isPendingPo()"
  71           queryParamsHandling="merge" i18n>Load Bibs and Items</a>
  72         <button ngbDropdownItem (click)="receiveSelected()"
  73           [disabled]="!isActivatedPo() || !selectedIds().length" i18n>Mark Selected Line Items as Received</button>
  74         <button ngbDropdownItem (click)="unReceiveSelected()"
  75           [disabled]="!isActivatedPo() || !selectedIds().length" i18n>Un-Receive Selected Line Items</button>
  76         <button ngbDropdownItem (click)="cancelSelected()"
  77           [disabled]="!isActivatedPo() || !selectedIds().length" i18n>Cancel Selected Line Items</button>
  78         <button ngbDropdownItem (click)="applyClaimPolicyToSelected()"
  79           [disabled]="!poId || !selectedIds().length" i18n>Apply Claim Policy to Selected Line Items</button>
  80         <button ngbDropdownItem (click)="createInvoiceFromSelected()"
  81           [disabled]="!isActivatedPo() || !selectedIds().length" i18n>Create Invoice from Selected Line Items</button>
  82         <button ngbDropdownItem (click)="linkInvoiceFromSelected()"
  83           [disabled]="!isActivatedPo() || !selectedIds().length" i18n>Link Selected Line Items to Invoice</button>
  84       </div>
  85     </div>
  86   </div>
  87   <div class="col-lg-5">
  88     <input type="text" class="form-control" [(ngModel)]="batchNote"
  89       placeholder="New Line Item Note..." i18n-placeholder/>
  90   </div>
  91   <div class="col-lg-4 form-inline">
  92     <div class="form-check me-2">
  93       <input class="form-check-input" type="checkbox"
  94         id="vendor-public" [(ngModel)]="noteIsPublic">
  95       <label class="form-label form-check-label" for="vendor-public">
  96         Note is vendor-public
  97       </label>
  98     </div>
  99     <button class="btn btn-outline-dark" (click)="applyBatchNote()"
 100       [disabled]="!selectedIds().length" i18n>
 101       Apply To Selected
 102     </button>
 103   </div>
 104 </div>
 105
 106 <div *ngIf="batchFailure" class="row mt-2 p-2">
 107   <div class="col-lg-12 p-2 border border-danger label-with-material-icon" i18n>
 108     <span class="material-icons text-danger pe-2">report</span>
 109     Batch operation failed:
 110     {{batchFailure.textcode}} {{batchFailure.desc}}
 111
 112     <a class="ms-auto" href="javascript:;"
 113       (click)="batchFailure = null" title="Close" i18n-title>
 114       <span class="material-icons text-danger">close</span>
 115     </a>
 116   </div>
 117 </div>
 118
 119 <!-- NAVIGATION / EXPANDY -->
 120
 121 <div *ngIf="poId || picklistId"
 122   class="row mt-3 mb-1 border border-info rounded toolbar">
 123   <div class="col-lg-12 d-flex">
 124     <div class="d-flex justify-content-center flex-column h-100">
 125       <div class="form-check">
 126         <input class="form-check-input" id='toggle-page-cbox'
 127           [(ngModel)]="batchSelectPage" (change)="toggleSelectAll(false)" type="checkbox"/>
 128         <label class="form-label form-check-label" for='toggle-page-cbox' i18n>Line Items In Page</label>
 129       </div>
 130     </div>
 131
 132     <div class="d-flex justify-content-center flex-column h-100 ms-3">
 133       <div class="form-check">
 134         <input class="form-check-input" id='toggle-all-cbox'
 135           [(ngModel)]="batchSelectAll" (change)="toggleSelectAll(true)" type="checkbox"/>
 136         <label class="form-label form-check-label" for='toggle-all-cbox' i18n>All Line Items</label>
 137       </div>
 138     </div>
 139
 140     <div class="d-flex ms-3 justify-content-center flex-column h-100">
 141       <span class="fst-italic" style="font-size:90%" i18n>
 142         {{selectedIds().length}} Selected
 143       </span>
 144     </div>
 145
 146     <div class="d-flex ms-3 justify-content-center flex-column h-100">
 147       <button type="button" (click)="toggleFilterSort()"
 148         class="btn btn-sm btn-outline-dark me-1">
 149         <span *ngIf="showFilterSort"  i18n>Hide Filter &amp; Sort Options</span>
 150         <span *ngIf="!showFilterSort" i18n>Show Filter &amp; Sort Options</span>
 151       </button>
 152     </div>
 153
 154     <div class="flex-1"></div>
 155
 156     <div class="btn-toolbar">
 157       <button type="button" (click)="toggleExpandAll()"
 158         class="btn btn-sm btn-outline-dark me-1">
 159         <span title="Expand All" i18n-title *ngIf="!expandAll"
 160           class="material-icons mat-icon-in-button">unfold_more</span>
 161         <span title="Collapse All" i18n-title *ngIf="expandAll"
 162           class="material-icons mat-icon-in-button">unfold_less</span>
 163       </button>
 164       <button [disabled]="pager.isFirstPage()" type="button"
 165         class="btn btn-sm btn-outline-dark me-1" (click)="pager.toFirst(); goToPage()">
 166         <span title="First Page" i18n-title
 167           class="material-icons mat-icon-in-button">first_page</span>
 168       </button>
 169       <button [disabled]="pager.isFirstPage()" type="button"
 170         class="btn btn-sm btn-outline-dark me-1" (click)="pager.decrement(); goToPage()">
 171         <span title="Previous Page" i18n-title
 172             class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
 173       </button>
 174       <button [disabled]="pager.isLastPage()" type="button"
 175         class="btn btn-sm btn-outline-dark me-1" (click)="pager.increment(); goToPage()">
 176         <span title="Next Page" i18n-title
 177           class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
 178       </button>
 179       <div ngbDropdown class="me-1" placement="bottom-right">
 180         <button ngbDropdownToggle class="btn btn-outline-dark text-button">
 181           <span title="Select Row Count" i18n-title i18n>
 182             Rows {{pager.limit}}
 183           </span>
 184         </button>
 185         <div class="dropdown-menu" ngbDropdownMenu>
 186           <a class="dropdown-item" (click)="pageSizeChange(count)"
 187             *ngFor="let count of [5, 10, 25, 50, 100, 500, 1000, 10000]">
 188             <span class="ms-2">{{count}}</span>
 189           </a>
 190         </div>
 191       </div>
 192     </div><!-- buttons -->
 193   </div>
 194   <div [hidden]="!showFilterSort">
 195     <div class="col-lg-12 d-flex">
 196      <form>
 197       <div class="d-flex justify-content-center flex-column h-100">
 198         <div class="form-group form-inline">
 199           <label for="filter-field-select" class="form-label form-check-label me-1">Filter by:</label>
 200           <select name="filter-field-select" id="filter-field-select"
 201             [ngModel]="filterField" (ngModelChange)="filterFieldChange($event)"
 202             class="form-control">
 203             <option value="" i18n></option>
 204             <option value="id" i18n>Line Item ID</option>
 205             <option value="state" i18n>Status</option>
 206             <option value="acqlia:title" i18n>Title</option>
 207             <option value="acqlia:author" i18n>Author</option>
 208             <option value="acqlia:publisher" i18n>Publisher</option>
 209             <option value="acqlia:pubdate" i18n>Publication date</option>
 210             <option value="acqlia:isbn" i18n>ISBN</option>
 211             <option value="acqlia:issn" i18n>ISSN</option>
 212             <option value="acqlia:upc" i18n>UPC</option>
 213             <option value="claim_count" i18n>Claim count</option>
 214             <option value="item_count" i18n>Item count</option>
 215             <option value="estimated_unit_price" i18n>Estimated unit price</option>
 216           </select>
 217           <select name="filter-operator-select" id="filter-operator-select"
 218             [(ngModel)]="filterOperator" (ngModelChange)="filterOperatorChange($event)"
 219             class="form-control">
 220             <option i18n value="">is</option>
 221             <option i18n value="__not">is NOT</option>
 222             <option i18n value="__fuzzy" [hidden]="searchTermDatatypes[filterField] !== 'text'">contains</option>
 223             <option i18n value="__not,__fuzzy" [hidden]="searchTermDatatypes[filterField]">does NOT contain</option>
 224             <option i18n value="__starts" [hidden]="searchTermDatatypes[filterField] !== 'text'">STARTS with</option>
 225             <option i18n value="__ends" [hidden]="searchTermDatatypes[filterField] !== 'text'">ENDS with</option>
 226             <option i18n value="__lte" [hidden]="searchTermDatatypes[filterField] !== 'timestamp' && !dateLikeSearchFields[filterField]">is on or BEFORE</option>
 227             <option i18n value="__gte" [hidden]="searchTermDatatypes[filterField] !== 'timestamp' && !dateLikeSearchFields[filterField]">is on or AFTER</option>
 228             <option i18n value="__between" [hidden]="searchTermDatatypes[filterField] !== 'timestamp'">is BETWEEN</option>
 229             <option i18n value="__age" [hidden]="searchTermDatatypes[filterField] !== 'timestamp'">age (relative date)</option>
 230             <option i18n value="__gte" [hidden]="searchTermDatatypes[filterField] !== 'number'">is greater than or equal</option>
 231             <option i18n value="__lte" [hidden]="searchTermDatatypes[filterField] !== 'number'">is less than or equal</option>
 232 <!-- TODO
 233             <option i18n value="__isnotnull" [hidden]="searchTermDatatypes[filterField] == 'id'">exists</option>
 234             <option i18n value="__isnull" [hidden]="searchTermDatatypes[filterField] == 'id'">does NOT exist</option>
 235             <option i18n value="__in">matches a term from a file</option>
 236 -->
 237           </select>
 238           <input *ngIf="searchTermDatatypes[filterField] !== 'state'" type="text" class="form-control" name="filter-value-input" id="filter-value-input" [(ngModel)]="filterValue">
 239           <eg-combobox *ngIf="searchTermDatatypes[filterField] === 'state'"
 240             [asyncSupportsEmptyTermClick]="true"
 241             idlClass="jubstlbl"
 242             [selectedId]="filterValue"
 243             (onChange)="filterValue = $event ? $event.id : ''">
 244           </eg-combobox>
 245           <button type="submit" (click)="applyFilter()"
 246             class="btn btn-sm btn-outline-dark me-1 ms-1" [disabled]="!canApplyFilter()" i18n>Apply Filter</button>
 247           <button type="button" (click)="resetFilter()"
 248             class="btn btn-sm btn-outline-dark me-1" i18n>Reset Filter</button>
 249           </div>
 250       </div>
 251      </form>
 252     </div>
 253     <div class="col-lg-12 d-flex">
 254       <div class="d-flex justify-content-center flex-column h-100">
 255         <div class="form-group form-inline">
 256           <label for="sort-order-select" class="form-label form-check-label me-1">Sort by:</label>
 257           <select name="sort-order-select" id="sort-order-select"
 258             [ngModel]="sortOrder" (ngModelChange)="sortOrderChange($event)"
 259             class="form-control">
 260             <option value="li_id_asc" i18n>Line Item ID Ascending</option>
 261             <option value="li_id_desc" i18n>Line Item ID Descending</option>
 262             <option value="title_asc" i18n>Title Ascending</option>
 263             <option value="title_desc" i18n>Title Descending</option>
 264             <option value="author_asc" i18n>Author Ascending</option>
 265             <option value="author_desc" i18n>Author Descending</option>
 266             <option value="publisher_asc" i18n>Publisher Ascending</option>
 267             <option value="publisher_desc" i18n>Publisher Descending</option>
 268             <option value="order_ident_asc" i18n>Order Identifier Ascending</option>
 269             <option value="order_ident_desc" i18n>Order Identifier Descending</option>
 270           </select>
 271         </div>
 272       </div>
 273     </div>
 274   </div>
 275 </div>
 276
 277 <!-- LINEITEM LIST -->
 278
 279 <ng-container *ngIf="pageOfLineitems.length === 0 && !loading">
 280   <div class="row mt-2">
 281     <div class="col-lg-6 offset-lg-3 alert alert-warning" i18n>
 282       No items to display.
 283     </div>
 284   </div>
 285 </ng-container>
 286
 287 <ng-container *ngFor="let li of pageOfLineitems">
 288   <div class="row mt-2 border-bottom pt-2 pb-2 li-state-{{lineitemDisposition(li)}}">
 289     <div class="col-lg-12 d-flex">
 290       <div class="jacket-wrapper">
 291         <ng-container *ngIf="jacketIdent(li)">
 292           <a href="/opac/extras/ac/jacket/large/{{jacketIdent(li)}}">
 293             <img class="jacket"
 294               src='/opac/extras/ac/jacket/small/{{jacketIdent(li)}}'/>
 295           </a>
 296         </ng-container>
 297         <ng-container *ngIf="!jacketIdent(li)"><img class="jacket"/></ng-container>
 298       </div>
 299
 300       <div class="ms-2 flex-1"> <!-- lineitem summary info -->
 301         <div class="row">
 302           <div class="col-lg-12">
 303             <input type="checkbox" [(ngModel)]="selected[li.id()]"/>
 304             <a class="ms-2" queryParamsHandling="merge" [id]="li.id()"
 305               routerLink="./lineitem/{{li.id()}}/detail">
 306               {{displayAttr(li, 'title')}}
 307             </a>
 308           </div>
 309         </div>
 310         <div class="row">
 311           <div class="col-lg-12">
 312             <span class="pe-1">{{displayAttr(li, 'author')}}</span>
 313             <span class="pe-1">{{displayAttr(li, 'isbn')}}</span>
 314             <span class="pe-1">{{displayAttr(li, 'issn')}}</span>
 315             <span class="pe-1">{{displayAttr(li, 'edition')}}</span>
 316             <span class="pe-1">{{displayAttr(li, 'pubdate')}}</span>
 317             <span class="pe-1">{{displayAttr(li, 'publisher')}}</span>
 318             <span class="pe-1">{{li.source_label()}}</span>
 319           </div>
 320         </div>
 321         <div class="row">
 322           <div class="col-lg-12 d-flex">
 323             <div class="me-2">
 324               <ng-container [ngSwitch]="li.state()">
 325                 <div i18n
 326                   class="p-1 text-dark border border-dark bg-light badge rounded-pill"
 327                   *ngSwitchCase="'new'">New</div>
 328                 <div i18n
 329                   class="p-1 text-dark border border-dark bg-light badge rounded-pill"
 330                   *ngSwitchCase="'selector-ready'">Selector-Ready</div>
 331                 <div i18n
 332                   class="p-1 text-dark border border-dark bg-light badge rounded-pill"
 333                   *ngSwitchCase="'order-ready'">Order-Ready</div>
 334                 <div i18n
 335                   class="p-1 text-dark border border-dark bg-light badge rounded-pill"
 336                   *ngSwitchCase="'approved'">Approved</div>
 337                 <div i18n
 338                   class="p-1 text-dark border border-dark bg-light badge rounded-pill"
 339                   *ngSwitchCase="'pending-order'">Pending-Order</div>
 340                 <div i18n
 341                   class="p-1 text-primary border border-primary bg-light badge rounded-pill"
 342                   *ngSwitchCase="'on-order'">On-Order</div>
 343                 <div i18n
 344                   class="p-1 text-success border border-success bg-light badge rounded-pill"
 345                   *ngSwitchCase="'received'">Received</div>
 346                 <div i18n
 347                   class="p-1 text-danger border border-danger bg-light badge rounded-pill"
 348                   *ngSwitchCase="'cancelled'">{{li.cancel_reason().label()}}</div>
 349               </ng-container>
 350             </div>
 351             <!-- w-auto allows the input group to stick to the right
 352                  as the status label grows -->
 353             <div class="input-group w-auto me-2">
 354               <div class="input-group-text">
 355                 <span *ngIf="identOptions(li).length > 1" class="text-danger me-1"
 356                   i18n-title title="Multiple Order Identifier Options" i18n>
 357                   ({{identOptions(li).length}})
 358                 </span>
 359                 <div ngbDropdown>
 360                   <button class="btn btn-outline-dark btn-sm" ngbDropdownToggle
 361                     title="Order Identifier Type" i18n-title [disabled]="!canEditIdent(li)"
 362                     [ngClass]="{'btn-warning': !selectedIdent(li)}">
 363                     <ng-container *ngIf="orderIdentTypes[li.id()]==='isbn'" i18n>ISBN</ng-container>
 364                     <ng-container *ngIf="orderIdentTypes[li.id()]==='issn'" i18n>ISSN</ng-container>
 365                     <ng-container *ngIf="orderIdentTypes[li.id()]==='upc'" i18n>UPC</ng-container>
 366                   </button>
 367                   <div ngbDropdownMenu>
 368                     <button class="btn-sm" ngbDropdownItem
 369                       (click)="orderIdentTypes[li.id()]='isbn'" i18n>ISBN</button>
 370                     <button class="btn-sm" ngbDropdownItem
 371                       (click)="orderIdentTypes[li.id()]='issn'" i18n>ISSN</button>
 372                     <button class="btn-sm" ngbDropdownItem
 373                       (click)="orderIdentTypes[li.id()]='upc'" i18n>UPC</button>
 374                   </div>
 375                 </div>
 376               </div>
 377               <eg-combobox [entries]="identOptions(li)" [smallFormControl]="true"
 378                 placeholder="Order Identifer..." i18n-placeholder
 379                 [disabled]="!canEditIdent(li)"
 380                 [allowFreeText]="true" [selectedId]="selectedIdent(li)"
 381                 (onChange)="orderIdentChanged(li, $event)">
 382               </eg-combobox>
 383             </div>
 384             <div class="me-2">
 385               <input type="text" class="form-control-sm medium"
 386                 [ngClass]="{'border border-danger text-danger': !liPriceIsValid(li)}"
 387                 placeholder='Price...' i18n-placeholder
 388                 (change)="liPriceChange(li)" [ngModel]="li.estimated_unit_price()"
 389                 (ngModelChange)="li.estimated_unit_price($event)"/>
 390             </div>
 391             <div>
 392               <div ngbDropdown>
 393                 <button class="btn btn-info btn-sm" ngbDropdownToggle i18n>Actions</button>
 394                 <div ngbDropdownMenu>
 395                   <button ngbDropdownItem [disabled]="li.state() !== 'on-order' && lineitemDisposition(li) !== 'delayed'"
 396                     (click)="markReceived([li.id()])" i18n>Mark Received</button>
 397                   <button ngbDropdownItem [disabled]="li.state() !== 'received'"
 398                     (click)="markUnReceived([li.id()])" i18n>Mark Un-Received</button>
 399                   <button ngbDropdownItem [disabled]="!liHasRealCopies(li)"
 400                     (click)="editHoldings(li)" i18n>Update Barcodes</button>
 401                   <button ngbDropdownItem [disabled]="!liHasRealCopies(li)"
 402                     (click)="jumpToHoldings(li)" i18n>Open Holdings View</button>
 403                   <button ngbDropdownItem [disabled]="!liHasRealCopies(li)"
 404                     (click)="manageClaims(li)" i18n>Claims ({{countClaims(li)}} existing)</button>
 405                   <a ngbDropdownItem routerLink="lineitem/{{li.id()}}/history"
 406                     queryParamsHandling="merge" i18n>View History</a>
 407                 </div>
 408               </div>
 409             </div>
 410           </div>
 411         </div>
 412         <div class="row" *ngIf="li.purchase_order()">
 413           <div class="col-lg-12">
 414             <eg-lineitem-order-summary [li]="li"></eg-lineitem-order-summary>
 415           </div>
 416         </div>
 417         <div class="row">
 418           <div class="col-lg-12">
 419             <span title="Line Item ID" i18n-title i18n># {{li.id()}}</span>
 420             <span class="ms-1 me-1" i18n> | </span>
 421             <span title="Existing Item Count" i18n-title i18n
 422               [ngClass]="{'text-danger fw-bold': existingCopyCounts[li.id()] > 0}">
 423               {{existingCopyCounts[li.id()]}}</span>
 424             <span class="ms-1 me-1" i18n> | </span>
 425             <a class="label-with-material-icon" title="Items" i18n-title
 426               routerLink="./lineitem/{{li.id()}}/items" queryParamsHandling="merge">
 427               <span class="material-icons small me-1">shopping_basket</span>
 428               <span i18n>Items ({{li.lineitem_details().length}})</span>
 429             </a>
 430             <span class="ms-1 me-1" i18n> | </span>
 431             <a class="label-with-material-icon" title="Expand" i18n-title
 432               href="javascript:;" (click)="toggleShowExpand(li.id())">
 433               <ng-container *ngIf="!expandLineitem[li.id()]">
 434                 <span class="material-icons small me-1">unfold_more</span>
 435                 <span i18n>Expand</span>
 436               </ng-container>
 437               <ng-container *ngIf="expandLineitem[li.id()]">
 438                 <span class="material-icons small me-1">unfold_less</span>
 439                 <span i18n>Collapse</span>
 440               </ng-container>
 441             </a>
 442             <span class="ms-1 me-1" i18n> | </span>
 443             <a class="label-with-material-icon" title="Notes and Alerts" i18n-title
 444               href="javascript:;" (click)="toggleShowNotes(li.id())">
 445               <span class="material-icons small me-1">event_note</span>
 446               <span i18n>Notes and Alerts ({{li.lineitem_notes().length}})</span>
 447               <span *ngIf="liHasAlerts(li)" class="text-danger material-icons"
 448                 title="Has Alerts" i18n-title>flag</span>
 449             </a>
 450             <ng-container *ngIf="li.eg_bib_id()">
 451               <span class="ms-1 me-1" i18n> | </span>
 452               <a class="label-with-material-icon me-2"
 453                 routerLink="/staff/catalog/record/{{li.eg_bib_id()}}"
 454                 target="_blank">
 455                 <span class="material-icons small me-1">library_books</span>
 456                 <span i18n>Catalog</span>
 457               </a>
 458             </ng-container>
 459
 460             <ng-container *ngIf="!li.eg_bib_id()">
 461               <span class="ms-1 me-1" i18n> | </span>
 462               <a class="label-with-material-icon me-2"
 463                 href="javascript:;" (click)="openBibFinder(li.id())"
 464                 title="Link to Catalog" i18n-title>
 465                 <span class="material-icons small me-1">library_books</span>
 466                 <span i18n>Link to Catalog</span>
 467               </a>
 468             </ng-container>
 469
 470             <span class="ms-1 me-1" i18n> | </span>
 471             <a class="label-with-material-icon"
 472               routerLink="lineitem/{{li.id()}}/worksheet/">
 473               <span class="material-icons small me-1">create</span>
 474               <span i18n>Worksheet</span>
 475             </a>
 476             <ng-container *ngIf="!picklistId && li.picklist() && li.picklist().name()">
 477               <span class="ms-1 me-1" i18n> | </span>
 478               <a class="label-with-material-icon"
 479                 title="Selection List" i18n-title
 480                 routerLink="/staff/acq/picklist/{{li.picklist().id()}}">
 481                 <span class="material-icons small me-1">widgets</span>
 482                 <span i18n>{{li.picklist().name()}}</span>
 483               </a>
 484             </ng-container>
 485             <ng-container *ngIf="!poId && li.purchase_order()">
 486               <span class="ms-1 me-1" i18n> | </span>
 487               <a class="label-with-material-icon"
 488                 title="Purchase Order" i18n-title
 489                 routerLink="/staff/acq/po/{{li.purchase_order().id()}}">
 490                 <span class="material-icons small me-1">center_focus_weak</span>
 491                 <span i18n>{{li.purchase_order().name()}}</span>
 492               </a>
 493             </ng-container>
 494
 495             <span class="ms-1 me-1" i18n> | </span>
 496             <a class="label-with-material-icon"
 497               title="Request(s)" i18n-title
 498               href="/eg/staff/acq/requests/lineitem/{{li.id()}}"
 499               target="_blank">
 500               <span class="material-icons small me-1">help</span>
 501               <span i18n>Request(s)</span>
 502             </a>
 503
 504             <span class="ms-1 me-1" i18n> | </span>
 505             <a class="label-with-material-icon"
 506               [queryParams]="{f: 'jub:id', val1: li.id()}"
 507               routerLink="/staff/acq/search/invoices" target="_blank">
 508               <span class="material-icons small me-1">list</span>
 509               <span i18n>Invoice(s)</span>
 510             </a>
 511
 512             <ng-container *ngIf="li.claim_policy()">
 513               <span class="ms-1 me-1" i18n> | </span>
 514               <span i18n>Claim policy: {{li.claim_policy().name()}}</span>
 515             </ng-container>
 516
 517             <ng-container *ngIf="li.provider()">
 518               <span class="ms-1 me-1" i18n> | </span>
 519               <a class="label-with-material-icon"
 520                 title="Provider" i18n-title target="_blank"
 521                 routerLink="/staff/acq/provider/{{li.provider().id()}}/details">
 522                 <span class="material-icons small me-1">store</span>
 523                 <span i18n>{{li.provider().name()}}</span>
 524               </a>
 525             </ng-container>
 526
 527             <ng-container *ngIf="li.queued_record()">
 528               <span class="ms-1 me-1" i18n> | </span>
 529               <a class="label-with-material-icon"
 530                 title="Import Queue" i18n-title
 531                 routerLink="/staff/cat/vandelay/queue/bib/{{li.queued_record().queue()}}"
 532                 target="_blank">
 533                 <span class="material-icons small me-1">queue</span>
 534                 <span i18n>Import Queue</span>
 535               </a>
 536             </ng-container>
 537
 538           </div>
 539         </div>
 540       </div>
 541     </div>
 542   </div>
 543
 544   <div class="row" *ngIf="showNotesFor === li.id()">
 545     <div class="col-lg-10 offset-lg-1 p-2 mt-2">
 546       <eg-lineitem-notes [lineitem]="li" (closeRequested)="showNotesFor = null">
 547       </eg-lineitem-notes>
 548     </div>
 549   </div>
 550   <div class="row" *ngIf="expandLineitem[li.id()]">
 551     <div class="col-lg-10 offset-lg-1 p-2 mt-2 shadow">
 552
 553       <!-- Note the flex values are set so they also match the layout
 554            of the list of copies in the copies component. -->
 555       <div class="div d-flex fw-bold">
 556         <div class="flex-1 p-1" i18n>Owning Branch</div>
 557         <div class="flex-1 p-1" i18n>Shelving Location</div>
 558         <div class="flex-1 p-1" i18n>Collection Code</div>
 559         <div class="flex-1 p-1" i18n>Fund</div>
 560         <div class="flex-1 p-1" i18n>Circ Modifier</div>
 561         <div class="flex-1 p-1" i18n>Callnumber</div>
 562         <div class="flex-1 p-1" i18n>Barcode</div>
 563         <div class="flex-1 p-1" i18n>Receiver</div>
 564       </div>
 565       <div class="batch-copy-row" *ngFor="let copy of li.lineitem_details()">
 566         <eg-lineitem-copy-attrs [embedded]="true" [showReceiver]="true" [copy]="copy">
 567         </eg-lineitem-copy-attrs>
 568       </div>
 569     </div>
 570   </div>
 571 </ng-container>
 572