contacts pagination

matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts

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

matsen-tool/src/app/contacts/new-contact/new-contact.component.html

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

matsen-tool/src/app/contacts/new-contact/new-contact.component.ts

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

matsen-tool/src/app/partners/partners-detail/partners-detail.component.html

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

matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts

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

matsen-tool/src/assets/i18n/de.json

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

matsen-tool/src/styles.scss

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