LP#1942220: (follow-up) move LI identifier widget
authorGalen Charlton <gmc@equinoxOLI.org>
Tue, 11 Jan 2022 21:56:26 +0000 (16:56 -0500)
committerGalen Charlton <gmc@equinoxOLI.org>
Tue, 11 Jan 2022 21:56:26 +0000 (16:56 -0500)
This moves the controls for setting the LI identifier
over to the main block of LI details. This address a
UX issue discovered during testing: testers were ending
up entering the LI price in the LI identifier control.

Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
Open-ILS/src/eg2/src/app/staff/acq/lineitem/lineitem-list.component.html

index 82b58be..d2dc219 100644 (file)
             <span class="pr-1">{{li.source_label()}}</span>
           </div>
         </div>
+        <div class="row">
+          <div class="col-lg-12">
+          <div class="flex-1"> </div>
+            <!-- w-auto allows the input group to stick to the right 
+                 as the status label grows -->
+            <div class="input-group w-auto">
+              <div class="input-group-prepend">
+                <span *ngIf="identOptions(li).length > 1" class="text-danger mr-1"
+                  i18n-title title="Multiple Order Identifier Options" i18n>
+                  ({{identOptions(li).length}})
+                </span>
+                <div ngbDropdown>
+                  <button class="btn btn-outline-dark btn-sm" ngbDropdownToggle 
+                    title="Order Identifier Type" i18n-title [disabled]="!canEditIdent(li)"
+                    [ngClass]="{'btn-warning': !selectedIdent(li)}">
+                    <ng-container *ngIf="orderIdentTypes[li.id()]=='isbn'" i18n>ISBN</ng-container>
+                    <ng-container *ngIf="orderIdentTypes[li.id()]=='issn'" i18n>ISSN</ng-container>
+                    <ng-container *ngIf="orderIdentTypes[li.id()]=='upc'" i18n>UPC</ng-container>
+                  </button>
+                  <div ngbDropdownMenu>
+                    <button class="btn-sm" ngbDropdownItem
+                      (click)="orderIdentTypes[li.id()]='isbn'" i18n>ISBN</button>
+                    <button class="btn-sm" ngbDropdownItem
+                      (click)="orderIdentTypes[li.id()]='issn'" i18n>ISSN</button>
+                    <button class="btn-sm" ngbDropdownItem
+                      (click)="orderIdentTypes[li.id()]='upc'" i18n>UPC</button>
+                  </div>
+                </div>
+              </div>
+              <eg-combobox [entries]="identOptions(li)" [smallFormControl]="true"
+                placeholder="Order Identifer..." i18n-placeholder
+                [disabled]="!canEditIdent(li)"
+                [allowFreeText]="true" [selectedId]="selectedIdent(li)"
+                (onChange)="orderIdentChanged(li, $event)">
+              </eg-combobox>
+            </div>
+          </div>
+        </div>
         <div class="row" *ngIf="li.purchase_order()">
           <div class="col-lg-12">
             <eg-lineitem-order-summary [li]="li"></eg-lineitem-order-summary>
       <div class="d-flex flex-column justify-content-end">
         <div class="row">
           <div class="col-lg-12 d-flex">
-          <div class="flex-1"> </div>
-            <!-- w-auto allows the input group to stick to the right 
-                 as the status label grows -->
-            <div class="input-group w-auto">
-              <div class="input-group-prepend">
-                <span *ngIf="identOptions(li).length > 1" class="text-danger mr-1"
-                  i18n-title title="Multiple Order Identifier Options" i18n>
-                  ({{identOptions(li).length}})
-                </span>
-                <div ngbDropdown>
-                  <button class="btn btn-outline-dark btn-sm" ngbDropdownToggle 
-                    title="Order Identifier Type" i18n-title [disabled]="!canEditIdent(li)"
-                    [ngClass]="{'btn-warning': !selectedIdent(li)}">
-                    <ng-container *ngIf="orderIdentTypes[li.id()]=='isbn'" i18n>ISBN</ng-container>
-                    <ng-container *ngIf="orderIdentTypes[li.id()]=='issn'" i18n>ISSN</ng-container>
-                    <ng-container *ngIf="orderIdentTypes[li.id()]=='upc'" i18n>UPC</ng-container>
-                  </button>
-                  <div ngbDropdownMenu>
-                    <button class="btn-sm" ngbDropdownItem
-                      (click)="orderIdentTypes[li.id()]='isbn'" i18n>ISBN</button>
-                    <button class="btn-sm" ngbDropdownItem
-                      (click)="orderIdentTypes[li.id()]='issn'" i18n>ISSN</button>
-                    <button class="btn-sm" ngbDropdownItem
-                      (click)="orderIdentTypes[li.id()]='upc'" i18n>UPC</button>
-                  </div>
-                </div>
-              </div>
-              <eg-combobox [entries]="identOptions(li)" [smallFormControl]="true"
-                placeholder="Order Identifer..." i18n-placeholder
-                [disabled]="!canEditIdent(li)"
-                [allowFreeText]="true" [selectedId]="selectedIdent(li)"
-                (onChange)="orderIdentChanged(li, $event)">
-              </eg-combobox>
-            </div>
-          </div>
-        </div>
-        <div class="row mt-2">
-          <div class="col-lg-12 d-flex">
             <div class="flex-1"></div>
             <div class="mr-2">
               <ng-container [ngSwitch]="li.state()">