new / edit postings

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

@@ -39,7 +39,6 @@ export class NewContactComponent implements ModalContent, OnInit {
 
     ngOnInit(): void {
         this.contactForm = FormGroupInitializer.initFormGroup(this.contactForm, this.contact);
-        console.log(this.contactForm);
     }
 
     // On submit form: Check if image is set

matsen-tool/src/app/home/home.component.ts

@@ -10,7 +10,7 @@ import {PostJsonld, PostService, UserJsonld, UserService} from "@app/core/api/v1
     styleUrl: 'home.component.scss'
 })
 export class HomeComponent implements OnInit {
-    user: User | null;
+    protected user: User | null;
     protected postSub: Subscription;
     protected posts: Array<PostJsonld>;
 

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

@@ -140,39 +140,42 @@
         <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>
+                <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>
+        <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"
+                   [pageSizeOptions]="[10,20,30]"
+                   [length]="postsLength"
+                   (page)="postsHandlePageEvent($event)"
+                   [pageSize]="postsPageSize"
+                   [pageIndex]="postsPageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
 </div>

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

@@ -12,6 +12,8 @@ import {MatTableDataSource} from "@angular/material/table";
 import {NewPostingComponent} from "@app/postings/new-posting/new-posting.component";
 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";
 
 @Component({
     selector: 'app-partners-detail',
@@ -21,7 +23,9 @@ 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) postsPaginator: MatPaginator;
+
+    protected user: User | null;
 
     protected readonly environment = environment;
     protected id: string;
@@ -42,19 +46,20 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     // 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 postsSub: Subscription;
+    protected posts: Array<PostJsonld>;
+    protected postsDataSource;
+    protected postsLength: number;
+    protected postsPageEvent: PageEvent;
+    protected postsPageSize: number;
+    protected postsPageIndex: number;
 
     protected readonly ModalComponent = ModalComponent;
 
     constructor(
         private router: Router,
+        private accountService: AccountService,
         private modalService: NgbModal,
         private route: ActivatedRoute,
         private partnerService: PartnerService,
@@ -65,6 +70,8 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         this.partnerDetailSub = new Subscription();
         this.partner = {} as PartnerJsonld;
 
+        this.user = this.accountService.userValue;
+
         this.contactsSub = new Subscription();
         this.contacts = [];
         this.contactsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
@@ -82,15 +89,14 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         // 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<PostJsonld>(this.posts);
+        this.postsLength = 0;
+        this.postsPageEvent = new PageEvent();
+        this.postsPageSize = 10;
+        this.postsPageIndex = 0;
     }
 
     ngOnInit() {
@@ -105,7 +111,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     ngAfterViewInit() {
         this.contactsDataSource.paginator = this.contactsPaginator;
         // this.tasksDataSource.paginator = this.tasksPaginator;
-        // this.postsDataSource.paginator = this.postsPaginator;
+        this.postsDataSource.paginator = this.postsPaginator;
     }
 
     getPartnerData() {
@@ -135,17 +141,17 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     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,
+            this.postsPageSize,
+            this.id
+        ).subscribe(
+            data => {
+                this.posts = data["hydra:member"];
+                this.postsLength = Number(data["hydra:totalItems"]);
+                // this.postsPaginator.length = this.postsLength;
+            }
+        );
     }
 
     contactsHandlePageEvent(e: PageEvent) {
@@ -165,11 +171,11 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     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) {
@@ -178,23 +184,40 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewContact() {
-        const modalRef = this.modalService.open(NewContactComponent);
+        const modalRefContact = this.modalService.open(NewContactComponent);
         let contact: ContactJsonld = {} as ContactJsonld;
         contact.partner = this.partner.id ?? null;
-        modalRef.componentInstance.contact = contact;
-        modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+        modalRefContact.componentInstance.contact = contact;
+        modalRefContact.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
-                modalRef.dismiss();
+                modalRefContact.dismiss();
                 this.getContactsData();
             }
         });
     }
 
     openModalNewPosting() {
-        // TODO
-        const modalRef = this.modalService.open(ModalComponent);
-        modalRef.componentInstance.dynamicComponent = NewPostingComponent;
+        const modalRefPosting = this.modalService.open(NewPostingComponent);
+        let posting: PostJsonld = {} as PostJsonld;
+        posting.partner = this.partner.id ?? null;
+        modalRefPosting.componentInstance.posting = posting;
+        modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefPosting.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();
+            }
+        });
     }
 
     openModalNewTask() {

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

@@ -1 +1,23 @@
-<p>new-posting works!</p>
+<h2>Neue Notiz</h2>
+<div class="spt-form">
+    <form [formGroup]="postForm" (ngSubmit)="onSubmit()">
+        <div class="mb-3">
+            <label for="headline" class="form-label">Überschrift:</label>
+            <input type="text" class="form-control" id="headline" formControlName="headline" />
+            <div class="form-text" *ngIf="postForm.get('headline')?.invalid && postForm.get('headline')?.touched">
+                Überschrift ist erforderlich.
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label for="message" class="form-label">Nachricht:</label>
+            <input type="text" class="form-control" id="message" formControlName="message" />
+            <div class="form-text" *ngIf="postForm.get('message')?.invalid && postForm.get('message')?.touched">
+                Nachricht ist erforderlich.
+            </div>
+        </div>
+
+        <button type="submit" class="btn btn-primary" [disabled]="postForm.invalid">Abschicken</button>
+    </form>
+</div>
+

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

@@ -1,10 +1,60 @@
-import { Component } from '@angular/core';
+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 {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
+import {ApiConverter} from "@app/_helpers/api.converter";
+import {Subscription} from "rxjs";
 
 @Component({
-  selector: 'app-new-posting',
-  templateUrl: './new-posting.component.html',
-  styleUrl: './new-posting.component.scss'
+    selector: 'app-new-posting',
+    templateUrl: './new-posting.component.html',
+    styleUrl: './new-posting.component.scss'
 })
-export class NewPostingComponent {
+export class NewPostingComponent implements OnInit {
+    @Input() public posting!: PostJsonld;
+    @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
 
+    protected postForm: FormGroup;
+    protected postSub: Subscription;
+
+    constructor(
+        private postService: PostService
+    ) {
+        this.postForm = postForm;
+        this.postSub = new Subscription();
+    }
+
+    ngOnInit(): void {
+        this.postForm = FormGroupInitializer.initFormGroup(this.postForm, this.posting);
+        console.log(this.postForm);
+    }
+
+    onSubmit() {
+        if (this.postForm.valid) {
+            if (this.posting.id === null || this.posting.id === undefined) {
+                // Create new post
+                this.postSub = this.postService.postsPost(
+                    this.postForm.value as PostJsonld
+                ).subscribe(
+                    data => {
+                        this.postForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            } else {
+                // Edit post
+                this.postSub = this.postService.postsIdPatch(
+                    ApiConverter.extractId(this.posting.id),
+                    this.postForm.value as PostJsonld
+                ).subscribe(
+                    data => {
+                        this.postForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            }
+        }
+    }
 }