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

This commit is contained in:
Michael Hoennig 2019-04-05 10:16:07 +02:00
parent dfa6bd2bed
commit 1b852707b7
7 changed files with 193 additions and 144 deletions

View File

@ -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>

View File

@ -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);
}
}

View File

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

View File

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

View File

@ -27,57 +27,11 @@
<fa-icon [icon]="'pencil-alt'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit"> Edit</span> <fa-icon [icon]="'pencil-alt'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit"> Edit</span>
</button> </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> </div>
</div> </div>

View File

@ -1,15 +1,8 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; 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({ @Component({
selector: 'jhi-customer-detail', selector: 'jhi-customer-detail',
@ -18,29 +11,11 @@ import { ITEMS_PER_PAGE } from 'app/shared';
export class CustomerDetailComponent implements OnInit { export class CustomerDetailComponent implements OnInit {
customer: ICustomer; 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() { ngOnInit() {
this.activatedRoute.data.subscribe(({ customer }) => { this.activatedRoute.data.subscribe(({ customer }) => {
this.customer = customer; this.customer = customer;
this.contacts.reset();
}); });
} }
@ -48,67 +23,3 @@ export class CustomerDetailComponent implements OnInit {
window.history.back(); 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);
}
}

View File

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