spike for master-detail with customer and contact

src/main/webapp/app/entities/customer/customer-detail.component.html

@@ -26,6 +26,58 @@
                     class="btn btn-primary">
                 <fa-icon [icon]="'pencil-alt'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit"> Edit</span>
             </button>
+
+            <table class="table table-striped">
+                <thead>
+                <tr jhiSort [(predicate)]="contacts.predicate" [(ascending)]="contacts.reverse" [callback]="contacts.reset.bind(contacts)">
+                    <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                    <th jhiSortBy="role"><span jhiTranslate="hsadminNgApp.customerContact.role">Role</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                    <th jhiSortBy="contactEmail"><span jhiTranslate="hsadminNgApp.customerContact.contact">Contact</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                    <th jhiSortBy="customerPrefix"><span jhiTranslate="hsadminNgApp.customerContact.customer">Customer</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody infinite-scroll (scrolled)="loadPage(contacts.page + 1)" [infiniteScrollDisabled]="contacts.page >= contacts.links['last']" [infiniteScrollDistance]="0">
+                <tr *ngFor="let customerContact of contacts.customerContacts ;trackBy: trackId">
+                    <td><a [routerLink]="['/customer-contact', customerContact.id, 'view' ]">{{customerContact.id}}</a></td>
+                    <td jhiTranslate="{{'hsadminNgApp.CustomerContactRole.' + customerContact.role}}">{{customerContact.role}}</td>
+                    <td>
+                        <div *ngIf="customerContact.contactId">
+                            <a [routerLink]="['../contact', customerContact.contactId , 'view' ]" >{{customerContact.contactEmail}}</a>
+                        </div>
+                    </td>
+                    <td>
+                        <div *ngIf="customerContact.customerId">
+                            <a [routerLink]="['../customer', customerContact.customerId , 'view' ]" >{{customerContact.customerPrefix}}</a>
+                        </div>
+                    </td>
+                    <td class="text-right">
+                        <div class="btn-group flex-btn-group-container">
+                            <button type="submit"
+                                    [routerLink]="['/customer-contact', customerContact.id, 'view' ]"
+                                    class="btn btn-info btn-sm">
+                                <fa-icon [icon]="'eye'"></fa-icon>
+                                <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
+                            </button>
+                            <button type="submit"
+                                    [routerLink]="['/customer-contact', customerContact.id, 'edit']"
+                                    class="btn btn-primary btn-sm">
+                                <fa-icon [icon]="'pencil-alt'"></fa-icon>
+                                <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
+                            </button>
+                            <button type="submit"
+                                    [routerLink]="['/', 'customer-contact', { outlets: { popup: customerContact.id + '/delete'} }]"
+                                    replaceUrl="true"
+                                    queryParamsHandling="merge"
+                                    class="btn btn-danger btn-sm">
+                                <fa-icon [icon]="'times'"></fa-icon>
+                                <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </div>

src/main/webapp/app/entities/customer/customer-detail.component.ts

@@ -1,7 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
+import { Subscription } from 'rxjs';
 
-import { ICustomer } from 'app/shared/model/customer.model';
+import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
+
+import { Customer, ICustomer } from 'app/shared/model/customer.model';
+import { ICustomerContact } from 'app/shared/model/customer-contact.model';
+import { CustomerContactService } from 'app/entities/customer-contact';
+import { AccountService } from 'app/core';
+import { ITEMS_PER_PAGE } from 'app/shared';
 
 @Component({
     selector: 'jhi-customer-detail',
@@ -10,11 +18,29 @@ import { ICustomer } from 'app/shared/model/customer.model';
 export class CustomerDetailComponent implements OnInit {
     customer: ICustomer;
 
-    constructor(protected activatedRoute: ActivatedRoute) {}
+    contacts: CustomerPager;
+
+    constructor(
+        protected activatedRoute: ActivatedRoute,
+        public jhiAlertService: JhiAlertService,
+        public parseLinks: JhiParseLinks,
+        public customerContactService: CustomerContactService
+    ) {
+        this.contacts = new CustomerPager(this);
+        this.contacts.customerContacts = [];
+        this.contacts.itemsPerPage = ITEMS_PER_PAGE;
+        this.contacts.page = 0;
+        this.contacts.links = {
+            last: 0
+        };
+        this.contacts.predicate = 'id';
+        this.contacts.reverse = true;
+    }
 
     ngOnInit() {
         this.activatedRoute.data.subscribe(({ customer }) => {
             this.customer = customer;
+            this.contacts.reset();
         });
     }
 
@@ -22,3 +48,67 @@ export class CustomerDetailComponent implements OnInit {
         window.history.back();
     }
 }
+
+class CustomerPager {
+    constructor(private master: CustomerDetailComponent) {}
+
+    customerContacts: ICustomerContact[];
+    currentAccount: any;
+    eventSubscriber: Subscription;
+    itemsPerPage: number;
+    links: any;
+    page: any;
+    predicate: any;
+    reverse: any;
+    totalItems: number;
+
+    loadAll() {
+        debugger;
+        this.master.customerContactService
+            .query({
+                'customerId.equals': this.master.customer.id,
+                page: this.page,
+                size: this.itemsPerPage,
+                sort: this.sort()
+            })
+            .subscribe(
+                (res: HttpResponse<ICustomerContact[]>) => this.paginateCustomerContacts(res.body, res.headers),
+                (res: HttpErrorResponse) => this.onError(res.message)
+            );
+    }
+
+    reset() {
+        this.page = 0;
+        this.customerContacts = [];
+        this.loadAll();
+    }
+
+    loadPage(page) {
+        this.page = page;
+        this.loadAll();
+    }
+
+    sort() {
+        const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
+        if (this.predicate !== 'id') {
+            result.push('id');
+        }
+        return result;
+    }
+
+    trackId(index: number, item: ICustomerContact) {
+        return item.id;
+    }
+
+    protected paginateCustomerContacts(data: ICustomerContact[], headers: HttpHeaders) {
+        this.links = this.master.parseLinks.parse(headers.get('link'));
+        this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
+        for (let i = 0; i < data.length; i++) {
+            this.customerContacts.push(data[i]);
+        }
+    }
+
+    protected onError(errorMessage: string) {
+        this.master.jhiAlertService.error(errorMessage, null, null);
+    }
+}