hostsharing/hs.hsadmin.ng
6
0
Fork 0
Code Pull Requests 3 Activity

spike for master-detail with customer and contact

Browse Source
This commit is contained in:
Michael Hoennig 2019-04-03 16:27:26 +02:00
parent 38244767d7
commit 39b9a1a7dc
2 changed files with 144 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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