refactoring edit / new contact

matsen-tool/openapi.yaml

@@ -652,6 +652,31 @@ paths:
           explode: false
           allowReserved: false
       deprecated: false
+    delete:
+      operationId: api_medias_id_delete
+      tags:
+        - Media
+      responses:
+        204:
+          description: 'Media resource deleted'
+        404:
+          description: 'Resource not found'
+      summary: 'Removes the Media resource.'
+      description: 'Removes the Media resource.'
+      parameters:
+        -
+          name: id
+          in: path
+          description: 'MediaObject identifier'
+          required: true
+          deprecated: false
+          allowEmptyValue: false
+          schema:
+            type: string
+          style: simple
+          explode: false
+          allowReserved: false
+      deprecated: false
     parameters: []
   /api/partners:
     get:

matsen-tool/src/app/_helpers/formgroup.initializer.ts

@@ -0,0 +1,12 @@
+import {FormGroup} from "@angular/forms";
+
+export class FormGroupInitializer {
+    public static initFormGroup(formGroup: FormGroup, model: any) {
+        for (const controlName in formGroup.controls) {
+            if (formGroup.controls.hasOwnProperty(controlName)) {
+                formGroup.patchValue({[controlName]: model[controlName] ?? null});
+            }
+        }
+        return formGroup;
+    }
+}

matsen-tool/src/app/_helpers/modal.states.ts

@@ -0,0 +1,4 @@
+export enum ModalStatus {
+    Cancelled = 'Cancelled',
+    Submitted = 'Submitted'
+}

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

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

matsen-tool/src/app/app.component.scss

@@ -1,21 +1,3 @@
 img {
   width: 247px;
 }
-
-::ng-deep {
-  .modal-content {
-    padding: 1rem;
-  }
-  .modal-dialog {
-    &:before {
-      content: "";
-      display: block;
-      background: #fff;
-      width: 30px;
-      height: 30px;
-      position: absolute;
-      right: -30px;
-      top: -30px;
-    }
-  }
-}

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

@@ -1,5 +1,5 @@
 <div class="card">
-    <div class="card-body row">
+    <div class="card-body row pb-5">
         <div class="col-8">
             <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
             <dl>
@@ -18,6 +18,7 @@
                  height="94"
                  alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"/>
         </div>
+        <span class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit" (click)="openModalEditContact()"></span>
     </div>
 </div>
 

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, PostJsonld, PostService} from "@app/core/api/v1";
+import {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";
@@ -8,6 +8,8 @@ import {MatTableDataSource} from "@angular/material/table";
 import {NewPostingComponent} from "@app/postings/new-posting/new-posting.component";
 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";
 
 @Component({
     selector: 'app-contacts-detail',
@@ -70,6 +72,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         ).subscribe(
             data => {
                 this.contact = data;
+                console.log(this.contact);
             }
         );
     }
@@ -103,4 +106,14 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         const modalRef = this.modalService.open(ModalComponent);
         modalRef.componentInstance.dynamicComponent = NewPostingComponent;
     }
+
+    openModalEditContact() {
+        const modalRef = this.modalService.open(NewContactComponent);
+        modalRef.componentInstance.contact = this.contact;
+        modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRef.dismiss();
+            }
+        });
+    }
 }

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

@@ -18,12 +18,12 @@
         </div>
 
         <div class="mb-3">
-            <label for="lastName" class="form-label">Geburtstag:</label>
-            <input type="text" class="form-control" id="birthday" formControlName="birthday" />
+            <label for="birthday" class="form-label">Geburtstag:</label>
+            <input type="date" class="form-control" id="birthday" formControlName="birthday" />
         </div>
 
         <div class="mb-3">
-            <label for="lastName" class="form-label">Position:</label>
+            <label for="position" class="form-label">Position:</label>
             <input type="text" class="form-control" id="position" formControlName="position" />
         </div>
 
@@ -36,7 +36,7 @@
         </div>
 
         <div class="mb-3">
-            <label for="lastName" class="form-label">Telefon:</label>
+            <label for="phone" class="form-label">Telefon:</label>
             <input type="text" class="form-control" id="phone" formControlName="phone" />
         </div>
 

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

@@ -1,9 +1,11 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FormGroup} from "@angular/forms";
 import {contactForm} from "@app/_forms/apiForms";
-import {ContactJsonld, ContactService, PartnerJsonld} from "@app/core/api/v1";
+import {ContactJsonld, ContactService, MediaService, PartnerJsonld} 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";
 
 
 @Component({
@@ -13,49 +15,62 @@ import {ModalContent} from "@app/_interfaces/modalContent";
 })
 export class NewContactComponent implements ModalContent, OnInit {
 
-    @Input() public partner!: PartnerJsonld;
-    @Output() public submit: EventEmitter<any> = new EventEmitter<any>();
+    @Input() public contact!: ContactJsonld;
+    @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
 
     protected contactForm: FormGroup;
     protected selectedImage: File | null;
     protected contactSub: Subscription;
+    protected mediaSub: Subscription;
 
     constructor(
         private contactService: ContactService,
+        private mediaService: MediaService
     ) {
         this.contactForm = contactForm;
         this.selectedImage = null;
 
         this.contactSub = new Subscription();
+        this.mediaSub = new Subscription();
     }
 
     ngOnInit(): void {
-        console.log(this.partner.id);
-        this.contactForm.patchValue({"partner": this.partner});
+        this.contactForm = FormGroupInitializer.initFormGroup(this.contactForm, this.contact);
+        console.log(this.contactForm);
     }
 
+    // On submit form: Check if image is set
     onSubmit() {
-        if (this.contactForm.valid) {
-            // Hier können Sie die Daten senden oder weitere Aktionen durchführen
-            console.log(this.selectedImage);
-            console.log('Formular wurde gesendet:', this.contactForm.value);
-
-            let newContact: ContactJsonld = this.contactForm.value as ContactJsonld;
-            newContact.posts = [];
-
-            // this.submit.emit("HALLO DANIEL");
+        if (this.selectedImage !== null) {
+            this.mediaSub = this.mediaService.mediasPost(
+                this.selectedImage
+            ).subscribe(
+                data => {
+                    this.contactForm.patchValue({"image": data.id});
+                    this.submitForm();
+                }
+            );
+        } else {
+            this.submitForm();
+        }
+    }
 
+    // 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 => {
-                    console.log(data);
-                    this.submit.emit("HALLO DANIEL");
+                    this.contactForm.reset();
+                    this.submit.emit(ModalStatus.Submitted);
                 }
             );
         }
     }
 
+    // If file is selected, convert it
     onFileSelected(event: any) {
         const file: File = event.target.files[0];
         if (file) {

matsen-tool/src/app/core/api/v1/api/media.service.ts

@@ -196,6 +196,77 @@ export class MediaService {
         );
     }
 
+    /**
+     * Removes the Media resource.
+     * Removes the Media resource.
+     * @param id MediaObject identifier
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public mediasIdDelete(id: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
+    public mediasIdDelete(id: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<any>>;
+    public mediasIdDelete(id: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<any>>;
+    public mediasIdDelete(id: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling mediasIdDelete.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (JWT) required
+        localVarCredential = this.configuration.lookupCredential('JWT');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+        let localVarTransferCache: boolean | undefined = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+
+
+        let responseType_: 'text' | 'json' | 'blob' = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            } else {
+                responseType_ = 'blob';
+            }
+        }
+
+        let localVarPath = `/api/medias/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined})}`;
+        return this.httpClient.request<any>('delete', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * Retrieves a Media resource.
      * Retrieves a Media resource.

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

@@ -4,14 +4,14 @@ 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 {Subject, Subscription} from "rxjs";
+import {Subscription} from "rxjs";
 import {environment} from "@environments/environment";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
 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 {NewPartnerComponent} from "@app/partners/new-partner/new-partner.component";
+import {ModalStatus} from "@app/_helpers/modal.states";
 
 @Component({
     selector: 'app-partners-detail',
@@ -37,7 +37,6 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     protected contactsPageSize: number;
     protected contactsPageIndex: number;
 
-    //protected posts: Array<PostJsonld>;
     protected tasksDataSource;
     protected tasksLength: number;
     protected tasksPageEvent: PageEvent;
@@ -94,26 +93,6 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         this.postsPageIndex = 0;
     }
 
-    openModalNewContact() {
-        const modalRef = this.modalService.open(NewContactComponent);
-        modalRef.componentInstance.partner = this.partner;
-        modalRef.componentInstance.submit.subscribe(($e: any) => {
-            console.log($e);
-            this.modalService.dismissAll();
-        });
-    }
-
-    openModalNewPosting() {
-        const modalRef = this.modalService.open(ModalComponent);
-        modalRef.componentInstance.dynamicComponent = NewPostingComponent;
-
-    }
-
-    openModalNewTask() {
-        const modalRef = this.modalService.open(ModalComponent);
-        modalRef.componentInstance.dynamicComponent = NewTaskComponent;
-    }
-
     ngOnInit() {
         this.route.params.subscribe(params => {
             this.id = params['id'];
@@ -196,4 +175,29 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         console.log(ApiConverter.extractId(contact.id));
         this.router.navigate(['/contacts', ApiConverter.extractId(contact.id)]);
     }
+
+    openModalNewContact() {
+        const modalRef = 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) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRef.dismiss();
+            }
+        });
+    }
+
+    openModalNewPosting() {
+        // TODO
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewPostingComponent;
+
+    }
+
+    openModalNewTask() {
+        // TODO
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewTaskComponent;
+    }
 }

matsen-tool/src/styles.scss

@@ -29,20 +29,37 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   .importance {
 
   }
+}
 
-  [data-type="user-tool"] {
-    cursor: pointer;
-    font-size: 20px;
-    @include transition();
+[data-type="user-tool"] {
+  cursor: pointer;
+  font-size: 20px;
+  @include transition();
 
-    &:hover {
-      color: green;
-    }
+  &:hover {
+    color: green;
   }
+}
 
-  [data-action="edit"] {
-    right: 0;
-    bottom: 0;
+[data-action="edit"] {
+  right: 0;
+  bottom: 0;
+  width: auto;
+}
+
+.modal-content {
+  padding: 1rem;
+}
+.modal-dialog {
+  &:before {
+    content: "";
+    display: block;
+    background: #fff;
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    right: -30px;
+    top: -30px;
   }
 }