--- /dev/null
+<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>
--- /dev/null
+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() {
+ }
+}
+
-.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;
}
</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>
// 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);
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({
PatronComponent,
SummaryComponent,
CheckoutComponent,
+ EditComponent,
BcSearchComponent
],
imports: [
<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">
@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;
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);
}
}
- 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[] {