LPXXX Batch attr gets expandies

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

diff --git a/Open-ILS/src/eg2/src/app/staff/share/holdings/batch-item-attr.component.html b/Open-ILS/src/eg2/src/app/staff/share/holdings/batch-item-attr.component.html
index f364cd5..e27cc80 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/holdings/batch-item-attr.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/holdings/batch-item-attr.component.html
@@ -1,34 +1,48 @@
 
 <div class="border rounded m-1">
-  <div class="font-weight-bold header p-2" i18n>
+  <div class="font-weight-bold header p-2 d-flex" i18n>
     {{label}} <span *ngIf="hasChanged" class="text-danger">*</span>
+    <ng-container *ngIf="bulky()">
+      <div class="flex-1"></div>
+      <a href='javascript:;' (click)="expanded = true" *ngIf="!expanded">
+        <span class="material-icons">unfold_more</span>
+      </a>
+      <a href='javascript:;' (click)="expanded = false" *ngIf="expanded">
+        <span class="material-icons">unfold_less</span>
+      </a>
+    </ng-container>
   </div>
   <div *ngIf="!editing" tabindex="0" class="p-2"
     [ngClass]="{'has-changes': hasChanged}" (keyup.enter)="toggleEditMode()" 
       (click)="toggleEditMode()">
     <div class="d-flex" 
-      *ngFor="let count of labelCounts | keyvalue">
-      <div class="flex-1">
-        <ng-container *ngIf="displayAs == 'bool'">
-          <span *ngIf="count.key == 't'" i18n>Yes</span>
-          <span *ngIf="count.key == 'f'" i18n>No</span>
-        </ng-container>
-        <ng-container *ngIf="displayAs == 'currency'">
-          <ng-container 
-            *ngIf="emptyIsUnset && !count.key && count.key !== 0; else defaultCurrency">
-            <span i18n>&lt;Unset&gt;</span>
+      *ngFor="let count of labelCounts | keyvalue; let idx = index">
+      <ng-container *ngIf="!expanded && idx === defaultDisplayCount">
+        <span i18n>...</span>
+      </ng-container>
+      <ng-container *ngIf="expanded || idx < defaultDisplayCount">
+        <div class="flex-1">
+          <ng-container *ngIf="displayAs == 'bool'">
+            <span *ngIf="count.key == 't'" i18n>Yes</span>
+            <span *ngIf="count.key == 'f'" i18n>No</span>
           </ng-container>
-          <ng-template #defaultCurrency>{{count.key | currency}}</ng-template>
-        </ng-container>
-        <ng-container *ngIf="displayAs == null">
-          <ng-container 
-            *ngIf="emptyIsUnset && !count.key && count.key !== 0; else default">
-            <span i18n>&lt;Unset&gt;</span>
+          <ng-container *ngIf="displayAs == 'currency'">
+            <ng-container 
+              *ngIf="emptyIsUnset && !count.key && count.key !== 0; else defaultCurrency">
+              <span i18n>&lt;Unset&gt;</span>
+            </ng-container>
+            <ng-template #defaultCurrency>{{count.key | currency}}</ng-template>
           </ng-container>
-          <ng-template #default>{{count.key}}</ng-template>
-        </ng-container>
-      </div>
-      <div i18n>{{count.value}} copies</div>
+          <ng-container *ngIf="displayAs == null">
+            <ng-container 
+              *ngIf="emptyIsUnset && !count.key && count.key !== 0; else default">
+              <span i18n>&lt;Unset&gt;</span>
+            </ng-container>
+            <ng-template #default>{{count.key}}</ng-template>
+          </ng-container>
+        </div>
+        <div i18n>{{count.value}} copies</div>
+      </ng-container>
     </div>
   </div>
   <ng-container *ngIf="editing">

diff --git a/Open-ILS/src/eg2/src/app/staff/share/holdings/batch-item-attr.component.ts b/Open-ILS/src/eg2/src/app/staff/share/holdings/batch-item-attr.component.ts
index a725454..55519df 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/holdings/batch-item-attr.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/holdings/batch-item-attr.component.ts
@@ -46,6 +46,10 @@ export class BatchItemAttrComponent {
     // If true, null/undefined/empty-string display as <Unset>
     @Input() emptyIsUnset: boolean;
 
+    // Lists larger than this will be partially hidden behind
+    // and expandy.
+    @Input() defaultDisplayCount = 7;
+
     @Output() changesSaved: EventEmitter<void> = new EventEmitter<void>();
     @Output() changesCanceled: EventEmitter<void> = new EventEmitter<void>();
     @Output() valueCleared: EventEmitter<void> = new EventEmitter<void>();
@@ -55,6 +59,9 @@ export class BatchItemAttrComponent {
 
     hasChanged = false;
 
+    // Showing all entries?
+    expanded = false;
+
     constructor() {}
 
     save() {
@@ -74,6 +81,9 @@ export class BatchItemAttrComponent {
         this.valueCleared.emit();
     }
 
+    bulky(): boolean {
+        return Object.keys(this.labelCounts).length > this.defaultDisplayCount;
+    }
 
     toggleEditMode() {
         if (this.readOnly) { return; }