LPXXX Patron UI WIP
authorBill Erickson <berickxx@gmail.com>
Thu, 13 Aug 2020 15:44:58 +0000 (11:44 -0400)
committerBill Erickson <berickxx@gmail.com>
Fri, 21 Aug 2020 20:41:27 +0000 (16:41 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/staff/circ/patron/edit.component.html [new file with mode: 0644]
Open-ILS/src/eg2/src/app/staff/circ/patron/edit.component.ts [new file with mode: 0644]
Open-ILS/src/eg2/src/app/staff/circ/patron/patron.component.css
Open-ILS/src/eg2/src/app/staff/circ/patron/patron.component.html
Open-ILS/src/eg2/src/app/staff/circ/patron/patron.component.ts
Open-ILS/src/eg2/src/app/staff/circ/patron/patron.module.ts
Open-ILS/src/eg2/src/app/staff/share/patron/search.component.html
Open-ILS/src/eg2/src/app/staff/share/patron/search.component.ts

diff --git a/Open-ILS/src/eg2/src/app/staff/circ/patron/edit.component.html b/Open-ILS/src/eg2/src/app/staff/circ/patron/edit.component.html
new file mode 100644 (file)
index 0000000..383f2fc
--- /dev/null
@@ -0,0 +1,98 @@
+<div class="row d-flex">
+  <div class="flex-1"> </div>
+  <button class="btn btn-outline-dark">BUTTON 1</button>
+  <button class="btn btn-outline-dark ml-2">BUTTON 2</button>
+  <button class="btn btn-outline-dark ml-2">BUTTON 3</button>
+  <button class="btn btn-outline-dark ml-2">BUTTON 4</button>
+</div>
+
+<div class="{{contentPaneClass}}">
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+  <div class="row mb-5">
+    <div class="col-lg-12">
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+      ;lkjasd f;laksjdf ;aslkfjas ;flkjasf ;aslkdfjas ;flkjasf ;asdlkj
+    </div>
+  </div>
+</div>
diff --git a/Open-ILS/src/eg2/src/app/staff/circ/patron/edit.component.ts b/Open-ILS/src/eg2/src/app/staff/circ/patron/edit.component.ts
new file mode 100644 (file)
index 0000000..061ae91
--- /dev/null
@@ -0,0 +1,28 @@
+import {Component, OnInit, Input} from '@angular/core';
+import {Router, ActivatedRoute, ParamMap} from '@angular/router';
+import {NgbNav, NgbNavChangeEvent} from '@ng-bootstrap/ng-bootstrap';
+import {OrgService} from '@eg/core/org.service';
+import {NetService} from '@eg/core/net.service';
+import {PatronService} from '@eg/staff/share/patron/patron.service';
+import {PatronManagerService} from './patron.service';
+
+@Component({
+  templateUrl: 'edit.component.html',
+  selector: 'eg-patron-edit'
+})
+export class EditComponent implements OnInit {
+
+    // CSS class for the main edit pane
+    @Input() contentPaneClass = '';
+
+    constructor(
+        private org: OrgService,
+        private net: NetService,
+        public patronService: PatronService,
+        public context: PatronManagerService
+    ) {}
+
+    ngOnInit() {
+    }
+}
+
index 8897ed1..dbe3658 100644 (file)
@@ -1,10 +1,11 @@
 
-.patron-content-pane {
+::ng-deep .patron-content-pane {
   margin-top: 10px;
   padding-top: 10px;
+  margin-right: 5px;
+  padding-right: 5px;
   position: fixed;
   height: 100%;
   overflow-y: auto;
-  overflow-x: hidden;
 }
 
index 237fe99..cd8ec32 100644 (file)
         </ng-template>
       </li>
 
+      <li ngbNavItem="edit">
+        <a ngbNavLink i18n>Edit</a>
+        <ng-template ngbNavContent>
+          <eg-patron-edit contentPaneClass="patron-content-pane">
+          </eg-patron-edit> 
+        </ng-template>
+      </li>
+
       <li ngbNavItem="search">
         <a ngbNavLink i18n>Patron Search</a>
         <ng-template ngbNavContent>
           <div class="patron-content-pane">
             <eg-patron-search 
-              (patronsClicked)="patronsClicked($event)"
+              (selectionChange)="patronSelectionChange($event)"
               (patronsSelected)="patronsSelected($event)">
             </eg-patron-search> 
           </div>
index 8e034b7..fa5774b 100644 (file)
@@ -82,10 +82,10 @@ export class PatronComponent implements OnInit, AfterViewInit {
 
     // Patron row single-clicked in the grid.  Load the patron without
     // leaving the search tab.
-    patronsClicked(rows: any[]) {
-        if (rows.length !== 1) { return; }
+    patronSelectionChange(ids: number[]) {
+        if (ids.length !== 1) { return; }
 
-        const id = rows[0].id();
+        const id = ids[0];
         if (id !== this.patronId) {
             this.patronId = id;
             this.context.loadPatron(id);
index d4396e3..d16f6f1 100644 (file)
@@ -10,6 +10,7 @@ import {PatronManagerService} from './patron.service';
 import {PatronComponent} from './patron.component';
 import {SummaryComponent} from './summary.component';
 import {CheckoutComponent} from './checkout.component';
+import {EditComponent} from './edit.component';
 import {BcSearchComponent} from './bcsearch.component';
 
 @NgModule({
@@ -17,6 +18,7 @@ import {BcSearchComponent} from './bcsearch.component';
     PatronComponent,
     SummaryComponent,
     CheckoutComponent,
+    EditComponent,
     BcSearchComponent
   ],
   imports: [
index 40f7124..bdf30e2 100644 (file)
 <div class="patron-search-grid mt-4">
   <eg-grid #searchGrid idlClass="au" 
     persistKey="circ.patron.search"
-    (onRowActivate)="rowsSelected($event)"
-    (onRowClick)="rowsClicked($event)"
+    (rowSelectionChange)="gridSelectionChange($event)"
+    (onRowActivate)="rowsActivated($event)"
     [dataSource]="dataSource" 
     [showDeclaredFieldsOnly]="true"> 
 
index 6948546..d09daf2 100644 (file)
@@ -41,11 +41,13 @@ export class PatronSearchComponent implements OnInit, AfterViewInit {
 
     @ViewChild('searchGrid', {static: false}) searchGrid: GridComponent;
 
-    // Fired on dbl-click of a search result row.
+    // Fires on dbl-click or Enter while one or more search result
+    // rows are selected.
     @Output() patronsSelected: EventEmitter<any>;
 
-    // Fired on single click of a search results row
-    @Output() patronsClicked: EventEmitter<any>;
+    // Fires when the selection of search result rows changes.
+    // Emits an array of patron IDs
+    @Output() selectionChange: EventEmitter<number[]>;
 
     search: any = {};
     searchOrg: IdlObject;
@@ -61,7 +63,7 @@ export class PatronSearchComponent implements OnInit, AfterViewInit {
         private store: ServerStoreService
     ) {
         this.patronsSelected = new EventEmitter<any>();
-        this.patronsClicked = new EventEmitter<any>();
+        this.selectionChange = new EventEmitter<number[]>();
         this.dataSource = new GridDataSource();
         this.dataSource.getRows = (pager: Pager, sort: any[]) => {
             return this.getRows(pager, sort);
@@ -98,12 +100,12 @@ export class PatronSearchComponent implements OnInit, AfterViewInit {
         }
     }
 
-    rowsSelected(rows: IdlObject | IdlObject[]) {
-        this.patronsSelected.emit([].concat(rows));
+    gridSelectionChange(keys: string[]) {
+        this.selectionChange.emit(keys.map(k => Number(k)));
     }
 
-    rowsClicked(rows: IdlObject | IdlObject[]) {
-        this.patronsClicked.emit([].concat(rows));
+    rowsActivated(rows: IdlObject | IdlObject[]) {
+        this.patronsSelected.emit([].concat(rows));
     }
 
     getSelected(): IdlObject[] {