Open-ILS/src/eg2/src/app/staff/acq/asn/receive.component.html

   1 <eg-staff-banner bannerText="Receive Shipment" i18n-bannerText>
   2 </eg-staff-banner>
   3
   4 <div class="row">
   5   <div class="col-lg-6">
   6     <div class="input-group">
   7       <span class="input-group-text" i18n>Container Barcode:</span>
   8
   9       <input type='text' id='barcode-search-input' class="form-control"
  10         (keyup.enter)="findContainer()" placeholder="Barcode..."
  11         i18n-placeholder [(ngModel)]="barcode"/>
  12       <div class="input-group-text">
  13         <button class="btn p-0"
  14           (click)="findContainer()" i18n>Submit</button>
  15       </div>
  16       <div class="form-check form-check-inline ms-2">
  17         <input class="form-check-input" type="checkbox"
  18           id="receive-on-scan" [(ngModel)]="receiveOnScan"/>
  19         <label class="form-label form-check-label" for="receive-on-scan">Receive on Scan</label>
  20       </div>
  21     </div>
  22   </div>
  23 </div>
  24
  25 <!--
  26 <hr class="mt-2 mb-2"/>
  27 -->
  28
  29 <!-- TODO Unlikely, but technically possible for multiple containers
  30 across different vendors to match a container code.
  31 <div *ngFor="let container of containers">
  32 ...
  33 </div>
  34 -->
  35
  36 <div *ngIf="notFound" class="row m-2 mt-5">
  37   <div class="col-lg-6 offset-lg-3">
  38     <div class="alert alert-warning" i18n>
  39       No container found with barcode {{barcode}}.
  40     </div>
  41   </div>
  42 </div>
  43
  44 <div *ngIf="container" class="mt-3 mb-3 p-1 shadow-sm common-form striped-odd">
  45   <div class="row">
  46     <div class="col-lg-2">
  47       <label class="form-label" for="container-code" i18n>Container Code: </label>
  48     </div>
  49     <div class="col-lg-2">
  50       <div id="container-code">{{container.container_code()}}</div>
  51     </div>
  52     <div class="col-lg-2">
  53       <label class="form-label" for="container-provider" i18n>Provider: </label>
  54     </div>
  55     <div class="col-lg-2">
  56       <div>
  57         <a target="_blank"
  58           id="container-provider"
  59           routerLink="/staff/acq/provider/{{container.provider().id()}}/details">
  60           {{container.provider().name()}} ({{container.provider().code()}})
  61         </a>
  62       </div>
  63     </div>
  64     <div class="col-lg-2">
  65       <label class="form-label" for="entry-count" i18n>Affected Lineitems: </label>
  66     </div>
  67     <div class="col-lg-2">
  68       <div id="entry-count">{{entries.length}}</div>
  69     </div>
  70   </div>
  71   <div class="row">
  72     <div class="col-lg-2">
  73       <label class="form-label" for="container-lading-number" i18n>Lading #: </label>
  74     </div>
  75     <div class="col-lg-2">
  76       <div id="container-lading-number">{{container.lading_number()}}</div>
  77     </div>
  78     <div class="col-lg-2">
  79       <label class="form-label" for="container-recv-date" i18n>Receive Date: </label>
  80     </div>
  81     <div class="col-lg-2">
  82       <div id="container-recv-date">{{container.recv_date() | date:'short'}}</div>
  83     </div>
  84     <div class="col-lg-2">
  85       <label class="form-label" for="entry-count" i18n>Affected Items: </label>
  86     </div>
  87     <div class="col-lg-2">
  88       <div id="entry-count">{{affectedItemsCount()}}</div>
  89     </div>
  90   </div>
  91   <div class="row">
  92     <div class="col-lg-2">
  93       <label class="form-label" for="container-note" i18n>Notes: </label>
  94     </div>
  95     <div class="col-lg-4">
  96       <div class="ms-1">{{container.note()}}</div>
  97     </div>
  98   </div>
  99 </div>
 100
 101 <!--
 102 <hr class="mt-2 mb-2"/>
 103 -->
 104
 105 <ng-template #titleTmpl let-row="row">
 106   <a target="_blank"
 107     fragment="{{row.lineitem.id()}}"
 108     routerLink="/staff/acq/po/{{row.lineitem.purchase_order().id()}}">
 109     {{row.title}}
 110   </a>
 111 </ng-template>
 112 <ng-template #liIdTmpl let-row="row">
 113   <a target="_blank"
 114     fragment="{{row.lineitem.id()}}"
 115     routerLink="/staff/acq/po/{{row.lineitem.purchase_order().id()}}/lineitem/{{row.lineitem.id()}}/items">
 116     {{row.lineitem.id()}}
 117   </a>
 118 </ng-template>
 119 <ng-template #poNameTmpl let-row="row">
 120   <a target="_blank"
 121     routerLink="/staff/acq/po/{{row.lineitem.purchase_order().id()}}">
 122     {{row.lineitem.purchase_order().name()}}
 123   </a>
 124 </ng-template>
 125
 126 <div class="row" *ngIf="receiving">
 127   <div class="col-lg-10 offset-lg-1">
 128     <div class="card">
 129       <div class="card-header" i18n>Receiving Items <span *ngIf="dryRun"> (Dry Run)</span></div>
 130       <div class="card-body">
 131         <ul class="list-group list-group-flush">
 132           <li class="list-group-item">
 133             <eg-progress-inline min="0" max="0" #progress></eg-progress-inline>
 134           </li>
 135
 136           <li class="list-group-item d-flex fw-bold">
 137             <div class="flex-3" i18n>Title</div>
 138             <div class="flex-1" i18n>Lineitem</div>
 139             <div class="flex-1" i18n>Notified</div>
 140             <div class="flex-1" i18n>Received</div>
 141           </li>
 142
 143           <li class="list-group-item d-flex" *ngFor="let li of receiveResponse.lineitems">
 144             <div class="flex-3">
 145               <a routerLink="/staff/catalog/record/{{liCache[li.id].lineitem.eg_bib_id()}}"
 146                 target="_blank">{{liCache[li.id].title}}</a>
 147             </div>
 148             <div class="flex-1">
 149               <a routerLink="/staff/acq/po/{{li.po}}/lineitem/{{li.id}}/items"
 150                 target="_blank">#{{li.id}}</a>
 151             </div>
 152             <div class="flex-1">{{liWantedCount(li.id)}}</div>
 153             <div class="flex-1"
 154               [ngClass]="{
 155                 'text-success': liWantedCount(li.id) === li.lids.length,
 156                 'text-danger': liWantedCount(li.id) > li.lids.length
 157               }">
 158               {{li.lids.length}}</div>
 159           </li>
 160         </ul>
 161       </div>
 162       <div class="card-footer d-flex">
 163         <div class="flex-1"></div>
 164         <button (click)="clearReceiving()" class="btn btn-outline-dark" i18n>
 165           Close
 166         </button>
 167       </div>
 168     </div>
 169   </div>
 170 </div>
 171
 172 <div *ngIf="loadingContainer" class="row">
 173   <div class="col-lg-6 offset-lg-3">
 174     <eg-progress-inline></eg-progress-inline>
 175   </div>
 176 </div>
 177
 178 <eg-grid *ngIf="container && !receiving" #grid [dataSource]="gridDataSource"
 179   [disablePaging]="true" (onRowActivate)="openLi($event)">
 180
 181   <eg-grid-toolbar-button i18n-label label="Receive All Items"
 182     [disabled]="loadingContainer" (onClick)="receiveAllItems()">
 183   </eg-grid-toolbar-button>
 184
 185   <eg-grid-toolbar-checkbox i18n-label label="Dry Run"
 186     [initialValue]="dryRun"
 187     (onChange)="dryRun = !dryRun"></eg-grid-toolbar-checkbox>
 188
 189   <eg-grid-column i18n-label label="Entry ID" path="entry.id"
 190     [index]="true" [hidden]="true"></eg-grid-column>
 191   <eg-grid-column i18n-label label="Lineitem ID" name="lineitem_id"
 192     [cellTemplate]="liIdTmpl"></eg-grid-column>
 193   <eg-grid-column i18n-label label="Purchase Order" name="po_name"
 194     [cellTemplate]="poNameTmpl"></eg-grid-column>
 195   <eg-grid-column i18n-label label="Title" name="title" flex="4"
 196     [cellTemplate]="titleTmpl"></eg-grid-column>
 197   <eg-grid-column i18n-label label="ISBN" path="isbn"></eg-grid-column>
 198   <eg-grid-column i18n-label label="ISSN" path="issn" [hidden]="true"></eg-grid-column>
 199   <eg-grid-column i18n-label label="UPC" path="upc" [hidden]="true"></eg-grid-column>
 200   <eg-grid-column i18n-label label="In Shipment" path="entry.item_count"></eg-grid-column>
 201   <eg-grid-column i18n-label label="Ordered" path="lineitem.order_summary.item_count"></eg-grid-column>
 202   <eg-grid-column i18n-label label="Pending Receive" path="recievable_count"></eg-grid-column>
 203   <eg-grid-column i18n-label label="Received" path="lineitem.order_summary.recv_count"></eg-grid-column>
 204   <eg-grid-column i18n-label label="Invoiced" path="lineitem.order_summary.invoice_count"></eg-grid-column>
 205   <eg-grid-column i18n-label label="Canceled" path="lineitem.order_summary.cancel_count"></eg-grid-column>
 206   <eg-grid-column i18n-label label="Delayed" path="lineitem.order_summary.delay_count"></eg-grid-column>
 207 </eg-grid>
 208
 209