spawntree
/
matsen-tool-fe
2
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

pagination - contactsdetail

master
Florian Eisenmenger 2 роки тому
джерело
be4bdb9224
коміт
a6953ed792
5 змінених файлів з 96 додано та 94 видалено
Об'єднаний перегляд
Параметри порівняння
Показати статистику Завантажити патч Завантажити файл різниці
  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 Переглянути файл

@@ -1,21 +1,22 @@
<div class="card"> <div class="card">
<div class="card-body row"> <div class="card-body row">
<div class="col-8"> <div class="col-8">
<h1>{{contact.firstName}} {{contact.lastName}}</h1>
<h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
<dl> <dl>
<dt>Position:</dt> <dt>Position:</dt>
<dd>{{contact.position}}</dd>
<dd>{{ contact.position }}</dd>
<dt>Telefon:</dt> <dt>Telefon:</dt>
<dd>{{contact.phone}}</dd>
<dd>{{ contact.phone }}</dd>
<dt>E-Mail:</dt> <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> <dt>Geburtstag:</dt>
<dd>{{contact.birthday | date:'dd.MM.YYYY'}}</dd>
<dd>{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
</dl> </dl>
</div> </div>
<div class="col-4"> <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> </div>
</div> </div>
@@ -25,92 +26,48 @@
<h2>Notizen</h2> <h2>Notizen</h2>
<button>Neue Notiz</button> <button>Neue Notiz</button>
</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.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>
</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>
</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>
</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> </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)" (page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize" [pageSize]="postsPageSize"
[pageIndex]="postsPageIndex" [pageIndex]="postsPageIndex"


+ 28
- 6
matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts Переглянути файл

@@ -1,6 +1,6 @@
import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core'; import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {environment} from "@environments/environment"; 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 {Subscription} from "rxjs";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator"; import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
@@ -19,6 +19,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
protected id: string; protected id: string;
protected contactSub: Subscription; protected contactSub: Subscription;


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


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


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


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


getData() {
getContactData() {
// switch over this.dataType (customers, etc.) // switch over this.dataType (customers, etc.)
this.contactSub = this.contactService.contactsIdGet( this.contactSub = this.contactService.contactsIdGet(
this.id 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) { postsHandlePageEvent(e: PageEvent) {
this.postsPageEvent = e; this.postsPageEvent = e;
this.postsLength = e.length; this.postsLength = e.length;
this.postsPageIndex = e.pageIndex.valueOf(); this.postsPageIndex = e.pageIndex.valueOf();
this.postsPageSize = e.pageSize.valueOf(); this.postsPageSize = e.pageSize.valueOf();
// this.getData();
this.getPostsData();
} }
} }

+ 24
- 2
matsen-tool/src/app/partners/partners-detail/partners-detail.component.html Переглянути файл

@@ -55,7 +55,7 @@
<span (click)="navigateToContactDetails(contact)" class="badge bg-secondary">Details</span> <span (click)="navigateToContactDetails(contact)" class="badge bg-secondary">Details</span>
</div> </div>
</div> </div>
<mat-paginator class="mb-4"
<mat-paginator *ngIf="contacts.length > 0" class="mb-4"
[pageSizeOptions]="[6,12,18]" [pageSizeOptions]="[6,12,18]"
[length]="contactsLength" [length]="contactsLength"
(page)="contactsHandlePageEvent($event)" (page)="contactsHandlePageEvent($event)"
@@ -144,12 +144,34 @@
</div> </div>
</div> </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"> <div class="d-flex justify-content-end">
<a routerLink="#" class="badge bg-secondary">Kommentieren</a> <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
</div> </div>
</div> </div>
</div> </div>
<mat-paginator class="mb-4" [length]="postsLength"
<mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"
(page)="postsHandlePageEvent($event)" (page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize" [pageSize]="postsPageSize"
[pageIndex]="postsPageIndex" [pageIndex]="postsPageIndex"


+ 1
- 1
matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts Переглянути файл

@@ -145,7 +145,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
console.log(data); console.log(data);
this.posts = data["hydra:member"]; this.posts = data["hydra:member"];
this.postsLength = Number(data["hydra:totalItems"]); 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 Переглянути файл

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


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


Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти