partner: new and edit / cleanup

matsen-tool/src/app/_components/modal/modal.component.ts

@@ -1,6 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
-import {ModalContent} from "@app/_interfaces/modalContent";
 
 @Component({
     selector: 'app-modal',

matsen-tool/src/app/_interfaces/modalContent.ts

@@ -1,3 +0,0 @@
-export interface ModalContent {
-    contact: any;
-}

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

@@ -71,7 +71,6 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         });
         this.getContactData();
         this.getPostsData();
-        console.log(this.contact.imageUrl);
     }
 
     ngAfterViewInit() {
@@ -85,7 +84,6 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         ).subscribe(
             data => {
                 this.contact = data;
-                console.log(this.contact);
             }
         );
     }
@@ -152,7 +150,6 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditComment(comment: CommentJsonld) {
-        console.log(comment);
         const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
         modalRefComment.componentInstance.comment = comment;
         modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {

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

@@ -1,9 +1,8 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FormGroup} from "@angular/forms";
 import {contactForm} from "@app/_forms/apiForms";
-import {ContactJsonld, ContactService, MediaService, PartnerJsonld} from "@app/core/api/v1";
+import {ContactJsonld, ContactService, MediaService} from "@app/core/api/v1";
 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";
@@ -15,7 +14,7 @@ import {ApiConverter} from "@app/_helpers/api.converter";
     templateUrl: './new-contact.component.html',
     styleUrl: './new-contact.component.scss'
 })
-export class NewContactComponent implements ModalContent, OnInit {
+export class NewContactComponent implements OnInit {
 
     @Input() public contact!: ContactJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();

matsen-tool/src/app/partners/new-partner/new-partner.component.html

@@ -1 +1,56 @@
-<p>new-partner works!</p>
+<h2>Neuer Partner</h2>
+<div class="spt-form">
+    <form [formGroup]="partnerForm" (ngSubmit)="onSubmit()">
+        <div class="mb-3">
+            <label for="name" class="form-label">Name:</label>
+            <input type="text" class="form-control" id="name" formControlName="name" />
+            <div class="form-text" *ngIf="partnerForm.get('name')?.invalid && partnerForm.get('name')?.touched">
+                Name ist erforderlich.
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label for="street" class="form-label">Straße:</label>
+            <input type="text" class="form-control" id="street" formControlName="street" />
+        </div>
+
+        <div class="mb-3">
+            <label for="streetNo" class="form-label">Hausnummer:</label>
+            <input type="text" class="form-control" id="streetNo" formControlName="streetNo" />
+        </div>
+
+        <div class="mb-3">
+            <label for="zip" class="form-label">PLZ:</label>
+            <input type="text" class="form-control" id="zip" formControlName="zip" />
+        </div>
+
+        <div class="mb-3">
+            <label for="city" class="form-label">Stadt:</label>
+            <input type="text" class="form-control" id="city" formControlName="city" />
+        </div>
+
+        <div class="mb-3">
+            <label for="country" class="form-label">Land:</label>
+            <input type="text" class="form-control" id="country" formControlName="country" />
+        </div>
+
+        <div class="mb-3">
+            <label for="website" class="form-label">Website:</label>
+            <input type="text" class="form-control" id="website" formControlName="website" />
+        </div>
+
+        <div class="mb-3">
+            <label for="logo" class="form-label">Bild hochladen:</label>
+            <input type="file" class="form-control" id="logo" (change)="onFileSelected($event)" accept="image/*" />
+        </div>
+
+        <div class="mb-3">
+            <div class="delete-image" (click)="onDeleteImage()">
+                <img *ngIf="partner.logoUrl !== null" src="{{partner.logoUrl}}" width="40" height="40" />
+            </div>
+        </div>
+
+        <button type="submit" class="btn btn-primary" [disabled]="partnerForm.invalid">Abschicken</button>
+    </form>
+</div>
+

matsen-tool/src/app/partners/new-partner/new-partner.component.ts

@@ -1,10 +1,104 @@
-import { Component } from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {partnerForm} from "@app/_forms/apiForms";
+import {MediaService, PartnerJsonld, PartnerService} from "@app/core/api/v1";
+import {ModalStatus} from "@app/_helpers/modal.states";
+import {FormGroup} from "@angular/forms";
+import {Subscription} from "rxjs";
+import {TranslateService} from "@ngx-translate/core";
+import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
+import {ApiConverter} from "@app/_helpers/api.converter";
 
 @Component({
-  selector: 'app-new-partner',
-  templateUrl: './new-partner.component.html',
-  styleUrl: './new-partner.component.scss'
+    selector: 'app-new-partner',
+    templateUrl: './new-partner.component.html',
+    styleUrl: './new-partner.component.scss'
 })
-export class NewPartnerComponent {
+export class NewPartnerComponent implements OnInit {
+    @Input() public partner!: PartnerJsonld;
+    @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
 
+    protected partnerForm: FormGroup;
+    protected selectedImage: File | null;
+    protected partnerSub: Subscription;
+    protected mediaSub: Subscription;
+
+    constructor(
+        private partnerService: PartnerService,
+        private mediaService: MediaService,
+        private translateService: TranslateService
+    ) {
+        this.partnerForm = partnerForm;
+        this.selectedImage = null;
+
+        this.partnerSub = new Subscription();
+        this.mediaSub = new Subscription();
+    }
+
+    ngOnInit(): void {
+        this.partnerForm = FormGroupInitializer.initFormGroup(this.partnerForm, this.partner);
+    }
+
+    // On submit form: Check if image is set
+    onSubmit() {
+        if (this.selectedImage !== null) {
+            this.mediaSub = this.mediaService.mediasPost(
+                this.selectedImage
+            ).subscribe(
+                data => {
+                    this.partnerForm.patchValue({"logo": data.id});
+                    this.submitForm();
+                }
+            );
+        } else {
+            this.submitForm();
+        }
+    }
+
+    // Submit all values of the form to the backend
+    submitForm() {
+        if (this.partnerForm.valid) {
+            if (this.partner.id === null || this.partner.id === undefined) {
+                // Create new contact
+                this.partnerSub = this.partnerService.partnersPost(
+                    this.partnerForm.value as PartnerJsonld
+                ).subscribe(
+                    data => {
+                        this.partnerForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            } else {
+                // Edit contact
+                this.partnerSub = this.partnerService.partnersIdPatch(
+                    ApiConverter.extractId(this.partner.id),
+                    this.partnerForm.value as PartnerJsonld
+                ).subscribe(
+                    data => {
+                        this.partnerForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            }
+        }
+    }
+
+    // If file is selected, convert it
+    onFileSelected(event: any) {
+        const file: File = event.target.files[0];
+        if (file) {
+            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.partnerForm.patchValue({"logo": null});
+            this.partnerForm.patchValue({"logoUrl": null});
+        }
+    }
 }

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

@@ -29,6 +29,8 @@
                 <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined" src="{{partner.logoUrl}}" width="247"
                      height="94" alt="{{partner.name}}" title="{{partner.name}}"/>
             </div>
+            <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
+                  (click)="openModalEditPartner()"></span>
         </div>
     </div>
 </div>

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

@@ -23,6 +23,7 @@ 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";
+import {NewPartnerComponent} from "@app/partners/new-partner/new-partner.component";
 
 @Component({
     selector: 'app-partners-detail',
@@ -209,7 +210,6 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewPosting() {
-        console.log(this.modalOptions);
         const modalRefPosting = this.modalService.open(NewPostingComponent, this.modalOptions);
         let posting: PostJsonld = {} as PostJsonld;
         posting.partner = this.partner.id ?? null;
@@ -247,7 +247,6 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditComment(comment: CommentJsonld) {
-        console.log(comment);
         const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
         modalRefComment.componentInstance.comment = comment;
         modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
@@ -263,4 +262,15 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         const modalRef = this.modalService.open(ModalComponent, this.modalOptions);
         modalRef.componentInstance.dynamicComponent = NewTaskComponent;
     }
+
+    openModalEditPartner() {
+        const modalRef = this.modalService.open(NewPartnerComponent, this.modalOptions);
+        modalRef.componentInstance.partner = this.partner;
+        modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRef.dismiss();
+                this.getPartnerData();
+            }
+        });
+    }
 }

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

@@ -3,15 +3,18 @@ import {MatSort, Sort, MatSortModule} from "@angular/material/sort";
 import {MatTableDataSource, MatTableModule} from "@angular/material/table";
 import {ActivatedRoute, Router, RouterLink, RouterLinkActive} from "@angular/router";
 import {Subscription} from "rxjs";
-import {PartnerJsonld, PartnerService} from "@app/core/api/v1";
+import {ContactJsonld, PartnerJsonld, PartnerService} from "@app/core/api/v1";
 import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {NgIf} from "@angular/common";
 import {ModalComponent} from "@app/_components/modal/modal.component";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {NewPartnerComponent} from "@app/partners/new-partner/new-partner.component";
 import {TranslateModule, TranslateService} from "@ngx-translate/core";
+import {NewContactComponent} from "@app/contacts/new-contact/new-contact.component";
+import {ModalStatus} from "@app/_helpers/modal.states";
+import TypeEnum = PartnerJsonld.TypeEnum;
 
 @Component({
     selector: 'app-partners',
@@ -42,6 +45,10 @@ export class PartnersComponent implements OnInit, AfterViewInit {
     protected pageSize: number;
     protected pageIndex: number;
 
+    protected modalOptions: NgbModalOptions = {
+        centered: true
+    };
+
     constructor(
         private route: ActivatedRoute,
         private partnerService: PartnerService,
@@ -100,7 +107,6 @@ export class PartnersComponent implements OnInit, AfterViewInit {
             data => {
                 this.partners = data["hydra:member"];
                 this.dataSource = new MatTableDataSource<PartnerJsonld>(this.partners);
-                console.log(data);
                 this.length = Number(data["hydra:totalItems"]);
                 this.paginator.length = this.length;
             }
@@ -147,12 +153,19 @@ export class PartnersComponent implements OnInit, AfterViewInit {
 
     navigateToPartnerDetails(element: any) {
         const partner: PartnerJsonld = element as PartnerJsonld;
-        // console.log(ApiConverter.extractId(partner.id));
         this.router.navigate(['/' + partner.type, ApiConverter.extractId(partner.id)]);
     }
 
     openModalNewPartner() {
-        const modalRef = this.modalService.open(ModalComponent);
-        modalRef.componentInstance.dynamicComponent = NewPartnerComponent;
+        const modalRefContact = this.modalService.open(NewPartnerComponent, this.modalOptions);
+        let partner: PartnerJsonld = {} as PartnerJsonld;
+        partner.type = this.dataType as TypeEnum;
+        modalRefContact.componentInstance.partner = partner;
+        modalRefContact.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefContact.dismiss();
+                this.getData();
+            }
+        });
     }
 }

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

@@ -28,7 +28,6 @@ export class NewCommentComponent implements OnInit {
 
     ngOnInit(): void {
         this.commentForm = FormGroupInitializer.initFormGroup(this.commentForm, this.comment);
-        console.log(this.comment);
     }
 
     onSubmit() {

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

@@ -28,7 +28,6 @@ export class NewPostingComponent implements OnInit {
 
     ngOnInit(): void {
         this.postForm = FormGroupInitializer.initFormGroup(this.postForm, this.posting);
-        console.log(this.postForm);
     }
 
     onSubmit() {

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

@@ -51,7 +51,6 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit {
         ).subscribe(
             data => {
                 this.product = data;
-                console.log(this.product);
             }
         );
     }