feat: images added (#46)

src/app/product-store/product-detail/product-props/product-props.component.html

@@ -53,16 +53,29 @@
             [small]="true"
             [title]="'LOGO.TOOLTIPS.' + (fetchingLogoUrl ? 'IMAGE' : 'PLACEHOLDER') | translate"
           ></ps-image-container>
+          <app-image-container [imageUrl]="fetchingLogoUrl" [small]="false"></app-image-container>
           <div class="flex flex-column w-full">
             <div class="p-inputgroup mb-1" controlErrorAnchor>
               <span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.IMAGE_URL' | translate">
-                <input pInputText type="text" id="product_detail_item_imageUrl" formControlName="imageUrl" />
+                <input
+                  pInputText
+                  type="text"
+                  id="product_detail_item_imageUrl"
+                  formControlName="imageUrl"
+                  (input)="inputChange($event)"
+                />
                 <label for="product_detail_item_imageUrl">{{ 'PRODUCT.IMAGE_URL' | translate }}</label>
               </span>
               <span
                 id="product_detail_item_upload_logo2"
                 class="p-inputgroup-addon bg-primary pseudo-button"
-                [ngClass]="changeMode !== 'VIEW' ? 'cursor-pointer' : 'p-disabled'"
+                [ngClass]="
+                  changeMode === 'VIEW' ||
+                  this.formGroup.controls['name'].value === '' ||
+                  this.formGroup.controls['name'].value === null
+                    ? 'p-disabled'
+                    : 'cursor-pointer'
+                "
                 [title]="'LOGO.TOOLTIPS.UPLOAD' | translate"
                 (click)="changeMode !== 'VIEW' ? selectedFileInputLogo.click() : null"
               >

src/app/product-store/product-detail/product-props/product-props.component.ts

@@ -1,9 +1,18 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, Output } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
 import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'
 import { SelectItem } from 'primeng/api'
 
 import { PortalMessageService } from '@onecx/portal-integration-angular'
-import { CreateProductRequest, Product, ProductsAPIService, UpdateProductRequest } from 'src/app/shared/generated'
+import {
+  CreateProductRequest,
+  GetImageRequestParams,
+  ImagesInternalAPIService,
+  Product,
+  ProductsAPIService,
+  RefType,
+  UpdateProductRequest,
+  UploadImageRequestParams
+} from 'src/app/shared/generated'
 import { IconService } from 'src/app/shared/iconservice'
 import { dropDownSortItemsByLabel } from 'src/app/shared/utils'
 import { ChangeMode } from '../product-detail.component'
@@ -34,7 +43,7 @@ export function productNameValidator(): ValidatorFn {
   templateUrl: './product-props.component.html',
   styleUrls: ['./product-props.component.scss']
 })
-export class ProductPropertyComponent implements OnChanges {
+export class ProductPropertyComponent implements OnChanges, OnInit {
   @Input() product: Product | undefined
   @Input() dateFormat = 'medium'
   @Input() changeMode: ChangeMode = 'VIEW'
@@ -46,12 +55,15 @@ export class ProductPropertyComponent implements OnChanges {
   public productName: string | null | undefined
   public fetchingLogoUrl: string | undefined
   public iconItems: SelectItem[] = [{ label: '', value: null }]
+  public logoImageWasUploaded: boolean | undefined
+
   //private productNamePattern = '^(?!new$)(.*)$' // matching for valid product names
 
   constructor(
     private icon: IconService,
     private elements: ElementRef,
     private productApi: ProductsAPIService,
+    private imageApi: ImagesInternalAPIService,
     private msgService: PortalMessageService
   ) {
     this.formGroup = new FormGroup<ProductDetailForm>({
@@ -75,6 +87,26 @@ export class ProductPropertyComponent implements OnChanges {
     this.iconItems.sort(dropDownSortItemsByLabel)
   }
 
+  ngOnInit(): void {
+    let productName = this.formGroup.controls['name'].value!
+    let requestParametersGet: GetImageRequestParams = {
+      refId: productName,
+      refType: RefType.Logo
+    }
+    if (
+      requestParametersGet.refId === undefined ||
+      requestParametersGet.refId === '' ||
+      requestParametersGet.refId === null
+    ) {
+      this.logoImageWasUploaded = false
+    } else {
+      this.imageApi.getImage(requestParametersGet).subscribe(() => {
+        this.logoImageWasUploaded = true
+      })
+    }
+    this.fetchingLogoUrl = this.getImageUrl()
+  }
+
   ngOnChanges(): void {
     if (this.product) {
       this.formGroup.patchValue({
@@ -104,13 +136,17 @@ export class ProductPropertyComponent implements OnChanges {
   }
 
   private createProduct() {
+    let imgUrl = this.formGroup.controls['imageUrl'].value
+    if ((imgUrl == '' || imgUrl == null) && !this.logoImageWasUploaded) {
+      imgUrl = 'http://pragmaticscrum.info/wp-content/uploads/2016/06/t1.jpg'
+    }
     this.productApi
       .createProduct({
         createProductRequest: {
           name: this.formGroup.value['name'],
           version: this.formGroup.value['version'],
           description: this.formGroup.value['description'],
-          imageUrl: this.formGroup.value['imageUrl'],
+          imageUrl: imgUrl,
           basePath: this.formGroup.value['basePath'],
           displayName: this.formGroup.value['displayName'],
           iconName: this.formGroup.value['iconName'],
@@ -127,14 +163,18 @@ export class ProductPropertyComponent implements OnChanges {
   }
 
   private updateProduct() {
+    let imgUrl = this.formGroup.controls['imageUrl'].value
+    if ((imgUrl == '' || imgUrl == null) && !this.logoImageWasUploaded) {
+      imgUrl = 'http://pragmaticscrum.info/wp-content/uploads/2016/06/t1.jpg'
+    }
     this.productApi
       .updateProduct({
         id: this.productId!,
         updateProductRequest: {
           name: this.formGroup.value['name'],
           version: this.formGroup.value['version'],
           description: this.formGroup.value['description'],
-          imageUrl: this.formGroup.value['imageUrl'],
+          imageUrl: imgUrl,
           basePath: this.formGroup.value['basePath'],
           displayName: this.formGroup.value['displayName'],
           iconName: this.formGroup.value['iconName'],
@@ -164,19 +204,78 @@ export class ProductPropertyComponent implements OnChanges {
   /** File Handling
    */
   public onFileUpload(ev: Event, fieldType: 'logo'): void {
+    let productName = this.formGroup.controls['name'].value
     if (ev.target && (ev.target as HTMLInputElement).files) {
       const files = (ev.target as HTMLInputElement).files
       if (files) {
-        Array.from(files).forEach((file) => {
-          /*
-          this.imageApi.uploadImage({ image: file }).subscribe((data) => {
-            this.formGroup.controls[fieldType + 'Url'].setValue(data.imageUrl)
-            this.fetchingLogoUrl = setFetchUrls(this.apiPrefix, this.formGroup.controls[fieldType + 'Url'].value)
-            this.msgService.info({ summaryKey: 'LOGO.UPLOADED', detailKey: 'LOGO.LOGO_URL' })
-          })
-          */
-        })
+        if (productName == undefined || productName == '' || productName == null) {
+          this.msgService.error({ summaryKey: 'LOGO.UPLOAD_FAILED_NAME' })
+        } else if (files[0].size > 110000) {
+          this.msgService.error({ summaryKey: 'LOGO.UPLOAD_FAILED_SIZE' })
+        } else {
+          let requestParametersGet: GetImageRequestParams
+          requestParametersGet = {
+            refId: productName,
+            refType: RefType.Logo
+          }
+          let requestParameters: UploadImageRequestParams
+          const blob = new Blob([files[0]], { type: files[0].type })
+          let imageType: RefType = RefType.Logo
+
+          requestParameters = {
+            contentLength: files.length,
+            refId: this.formGroup.controls['name'].value!,
+            refType: imageType,
+            body: blob
+          }
+
+          this.fetchingLogoUrl = undefined
+
+          this.imageApi.getImage(requestParametersGet).subscribe(
+            (res) => {
+              if (RegExp(/^.*.(jpg|jpeg|png)$/).exec(files[0].name)) {
+                this.imageApi.updateImage(requestParameters).subscribe(() => {
+                  this.fetchingLogoUrl =
+                    this.imageApi.configuration.basePath + '/images/' + productName + '/' + fieldType
+                  this.msgService.info({ summaryKey: 'LOGO.UPLOADED' })
+                  this.formGroup.controls['imageUrl'].setValue('')
+                  this.logoImageWasUploaded = true
+                })
+              }
+            },
+            (err) => {
+              if (RegExp(/^.*.(jpg|jpeg|png)$/).exec(files[0].name)) {
+                this.imageApi.uploadImage(requestParameters).subscribe(() => {
+                  this.fetchingLogoUrl =
+                    this.imageApi.configuration.basePath + '/images/' + productName + '/' + fieldType
+                  this.msgService.info({ summaryKey: 'LOGO.UPLOADED' })
+                  this.formGroup.controls['imageUrl'].setValue('')
+                  this.logoImageWasUploaded = true
+                })
+              }
+            }
+          )
+        }
       }
     }
   }
+
+  getImageUrl(): string {
+    let imgUrl = this.formGroup.controls['imageUrl'].value
+    if (imgUrl == '' || imgUrl == null) {
+      return this.imageApi.configuration.basePath + '/images/' + this.formGroup.controls['name'].value + '/logo'
+    } else {
+      return imgUrl
+    }
+  }
+
+  inputChange(event: Event) {
+    setTimeout(() => {
+      this.fetchingLogoUrl = (event.target as HTMLInputElement).value
+      if ((event.target as HTMLInputElement).value == undefined || (event.target as HTMLInputElement).value == '') {
+        this.fetchingLogoUrl =
+          this.imageApi.configuration.basePath + '/images/' + this.formGroup.controls['name'].value + '/logo'
+      }
+    }, 1000)
+  }
 }

src/app/product-store/product-search/product-search.component.html

@@ -65,7 +65,7 @@
             <div class="col-12 md:col-2 lg:col-2 xl:col-2 text-center">
               <div class="flex flex-column justify-content-center align-items-center gap-1 md:gap-2 h-full">
                 <ps-image-container
-                  [imageUrl]="product.imageUrl"
+                  [imageUrl]="getImageUrl(product)"
                   [small]="true"
                   [title]="'LOGO.TOOLTIPS.' + (product.imageUrl ? 'IMAGE' : 'PLACEHOLDER') | translate"
                 ></ps-image-container>
@@ -83,7 +83,7 @@
           <div class="col-12 sm:col-6 md:col-4 lg:col-4 xl:col-3 p-3" [routerLink]="['./', product.name]">
             <div class="card p-2 flex flex-column justify-content-center hover:bg-gray-200 cursor-pointer">
               <div class="h-3rem md:h-5rem flex flex-column justify-content-center align-items-center text-center">
-                <app-image-container [imageUrl]="product.logoUrl" [small]="false"></app-image-container>
+                <app-image-container [imageUrl]="getImageUrl(product)" [small]="false"></app-image-container>
               </div>
               <div class="h-3rem flex flex-column justify-content-between gap-1 lg:gap-2 mt-0 mb-1 text-center">
                 <div class="font-bold text-xl lg:text-2xl" [title]="limitText(product.name, 100)">

src/app/product-store/product-search/product-search.component.ts

@@ -7,7 +7,7 @@ import { DataView } from 'primeng/dataview'
 
 import { Action, DataViewControlTranslations } from '@onecx/portal-integration-angular'
 
-import { ProductPageResult, ProductsAPIService } from 'src/app/shared/generated'
+import { ImagesInternalAPIService, ProductPageResult, ProductsAPIService } from 'src/app/shared/generated'
 import { limitText } from 'src/app/shared/utils'
 
 export interface ProductSearchCriteria {
@@ -36,7 +36,8 @@ export class ProductSearchComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private productApi: ProductsAPIService,
-    private translate: TranslateService
+    private translate: TranslateService,
+    private imageApi: ImagesInternalAPIService
   ) {
     this.productSearchCriteriaGroup = new FormGroup<ProductSearchCriteria>({
       productName: new FormControl<string | null>(null)
@@ -148,4 +149,12 @@ export class ProductSearchComponent implements OnInit {
   public onAppSearch() {
     this.router.navigate(['./apps'], { relativeTo: this.route })
   }
+
+  getImageUrl(product: any) {
+    if (product.imageUrl) {
+      return product.imageUrl
+    } else {
+      return this.imageApi.configuration.basePath + '/images/' + product.name + '/logo'
+    }
+  }
 }

src/app/shared/generated/.openapi-generator/FILES

@@ -3,6 +3,7 @@
 README.md
 api.module.ts
 api/api.ts
+api/imagesInternal.service.ts
 api/microfrontends.service.ts
 api/products.service.ts
 configuration.ts
@@ -12,6 +13,7 @@ index.ts
 model/createMicrofrontendRequest.ts
 model/createProductRequest.ts
 model/createUIEndpoint.ts
+model/imageInfo.ts
 model/microfrontend.ts
 model/microfrontendAbstract.ts
 model/microfrontendPageResult.ts
@@ -25,6 +27,7 @@ model/productAbstract.ts
 model/productAndWorkspaces.ts
 model/productPageResult.ts
 model/productSearchCriteria.ts
+model/refType.ts
 model/uIEndpoint.ts
 model/updateMicrofrontendRequest.ts
 model/updateProductRequest.ts

src/app/shared/generated/api/api.ts

@@ -1,5 +1,7 @@
+export * from './imagesInternal.service';
+import { ImagesInternalAPIService } from './imagesInternal.service';
 export * from './microfrontends.service';
 import { MicrofrontendsAPIService } from './microfrontends.service';
 export * from './products.service';
 import { ProductsAPIService } from './products.service';
-export const APIS = [MicrofrontendsAPIService, ProductsAPIService];
+export const APIS = [ImagesInternalAPIService, MicrofrontendsAPIService, ProductsAPIService];