image delete and upload

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

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

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

@@ -41,12 +41,12 @@
             <input type="text" class="form-control" id="phone" formControlName="phone" />
         </div>
 
-        <div class="mb-3">
+        <div class="mb-3" *ngIf="contactForm.get('imageUrl')?.value === null">
             <label for="image" class="form-label">{{'form.upload-image' | translate}}:</label>
             <input type="file" class="form-control" id="image" (change)="onFileSelected($event)" accept="image/*" />
         </div>
 
-        <div class="mb-3" *ngIf="contact.imageUrl !== undefined">
+        <div class="mb-3" *ngIf="contactForm.get('imageUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteImage()">
                 <img src="{{contact.imageUrl}}" width="40" height="40" />
                 <p class="mb-0 ms-3">{{'system.delete-image' | translate}}</p>

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

@@ -72,7 +72,7 @@ export class DocumentsComponent {
         ).subscribe(
             data => {
                 this.documents = data["hydra:member"];
-                console.log(this.documents);
+                //console.log(this.documents);
                 this.documentsDataSource = new MatTableDataSource<DocumentJsonld>(this.documents);
                 this.documentsLength = Number(data["hydra:totalItems"]);
                 this.documentsPaginator.length = this.documentsLength;
@@ -136,7 +136,7 @@ export class DocumentsComponent {
     openModalEditDocument(document: DocumentJsonld) {
         const modalRefDocument = this.modalService.open(NewDocumentComponent, this.modalOptions);
         modalRefDocument.componentInstance.document = document;
-        console.log(document);
+       // console.log(document);
         modalRefDocument.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
                 modalRefDocument.dismiss();

matsen-tool/src/app/documents/new-document/new-document.component.html

@@ -28,25 +28,18 @@
             <input type="hidden" formControlName="product"/>
         </div>
 
-        <div class="mb-3">
+        <div class="mb-3" *ngIf="documentForm.get('documentUrl')?.value === null">
             <label for="image" class="form-label">{{ 'form.upload-image' | translate }}:</label>
             <input type="file" class="form-control" id="image" (change)="onFileSelected($event)" accept="image/*"/>
         </div>
 
-        <div class="mb-3" *ngIf="document.documentUrl !== undefined">
+        <div class="mb-3" *ngIf="documentForm.get('documentUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteFile()">
                 <p class="mb-0 ms-1">{{ 'system.delete-file' | translate }}</p>
             </div>
         </div>
-        1 - selectedFile:{{selectedFile === null}}<br>
-        2 - documentForm.invalid:{{documentForm.invalid}}<br>
-        3 - document.id:{{document.id !== undefined}}<br>
-        4 - documentObject:{{documentForm.get('documentObject')?.value}}<br>
-<!--        5:{{(selectedFile === null || documentForm.invalid)}}<br>-->
-<!--        5:{{(documentForm.invalid && document.id !== undefined)}}-->
         <button type="submit" class="btn btn-primary"
-                [disabled]="(documentForm.invalid && document.id !== undefined) &&
-                    (documentForm.get('documentObject')?.value === null && selectedFile === null)"
+                [disabled]="this.documentForm.invalid"
         >{{ 'form.send' | translate }}
         </button>
     </form>

matsen-tool/src/app/documents/new-document/new-document.component.ts

@@ -1,7 +1,7 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {
-  DocumentJsonld, DocumentObjectService,
-  DocumentService, MediaObjectService, PartnerJsonld, PartnerService, ProductService
+    DocumentJsonld, DocumentObjectService,
+    DocumentService, MediaObjectService, PartnerJsonld, PartnerService, ProductService
 } from "@app/core/api/v1";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroup} from "@angular/forms";
@@ -13,142 +13,145 @@ import {ApiConverter} from "@app/_helpers/api.converter";
 import {filter, map} from "rxjs/operators";
 
 @Component({
-  selector: 'app-new-document',
-  templateUrl: './new-document.component.html',
-  styleUrl: './new-document.component.scss'
+    selector: 'app-new-document',
+    templateUrl: './new-document.component.html',
+    styleUrl: './new-document.component.scss'
 })
 export class NewDocumentComponent implements OnInit {
-  @Input() public document!: DocumentJsonld;
-  @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
-
-  protected documentForm: FormGroup;
-  protected documentSub: Subscription;
-
-  protected selectedFile: File | null;
-  protected mediaSub: Subscription;
-
-  protected formatter = (apiData: any) => apiData.name;
-
-  protected searchPartners: OperatorFunction<string, readonly { id: any; name: any }[]> = (text$: Observable<string>) =>
-      text$.pipe(
-          debounceTime(200),
-          distinctUntilChanged(),
-          filter((term) => term.length >= 2),
-          switchMap((term) => this.fetchPartners(term)),
-          map((partners) => partners.slice(0, 10)),
-      );
-
-  protected searchProducts: OperatorFunction<string, readonly { id: any; name: any }[]> = (text$: Observable<string>) =>
-      text$.pipe(
-          debounceTime(200),
-          distinctUntilChanged(),
-          filter((term) => term.length >= 2),
-          switchMap((term) => this.fetchProducts(term)),
-          map((products) => products.slice(0, 10)),
-      );
-
-  constructor(
-      private documentService: DocumentService,
-      private documentObjectService: DocumentObjectService,
-      private translateService: TranslateService,
-      private partnerService: PartnerService,
-      private productService: ProductService
-  ) {
-    this.documentForm = documentForm;
-    this.documentSub = new Subscription();
-
-    this.selectedFile = null;
-    this.mediaSub = new Subscription();
-  }
-
-  ngOnInit(): void {
-    this.documentForm = FormGroupInitializer.initFormGroup(this.documentForm, this.document);
-    console.log(this.document);
-    console.log(this.documentForm);
-    if (this.document.documentUrl === undefined) {
-      this.documentForm.patchValue({"documentObject": "-"});
-      console.log(this.documentForm);
+    @Input() public document!: DocumentJsonld;
+    @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
+
+    protected documentForm: FormGroup;
+    protected documentSub: Subscription;
+
+    protected selectedFile: File | null;
+    protected mediaSub: Subscription;
+
+    protected formatter = (apiData: any) => apiData.name;
+
+    constructor(
+        private documentService: DocumentService,
+        private documentObjectService: DocumentObjectService,
+        private translateService: TranslateService,
+        private partnerService: PartnerService,
+        private productService: ProductService
+    ) {
+        this.documentForm = documentForm;
+        this.documentSub = new Subscription();
+
+        this.selectedFile = null;
+        this.mediaSub = new Subscription();
     }
-  }
-
-  protected fetchPartners(term: string): Observable<{ id: any; name: any }[]> {
-    return this.partnerService.partnersGetCollection(1, 50, undefined, undefined, term).pipe(
-        map((response) => response['hydra:member'].map(partner => ({ id: partner.id, name: partner.name }))),
-    );
-  }
-
-  protected fetchProducts(term: string): Observable<{ id: any; name: any }[]> {
-    return this.productService.productsGetCollection(1, 50, term).pipe(
-        map((response) => response['hydra:member'].map(product => ({ id: product.id, name: product.name }))),
-    );
-  }
-
-  protected onAssignedToSelectPartner(selectedItem: any): void {
-    this.documentForm.get('partner')?.setValue(selectedItem.item.id);
-  }
-
-  protected onAssignedToSelectProduct(selectedItem: any): void {
-    this.documentForm.get('product')?.setValue(selectedItem.item.id);
-  }
-
-  onSubmit() {
-    if (this.selectedFile !== null) {
-      this.mediaSub = this.documentObjectService.documentObjectsPost(
-          this.selectedFile
-      ).subscribe(
-          data => {
-            this.documentForm.patchValue({"documentObject": data.id});
-            this.submitForm();
-          }
-      );
+
+    ngOnInit(): void {
+        this.documentForm = FormGroupInitializer.initFormGroup(this.documentForm, this.document);
+        console.log(this.documentForm);
     }
-  }
-
-  submitForm() {
-    if (this.documentForm.valid) {
-      if (this.document.id === null || this.document.id === undefined) {
-        // Create new product
-        this.documentSub = this.documentService.documentsPost(
-            this.documentForm.value as DocumentJsonld
-        ).subscribe(
-            data => {
-              this.documentForm.reset();
-              this.submit.emit(ModalStatus.Submitted);
-            }
+
+    protected searchPartners: OperatorFunction<string, readonly {
+        id: any;
+        name: any
+    }[]> = (text$: Observable<string>) =>
+        text$.pipe(
+            debounceTime(200),
+            distinctUntilChanged(),
+            filter((term) => term.length >= 2),
+            switchMap((term) => this.fetchPartners(term)),
+            map((partners) => partners.slice(0, 10)),
         );
-      } else {
-        // Edit contact
-        this.documentSub = this.documentService.documentsIdPatch(
-            ApiConverter.extractId(this.document.id),
-            this.documentForm.value as DocumentJsonld
-        ).subscribe(
-            data => {
-              this.documentForm.reset();
-              this.submit.emit(ModalStatus.Submitted);
-            }
+
+    protected searchProducts: OperatorFunction<string, readonly {
+        id: any;
+        name: any
+    }[]> = (text$: Observable<string>) =>
+        text$.pipe(
+            debounceTime(200),
+            distinctUntilChanged(),
+            filter((term) => term.length >= 2),
+            switchMap((term) => this.fetchProducts(term)),
+            map((products) => products.slice(0, 10)),
+        );
+
+    protected fetchPartners(term: string): Observable<{ id: any; name: any }[]> {
+        return this.partnerService.partnersGetCollection(1, 50, undefined, undefined, term).pipe(
+            map((response) => response['hydra:member'].map(partner => ({id: partner.id, name: partner.name}))),
+        );
+    }
+
+    protected fetchProducts(term: string): Observable<{ id: any; name: any }[]> {
+        return this.productService.productsGetCollection(1, 50, term).pipe(
+            map((response) => response['hydra:member'].map(product => ({id: product.id, name: product.name}))),
         );
-      }
     }
-  }
-
-  onFileSelected(event: any) {
-    console.log(this.documentForm);
-    const file: File = event.target.files[0];
-    if (file) {
-      this.selectedFile = file;
-      console.log(this.selectedFile);
+
+    protected onAssignedToSelectPartner(selectedItem: any): void {
+        this.documentForm.get('partner')?.setValue(selectedItem.item.id);
+    }
+
+    protected onAssignedToSelectProduct(selectedItem: any): void {
+        this.documentForm.get('product')?.setValue(selectedItem.item.id);
+    }
+
+    onSubmit() {
+        if (this.selectedFile !== null) {
+            this.mediaSub = this.documentObjectService.documentObjectsPost(
+                this.selectedFile
+            ).subscribe(
+                data => {
+                    this.documentForm.patchValue({"documentObject": data.id});
+                    this.submitForm();
+                }
+            );
+        } else {
+            this.submitForm();
+        }
+    }
+
+    submitForm() {
+        if (this.documentForm.valid) {
+            if (this.document.id === null || this.document.id === undefined) {
+                // Create new product
+                this.documentSub = this.documentService.documentsPost(
+                    this.documentForm.value as DocumentJsonld
+                ).subscribe(
+                    data => {
+                        this.documentForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            } else {
+                // Edit contact
+                this.documentSub = this.documentService.documentsIdPatch(
+                    ApiConverter.extractId(this.document.id),
+                    this.documentForm.value as DocumentJsonld
+                ).subscribe(
+                    data => {
+                        this.documentForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            }
+        }
     }
-  }
-
-  onDeleteFile() {
-    let confirmMessage = "";
-    this.translateService.get('system.confirm-delete-file').subscribe((translation: string) => {
-      confirmMessage = translation;
-    });
-    const userConfirmed = window.confirm(confirmMessage);
-    if (userConfirmed) {
-      this.documentForm.patchValue({"documentObject": null});
-      this.documentForm.patchValue({"documentUrl": null});
+
+    onFileSelected(event: any) {
+        const file: File = event.target.files[0];
+        if (file) {
+            this.selectedFile = file;
+            // Patch form value to apply validation
+            this.documentForm.patchValue({"documentObject": "-"});
+        }
+    }
+
+    onDeleteFile() {
+        let confirmMessage = "";
+        this.translateService.get('system.confirm-delete-file').subscribe((translation: string) => {
+            confirmMessage = translation;
+        });
+        const userConfirmed = window.confirm(confirmMessage);
+        if (userConfirmed) {
+            this.documentForm.patchValue({"documentObject": null});
+            this.documentForm.patchValue({"documentUrl": null});
+        }
     }
-  }
 }

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

@@ -40,12 +40,12 @@
             <input type="text" class="form-control" id="website" formControlName="website"/>
         </div>
 
-        <div class="mb-3">
+        <div class="mb-3" *ngIf="partnerForm.get('logoUrl')?.value === null">
             <label for="logo" class="form-label">{{ 'form.upload-image' | translate }}:</label>
             <input type="file" class="form-control" id="logo" (change)="onFileSelected($event)" accept="image/*"/>
         </div>
 
-        <div class="mb-3" *ngIf="partner.logoUrl !== undefined">
+        <div class="mb-3" *ngIf="partnerForm.get('logoUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteImage()">
                 <img src="{{partner.logoUrl}}" width="40" height="40"/>
                 <p class="mb-0 ms-3">{{ 'system.delete-image' | translate }}</p>

matsen-tool/src/app/products/new-product/new-product.component.html

@@ -18,12 +18,12 @@
             </div>
         </div>
 
-        <div class="mb-3">
+        <div class="mb-3" *ngIf="productForm.get('imageUrl')?.value === null">
             <label for="image" class="form-label">{{'form.upload-image' | translate}}:</label>
             <input type="file" class="form-control" id="image" (change)="onFileSelected($event)" accept="image/*" />
         </div>
 
-        <div class="mb-3" *ngIf="product.imageUrl !== undefined">
+        <div class="mb-3" *ngIf="productForm.get('imageUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteImage()">
                 <img src="{{product.imageUrl}}" width="40" height="40" />
                 <p class="mb-0 ms-3">{{'system.delete-image' | translate}}</p>