LPXXX Angular Volcopy
authorBill Erickson <berickxx@gmail.com>
Wed, 17 Jun 2020 20:36:02 +0000 (16:36 -0400)
committerBill Erickson <berickxx@gmail.com>
Wed, 17 Jun 2020 20:36:02 +0000 (16:36 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
Open-ILS/src/eg2/src/app/share/item-location-select/item-location-select.component.html
Open-ILS/src/eg2/src/app/share/item-location-select/item-location-select.component.ts
Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
Open-ILS/src/eg2/src/app/staff/cat/volcopy/copy-attrs.component.html
Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.css
Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.html

index c456f80..88e636f 100644 (file)
@@ -7,6 +7,7 @@
 <div class="d-flex">
   <input type="text" 
     class="form-control"
+    [id]="domId"
     [ngClass]="{
       'text-success font-italic font-weight-bold': selected && selected.freetext,
       'form-control-sm': smallFormControl
index b1ba655..bfbeb4d 100644 (file)
@@ -42,6 +42,9 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit {
 
     @ViewChild('instance', { static: true }) instance: NgbTypeahead;
 
+    static domIdAuto = 0;
+    @Input() domId = 'eg-combobox-' + ComboboxComponent.domIdAuto++;
+
     // Applies a name attribute to the input.
     // Useful in forms.
     @Input() name: string;
index 99bd390..5f7e388 100644 (file)
@@ -7,6 +7,7 @@
 <eg-string #unsetString text="<Unset>" i18n-text></eg-string>
 
 <eg-combobox #comboBox
+  [domId]="domId"
   [startId]="startId"
   [displayTemplate]="displayTemplate"
   (onChange)="cboxChanged($event)"
index 2f41a10..2ea5ef8 100644 (file)
@@ -45,6 +45,10 @@ export class ItemLocationSelectComponent
 
     @Input() required: boolean;
 
+    static domIdAuto = 0;
+    @Input() domId = 'eg-item-location-select-' +
+        ItemLocationSelectComponent.domIdAuto++;
+
     @ViewChild('comboBox', {static: false}) comboBox: ComboboxComponent;
     @ViewChild('unsetString', {static: false}) unsetString: StringComponent;
 
index 16f1cbd..4336e56 100644 (file)
@@ -40,7 +40,8 @@ export class OrgSelectComponent implements OnInit {
     @Input() stickySetting: string;
 
     // ID to display in the DOM for this selector
-    @Input() domId = '';
+    static domIdAuto = 0;
+    @Input() domId = 'eg-org-select-' + OrgSelectComponent.domIdAuto++;
 
     // Org unit field displayed in the selector
     @Input() displayField = 'shortname';
index 9b0bc01..eae85ec 100644 (file)
     <div>
       <ng-template #locationTemplate>
         <eg-item-location-select (valueChange)="values['location'] = $event"
-          [required]="true" permFilter="UPDATE_COPY">
+          domId='location-input' [required]="true" permFilter="UPDATE_COPY">
         </eg-item-location-select>
       </ng-template>
-
       <eg-batch-item-attr label="Location / Collection" i18n-label
+        editInputDomId="location-input"
         [editTemplate]="locationTemplate"
         [labelCounts]="itemAttrCounts('location')"
         (changesSaved)="applyCopyValue('location')">
     <div>
       <ng-template #circLibTemplate>
         <eg-org-select 
+          domId="circ-lib-input"
           (onChange)="values['circ_lib'] = $event ? $event.id() : null"
           [limitPerms]="['UPDATE_COPY']">
         </eg-org-select>
       </ng-template>
-
       <eg-batch-item-attr label="Circulating Library" i18n-label
+        editInputDomId="circ-lib-input"
         [editTemplate]="circLibTemplate"
         [labelCounts]="itemAttrCounts('circ_lib')"
         (changesSaved)="circLibChanged()">
     <div>
       <ng-template #owningLibTemplate>
         <eg-org-select 
+          domId="owning-lib-input"
           (onChange)="values['owning_lib'] = $event ? $event.id() : null"
           [limitPerms]="['UPDATE_COPY']">
         </eg-org-select>
       </ng-template>
-
       <eg-batch-item-attr label="Owning Library" i18n-label
+        editInputDomId="owning-lib-input"
         [editTemplate]="owningLibTemplate"
         [labelCounts]="itemAttrCounts('owning_lib')"
         (changesSaved)="owningLibChanged()">
     <div>
       <ng-template #copyNumberTemplate>
         <input type="number" class="form-control"
-          [(ngModel)]="values['copy_number']"/>
+          id="copy-number-input" [(ngModel)]="values['copy_number']"/>
       </ng-template>
-
       <eg-batch-item-attr label="Copy Number" i18n-label
+        editInputDomId="copy-number-input"
         [emptyIsUnset]="true"
         [editTemplate]="copyNumberTemplate"
         [labelCounts]="itemAttrCounts('copy_number')"
     <div class="p-1"><h4 class="font-weight-bold" i18n>Circulation</h4></div>
 
     <div>
-                       <ng-template #circulateTemplate>
-                               <select class="form-control" [(ngModel)]="values['circulate']">
-                                       <option value="yes" i18n>Yes</option>
-                                       <option value="no" i18n>No</option>
-                               </select>
-                       </ng-template>
+      <ng-template #circulateTemplate>
+        <select class="form-control" 
+          id="circulate-input" [(ngModel)]="values['circulate']">
+          <option value="t" i18n>Yes</option>
+          <option value="f" i18n>No</option>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Circulate" i18n-label
         displayAs="bool"
+        editInputDomId="circulate-input"
         [editTemplate]="circulateTemplate"
         [labelCounts]="itemAttrCounts('circulate')"
-        (changesSaved)="applyCopyValue('circulate',
-          values['circulate'] === 'yes' ? 't': 'f')">
+        (changesSaved)="applyCopyValue('circulate')">
       </eg-batch-item-attr>
     </div>
 
     <div>
-                       <ng-template #holdableTemplate>
-                               <select class="form-control" [(ngModel)]="values['holdable']">
-                                       <option value="yes" i18n>Yes</option>
-                                       <option value="no" i18n>No</option>
-                               </select>
-                       </ng-template>
+      <ng-template #holdableTemplate>
+        <select class="form-control" 
+          id="holdable-input" [(ngModel)]="values['holdable']">
+          <option value="yes" i18n>Yes</option>
+          <option value="no" i18n>No</option>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Holdable" i18n-label
         displayAs="bool"
+        editInputDomId="holdable-input"
         [editTemplate]="holdableTemplate"
         [labelCounts]="itemAttrCounts('holdable')"
         (changesSaved)="applyCopyValue('holdable',
     </div>
 
     <div>
-                       <ng-template #ageProtectTemplate>
-                               <select class="form-control" [(ngModel)]="values['age_protect']">
+      <ng-template #ageProtectTemplate>
+        <select class="form-control" 
+          id="age-protect-input" [(ngModel)]="values['age_protect']">
           <option [value]="null" i18n>&lt;Unset&gt;</option>
-                                       <option *ngFor="let rule of ageProtectRules" 
+          <option *ngFor="let rule of ageProtectRules" 
             value="{{rule.id()}}">{{rule.name()}}</option>
-                               </select>
-                       </ng-template>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Aged-Based Hold Protection" i18n-label
+        editInputDomId="age-protect-input"
         [emptyIsUnset]="true"
         [editTemplate]="ageProtectTemplate"
         [labelCounts]="itemAttrCounts('age_protect')"
     </div>
 
     <div>
-                       <ng-template #floatingTemplate>
-                               <select class="form-control" [(ngModel)]="values['floating']">
+      <ng-template #floatingTemplate>
+        <select class="form-control" 
+          id="floating-input" [(ngModel)]="values['floating']">
           <option [value]="null" i18n>&lt;Unset&gt;</option>
-                                       <option *ngFor="let grp of floatingGroups" 
+          <option *ngFor="let grp of floatingGroups" 
             value="{{grp.id()}}">{{grp.name()}}</option>
-                               </select>
-                       </ng-template>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Floating" i18n-label
+        editInputDomId="floating-input"
         [emptyIsUnset]="true"
         [editTemplate]="floatingTemplate"
         [labelCounts]="itemAttrCounts('floating')"
       <eg-string #loanDurationNormal i18n-text text="Normal"></eg-string>
       <eg-string #loanDurationLong i18n-text text="Long"></eg-string>
 
-                       <ng-template #loanDurationTemplate>
-                               <select class="form-control" [(ngModel)]="values['loan_duration']">
+      <ng-template #loanDurationTemplate>
+        <select class="form-control" 
+          id="loan-duration-input" [(ngModel)]="values['loan_duration']">
           <option value="1" i18n>{{loanDurationShort.text}}</option>
           <option value="2" i18n>{{loanDurationNormal.text}}</option>
           <option value="3" i18n>{{loanDurationLong.text}}</option>
-                               </select>
-                       </ng-template>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Loan Duration" i18n-label
+        editInputDomId="loan-duration-input"
         [emptyIsUnset]="true"
         [editTemplate]="loanDurationTemplate"
         [labelCounts]="itemAttrCounts('loan_duration')"
       <eg-string #fineLevelNormal i18n-text text="Normal"></eg-string>
       <eg-string #fineLevelHigh i18n-text text="High"></eg-string>
 
-                       <ng-template #fineLevelTemplate>
-                               <select class="form-control" [(ngModel)]="values['fine_level']">
+      <ng-template #fineLevelTemplate>
+        <select class="form-control" 
+          id="fine-level-input" [(ngModel)]="values['fine_level']">
           <option value="1" i18n>{{fineLevelLow.text}}</option>
           <option value="2" i18n>{{fineLevelNormal.text}}</option>
           <option value="3" i18n>{{fineLevelHigh.text}}</option>
-                               </select>
-                       </ng-template>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Fine Level" i18n-label
+        editInputDomId="fine-level-input"
         [emptyIsUnset]="true"
         [editTemplate]="fineLevelTemplate"
         [labelCounts]="itemAttrCounts('fine_level')"
     </div>
 
     <div>
-                       <ng-template #ageProtectTemplate>
-                               <select class="form-control" [(ngModel)]="values['age_protect']">
+      <ng-template #ageProtectTemplate>
+        <select class="form-control" [(ngModel)]="values['age_protect']">
           <option [value]="null" i18n>&lt;Unset&gt;</option>
-                                       <option *ngFor="let rule of ageProtectRules" 
+          <option *ngFor="let rule of ageProtectRules" 
             value="{{rule.id()}}">{{rule.name()}}</option>
-                               </select>
-                       </ng-template>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Aged-Based Hold Protection" i18n-label
         [emptyIsUnset]="true"
         [editTemplate]="ageProtectTemplate"
     </div>
 
     <div>
-                       <ng-template #circAsTypeTemplate>
-                               <select class="form-control" [(ngModel)]="values['circ_as_type']">
+      <ng-template #circAsTypeTemplate>
+        <select class="form-control" [(ngModel)]="values['circ_as_type']">
           <option [value]="null" i18n>&lt;Unset&gt;</option>
-                                       <option *ngFor="let map of itemTypeMaps"
+          <option *ngFor="let map of itemTypeMaps"
             value="{{map.code()}}">{{map.value()}}</option>
-                               </select>
-                       </ng-template>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Circulate as Type" i18n-label
         [emptyIsUnset]="true"
         [editTemplate]="circAsTypeTemplate"
     </div>
 
     <div>
-                       <ng-template #circModifierTemplate>
-                               <select class="form-control" [(ngModel)]="values['circ_modifier']">
+      <ng-template #circModifierTemplate>
+        <select class="form-control" [(ngModel)]="values['circ_modifier']">
           <option [value]="null" i18n>&lt;Unset&gt;</option>
-                                       <option *ngFor="let mod of circModifiers"
+          <option *ngFor="let mod of circModifiers"
             value="{{mod.code()}}">{{mod.name()}}</option>
-                               </select>
-                       </ng-template>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Circulion Modifier" i18n-label
         [emptyIsUnset]="true"
         [editTemplate]="circModifierTemplate"
     <div class="p-1"><h4 class="font-weight-bold" i18n>Miscellaneous</h4></div>
 
     <div>
-                       <ng-template #alertMessageTemplate>
-                               <textarea rows="3" class="form-control" 
+      <ng-template #alertMessageTemplate>
+        <textarea rows="3" class="form-control" id="alert-message-input"
           [(ngModel)]="values['alert_message']">
         </textarea>
-                       </ng-template>
+      </ng-template>
       <eg-batch-item-attr label="Alert Message" i18n-label
+        editInputDomId="alert-message-input"
         [emptyIsUnset]="true"
         [editTemplate]="alertMessageTemplate"
         [labelCounts]="itemAttrCounts('alert_message')"
     </div>
 
     <div>
-                       <ng-template #depositTemplate>
-                               <select class="form-control" [(ngModel)]="values['deposit']">
-                                       <option value="yes" i18n>Yes</option>
-                                       <option value="no" i18n>No</option>
-                               </select>
-                       </ng-template>
+      <ng-template #depositTemplate>
+        <select class="form-control" 
+          id="deposit-input" [(ngModel)]="values['deposit']">
+          <option value="t" i18n>Yes</option>
+          <option value="f" i18n>No</option>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Deposit" i18n-label
         displayAs="bool"
+        editInputDomId="deposit-input"
         [editTemplate]="depositTemplate"
         [labelCounts]="itemAttrCounts('deposit')"
-        (changesSaved)="applyCopyValue('deposit',
-          values['deposit'] === 'yes' ? 't': 'f')">
+        (changesSaved)="applyCopyValue('deposit')">
       </eg-batch-item-attr>
     </div>
 
     <div>
-                       <ng-template #depositAmountTemplate>
-                               <input type="number" class="form-control" 
-          [(ngModel)]="values['deposit_amount']"/>
-                       </ng-template>
+      <ng-template #depositAmountTemplate>
+        <input type="number" class="form-control" 
+          id="deposit-amount-input" [(ngModel)]="values['deposit_amount']"/>
+      </ng-template>
       <eg-batch-item-attr label="Deposit Amount" i18n-label
         displayAs="currency"
+        editInputDomId="deposit-amount-input"
         [editTemplate]="depositAmountTemplate"
         [labelCounts]="itemAttrCounts('deposit_amount')"
         (changesSaved)="applyCopyValue('deposit_amount')">
     </div>
 
     <div>
-                       <ng-template #priceTemplate>
-                               <input type="number" class="form-control" 
-          [(ngModel)]="values['price']"/>
-                       </ng-template>
+      <ng-template #priceTemplate>
+        <input type="number" class="form-control" 
+          id="price-input" [(ngModel)]="values['price']"/>
+      </ng-template>
       <eg-batch-item-attr label="Price" i18n-label
         displayAs="currency"
+        editInputDomId="price-input"
         [editTemplate]="priceTemplate"
         [labelCounts]="itemAttrCounts('price')"
         (changesSaved)="applyCopyValue('price')">
     </div>
 
     <div>
-                       <ng-template #opacVisibleTemplate>
-                               <select class="form-control" [(ngModel)]="values['opac_visible']">
-                                       <option value="yes" i18n>Yes</option>
-                                       <option value="no" i18n>No</option>
-                               </select>
-                       </ng-template>
+      <ng-template #opacVisibleTemplate>
+        <select class="form-control"
+          id="opac-visible-input" [(ngModel)]="values['opac_visible']">
+          <option value="t" i18n>Yes</option>
+          <option value="f" i18n>No</option>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="OPAC Visible" i18n-label
         displayAs="bool"
+        editInputDomId="opac-visible-input"
         [editTemplate]="opacVisibleTemplate"
         [labelCounts]="itemAttrCounts('opac_visible')"
-        (changesSaved)="applyCopyValue('opac_visible',
-          values['opac_visible'] === 'yes' ? 't': 'f')">
+        (changesSaved)="applyCopyValue('opac_visible')">
       </eg-batch-item-attr>
     </div>
 
     <div>
-                       <ng-template #refTemplate>
-                               <select class="form-control" [(ngModel)]="values['ref']">
-                                       <option value="yes" i18n>Yes</option>
-                                       <option value="no" i18n>No</option>
-                               </select>
-                       </ng-template>
+      <ng-template #refTemplate>
+        <select class="form-control" 
+          id="ref-input" [(ngModel)]="values['ref']">
+          <option value="t" i18n>Yes</option>
+          <option value="f" i18n>No</option>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Reference" i18n-label
         displayAs="bool"
+        editInputDomId="ref-input"
         [editTemplate]="refTemplate"
         [labelCounts]="itemAttrCounts('ref')"
-        (changesSaved)="applyCopyValue(
-          'ref', values['ref'] === 'yes' ? 't': 'f')">
+        (changesSaved)="applyCopyValue('ref')">
       </eg-batch-item-attr>
     </div>
 
     <div>
-                       <ng-template #costTemplate>
-                               <input type="number" class="form-control" 
-          [(ngModel)]="values['cost']"/>
-                       </ng-template>
+      <ng-template #costTemplate>
+        <input type="number" class="form-control" 
+          id="cost-input" [(ngModel)]="values['cost']"/>
+      </ng-template>
       <eg-batch-item-attr label="Acquisition Cost" i18n-label
-        [emptyIsUnset]="true"
         displayAs="currency"
+        editInputDomId="cost-input"
+        [emptyIsUnset]="true"
         [editTemplate]="costTemplate"
         [labelCounts]="itemAttrCounts('cost')"
         (changesSaved)="applyCopyValue('cost')">
       <eg-string #mintConditionYes i18n-text text="Good"></eg-string>
       <eg-string #mintConditionNo i18n-text text="Damaged"></eg-string>
 
-                       <ng-template #mintConditionTemplate>
-                               <select class="form-control" [(ngModel)]="values['mint_condition']">
+      <ng-template #mintConditionTemplate>
+        <select class="form-control" 
+          id="mint-condition-input" [(ngModel)]="values['mint_condition']">
           <option value="t" i18n>{{mintConditionYes.text}}</option>
           <option value="f" i18n>{{mintConditionNo.text}}</option>
-                               </select>
-                       </ng-template>
+        </select>
+      </ng-template>
       <eg-batch-item-attr label="Quality" i18n-label
+        editInputDomId="mint-condition-input"
         [emptyIsUnset]="true"
         [editTemplate]="mintConditionTemplate"
         [labelCounts]="itemAttrCounts('mint_condition')"
index fabadae..96a852a 100644 (file)
@@ -5,9 +5,14 @@ input[type="number"] {
 }
 
 .vol-row {
+  /*background-color: #d9edf7;*/
   background-color: rgba(0,0,0,.03);
-  border-top: 1px solid rgba(0,0,0,.125);
-  border-bottom: 1px solid rgba(0,0,0,.125);
+  border-top: 1px solid #d9edf7;
+  border-bottom: 1px solid #d9edf7;
+}
+
+.batch-vol-row {
+  border: 2px solid #d9edf7;
 }
 
 
index a29c3a7..eadae65 100644 (file)
@@ -12,7 +12,7 @@
   dialogBody="Delete {{deleteCopyCount}} Item(s)?">
 </eg-confirm-dialog>
 
-<div class="row d-flex vol-row border border-info mb-2">
+<div class="row d-flex vol-row batch-vol-row mb-2">
   <div class="p-1" [ngStyle]="{flex: flexAt(1)}"> </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(2)}"> </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(3)}">