comments on partners and contacts

matsen-tool/src/app/app.module.ts

@@ -37,6 +37,7 @@ import { NewTaskComponent } from './tasks/new-task/new-task.component';
 import { NewPartnerComponent } from './partners/new-partner/new-partner.component';
 import { NewDocumentComponent } from './documents/new-document/new-document.component';
 import { NewProductComponent } from './products/new-product/new-product.component';
+import { NewCommentComponent } from './postings/new-comment/new-comment.component';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -94,7 +95,8 @@ export function HttpLoaderFactory(http: HttpClient) {
         NewTaskComponent,
         NewPartnerComponent,
         NewDocumentComponent,
-        NewProductComponent
+        NewProductComponent,
+        NewCommentComponent
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},

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

@@ -27,48 +27,40 @@
         <h2>Notizen</h2>
         <button (click)="openModalNewPosting()">Neue Notiz</button>
     </div>
-    <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 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>
-            <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>
+                    <h3>{{ post.headline }}</h3>
+                    <p>{{ post.message }}</p>
                 </div>
+                <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit" (click)="openModalEditPosting(post)"></span>
             </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 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>
+                <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
             </div>
-            <div class="d-flex justify-content-end">
-                <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
-            </div>
+        </div>
+
+        <div class="d-flex justify-content-end">
+            <span class="badge bg-secondary" (click)="openModalNewComment(post)">Kommentieren</span>
         </div>
     </div>
-    <mat-paginator *ngIf="posts.length > 0" class="mb-4" [length]="postsLength"
+    <mat-paginator *ngIf="posts.length > 0" class="mb-4"
+                   [pageSizeOptions]="[10,20,30]"
+                   [length]="postsLength"
                    (page)="postsHandlePageEvent($event)"
                    [pageSize]="postsPageSize"
                    [pageIndex]="postsPageIndex"

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 {environment} from "@environments/environment";
-import {ContactJsonld, ContactService, PartnerJsonld, PostJsonld, PostService} from "@app/core/api/v1";
+import {CommentJsonld, ContactJsonld, ContactService, PartnerJsonld, PostJsonld, PostService} from "@app/core/api/v1";
 import {Subscription} from "rxjs";
 import {ActivatedRoute} from "@angular/router";
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
@@ -10,6 +10,9 @@ import {ModalComponent} from "@app/_components/modal/modal.component";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {NewContactComponent} from "@app/contacts/new-contact/new-contact.component";
 import {ModalStatus} from "@app/_helpers/modal.states";
+import {User} from "@app/_models";
+import {AccountService} from "@app/_services";
+import {NewCommentComponent} from "@app/postings/new-comment/new-comment.component";
 
 @Component({
     selector: 'app-contacts-detail',
@@ -19,6 +22,8 @@ import {ModalStatus} from "@app/_helpers/modal.states";
 export class ContactsDetailComponent implements OnInit, AfterViewInit {
     @ViewChild(MatPaginator) postsPaginator: MatPaginator;
 
+    protected user: User | null;
+
     protected readonly environment = environment;
     protected contact: ContactJsonld;
     protected id: string;
@@ -34,23 +39,25 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
 
     constructor(
         private contactService: ContactService,
+        private accountService: AccountService,
         private route: ActivatedRoute,
         private postService: PostService,
         private modalService: NgbModal
     ) {
+        this.user = this.accountService.userValue;
+
         this.id = "";
         this.contact = {} as ContactJsonld;
 
         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<PostJsonld>(this.posts);
         this.postsLength = 0;
         this.postsPageEvent = new PageEvent();
-        this.postsPageSize = 30;
+        this.postsPageSize = 10;
         this.postsPageIndex = 0;
     }
 
@@ -59,6 +66,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
             this.id = params['id'];
         });
         this.getContactData();
+        this.getPostsData();
+        console.log(this.posts);
     }
 
     ngAfterViewInit() {
@@ -80,16 +89,14 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     getPostsData() {
         this.postsSub = this.postService.postsGetCollection(
             this.postsPageIndex + 1,
-            10,
-            undefined,
-            undefined,
+            this.postsPageSize,
+            this.contact.partner + '',
+            [],
             this.id
         ).subscribe(
             data => {
-                console.log(data);
                 this.posts = data["hydra:member"];
                 this.postsLength = Number(data["hydra:totalItems"]);
-                this.postsPaginator.length = this.postsLength;
             }
         );
     }
@@ -103,8 +110,53 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewPosting() {
-        const modalRef = this.modalService.open(ModalComponent);
-        modalRef.componentInstance.dynamicComponent = NewPostingComponent;
+        const modalRefPosting = this.modalService.open(NewPostingComponent);
+        let posting: PostJsonld = {} as PostJsonld;
+        posting.contact = this.contact.id ?? null;
+        posting.partner = this.contact.partner ?? null;
+        modalRefPosting.componentInstance.posting = posting;
+        modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefPosting.dismiss();
+                this.getPostsData();
+            }
+        });
+    }
+
+    openModalNewComment(post: PostJsonld) {
+        const modalRefComment = this.modalService.open(NewCommentComponent);
+        let comment: CommentJsonld = {} as CommentJsonld;
+        comment.post = post.id ?? null;
+        modalRefComment.componentInstance.comment = comment;
+        modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefComment.dismiss();
+                this.getPostsData();
+            }
+        });
+    }
+
+    openModalEditPosting(post: PostJsonld) {
+        const modalRefPostingEdit = this.modalService.open(NewPostingComponent);
+        modalRefPostingEdit.componentInstance.posting = post;
+        modalRefPostingEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefPostingEdit.dismiss();
+                this.getPostsData();
+            }
+        });
+    }
+
+    openModalEditComment(comment: CommentJsonld) {
+        console.log(comment);
+        const modalRefComment = this.modalService.open(NewCommentComponent);
+        modalRefComment.componentInstance.comment = comment;
+        modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefComment.dismiss();
+                this.getPostsData();
+            }
+        });
     }
 
     openModalEditContact() {

matsen-tool/src/app/layout/two-column/two-column.component.html

@@ -46,7 +46,9 @@
         </ul>
     </div>
     <div class="col-10">
-        <button (click)="goBack()">Zurück</button>
-        <router-outlet></router-outlet>
+        <div class="pe-3">
+            <button (click)="goBack()">Zurück</button>
+            <router-outlet></router-outlet>
+        </div>
     </div>
 </div>

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

@@ -157,17 +157,18 @@
         <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.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
                     <p>{{ comment.ownerName }}</p>
                 </div>
                 <div>
                     <p>{{ comment.message }}</p>
                 </div>
+                <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
             </div>
         </div>
 
         <div class="d-flex justify-content-end">
-            <a routerLink="#" class="badge bg-secondary">Kommentieren</a>
+            <span class="badge bg-secondary" (click)="openModalNewComment(post)">Kommentieren</span>
         </div>
     </div>
     <mat-paginator *ngIf="posts.length > 0" class="mb-4"

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

@@ -3,7 +3,15 @@ import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 import {ModalComponent} from "@app/_components/modal/modal.component";
 import {NewContactComponent} from "@app/contacts/new-contact/new-contact.component";
 import {ActivatedRoute, Router} from "@angular/router";
-import {ContactJsonld, ContactService, PartnerJsonld, PartnerService, PostJsonld, PostService} from "@app/core/api/v1";
+import {
+    CommentJsonld,
+    ContactJsonld,
+    ContactService,
+    PartnerJsonld,
+    PartnerService,
+    PostJsonld,
+    PostService
+} from "@app/core/api/v1";
 import {Subscription} from "rxjs";
 import {environment} from "@environments/environment";
 import {ApiConverter} from "@app/_helpers/api.converter";
@@ -14,6 +22,7 @@ import {NewTaskComponent} from "@app/tasks/new-task/new-task.component";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {AccountService} from "@app/_services";
 import {User} from "@app/_models";
+import {NewCommentComponent} from "@app/postings/new-comment/new-comment.component";
 
 @Component({
     selector: 'app-partners-detail',
@@ -149,7 +158,6 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
             data => {
                 this.posts = data["hydra:member"];
                 this.postsLength = Number(data["hydra:totalItems"]);
-                // this.postsPaginator.length = this.postsLength;
             }
         );
     }
@@ -209,6 +217,19 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         });
     }
 
+    openModalNewComment(post: PostJsonld) {
+        const modalRefComment = this.modalService.open(NewCommentComponent);
+        let comment: CommentJsonld = {} as CommentJsonld;
+        comment.post = post.id ?? null;
+        modalRefComment.componentInstance.comment = comment;
+        modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefComment.dismiss();
+                this.getPostsData();
+            }
+        });
+    }
+
     openModalEditPosting(post: PostJsonld) {
         const modalRefPostingEdit = this.modalService.open(NewPostingComponent);
         modalRefPostingEdit.componentInstance.posting = post;
@@ -220,6 +241,18 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         });
     }
 
+    openModalEditComment(comment: CommentJsonld) {
+        console.log(comment);
+        const modalRefComment = this.modalService.open(NewCommentComponent);
+        modalRefComment.componentInstance.comment = comment;
+        modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefComment.dismiss();
+                this.getPostsData();
+            }
+        });
+    }
+
     openModalNewTask() {
         // TODO
         const modalRef = this.modalService.open(ModalComponent);

matsen-tool/src/app/postings/new-comment/new-comment.component.html

@@ -0,0 +1,15 @@
+<h2>Neuer Kommentar</h2>
+<div class="spt-form">
+    <form [formGroup]="commentForm" (ngSubmit)="onSubmit()">
+        <div class="mb-3">
+            <label for="message" class="form-label">Kommentar:</label>
+            <input type="text" class="form-control" id="message" formControlName="message" />
+            <div class="form-text" *ngIf="commentForm.get('message')?.invalid && commentForm.get('message')?.touched">
+                Kommentar ist erforderlich.
+            </div>
+        </div>
+
+        <button type="submit" class="btn btn-primary" [disabled]="commentForm.invalid">Abschicken</button>
+    </form>
+</div>
+

matsen-tool/src/app/postings/new-comment/new-comment.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewCommentComponent } from './new-comment.component';
+
+describe('NewCommentComponent', () => {
+  let component: NewCommentComponent;
+  let fixture: ComponentFixture<NewCommentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewCommentComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewCommentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

matsen-tool/src/app/postings/new-comment/new-comment.component.ts

@@ -0,0 +1,60 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ModalStatus} from "@app/_helpers/modal.states";
+import {CommentJsonld, CommentService, PostJsonld, PostService} from "@app/core/api/v1";
+import {Subscription} from "rxjs";
+import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
+import {FormGroup} from "@angular/forms";
+import {commentForm} from "@app/_forms/apiForms";
+import {ApiConverter} from "@app/_helpers/api.converter";
+
+@Component({
+    selector: 'app-new-comment',
+    templateUrl: './new-comment.component.html',
+    styleUrl: './new-comment.component.scss'
+})
+export class NewCommentComponent implements OnInit {
+    @Input() public comment!: CommentJsonld;
+    @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
+
+    protected commentForm: FormGroup;
+    protected commentSub: Subscription;
+
+    constructor(
+        private commentService: CommentService
+    ) {
+        this.commentForm = commentForm;
+        this.commentSub = new Subscription();
+    }
+
+    ngOnInit(): void {
+        this.commentForm = FormGroupInitializer.initFormGroup(this.commentForm, this.comment);
+        console.log(this.comment);
+    }
+
+    onSubmit() {
+        if (this.commentForm.valid) {
+            if (this.comment.id === null || this.comment.id === undefined) {
+                // Create new post
+                this.commentSub = this.commentService.commentsPost(
+                    this.commentForm.value as PostJsonld
+                ).subscribe(
+                    data => {
+                        this.commentForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            } else {
+                // Edit post
+                this.commentSub = this.commentService.commentsIdPatch(
+                    ApiConverter.extractId(this.comment.id),
+                    this.commentForm.value as PostJsonld
+                ).subscribe(
+                    data => {
+                        this.commentForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            }
+        }
+    }
+}

matsen-tool/src/app/postings/new-posting/new-posting.component.ts

@@ -2,7 +2,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
 import {postForm} from "@app/_forms/apiForms";
-import {ContactJsonld, PostJsonld, PostService} from "@app/core/api/v1";
+import {PostJsonld, PostService} from "@app/core/api/v1";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {Subscription} from "rxjs";