LPXXX volcopy temp column expands; more hide options

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/config.component.html b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/config.component.html
index 031561a..697462e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/config.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/config.component.html
@@ -42,6 +42,30 @@
                 </label>
               </div>
             </li>
+            <li class="list-group-item">
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="checkbox" 
+                  id="hide-generate_barcodes-column" 
+                  [(ngModel)]="volcopy.defaults.hidden.generate_barcodes">
+                <label class="form-check-label" for="hide-generate_barcodes-column" i18n>
+                  Hide Generate Barcodes
+                </label>
+              </div>
+            </li>
+            <li class="list-group-item">
+              <!--
+                Copy_number_vc distinguishes from copy_number so the field
+                can appear in the volcopy UI and/or attr editor independently.
+              -->
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="checkbox" 
+                  id="hide-copy_number_vc-column" 
+                  [(ngModel)]="volcopy.defaults.hidden.copy_number_vc">
+                <label class="form-check-label" for="hide-copy_number_vc-column" i18n>
+                  Hide Item Number
+                </label>
+              </div>
+            </li>
           </ul>
         </div>
       </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.html b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.html
index 6fe9bde..49bac9d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.html
@@ -36,7 +36,11 @@
     </div>
   </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
-    <div><label class="font-weight-bold" i18n>Call Number Label</label></div>
+    <div>
+      <label class="font-weight-bold label-with-material-icon" i18n>
+        Call Number Label
+      </label>
+    </div>
     <div>
       <eg-combobox [smallFormControl]="true" 
         [allowFreeText]="true" [(ngModel)]="batchVolLabel">
@@ -67,27 +71,32 @@
     </div>
   </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(8)}">
-    <div><label class="font-weight-bold" i18n>Generate Barcodes</label></div>
-    <button class="btn btn-sm btn-outline-dark label-with-material-icon"
-      (click)="generateBarcodes()">
-      <span i18n>Generate</span>
-      <span class="material-icons">arrow_downward</span>
-    </button>
+    <ng-container *ngIf="displayColumn('generate_barcodes')">
+      <div><label class="font-weight-bold" i18n>Generate Barcodes</label></div>
+      <button class="btn btn-sm btn-outline-dark label-with-material-icon"
+       (click)="generateBarcodes()">
+       <span i18n>Generate</span>
+       <span class="material-icons">arrow_downward</span>
+      </button>
+    </ng-container>
   </div>
   <div class="p-1" [ngStyle]="{flex: flexSpan(9, 10)}">
-    <div><label class="font-weight-bold" i18n>Checkdigit</label></div>
-    <div class="form-check form-check-inline">
-      <input class="form-check-input" type="checkbox" 
-        (change)="saveUseCheckdigit()"
-        id="use-checkdigit" [(ngModel)]="useCheckdigit"/>
-      <label class="form-check-label" for="use-checkdigit" i18n>
-        Use Checkdigit
-      </label>
-    </div>
+    <ng-container *ngIf="displayColumn('generate_barcodes')">
+      <div><label class="font-weight-bold" i18n>Checkdigit</label></div>
+      <div class="form-check form-check-inline">
+        <input class="form-check-input" type="checkbox" 
+          (change)="saveUseCheckdigit()"
+          id="use-checkdigit" [(ngModel)]="useCheckdigit"/>
+        <label class="form-check-label" for="use-checkdigit" i18n>
+          Use Checkdigit
+        </label>
+      </div>
+    </ng-container>
   </div>
 </div>
 
 
+
 <div class="row d-flex mt-2 mb-2">
   <div class="p-1" [ngStyle]="{flex: flexAt(1)}">
     <label class="font-weight-bold" i18n>Owning Library</label>
@@ -99,21 +108,79 @@
     <label class="font-weight-bold" i18n>Classification</label>
   </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(4)}" *ngIf="displayColumn('prefix')">
-    <label class="font-weight-bold" i18n>Prefix</label>
+    <span class="font-weight-bold" i18n>Prefix
+      <ng-container *ngIf="expand !== 4">
+        <button title="Expand Column" i18n-title 
+          class="material-icon-button" (click)="expand = 4" i18n>
+          &#x2197;
+        </button>
+      </ng-container>
+      <ng-container *ngIf="expand === 4">
+        <button title="Shrink Column" i18n-title 
+          class="material-icon-button" (click)="expand = null" i18n>
+          &#x2199;
+        </button>
+      </ng-container>
+    </span>
   </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(5)}">
-    <label class="font-weight-bold" i18n>Call Number Label</label>
+    <span class="font-weight-bold" i18n>Call Number Label
+      <ng-container *ngIf="expand !== 5">
+        <button title="Expand Column" i18n-title 
+          class="material-icon-button" (click)="expand = 5" i18n>
+          &#x2197;
+        </button>
+      </ng-container>
+      <ng-container *ngIf="expand === 5">
+        <button title="Shrink Column" i18n-title
+          class="material-icon-button" (click)="expand = null" i18n>
+          &#x2199;
+        </button>
+      </ng-container>
+    </span>
   </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(6)}" *ngIf="displayColumn('suffix')">
-    <label class="font-weight-bold" i18n>Suffix</label>
+    <span class="font-weight-bold" i18n>Suffix
+      <ng-container *ngIf="expand !== 6">
+        <button title="Expand Column" i18n-title 
+          class="material-icon-button" (click)="expand = 6" i18n>
+          &#x2197;
+        </button>
+      </ng-container>
+      <ng-container *ngIf="expand === 6">
+        <button title="Shrink Column" i18n-title
+          class="material-icon-button" (click)="expand = null" i18n>
+          &#x2199;
+        </button>
+      </ng-container>
+    </span>
   </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(7)}">
     <label class="font-weight-bold" i18n>Items</label>
   </div>
-  <div class="p-1" [ngStyle]="{flex: flexAt(8)}">
-    <label class="font-weight-bold" i18n>Barcode</label>
+  <!-- 
+    When hiding the copy_number column, absorb its colum width to 
+    take advantage of the space and to ensure the main columns still 
+    line up with the batch updater row sitting above
+  -->
+  <div class="p-1" 
+    [ngStyle]="{flex: displayColumn('copy_number_vc') ? flexAt(8) : flexSpan(8, 9)}">
+    <span class="font-weight-bold" i18n>Barcode
+      <ng-container *ngIf="expand !== 8">
+        <button title="Expand Column" i18n-title 
+          class="material-icon-button" (click)="expand = 8" i18n>
+          &#x2197;
+        </button>
+      </ng-container>
+      <ng-container *ngIf="expand === 8">
+        <button title="Shrink Column" i18n-title
+          class="material-icon-button" (click)="expand = null" i18n>
+          &#x2199;
+        </button>
+      </ng-container>
+    </span>
   </div>
-  <div class="p-1" [ngStyle]="{flex: flexAt(9)}">
+  <div class="p-1" [ngStyle]="{flex: flexAt(9)}" *ngIf="displayColumn('copy_number_vc')">
     <label class="font-weight-bold" i18n>Item #</label>
   </div>
   <div class="p-1" [ngStyle]="{flex: flexAt(10)}">
@@ -121,7 +188,6 @@
   </div>
 </div>
 
-
 <ng-container *ngFor="let orgNode of context.orgNodes(); let orgIdx = index">
   <ng-container *ngFor="let volNode of orgNode.children; let volIdx = index">
     <ng-container *ngFor="let copyNode of volNode.children; let copyIdx = index">
@@ -210,8 +276,8 @@
               (ngModelChange)="copyCountChanged(volNode, $event)"/>
           </ng-container>
         </div>
-        <div class="p-1" [ngStyle]="{flex: flexAt(8)}">
-
+        <div class="p-1" 
+          [ngStyle]="{flex: displayColumn('copy_number_vc') ? flexAt(8) : flexSpan(8, 9)}">
           <div class="d-flex">
             <ng-container *ngIf="context.sessionType != 'copy'">
               <button class="clear-button" (click)="deleteCopy(copyNode)"
@@ -241,7 +307,7 @@
             Duplicate Barcode
           </div>
         </div>
-        <div class="p-1" [ngStyle]="{flex: flexAt(9)}">
+        <div class="p-1" [ngStyle]="{flex: flexAt(9)}" *ngIf="displayColumn('copy_number_vc')">
           <input type="number" min="1" class="form-control form-control-sm"
             [ngModel]="copyNode.target.copy_number()"
             (ngModelChange)="applyCopyValue(copyNode.target, 'copy_number', $event)"/>
@@ -289,19 +355,23 @@
   <div class="p-1" [ngStyle]="{flex: flexAt(7)}"></div>
 
   <div class="p-1 pl-3" [ngStyle]="{flex: flexAt(8)}">
-    <button class="btn btn-sm btn-outline-dark mr-2"
-      (click)="generateBarcodes()" i18n>Generate Barcodes</button>
+    <ng-container *ngIf="displayColumn('generate_barcodes')">
+      <button class="btn btn-sm btn-outline-dark mr-2"
+        (click)="generateBarcodes()" i18n>Generate Barcodes</button>
+    </ng-container>
   </div>
 
   <div class="p-1" [ngStyle]="{flex: flexSpan(9, 10)}">
-    <div class="form-check form-check-inline mr-2">
-      <input class="form-check-input" type="checkbox" 
-        (change)="saveUseCheckdigit()"
-        id="use-checkdigit-2" [(ngModel)]="useCheckdigit"/>
-      <label class="form-check-label" for="use-checkdigit-2" i18n>
-        Use Checkdigit
-      </label>
-    </div>
+    <ng-container *ngIf="displayColumn('generate_barcodes')">
+      <div class="form-check form-check-inline mr-2">
+        <input class="form-check-input" type="checkbox" 
+          (change)="saveUseCheckdigit()"
+          id="use-checkdigit-2" [(ngModel)]="useCheckdigit"/>
+        <label class="form-check-label" for="use-checkdigit-2" i18n>
+          Use Checkdigit
+        </label>
+      </div>
+    </ng-container>
   </div>
 </div>
   

diff --git a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.ts
index 9791282..983cdd4 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/volcopy/vol-edit.component.ts
@@ -30,6 +30,10 @@ export class VolEditComponent implements OnInit {
     flexSettings: {[column: number]: number} = {
         1: 1, 2: 1, 3: 2, 4: 1, 5: 2, 6: 1, 7: 1, 8: 2, 9: 1, 10: 1};
 
+    // If a column is specified as the expand field, its flex value
+    // will magically grow.
+    expand: number;
+
     batchVolClass: ComboboxEntry;
     batchVolPrefix: ComboboxEntry;
     batchVolSuffix: ComboboxEntry;
@@ -89,14 +93,17 @@ export class VolEditComponent implements OnInit {
 
     // Column width (flex:x) for column by column number.
     flexAt(column: number): number {
-        return this.flexSettings[column];
+        //return this.flexSettings[column];
+        return this.flexSpan(column, column);
     }
 
     // Returns the flex amount occupied by a span of columns.
     flexSpan(column1: number, column2: number): number {
         let flex = 0;
         for (let i = column1; i <= column2; i++) {
-            flex += this.flexSettings[i];
+            let value = this.flexSettings[i];
+            if (this.expand === i) { value = value * 3; }
+            flex += value;
         }
         return flex;
     }