From c93e746fa8ebc97eec54269b04eba29602c6ba66 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 7 Dec 2017 16:34:25 -0500
Subject: [PATCH] LP#626157 Ang2 experiments

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 Open-ILS/webby-src/src/app/core/auth.ts            |  1 +
 .../app/staff/catalog/record/record.component.html |  8 ++++
 .../app/staff/catalog/result/facets.component.html |  4 +-
 .../staff/catalog/result/pagination.component.css  |  6 ++-
 .../staff/catalog/result/pagination.component.html | 30 ++++++++-----
 .../staff/catalog/result/pagination.component.ts   |  2 +
 .../staff/catalog/result/results.component.html    |  8 ++--
 .../app/staff/catalog/result/results.component.ts  |  6 +--
 .../app/staff/catalog/search-form.component.css    | 51 ++--------------------
 .../app/staff/catalog/search-form.component.html   | 28 ++++++------
 .../src/app/staff/catalog/staff-catalog.service.ts |  3 ++
 Open-ILS/webby-src/src/styles.css                  | 23 ++++++++++
 12 files changed, 86 insertions(+), 84 deletions(-)

diff --git a/Open-ILS/webby-src/src/app/core/auth.ts b/Open-ILS/webby-src/src/app/core/auth.ts
index 87d5c70888..611797abeb 100644
--- a/Open-ILS/webby-src/src/app/core/auth.ts
+++ b/Open-ILS/webby-src/src/app/core/auth.ts
@@ -225,6 +225,7 @@ export class EgAuthService {
     }
 
     logout(broadcast?: boolean) {
+        console.debug('logging out');
 
         if (broadcast) {
             // TODO
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html b/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html
index 7b7485235c..c1e383e022 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html
+++ b/Open-ILS/webby-src/src/app/staff/catalog/record/record.component.html
@@ -1,5 +1,13 @@
 
 <div id="staff-catalog-record-container">
   RECORD {{recordId}}
+
+  <div class="d-flex flex-row">
+    <div class="flex-2 p-2 border">SMALL</div>
+    <div class="flex-1 p-2 border">MED</div>
+    <div class="flex-3 p-2 border">asdf</div>
+    <div class="flex-cell p-2 border">asdfsada</div>
+  </div>
 </div>
 
+
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/facets.component.html b/Open-ILS/webby-src/src/app/staff/catalog/result/facets.component.html
index 332b77c849..188ae3091e 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/result/facets.component.html
+++ b/Open-ILS/webby-src/src/app/staff/catalog/result/facets.component.html
@@ -14,9 +14,9 @@
         <div class="row"
           *ngIf="searchContext.result.facetData[facetConf.facetClass][name]">
           <div class="card mb-2">
-            <h5 class="card-header">
+            <h4 class="card-header">
               {{searchContext.result.facetData[facetConf.facetClass][name].cmfLabel}}
-            </h5>
+            </h4>
             <ul class="list-group list-group-flush">
               <li class="list-group-item" 
                 [ngClass]="{'facet-selected' :
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.css b/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.css
index 8e2b849a72..c283ff45d5 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.css
+++ b/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.css
@@ -1,4 +1,8 @@
 
 /* Bootstrap default is 20px */
-.pagination {margin: 10px 0px 10px 0px}
+.pagination {margin: 0px 0px 0px 0px}
+
+.pagination li:not(.active) a {
+  cursor: pointer;
+}
 
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.html b/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.html
index e5f7c5a52f..55b63dd0d9 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.html
+++ b/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.html
@@ -1,21 +1,27 @@
-
+<!-- 
+Using bare BS pagination instead of ng-bootstrap, which seemed 
+unnecessary given we have to track paging externally anyway.
+-->
 <ul class="pagination">
-  <li class="page-item" [ngClass]="{disabled : searchContext.pager.isFirstPage()}">
-    <a 
-      href='javascript:;'
-      (click)="prevPage()"
-      class="page-link" aria-label="[% l('Previous') %]">
+  <li class="page-item" 
+    [ngClass]="{disabled : searchContext.pager.isFirstPage()}">
+    <a (click)="prevPage()"
+      class="page-link" 
+      i18n-aria-label
+      aria-label="Previous">
       <span aria-hidden="true">&laquo;</span>
     </a>
   </li>
-  <li class="page-item" *ngFor="let page of searchContext.pager.pageList()"
+  <li class="page-item" 
+    *ngFor="let page of searchContext.pager.pageList()"
     [ngClass]="{active : searchContext.pager.currentPage() == page}">
-    <a href='javascript:;' (click)="setPage(page)" class="page-link">
-      {{page}} <span class="sr-only">(current)</span></a>
+    <a class="page-link" (click)="setPage(page)">
+      {{page}} <span class="sr-only" i18n>(current)</span></a>
   </li>
-  <li class="page-item" [ngClass]="{disabled : searchContext.pager.isLastPage()}">
-    <a href='javascript:;' (click)="nextPage()"
-      class="page-link" aria-label="Next">
+  <li class="page-item" 
+    [ngClass]="{disabled : searchContext.pager.isLastPage()}">
+    <a (click)="nextPage()"
+      class="page-link" aria-label="Next" i18n-aria-label>
       <span aria-hidden="true">&raquo;</span>
     </a>
   </li>
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.ts b/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.ts
index 2faa4db37b..ff5aabc61c 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.ts
+++ b/Open-ILS/webby-src/src/app/staff/catalog/result/pagination.component.ts
@@ -27,11 +27,13 @@ export class ResultPaginationComponent implements OnInit {
     }
 
     prevPage(): void {
+        console.log('HERE');
         this.searchContext.pager.decrement();
         this.staffCat.search();
     }
 
     setPage(page: number): void {
+        if (this.searchContext.pager.currentPage() == page) return;
         this.searchContext.pager.setPage(page);
         this.staffCat.search();
     }
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/results.component.html b/Open-ILS/webby-src/src/app/staff/catalog/result/results.component.html
index e16ad856ac..9304143ceb 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/result/results.component.html
+++ b/Open-ILS/webby-src/src/app/staff/catalog/result/results.component.html
@@ -1,8 +1,8 @@
 
-<div id="staff-catalog-results-container" *ngIf="searchIsDone()">
+<div id="staff-catalog-results-container" class="mt-3" *ngIf="searchIsDone()">
   <div class="row">
-    <div class="col-2" style="margin-top:10px"><!--match pagination margin-->
-      <h5 i18n>Search Results ({{searchContext.result.count}})</h5>
+    <div class="col-2"><!--match pagination margin-->
+      <h3 i18n>Search Results ({{searchContext.result.count}})</h3>
     </div>
     <div class="col-1"></div>
     <div class="col-9">
@@ -11,7 +11,7 @@
       </div>
     </div>
   </div>
-	<div class="row">
+	<div class="row mt-2">
 		<div class="col-2">
       <eg-catalog-result-facets></eg-catalog-result-facets>
 		</div>
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/result/results.component.ts b/Open-ILS/webby-src/src/app/staff/catalog/result/results.component.ts
index 50ad129c67..a30d6f5c10 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/result/results.component.ts
+++ b/Open-ILS/webby-src/src/app/staff/catalog/result/results.component.ts
@@ -70,18 +70,18 @@ export class ResultsComponent implements OnInit {
         // Flesh the creator / editor fields with the user object.
         // Handle the user fleshing here (instead of record.component so
         // we only need to grab one copy of each user.
-        let userIds: {[id:string]: boolean} = {};
+        let userIds: {[id:number]: boolean} = {};
         records.forEach(recSum => {
             if (this.userCache[recSum.creator]) {
                 recSum.creator = this.userCache[recSum.creator];
             } else {
-              userIds[recSum.creator] = true;
+                userIds[Number(recSum.creator)] = true;
             }
 
             if (this.userCache[recSum.editor]) {
                 recSum.editor = this.userCache[recSum.editor];
             } else {
-              userIds[recSum.editor] = true;
+                userIds[Number(recSum.editor)] = true;
             }
         });
 
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/search-form.component.css b/Open-ILS/webby-src/src/app/staff/catalog/search-form.component.css
index 1208786853..09e2da9b02 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/search-form.component.css
+++ b/Open-ILS/webby-src/src/app/staff/catalog/search-form.component.css
@@ -1,50 +1,5 @@
-/*
-#staffcat-search-form .eg-org-selector,
-#staffcat-search-form .eg-org-selector button {
-    width: 100%;
-    text-align: left
-}
-*/
-
-/*
-#staffcat-search-form select,
-#staffcat-search-form optgroup,
-#staffcat-search-form option {
-  padding: 0.15rem 0.75rem;
-}
-*/
-
-/** TODO move these to common CSS */
-.flex-row {
-    display: flex;
-}
-.flex-cell {
-    flex: 1;
-    padding: 0px 0px 0px 7px;
-}
-
-.flex-2 {
-    flex: 2
-}
-.flex-3 {
-    flex: 3
-}
-.flex-4 {
-    flex: 4
-}
-/* --- */
-
-/*
-.col-2:first-child, .flex-row, .flex-cell:first-child {
-*/
-.row, .row > div:first-child, .flex-row, .flex-cell:first-child {
-    padding-left: 0px;
-    margin-left: 0px;
-}
 
-.search-plus-minus {
-  /* Transparent background */
-  background-color: rgba(0, 0, 0, 0.0);
-  padding-left: .25rem;
-  padding-right: .25rem; /* default .5rem */
+/* filter checkbox labels move to bottom */
+.checkbox label {
+  margin-bottom: .1rem;
 }
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/search-form.component.html b/Open-ILS/webby-src/src/app/staff/catalog/search-form.component.html
index 993f4f38a0..e0135e59cc 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/search-form.component.html
+++ b/Open-ILS/webby-src/src/app/staff/catalog/search-form.component.html
@@ -4,8 +4,8 @@ TODO focus search input
 <div id='staffcat-search-form' class='mb-3'>
   <div class="row"
     *ngFor="let q of searchContext.query; let idx = index; trackBy:trackByIdx">
-    <div class="col-9 flex-row">
-      <div class="flex-cell">
+    <div class="col-9 d-flex flex-row">
+      <div class="flex-1">
         <div *ngIf="idx == 0">
           <select class="form-control" [(ngModel)]="searchContext.format">
             <option value=''>All Formats</option>
@@ -21,7 +21,7 @@ TODO focus search input
           </select>
         </div>
       </div>
-      <div class="flex-cell">
+      <div class="flex-1 pl-1">
         <select class="form-control" 
           [(ngModel)]="searchContext.fieldClass[idx]">
           <option value='keyword'>Keyword</option>
@@ -32,7 +32,7 @@ TODO focus search input
           <option value='series'>Series</option>
         </select>
       </div>
-      <div class="flex-cell">
+      <div class="flex-1 pl-1">
         <select class="form-control" 
           [(ngModel)]="searchContext.matchOp[idx]">
           <option value='contains'>Contains</option>
@@ -42,7 +42,7 @@ TODO focus search input
           <option value='starts'>Starts with</option>
         </select>
       </div>
-      <div class="flex-cell flex-2">
+      <div class="flex-2 pl-1">
         <div class="form-group">
           <input type="text" class="form-control"
             TODOfocus-me="searchContext.focus_query[idx]"
@@ -51,12 +51,12 @@ TODO focus search input
             placeholder="Query..."/>
         </div>
       </div>
-      <div class="flex-cell">
-        <button class="btn btn-sm search-plus-minus"
+      <div class="flex-1 pl-1">
+        <button class="btn btn-sm material-icon-button"
           (click)="addSearchRow(idx + 1)">
           <span class="material-icons">add_circle_outline</span>
         </button>
-        <button class="btn btn-sm search-plus-minus"
+        <button class="btn btn-sm material-icon-button"
           [disabled]="searchContext.query.length < 2"
           (click)="delSearchRow(idx)">
           <span class="material-icons">remove_circle_outline</span>
@@ -88,15 +88,15 @@ TODO focus search input
   </div><!-- row -->
 
   <div class="row">
-    <div class="col-9 flex-row">
-      <div class="flex-cell">
+    <div class="col-9 d-flex flex-row">
+      <div class="flex-1">
         <eg-org-select 
           [onChange]="orgOnChange"
           [initialOrg]="searchContext.searchOrg"
           [placeholder]="'Library'" >
         </eg-org-select>
       </div>
-      <div class="flex-cell flex-3">
+      <div class="flex-3 pl-1">
         <select class="form-control" [(ngModel)]="searchContext.sort">
           <option value='' i18n>Sort by Relevance</option>
           <optgroup label="Sort by Title" i18n-label>
@@ -117,7 +117,7 @@ TODO focus search input
           </optgroup>
         </select>
       </div>
-      <div class="flex-cell flex-2">
+      <div class="flex-2 pl-1 align-self-end">
         <div class="checkbox">
           <label>
             <input type="checkbox" [(ngModel)]="searchContext.available"/>
@@ -125,7 +125,7 @@ TODO focus search input
           </label>
         </div>
       </div>
-      <div class="flex-cell flex-4">
+      <div class="flex-4 pl-1 align-self-end">
         <div class="checkbox">
           <label>
             <input type="checkbox" [(ngModel)]="searchContext.global"/>
@@ -133,7 +133,7 @@ TODO focus search input
           </label>
         </div>
       </div>
-      <div class="flex-cell flex-2">
+      <div class="flex-2 pl-1">
         <div *ngIf="searchContext.searchInProgress">
           <div class="progress">
             <div class="progress-bar progress-bar-striped active"
diff --git a/Open-ILS/webby-src/src/app/staff/catalog/staff-catalog.service.ts b/Open-ILS/webby-src/src/app/staff/catalog/staff-catalog.service.ts
index 456d84d5c0..2a70760c45 100644
--- a/Open-ILS/webby-src/src/app/staff/catalog/staff-catalog.service.ts
+++ b/Open-ILS/webby-src/src/app/staff/catalog/staff-catalog.service.ts
@@ -42,6 +42,9 @@ export class StaffCatalogService {
      */
     search(): void {
         let params = this.catUrl.toUrlParams(this.searchContext);
+
+        // Avoid redirect on empty-query searches
+        if (params.query[0] == '') return;
         
         // Force a new search every time this method is called, even if
         // it's the same as the active search.  Since router navigation
diff --git a/Open-ILS/webby-src/src/styles.css b/Open-ILS/webby-src/src/styles.css
index e396406721..daa32c16ea 100644
--- a/Open-ILS/webby-src/src/styles.css
+++ b/Open-ILS/webby-src/src/styles.css
@@ -12,3 +12,26 @@ body, .form-control, .btn {
   font-size: .88rem;
 }
 
+/** BS default fonts are huge */
+h2 {font-size: 1.25rem}
+h3 {font-size: 1.15rem}
+h4 {font-size: 1.05rem}
+h5 {font-size: .95rem}
+
+
+/** BS has flex utility classes, but none for specifying flex widths */
+.flex-1 {flex: 1}
+.flex-2 {flex: 2}
+.flex-3 {flex: 3}
+.flex-4 {flex: 4}
+.flex-5 {flex: 5}
+
+
+/* usefulf for mat-icon buttons without any background or borders */
+.material-icon-button {
+  /* Transparent background */
+  border: none;
+  background-color: rgba(0, 0, 0, 0.0);
+  padding-left: .25rem;
+  padding-right: .25rem; /* default .5rem */
+}
-- 
2.11.0