spawntree
/
matsen-tool-fe
2
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
Selaa lähdekoodia

pagination - contactsdetail

master
Florian Eisenmenger 2 vuotta sitten
vanhempi
be4bdb9224
commit
a6953ed792
5 muutettua tiedostoa jossa 96 lisäystä ja 94 poistoa
Jaettu näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +41
    -84
      matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
  2. +28
    -6
      matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
  3. +24
    -2
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
  4. +1
    -1
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
  5. +2
    -1
      matsen-tool/src/app/partners/partners.component.ts

+ 41
- 84
matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html Näytä tiedosto

@@ -1,21 +1,22 @@
<div class="card">
<div class="card-body row">
<div class="col-8">
<h1>{{contact.firstName}} {{contact.lastName}}</h1>
<h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
<dl>
<dt>Position:</dt>
<dd>{{contact.position}}</dd>
<dd>{{ contact.position }}</dd>
<dt>Telefon:</dt>
<dd>{{contact.phone}}</dd>
<dd>{{ contact.phone }}</dd>
<dt>E-Mail:</dt>
<dd><a href="mailto:{{contact.email}}">{{contact.email}}</a></dd>
<dd><a href="mailto:{{contact.email}}">{{ contact.email }}</a></dd>
<dt>Geburtstag:</dt>
<dd>{{contact.birthday | date:'dd.MM.YYYY'}}</dd>
<dd>{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
</dl>
</div>
<div class="col-4">
<img *ngIf="contact.imageUrl !== null" src="{{environment.basePath}}{{contact.imageUrl}}" width="247" height="94"
alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}" />
<img *ngIf="contact.imageUrl !== null" src="{{environment.basePath}}{{contact.imageUrl}}" width="247"
height="94"
alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"/>
</div>
</div>
</div>
@@ -25,92 +26,48 @@
<h2>Notizen</h2>
<button>Neue Notiz</button>
</div>
<div class="post mb-3">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>12.10.2023</p>
<p>Jan Hansen</p>
</div>
<div>
<h3>Neues Tool nutzen</h3>
<p>Immer alles hier rein schreiben!</p>
<div *ngFor="let post of posts">
<div class="post mb-3">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ post.createdAt | date:'dd.MM.YYYY hh:mm' }}</p>
<p>{{ post.ownerName }}</p>
</div>
<div>
<h3>{{ post.headline }}</h3>
<p>{{ post.message }}</p>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a routerLink="#" class="badge bg-secondary">Kommentieren</a>
</div>
</div>
<div class="post mb-3">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>01.10.2023</p>
<p>Jan Hansen</p>
</div>
<div>
<h3>Konditionen</h3>
<p>Wir gewähren immer 10% Rabatt bei Bestellungen über 20.000 €.</p>
<div class="card ms-5">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>04.10.2023</p>
<p>Jan Hansen</p>
</div>
<div>
<p>Leider geht er mobil selten dran. Eher E-Mails schicken!</p>
</div>
</div>
</div>
</div>
<div class="card ms-5">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>02.10.2023</p>
<p>Daniel Knudsen</p>
</div>
<div>
<p>Achja! Gut zu wissen!</p>
<div class="card ms-5">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>02.10.2023</p>
<p>Florian Eisenmenger</p>
</div>
<div>
<p>Ich habe mit FAX die besten Erfahrungen gemacht...</p>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a routerLink="#" class="badge bg-secondary">Kommentieren</a>
</div>
</div>
<div class="post mb-3">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>12.09.2023</p>
<p>Florian Eisenmenger</p>
</div>
<div>
<h3>Ausland - Schwer erreichbar</h3>
<p>Peter Müller ist der Chef, aber schwer erreichbar. Am besten Mobil probieren!</p>
</div>
</div>
</div>
<div class="card ms-5">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>04.10.2023</p>
<p>Jan Hansen</p>
</div>
<div>
<p>Leider geht er mobil selten dran. Eher E-Mails schicken!</p>
</div>
<div class="d-flex justify-content-end">
<a routerLink="#" class="badge bg-secondary">Kommentieren</a>
</div>
</div>
<div class="card ms-5">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>02.10.2023</p>
<p>Florian Eisenmenger</p>
</div>
<div>
<p>Ich habe mit FAX die besten Erfahrungen gemacht...</p>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a routerLink="#" class="badge bg-secondary">Kommentieren</a>
</div>
</div>
<mat-paginator class="mb-4"
[length]="postsLength"
<mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"


+ 28
- 6
matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts Näytä tiedosto

@@ -1,6 +1,6 @@
import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {environment} from "@environments/environment";
import {ContactJsonld, ContactService} from "@app/core/api/v1";
import {ContactJsonld, ContactService, PostJsonld, PostService} from "@app/core/api/v1";
import {Subscription} from "rxjs";
import {ActivatedRoute} from "@angular/router";
import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
@@ -19,6 +19,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
protected id: string;
protected contactSub: Subscription;

protected postsSub: Subscription;
protected posts: Array<PostJsonld>;
protected postsDataSource;
protected postsLength: number;
protected postsPageEvent: PageEvent;
@@ -27,7 +29,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {

constructor(
private contactService: ContactService,
private route: ActivatedRoute
private route: ActivatedRoute,
private postService: PostService
) {
this.id = "";
this.contact = {} as ContactJsonld;
@@ -35,8 +38,10 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
this.contactSub = new Subscription();

// TODO: Change Jsonld
this.postsSub = new Subscription();
this.posts = [];
this.postsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
this.postsDataSource = new MatTableDataSource; //<ContactJsonld>(this.contacts)
this.postsDataSource = new MatTableDataSource<PostJsonld>(this.posts);
this.postsLength = 0;
this.postsPageEvent = new PageEvent();
this.postsPageSize = 30;
@@ -47,14 +52,14 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
this.route.params.subscribe(params => {
this.id = params['id'];
});
this.getData();
this.getContactData();
}

ngAfterViewInit() {
this.postsDataSource.paginator = this.postsPaginator;
}

getData() {
getContactData() {
// switch over this.dataType (customers, etc.)
this.contactSub = this.contactService.contactsIdGet(
this.id
@@ -65,11 +70,28 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
);
}

getPostsData() {
this.postsSub = this.postService.postsGetCollection(
this.postsPageIndex + 1,
10,
undefined,
undefined,
this.id
).subscribe(
data => {
console.log(data);
this.posts = data["hydra:member"];
this.postsLength = Number(data["hydra:totalItems"]);
this.postsPaginator.length = this.postsLength;
}
);
}

postsHandlePageEvent(e: PageEvent) {
this.postsPageEvent = e;
this.postsLength = e.length;
this.postsPageIndex = e.pageIndex.valueOf();
this.postsPageSize = e.pageSize.valueOf();
// this.getData();
this.getPostsData();
}
}

+ 24
- 2
matsen-tool/src/app/partners/partners-detail/partners-detail.component.html Näytä tiedosto

@@ -55,7 +55,7 @@
<span (click)="navigateToContactDetails(contact)" class="badge bg-secondary">Details</span>
</div>
</div>
<mat-paginator class="mb-4"
<mat-paginator *ngIf="contacts.length > 0" class="mb-4"
[pageSizeOptions]="[6,12,18]"
[length]="contactsLength"
(page)="contactsHandlePageEvent($event)"
@@ -144,12 +144,34 @@
</div>
</div>
</div>
<div class="card ms-5">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>04.10.2023</p>
<p>Jan Hansen</p>
</div>
<div>
<p>Leider geht er mobil selten dran. Eher E-Mails schicken!</p>
</div>
</div>
</div>
<div class="card ms-5">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>02.10.2023</p>
<p>Florian Eisenmenger</p>
</div>
<div>
<p>Ich habe mit FAX die besten Erfahrungen gemacht...</p>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a routerLink="#" class="badge bg-secondary">Kommentieren</a>
</div>
</div>
</div>
<mat-paginator class="mb-4" [length]="postsLength"
<mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"


+ 1
- 1
matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts Näytä tiedosto

@@ -145,7 +145,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
console.log(data);
this.posts = data["hydra:member"];
this.postsLength = Number(data["hydra:totalItems"]);
this.postsPaginator.length = this.contactsLength;
this.postsPaginator.length = this.postsLength;
}
);
}


+ 2
- 1
matsen-tool/src/app/partners/partners.component.ts Näytä tiedosto

@@ -7,13 +7,14 @@ import {PartnerJsonld, PartnerService} from "@app/core/api/v1";
import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
import {OrderFilter} from "@app/_models/orderFilter";
import {ApiConverter} from "@app/_helpers/api.converter";
import {NgIf} from "@angular/common";

@Component({
selector: 'app-partners',
templateUrl: './partners.component.html',
styleUrl: './partners.component.scss',
standalone: true,
imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive],
imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive, NgIf],
})
export class PartnersComponent implements OnInit, AfterViewInit {
@ViewChild(MatSort) sort;


Kirjoita Esikatselu
Ladataan…
Peruuta
Tallenna