From 42126ce81df432915c7208ea491a2584105e0746 Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxOLI.org>
Date: Tue, 3 Aug 2021 11:03:44 -0400
Subject: [PATCH] staff portal: fix card header and body styling

Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
---
 .../src/eg2/src/app/staff/splash.component.html    | 70 ++++++++++++----------
 Open-ILS/src/eg2/src/app/staff/splash.component.ts | 33 +++++++---
 2 files changed, 63 insertions(+), 40 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/splash.component.html b/Open-ILS/src/eg2/src/app/staff/splash.component.html
index 620876b409..99392aae04 100644
--- a/Open-ILS/src/eg2/src/app/staff/splash.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/splash.component.html
@@ -30,42 +30,46 @@
   </div>
 
   <div class="row" id="splash-nav">
-    <div class="col-lg-4" *ngFor="let col of portalEntries">
+    <div class="col-lg-4" *ngFor="let header of portalHeaders; index as i">
       <div class="card">
-        <ng-container *ngFor="let entry of col">
-          <div class="card-header" *ngIf="entry.entry_type() === 'header'">
-            <h2 class="panel-title text-center" i18n>{{entry.label()}}</h2>
-          </div>
-          <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'menuitem'">
-            <a href="{{entry.target_url()}}" i18n>
-              <img src="{{entry.image_url()}}" alt="" role="presentation"/>
-              {{entry.label()}}
-            </a>
-          </div>
-          <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'catalogsearch'">
-            <div class="input-group">
-              <input type="text" class="form-control" 
-                [(ngModel)]="catSearchQuery"
-                id='catalog-search-input'
-                autofocus
-                (keyup.enter)="searchCatalog()"
-                i18n-placeholder placeholder="Search for..."
-                i18n-aria-label aria-label="Search for...">
-              <span class="input-group-btn">
-                <button class="btn btn-outline-secondary" 
-                  (click)="searchCatalog()" type="button" i18n>
+        <div class="card-header" *ngIf="header">
+          <h2 class="panel-title text-center" i18n>{{header.label()}}</h2>
+        </div>
+        <div class="card-body">
+          <div class="list-group">
+            <ng-container *ngFor="let entry of portalEntries[i]">
+              <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'menuitem'">
+                <a href="{{entry.target_url()}}" i18n>
+                  <img src="{{entry.image_url()}}" alt="" role="presentation"/>
                   {{entry.label()}}
-                </button>
-              </span>
-            </div>
-          </div>
-          <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'link'">
-            <a target="_top" href="{{entry.target_url()}}" i18n>
-              <img src="{{entry.image_url()}}" alt="" role="presentation"/>
-              {{entry.label()}}
-            </a>
+                </a>
+              </div>
+              <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'catalogsearch'">
+                <div class="input-group">
+                  <input type="text" class="form-control" 
+                    [(ngModel)]="catSearchQuery"
+                    id='catalog-search-input'
+                    autofocus
+                    (keyup.enter)="searchCatalog()"
+                    i18n-placeholder placeholder="Search for..."
+                    i18n-aria-label aria-label="Search for...">
+                  <span class="input-group-btn">
+                    <button class="btn btn-outline-secondary" 
+                      (click)="searchCatalog()" type="button" i18n>
+                      {{entry.label()}}
+                    </button>
+                  </span>
+                </div>
+              </div>
+              <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'link'">
+                <a target="_top" href="{{entry.target_url()}}" i18n>
+                  <img src="{{entry.image_url()}}" alt="" role="presentation"/>
+                  {{entry.label()}}
+                </a>
+              </div>
+            </ng-container>
           </div>
-        </ng-container>
+        </div>
       </div>
     </div>
   </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/splash.component.ts b/Open-ILS/src/eg2/src/app/staff/splash.component.ts
index 78c05ca794..eace52b600 100644
--- a/Open-ILS/src/eg2/src/app/staff/splash.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/splash.component.ts
@@ -10,6 +10,7 @@ export class StaffSplashComponent implements OnInit {
 
     catSearchQuery: string;
     portalEntries: any[][] = [];
+    portalHeaders: any[] = [];
 
     constructor(
         private renderer: Renderer2,
@@ -18,14 +19,32 @@ export class StaffSplashComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-
-        this.pcrud.search('cusppe', {owner: 1}).subscribe(item => {
-            const page_col = item.page_col() - 1;
-            if (this.portalEntries[page_col] === undefined) {
-                this.portalEntries[page_col] = [];
+        const tmpPortalEntries: any[][] = [];
+        this.pcrud.search('cusppe', {owner: 1}).subscribe(
+            item => {
+                const page_col = item.page_col();
+                if (tmpPortalEntries[page_col] === undefined) {
+                    tmpPortalEntries[page_col] = [];
+                }
+                tmpPortalEntries[page_col][item.col_pos()] = item;
+            },
+            err => {},
+            () => {
+                // munge the results so that we don't need to
+                // care if there are gaps in the page_col or col_pos
+                // sequences
+                tmpPortalEntries.forEach((col) => {
+                    if (col !== undefined) {
+                        this.portalEntries.push(col);
+                        col.forEach((entry) => {
+                            if (entry.entry_type() === 'header') {
+                                this.portalHeaders[this.portalEntries.length - 1] = entry;
+                            }
+                        });
+                    }
+                });
             }
-            this.portalEntries[page_col][item.col_pos()] = item;
-        });
+        );
     }
 
     searchCatalog(): void {
-- 
2.11.0