spawntree
/
matsen-tool-fe
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

contacts pagination

master
Florian Eisenmenger 2 years ago
parent
e4cd658532
commit
d7bab9f882
7 changed files with 161 additions and 105 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
  2. +7
    -1
      matsen-tool/src/app/contacts/new-contact/new-contact.component.html
  3. +38
    -10
      matsen-tool/src/app/contacts/new-contact/new-contact.component.ts
  4. +40
    -40
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
  5. +56
    -54
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
  6. +4
    -0
      matsen-tool/src/assets/i18n/de.json
  7. +15
    -0
      matsen-tool/src/styles.scss

+ 1
- 0
matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts View File

@@ -113,6 +113,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
if (modalStatus === ModalStatus.Submitted) {
modalRef.dismiss();
this.getContactData();
}
});
}


+ 7
- 1
matsen-tool/src/app/contacts/new-contact/new-contact.component.html View File

@@ -1,5 +1,5 @@
<h2>Neuer Kontakt</h2>
<div>
<div class="spt-form">
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="firstName" class="form-label">Vorname:</label>
@@ -45,6 +45,12 @@
<input type="file" class="form-control" id="image" (change)="onFileSelected($event)" accept="image/*" />
</div>

<div class="mb-3">
<div class="delete-image" (click)="onDeleteImage()">
<img *ngIf="contact.imageUrl !== null" src="{{contact.imageUrl}}" width="40" height="40" />
</div>
</div>

<button type="submit" class="btn btn-primary" [disabled]="contactForm.invalid">Abschicken</button>
</form>
</div>


+ 38
- 10
matsen-tool/src/app/contacts/new-contact/new-contact.component.ts View File

@@ -6,6 +6,8 @@ import {Subscription} from "rxjs";
import {ModalContent} from "@app/_interfaces/modalContent";
import {ModalStatus} from "@app/_helpers/modal.states";
import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
import {TranslateService} from "@ngx-translate/core";
import {ApiConverter} from "@app/_helpers/api.converter";


@Component({
@@ -25,7 +27,8 @@ export class NewContactComponent implements ModalContent, OnInit {

constructor(
private contactService: ContactService,
private mediaService: MediaService
private mediaService: MediaService,
private translateService: TranslateService
) {
this.contactForm = contactForm;
this.selectedImage = null;
@@ -57,16 +60,29 @@ export class NewContactComponent implements ModalContent, OnInit {

// Submit all values of the form to the backend
submitForm() {
console.log(this.contactForm.value as ContactJsonld);
if (this.contactForm.valid) {
this.contactSub = this.contactService.contactsPost(
this.contactForm.value as ContactJsonld
).subscribe(
data => {
this.contactForm.reset();
this.submit.emit(ModalStatus.Submitted);
}
);
if (this.contact.id === null || this.contact.id === undefined) {
// Create new contact
this.contactSub = this.contactService.contactsPost(
this.contactForm.value as ContactJsonld
).subscribe(
data => {
this.contactForm.reset();
this.submit.emit(ModalStatus.Submitted);
}
);
} else {
// Edit contact
this.contactSub = this.contactService.contactsIdPatch(
ApiConverter.extractId(this.contact.id),
this.contactForm.value as ContactJsonld
).subscribe(
data => {
this.contactForm.reset();
this.submit.emit(ModalStatus.Submitted);
}
);
}
}
}

@@ -77,4 +93,16 @@ export class NewContactComponent implements ModalContent, OnInit {
this.selectedImage = file;
}
}

onDeleteImage() {
let confirmMessage = "";
this.translateService.get('system.delete-image').subscribe((translation: string) => {
confirmMessage = translation;
});
const userConfirmed = window.confirm(confirmMessage);
if (userConfirmed) {
this.contactForm.patchValue({"image": null});
this.contactForm.patchValue({"imageUrl": null});
}
}
}

+ 40
- 40
matsen-tool/src/app/partners/partners-detail/partners-detail.component.html View File

@@ -127,12 +127,12 @@
</div>
</div>
</div>
<mat-paginator class="mb-4" [length]="tasksLength"
(page)="tasksHandlePageEvent($event)"
[pageSize]="tasksPageSize"
[pageIndex]="tasksPageIndex"
showFirstLastButtons>
</mat-paginator>
<!-- <mat-paginator class="mb-4" [length]="tasksLength"-->
<!-- (page)="tasksHandlePageEvent($event)"-->
<!-- [pageSize]="tasksPageSize"-->
<!-- [pageIndex]="tasksPageIndex"-->
<!-- showFirstLastButtons>-->
<!-- </mat-paginator>-->
</div>

<div class="posts">
@@ -140,39 +140,39 @@
<h2>Notizen</h2>
<button (click)="openModalNewPosting()">Neue Notiz</button>
</div>
<div class="post mb-3" *ngFor="let post of posts">
<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 class="card ms-5" *ngFor="let comment of post.comments">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ comment.createdAt | date:'dd.MM.YYYY hh:mm' }}</p>
<p>{{ comment.ownerName }}</p>
</div>
<div>
<p>{{ comment.message }}</p>
</div>
</div>
</div>
<!-- <div class="post mb-3" *ngFor="let post of posts">-->
<!-- <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 class="card ms-5" *ngFor="let comment of post.comments">-->
<!-- <div class="card-body">-->
<!-- <div class="d-flex justify-content-between align-items-center">-->
<!-- <p>{{ comment.createdAt | date:'dd.MM.YYYY hh:mm' }}</p>-->
<!-- <p>{{ comment.ownerName }}</p>-->
<!-- </div>-->
<!-- <div>-->
<!-- <p>{{ comment.message }}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->

<div class="d-flex justify-content-end">
<a routerLink="#" class="badge bg-secondary">Kommentieren</a>
</div>
</div>
<mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"
showFirstLastButtons>
</mat-paginator>
<!-- <div class="d-flex justify-content-end">-->
<!-- <a routerLink="#" class="badge bg-secondary">Kommentieren</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- <mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"-->
<!-- (page)="postsHandlePageEvent($event)"-->
<!-- [pageSize]="postsPageSize"-->
<!-- [pageIndex]="postsPageIndex"-->
<!-- showFirstLastButtons>-->
<!-- </mat-paginator>-->
</div>

+ 56
- 54
matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts View File

@@ -20,8 +20,8 @@ import {ModalStatus} from "@app/_helpers/modal.states";
})
export class PartnersDetailComponent implements OnInit, AfterViewInit {
@ViewChild(MatPaginator) contactsPaginator: MatPaginator;
@ViewChild(MatPaginator) tasksPaginator: MatPaginator;
@ViewChild(MatPaginator) postsPaginator: MatPaginator;
// @ViewChild(MatPaginator) tasksPaginator: MatPaginator;
// @ViewChild(MatPaginator) postsPaginator: MatPaginator;

protected readonly environment = environment;
protected id: string;
@@ -37,19 +37,19 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
protected contactsPageSize: number;
protected contactsPageIndex: number;

protected tasksDataSource;
protected tasksLength: number;
protected tasksPageEvent: PageEvent;
protected tasksPageSize: number;
protected tasksPageIndex: number;
protected postsSub: Subscription;
protected posts: Array<PostJsonld>;
protected postsDataSource;
protected postsLength: number;
protected postsPageEvent: PageEvent;
protected postsPageSize: number;
protected postsPageIndex: number;
// protected tasksDataSource;
// protected tasksLength: number;
// protected tasksPageEvent: PageEvent;
// protected tasksPageSize: number;
// protected tasksPageIndex: number;
//
// protected postsSub: Subscription;
// protected posts: Array<PostJsonld>;
// protected postsDataSource;
// protected postsLength: number;
// protected postsPageEvent: PageEvent;
// protected postsPageSize: number;
// protected postsPageIndex: number;

protected readonly ModalComponent = ModalComponent;

@@ -75,22 +75,22 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
this.contactsPageIndex = 0;

// TODO: Change Jsonld
this.tasksPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
this.tasksDataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
this.tasksLength = 0;
this.tasksPageEvent = new PageEvent();
this.tasksPageSize = 10;
this.tasksPageIndex = 0;
// this.tasksPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
// this.tasksDataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
// this.tasksLength = 0;
// this.tasksPageEvent = new PageEvent();
// this.tasksPageSize = 10;
// this.tasksPageIndex = 0;

// 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.postsLength = 0;
this.postsPageEvent = new PageEvent();
this.postsPageSize = 30;
this.postsPageIndex = 0;
// this.postsSub = new Subscription();
// this.posts = [];
// this.postsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
// this.postsDataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
// this.postsLength = 0;
// this.postsPageEvent = new PageEvent();
// this.postsPageSize = 30;
// this.postsPageIndex = 0;
}

ngOnInit() {
@@ -104,8 +104,8 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {

ngAfterViewInit() {
this.contactsDataSource.paginator = this.contactsPaginator;
this.tasksDataSource.paginator = this.tasksPaginator;
this.postsDataSource.paginator = this.postsPaginator;
// this.tasksDataSource.paginator = this.tasksPaginator;
// this.postsDataSource.paginator = this.postsPaginator;
}

getPartnerData() {
@@ -121,29 +121,31 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
getContactsData() {
this.contactsSub = this.contactService.contactsGetCollection(
this.contactsPageIndex + 1,
6,
this.contactsPageSize,
this.id
).subscribe(
data => {
this.contacts = data["hydra:member"];
this.contactsLength = Number(data["hydra:totalItems"]);
this.contactsPaginator.length = this.contactsLength;
if (this.contactsPaginator !== undefined) {
this.contactsPaginator.length = this.contactsLength;
}
}
);
}

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

contactsHandlePageEvent(e: PageEvent) {
@@ -155,24 +157,23 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
}

tasksHandlePageEvent(e: PageEvent) {
this.tasksPageEvent = e;
this.tasksLength = e.length;
this.tasksPageIndex = e.pageIndex.valueOf();
this.tasksPageSize = e.pageSize.valueOf();
// this.tasksPageEvent = e;
// this.tasksLength = e.length;
// this.tasksPageIndex = e.pageIndex.valueOf();
// this.tasksPageSize = e.pageSize.valueOf();
// this.getData();
}

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

navigateToContactDetails(element: any) {
const contact: ContactJsonld = element as ContactJsonld;
console.log(ApiConverter.extractId(contact.id));
this.router.navigate(['/contacts', ApiConverter.extractId(contact.id)]);
}

@@ -184,6 +185,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
if (modalStatus === ModalStatus.Submitted) {
modalRef.dismiss();
this.getContactsData();
}
});
}


+ 4
- 0
matsen-tool/src/assets/i18n/de.json View File

@@ -1,4 +1,8 @@
{
"system":
{
"delete-image": "Möchten Sie das Bild wirklich löschen?"
},
"basic":
{
"logout": "Logout",


+ 15
- 0
matsen-tool/src/styles.scss View File

@@ -69,3 +69,18 @@ img {
width: auto;
height: auto;
}

.bg-primary {
background: #f2f2f2;
}

.spt-form {
.delete-image {
width: 40px;
height: 40px;
img {
width: 100%;
height: auto;
}
}
}

Write Preview
Loading…
Cancel
Save