fix: ocxSrc directive with external image url, ocx slots (#206)

Co-authored-by: kim.tran <[email protected]>
onecx · Apr 5, 2024 · 562be36 · 562be36
1 parent 70e9243
commit 562be36
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 24 deletions.
diff --git a/libs/angular-accelerator/src/lib/directives/src.directive.ts b/libs/angular-accelerator/src/lib/directives/src.directive.ts
@@ -11,18 +11,27 @@ export class SrcDirective {
   }
   set ocxSrc(value: string | undefined) {
     if (value && this._src !== value) {
-      this.httpClient.get(value, { responseType: 'blob' }).subscribe({
-        next: (blob) => {
-          const url = URL.createObjectURL(blob)
-          this.el.nativeElement.onload = () => {
-            URL.revokeObjectURL(url)
-          }
-          this.el.nativeElement.src = url
-        },
-        error: () => {
-          this.el.nativeElement.src = 'error'
-        },
-      })
+      try {
+        if (new URL(value, window.location.origin).origin === window.location.origin) {
+          this.httpClient.get(value, { responseType: 'blob' }).subscribe({
+            next: (blob) => {
+              const url = URL.createObjectURL(blob)
+              this.el.nativeElement.onload = () => {
+                URL.revokeObjectURL(url)
+              }
+              this.el.nativeElement.src = url
+            },
+            error: () => {
+              this.el.nativeElement.src = 'error'
+            },
+          })
+        } else {
+          this.el.nativeElement.src = value
+        }
+      } catch (error) {
+        console.log('Cannot parse URL ', value, error)
+        this.el.nativeElement.src = value
+      }
       this._src = value
     }
   }

diff --git a/libs/angular-accelerator/src/lib/services/app-config-service.ts b/libs/angular-accelerator/src/lib/services/app-config-service.ts
@@ -1,3 +1,4 @@
+import { Location } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Config } from '@onecx/integration-interface'
@@ -11,7 +12,9 @@ export class AppConfigService {
 
   public init(baseUrl: string): Promise<void> {
     return new Promise((resolve, reject) => {
-      const loadConfigPromise: Promise<Config> = firstValueFrom(this.http.get<Config>(baseUrl + 'assets/env.json'))
+      const loadConfigPromise: Promise<Config> = firstValueFrom(
+        this.http.get<Config>(Location.joinWithSlash(baseUrl, 'assets/env.json'))
+      )
 
       loadConfigPromise
         .then(async (config) => {

diff --git a/libs/shell-core/src/lib/components/portal-header/header.component.html b/libs/shell-core/src/lib/components/portal-header/header.component.html
@@ -44,6 +44,7 @@
       <ng-content></ng-content>
     </div>
     <div class="layout-topbar-actions-right">
+      <ocx-slot name="headerRight" class="layout-topbar-items"></ocx-slot>
       <ul class="layout-topbar-items">
         <!-- Only desktop: Actions (favorites, support, search, ...) as icon buttons -->
         <ng-container *ocxIfBreakpoint="'desktop'">

diff --git a/libs/shell-core/src/lib/components/portal-viewport/portal-viewport.component.html b/libs/shell-core/src/lib/components/portal-viewport/portal-viewport.component.html
@@ -13,23 +13,21 @@
     [menuButtonTitle]="menuButtonTitle"
     (menuButtonClick)="onMenuButtonClick($event)"
   >
-  <div class="horizontal">
-    <ocx-slot name="menu" *ngIf="isHorizontalMenuVisible()">Horizontal Menu</ocx-slot>
-  </div>
+  <ocx-slot name="horizontalMenu" *ngIf="isHorizontalMenuVisible()"></ocx-slot>
 
   </ocx-shell-header>
 
   <p-toast></p-toast>
 
   <div class="menu-wrapper">
     <div class="layout-menu-container" *ngIf="isStaticalMenuVisible()">
-        <ocx-slot name="menu">Vertical Menu</ocx-slot>
+        <ocx-slot name="menu"></ocx-slot>
     </div>
   </div>
 
   <div class="layout-main">
     <div class="layout-content relative">
-      <ocx-slot name="AnnouncementBanner">Announcement Banner</ocx-slot>
+      <ocx-slot name="subHeader"></ocx-slot>
 
       <ng-content></ng-content>
       <router-outlet></router-outlet>

diff --git a/libs/shell-core/src/lib/components/portal-viewport/portal-viewport.component.scss b/libs/shell-core/src/lib/components/portal-viewport/portal-viewport.component.scss
@@ -1,6 +0,0 @@
-.horizontal {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-}