feat: add images

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

@@ -3,6 +3,7 @@
 README.md
 api.module.ts
 api/api.ts
+api/imagesInternal.service.ts
 api/menuItem.service.ts
 api/product.service.ts
 api/workspace.service.ts
@@ -30,6 +31,7 @@ model/getMenuItemResponse.ts
 model/getMenuItemsResponse.ts
 model/getWorkspaceMenuItemStructureResponse.ts
 model/getWorkspaceResponse.ts
+model/imageInfo.ts
 model/importMenuResponse.ts
 model/importResponseStatus.ts
 model/importWorkspaceResponse.ts
@@ -44,6 +46,7 @@ model/problemDetailInvalidParam.ts
 model/problemDetailParam.ts
 model/problemDetailResponse.ts
 model/product.ts
+model/refType.ts
 model/scope.ts
 model/searchWorkspacesRequest.ts
 model/searchWorkspacesResponse.ts

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

@@ -1,7 +1,9 @@
+export * from './imagesInternal.service';
+import { ImagesInternalAPIService } from './imagesInternal.service';
 export * from './menuItem.service';
 import { MenuItemAPIService } from './menuItem.service';
 export * from './product.service';
 import { ProductAPIService } from './product.service';
 export * from './workspace.service';
 import { WorkspaceAPIService } from './workspace.service';
-export const APIS = [MenuItemAPIService, ProductAPIService, WorkspaceAPIService];
+export const APIS = [ImagesInternalAPIService, MenuItemAPIService, ProductAPIService, WorkspaceAPIService];

src/app/shared/generated/model/imageInfo.ts

@@ -0,0 +1,17 @@
+/**
+ * onecx-workspace-bff
+ * OneCx workspace Bff
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface ImageInfo { 
+    id?: string;
+}
+

src/app/shared/generated/model/models.ts

@@ -18,6 +18,7 @@ export * from './getMenuItemResponse';
 export * from './getMenuItemsResponse';
 export * from './getWorkspaceMenuItemStructureResponse';
 export * from './getWorkspaceResponse';
+export * from './imageInfo';
 export * from './importMenuResponse';
 export * from './importResponseStatus';
 export * from './importWorkspaceResponse';
@@ -31,6 +32,7 @@ export * from './problemDetailInvalidParam';
 export * from './problemDetailParam';
 export * from './problemDetailResponse';
 export * from './product';
+export * from './refType';
 export * from './scope';
 export * from './searchWorkspacesRequest';
 export * from './searchWorkspacesResponse';

src/app/shared/generated/model/refType.ts

@@ -0,0 +1,18 @@
+/**
+ * onecx-workspace-bff
+ * OneCx workspace Bff
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export enum RefType {
+    Logo = 'logo',
+    Favicon = 'favicon'
+}
+

src/app/workspace/workspace-create/workspace-create.component.html

@@ -89,7 +89,7 @@
       </label>
     </div>
 
-    <!-- <div class="flex flex-wrap sm:flex-nowrap align-items-center row-gap-2 column-gap-4">
+    <div class="flex flex-wrap sm:flex-nowrap align-items-center row-gap-2 column-gap-4">
       <input hidden type="file" accept=".png,.svg" #selectedFileInputLogo (change)="onFileUpload($event, 'logo')" />
       <app-image-container
         [id]="'workspace_create_item_logo_image'"
@@ -99,19 +99,30 @@
       ></app-image-container>
       <div class="p-inputgroup" controlErrorAnchor>
         <span class="p-float-label">
-          <input pInputText type="text" id="workspace_create_item_logo" formControlName="logoUrl" />
+          <input
+            pInputText
+            type="text"
+            id="workspace_create_item_logo"
+            formControlName="logoUrl"
+            (blur)="inputChange($event)"
+          />
           <label for="workspace_create_item_logo"> {{ 'LOGO.LOGO_URL' | translate }} </label>
         </span>
         <span
           id="workspace_create_item_logo_upload"
           class="p-inputgroup-addon bg-primary"
           [title]="'LOGO.TOOLTIPS.UPLOAD' | translate"
           (click)="selectedFileInputLogo.click()"
+          [ngClass]="
+            this.formGroup.controls['name'].value === '' || this.formGroup.controls['name'].value === null
+              ? 'p-disabled'
+              : 'p-inputgroup-addon bg-primary'
+          "
         >
           <i class="pi pi-upload"></i>
         </span>
       </div>
-    </div> -->
+    </div>
 
     <div>
       <span class="p-float-label" controlErrorAnchor>

src/app/workspace/workspace-create/workspace-create.component.ts

@@ -13,7 +13,11 @@ import { LogoState } from 'src/app/workspace/workspace-create/logo-state'
 import {
   /* ImageV1APIService, */
   WorkspaceAPIService /* , ThemesAPIService */,
-  Workspace
+  Workspace,
+  ImagesInternalAPIService,
+  RefType,
+  GetImageRequestParams,
+  UploadImageRequestParams
 } from '../../shared/generated'
 
 @Component({
@@ -37,14 +41,15 @@ export class WorkspaceCreateComponent {
   public workspaceCreationValidationMsg = false
   public fetchingLogoUrl?: string
   public urlPattern = '/base-path-to-workspace'
+  public logoImageWasUploaded: boolean | undefined
 
   constructor(
     private router: Router,
     private route: ActivatedRoute,
     private user: UserService,
     private workspaceApi: WorkspaceAPIService,
     // private themeApi: ThemesAPIService,
-    // private imageApi: ImageV1APIService,
+    private imageApi: ImagesInternalAPIService,
     private message: PortalMessageService,
     private translate: TranslateService
   ) {
@@ -137,18 +142,70 @@ export class WorkspaceCreateComponent {
     reader.readAsDataURL(file)
   }
 
-  /* onFileUpload(ev: Event, fieldType: 'logo') {
+  onFileUpload(ev: Event, fieldType: 'logo') {
+    let workspaceName = 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.message.add({ severity: 'info', summary: 'File Uploaded', detail: fieldType + ' image' })
-          })
-        })
+        if (workspaceName == undefined || workspaceName == '' || workspaceName == null) {
+          this.message.error({ summaryKey: 'LOGO.UPLOAD_FAILED_NAME' })
+        } else if (files[0].size > 110000) {
+          this.message.error({ summaryKey: 'LOGO.UPLOAD_FAILED_SIZE' })
+        } else {
+          let requestParametersGet: GetImageRequestParams
+          requestParametersGet = {
+            refId: workspaceName,
+            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/' + workspaceName + '/' + fieldType
+                  this.message.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/' + workspaceName + '/' + fieldType
+                  this.message.info({ summaryKey: 'LOGO.UPLOADED' })
+                  this.formGroup.controls['imageUrl'].setValue('')
+                  this.logoImageWasUploaded = true
+                })
+              }
+            }
+          )
+        }
       }
     }
-  } */
+  }
+
+  inputChange(event: Event) {
+    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'
+    }
+  }
 }

src/app/workspace/workspace-detail/workspace-detail.component.ts

@@ -6,7 +6,7 @@ import { FileSaver } from 'file-saver'
 import { Observable, map } from 'rxjs'
 
 import { Action, ObjectDetailItem, PortalMessageService, UserService } from '@onecx/portal-integration-angular'
-import { WorkspaceSnapshot, Workspace, WorkspaceAPIService } from 'src/app/shared/generated'
+import { WorkspaceSnapshot, Workspace, WorkspaceAPIService, ImagesInternalAPIService } from 'src/app/shared/generated'
 import { environment } from 'src/environments/environment'
 
 import { WorkspacePropsComponent } from 'src/app/workspace/workspace-detail/workspace-props/workspace-props.component'
@@ -55,7 +55,8 @@ export class WorkspaceDetailComponent implements OnInit {
     private location: Location,
     private workspaceApi: WorkspaceAPIService,
     private translate: TranslateService,
-    private msgService: PortalMessageService
+    private msgService: PortalMessageService,
+    private imageApi: ImagesInternalAPIService
   ) {
     this.dateFormat = this.user.lang$.getValue() === 'de' ? 'dd.MM.yyyy HH:mm' : 'medium'
   }
@@ -402,8 +403,8 @@ export class WorkspaceDetailComponent implements OnInit {
   }
 
   private preparePageHeaderImage() {
-    if (this.workspaceDetail?.logoUrl && !this.workspaceDetail.logoUrl.match(/^(http|https)/g)) {
-      this.headerImageUrl = this.apiPrefix + this.workspaceDetail.logoUrl
+    if (this.workspaceDetail?.logoUrl == null || this.workspaceDetail?.logoUrl == '') {
+      this.headerImageUrl = this.imageApi.configuration.basePath + '/images/' + this.workspaceDetail?.name + '/logo'
     } else {
       this.headerImageUrl = this.workspaceDetail?.logoUrl
     }

src/app/workspace/workspace-detail/workspace-props/workspace-props.component.html

@@ -159,7 +159,7 @@
           </span>
         </div>
 
-        <!-- <div class="flex flex-wrap sm:flex-nowrap align-items-center pb-2 row-gap-2 column-gap-4">
+        <div class="flex flex-wrap sm:flex-nowrap align-items-center pb-2 row-gap-2 column-gap-4">
           <input hidden type="file" accept="image/*" #selectedFileInputLogo (change)="onFileUpload($event, 'logo')" />
           <app-image-container
             [id]="'workspace_detail_item_logo_image'"
@@ -170,21 +170,33 @@
           <div class="flex flex-column w-full">
             <div class="p-inputgroup mb-1" controlErrorAnchor>
               <span class="p-float-label">
-                <input pInputText type="text" id="workspace_detail_item_logo" formControlName="logoUrl" />
+                <input
+                  pInputText
+                  type="text"
+                  id="workspace_detail_item_logo"
+                  formControlName="logoUrl"
+                  (blur)="inputChange($event)"
+                />
                 <label for="workspace_detail_item_logo"> {{ 'LOGO.LOGO_URL' | translate }} </label>
               </span>
               <span
                 id="workspace_detail_item_upload_logo2"
                 class="p-inputgroup-addon bg-primary pseudo-button"
-                [ngClass]="editMode ? 'cursor-pointer' : 'p-disabled'"
+                [ngClass]="
+                  !editMode ||
+                  this.formGroup.controls['name'].value === '' ||
+                  this.formGroup.controls['name'].value === null
+                    ? 'p-disabled'
+                    : 'cursor-pointer'
+                "
                 [title]="'LOGO.TOOLTIPS.UPLOAD' | translate"
                 (click)="editMode ? selectedFileInputLogo.click() : null"
               >
                 <span class="pi pi-upload"></span>
               </span>
             </div>
           </div>
-        </div> -->
+        </div>
 
         <span class="p-float-label mb-1" controlErrorAnchor>
           <input