separate customer-contact-table.component - routing still wrong

src/main/webapp/app/entities/customer-contact/customer-contact-table.component.html

@@ -0,0 +1,66 @@
+<div>
+    <h2 id="page-heading">
+        <span jhiTranslate="hsadminNgApp.customerContact.home.title">Customer Contacts</span>
+        <button id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-customer-contact" [routerLink]="['/customer-contact/new']">
+            <fa-icon [icon]="'plus'"></fa-icon>
+            <span  jhiTranslate="hsadminNgApp.customerContact.home.createLabel">
+            Create new Customer Contact
+            </span>
+        </button>
+    </h2>
+    <jhi-alert></jhi-alert>
+    <br/>
+    <div class="table-responsive" *ngIf="customerContacts">
+        <table class="table table-striped">
+            <thead>
+            <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="reset.bind(this)">
+            <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(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
+            <tr *ngFor="let customerContact of 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>

src/main/webapp/app/entities/customer-contact/customer-contact-table.component.ts

@@ -0,0 +1,111 @@
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
+
+import { ICustomerContact } from 'app/shared/model/customer-contact.model';
+import { AccountService } from 'app/core';
+
+import { ITEMS_PER_PAGE } from 'app/shared';
+import { CustomerContactService } from './customer-contact.service';
+
+@Component({
+    selector: 'jhi-customer-contact-table',
+    templateUrl: './customer-contact-table.component.html'
+})
+export class CustomerContactTableComponent implements OnInit, OnDestroy {
+    customerContacts: ICustomerContact[];
+    currentAccount: any;
+    eventSubscriber: Subscription;
+    itemsPerPage: number;
+    links: any;
+    page: any;
+    predicate: any;
+    reverse: any;
+    totalItems: number;
+
+    @Input('customer') public customerId: number;
+
+    constructor(
+        protected customerContactService: CustomerContactService,
+        protected jhiAlertService: JhiAlertService,
+        protected eventManager: JhiEventManager,
+        protected parseLinks: JhiParseLinks,
+        protected accountService: AccountService
+    ) {
+        this.customerContacts = [];
+        this.itemsPerPage = ITEMS_PER_PAGE;
+        this.page = 0;
+        this.links = {
+            last: 0
+        };
+        this.predicate = 'id';
+        this.reverse = true;
+    }
+
+    loadAll() {
+        this.customerContactService
+            .query({
+                'customerId.equals': this.customerId,
+                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();
+    }
+
+    ngOnInit() {
+        this.loadAll();
+        this.accountService.identity().then(account => {
+            this.currentAccount = account;
+        });
+        this.registerChangeInCustomerContacts();
+    }
+
+    ngOnDestroy() {
+        this.eventManager.destroy(this.eventSubscriber);
+    }
+
+    trackId(index: number, item: ICustomerContact) {
+        return item.id;
+    }
+
+    registerChangeInCustomerContacts() {
+        this.eventSubscriber = this.eventManager.subscribe('customerContactListModification', response => this.reset());
+    }
+
+    sort() {
+        const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
+        if (this.predicate !== 'id') {
+            result.push('id');
+        }
+        return result;
+    }
+
+    protected paginateCustomerContacts(data: ICustomerContact[], headers: HttpHeaders) {
+        this.links = this.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.jhiAlertService.error(errorMessage, null, null);
+    }
+}

src/main/webapp/app/entities/customer-contact/customer-contact.module.ts

@@ -6,6 +6,7 @@ import { JhiLanguageHelper } from 'app/core';
 import { HsadminNgSharedModule } from 'app/shared';
 import {
     CustomerContactComponent,
+    CustomerContactTableComponent,
     CustomerContactDetailComponent,
     CustomerContactUpdateComponent,
     CustomerContactDeletePopupComponent,
@@ -18,8 +19,10 @@ const ENTITY_STATES = [...customerContactRoute, ...customerContactPopupRoute];
 
 @NgModule({
     imports: [HsadminNgSharedModule, RouterModule.forChild(ENTITY_STATES)],
+    exports: [CustomerContactTableComponent],
     declarations: [
         CustomerContactComponent,
+        CustomerContactTableComponent,
         CustomerContactDetailComponent,
         CustomerContactUpdateComponent,
         CustomerContactDeleteDialogComponent,
@@ -27,6 +30,7 @@ const ENTITY_STATES = [...customerContactRoute, ...customerContactPopupRoute];
     ],
     entryComponents: [
         CustomerContactComponent,
+        CustomerContactTableComponent,
         CustomerContactUpdateComponent,
         CustomerContactDeleteDialogComponent,
         CustomerContactDeletePopupComponent

src/main/webapp/app/entities/customer-contact/index.ts

@@ -1,4 +1,5 @@
 export * from './customer-contact.service';
+export * from './customer-contact-table.component';
 export * from './customer-contact-update.component';
 export * from './customer-contact-delete-dialog.component';
 export * from './customer-contact-detail.component';

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

@@ -27,57 +27,11 @@
                 <fa-icon [icon]="'pencil-alt'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit"> Edit</span>
             </button>
 
-            <table class="table table-striped">
+            <hr/>
-                <thead>
+            <h2>Related Entities</h2>
-                <tr jhiSort [(predicate)]="contacts.predicate" [(ascending)]="contacts.reverse" [callback]="contacts.reset.bind(contacts)">
+            <jhi-customer-contact-table [customer]="customer.id"></jhi-customer-contact-table>
-                    <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+            <hr/>
-                    <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,15 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
-import { Subscription } from 'rxjs';
 
-import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
+import { ICustomer } from 'app/shared/model/customer.model';
-
+import { CustomerContactTableComponent } from 'app/entities/customer-contact';
-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',
@@ -18,29 +11,11 @@ import { ITEMS_PER_PAGE } from 'app/shared';
 export class CustomerDetailComponent implements OnInit {
     customer: ICustomer;
 
-    contacts: CustomerPager;
+    constructor(protected activatedRoute: ActivatedRoute, protected customerContactTableComponent: CustomerContactTableComponent) {}
-
-    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();
         });
     }
 
@@ -48,67 +23,3 @@ 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);
-    }
-}

src/main/webapp/app/entities/customer/customer.module.ts

@@ -3,6 +3,8 @@ import { RouterModule } from '@angular/router';
 import { JhiLanguageService } from 'ng-jhipster';
 import { JhiLanguageHelper } from 'app/core';
 
+import { HsadminNgCustomerContactModule } from 'app/entities/customer-contact/customer-contact.module';
+
 import { HsadminNgSharedModule } from 'app/shared';
 import {
     CustomerComponent,
@@ -17,7 +19,7 @@ import {
 const ENTITY_STATES = [...customerRoute, ...customerPopupRoute];
 
 @NgModule({
-    imports: [HsadminNgSharedModule, RouterModule.forChild(ENTITY_STATES)],
+    imports: [HsadminNgSharedModule, RouterModule.forChild(ENTITY_STATES), HsadminNgCustomerContactModule],
     declarations: [
         CustomerComponent,
         CustomerDetailComponent,