feat(extended-uportal-header): load configuration with template api

add `dont-override` attribute to force component config in case of default value fix: configuration loading
GIP-RECIA · Oct 17, 2024 · dee6ca3 · dee6ca3
1 parent 30cef8a
commit dee6ca3
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 26 deletions.
diff --git a/@uportal/extended-uportal-header/samples/api/api.json b/@uportal/extended-uportal-header/samples/api/api.json
@@ -18233,7 +18233,22 @@
           }
         ]
       }
-    ]
+    ],
+    "config": {
+      "messages": [{"locales": ["fr", "fr-FR"], "messages": { "message": {"favorites": { "add": "Add me to your favorites!" },"header": {"gotoportal":"retour au portail"} }}}],
+      "service-name": "Demo Prolongation ENT",
+      "sign-out-url": "#signout",
+      "organization-api-url": "/orginfo",
+      "user-info-portlet-url": "#user-info",
+      "switch-org-portlet-url": "#switch-org",
+      "favorites-portlet-card-size": "small",
+      "grid-portlet-card-size": "auto",
+      "hide-action-mode": "never",
+      "show-favorites-in-slider": true,
+      "return-home-title": "retour à l'accueil",
+      "return-home-target": "_self",
+      "icon-type": "nine-square"
+    }
   },
   "session": {
     "person": {

diff --git a/@uportal/extended-uportal-header/samples/extended-uportal-header.html b/@uportal/extended-uportal-header/samples/extended-uportal-header.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -21,28 +21,13 @@
   </head>
   <body>
     <extended-uportal-header
-      messages='[{"locales": ["fr", "fr-FR"], "messages": { "message": {"favorites": { "add": "Add me to your favorites!" },"header": {"gotoportal":"retour au portail"} }}}]'
-      domain="api.server2.local:3000"
-      service-name="Demo Prolongation ENT"
-      favorites-portlet-card-size="small"
-      grid-portlet-card-size="auto"
-      hide-action-mode="never"
-      organization-api-url="/orginfo"
-      sign-out-url="#signout"
-      user-info-portlet-url="#user-info"
-      switch-org-portlet-url="#switch-org"
-      show-favorites-in-slider
-      template='{
-        "iconPath": "",
-        "iconOpacity": 1,
-        "color":"#057436"
-      }'
-      return-home-title="retour à l'accueil"
-      return-home-target="_self"
-      icon-type="nine-square"
       debug
     >
       <div slot="not-loaded">NOT LOADED</div>
     </extended-uportal-header>
+    <script type="text/javascript">
+      const extUpHeader = document.querySelector('extended-uportal-header');
+      extUpHeader.setAttribute('domain', `${window.document.domain}:3000`)
+    </script>
   </body>
 </html>
diff --git a/@uportal/extended-uportal-header/src/extended-uportal-header.ts b/@uportal/extended-uportal-header/src/extended-uportal-header.ts
@@ -43,6 +43,61 @@ import defaultAvatar from '@images/default-avatar.svg';
 import { icon } from '@fortawesome/fontawesome-svg-core';
 import { faRightToBracket } from '@fortawesome/free-solid-svg-icons/faRightToBracket';
 
+interface properties {
+  messages: unknown;
+  domain: string;
+  portailPath: string;
+  serviceName: string;
+  favoritesPortletCardSize: string;
+  gridPortletCardSize: string;
+  defaultOrgLogoUrl: string;
+  defaultOrgLogoPath: string;
+  forceOrgLogoUrl: string;
+  forceOrgLogoPath: string;
+  defaultOrgIconUrl: string;
+  defaultOrgIconPath: string;
+  defaultAvatarUrl: string;
+  defaultAvatarPath: string;
+  contextApiUrl: string;
+  favoriteApiUrl: string;
+  layoutApiUrl: string;
+  portletApiUrl: string;
+  organizationApiUrl: string;
+  userInfoApiUrl: string;
+  sessionApiUrl: string;
+  templateApiUrl: string;
+  templateApiPath: string;
+  template: template | null;
+  signOutUrl: string;
+  userInfoPortletUrl: string;
+  switchOrgPortletUrl: string;
+  orgAttributeName: string;
+  orgLogoUrlAttributeName: string;
+  userAllOrgsIdAttributeName: string;
+  hideActionMode: 'auto' | 'always' | 'never';
+  showFavoritesInSlider: boolean;
+  iconType:
+    | 'hamburger'
+    | 'four-square'
+    | 'four-empty-square'
+    | 'nine-square'
+    | 'nine-empty-square'
+    | 'four-circle'
+    | 'four-empty-circle'
+    | 'nine-circle'
+    | 'nine-empty-circle';
+  returnHomeTarget: string;
+  returnHomeTitle: string | null;
+  height: string;
+  sessionRenewDisable: boolean;
+  debug: boolean;
+}
+
+type overridableProperties = Omit<
+  properties,
+  'templateApiUrl' | 'templateApiPath' | 'template'
+>;
+
 @customElement('extended-uportal-header')
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class ExtendedUportalHeader extends LitElement {
@@ -119,7 +174,7 @@ export class ExtendedUportalHeader extends LitElement {
   @property({ type: Object })
   template: template | null = null;
   @property({ type: String, attribute: 'sign-out-url' })
-  signoutUrl = process.env.APP_LOGOUT_URL ?? '';
+  signOutUrl = process.env.APP_LOGOUT_URL ?? '';
   @property({ type: String, attribute: 'sign-in-url' })
   signInUrl = '';
   @property({ type: String, attribute: 'user-info-portlet-url' })
@@ -174,6 +229,8 @@ export class ExtendedUportalHeader extends LitElement {
   height = 'auto';
   @property({ type: Boolean, attribute: 'disable-session-renew' })
   sessionRenewDisable = false;
+  @property({ type: Object, attribute: 'dont-override' })
+  dontOverride: Array<keyof overridableProperties> | null = null;
   @property({ type: Boolean })
   debug = false;
 
@@ -228,15 +285,21 @@ export class ExtendedUportalHeader extends LitElement {
       langHelper.setReference(this.messages);
     }
     if (
-      (!this._loaded && !this._loadingData) ||
+      !this.template &&
+      !this._loadingTemplate &&
+      !this._loaded &&
+      !this._loadingData
+    ) {
+      this._firstLoad();
+    }
+    if (
       _changedProperties.has('userInfoApiUrl') ||
       _changedProperties.has('layoutApiUrl') ||
       _changedProperties.has('organizationApiUrl')
     ) {
       this._debounceLoad();
     }
     if (
-      (!this.template && !this._loadingTemplate) ||
       _changedProperties.has('template') ||
       _changedProperties.has('templateApiUrl') ||
       _changedProperties.has('templateApiPath')
@@ -250,6 +313,11 @@ export class ExtendedUportalHeader extends LitElement {
     return true;
   }
 
+  private async _firstLoad() {
+    await this._getTemplate();
+    this._debounceLoad();
+  }
+
   private _debounceLoad = debounce(this._load.bind(this), 500);
 
   private async _load() {
@@ -321,9 +389,107 @@ export class ExtendedUportalHeader extends LitElement {
     if (this.template !== null) return;
     this._loadingTemplate = true;
     this.template = await templateService.get(this._tplApiUrl(), this.domain);
+    await this._overrideProperties();
     this._loadingTemplate = false;
   }
 
+  private _defaultProperties: properties = {
+    messages: [],
+    domain: '',
+    portailPath: '',
+    serviceName: '',
+    favoritesPortletCardSize: 'small',
+    gridPortletCardSize: 'medium',
+    defaultOrgLogoUrl: '',
+    defaultOrgLogoPath: '',
+    forceOrgLogoUrl: '',
+    forceOrgLogoPath: '',
+    defaultOrgIconUrl: '',
+    defaultOrgIconPath: '',
+    defaultAvatarUrl: '',
+    defaultAvatarPath: '',
+    contextApiUrl: '',
+    favoriteApiUrl: '',
+    layoutApiUrl: '',
+    portletApiUrl: '',
+    organizationApiUrl: '',
+    userInfoApiUrl: '',
+    sessionApiUrl: '',
+    templateApiUrl: '',
+    templateApiPath: '',
+    template: null,
+    signOutUrl: '',
+    userInfoPortletUrl: '',
+    switchOrgPortletUrl: '',
+    orgAttributeName: 'ESCOSIRENCourant[0]',
+    orgLogoUrlAttributeName: 'otherAttributes.ESCOStructureLogo[0]',
+    userAllOrgsIdAttributeName: 'ESCOSIREN',
+    hideActionMode: 'auto',
+    showFavoritesInSlider: false,
+    iconType: 'hamburger',
+    returnHomeTarget: '_self',
+    returnHomeTitle: null,
+    height: 'auto',
+    sessionRenewDisable: false,
+    debug: false,
+  };
+
+  private async _overrideProperties() {
+    let config = this.template?.config;
+    if (config) {
+      config = Object.fromEntries(
+        Object.entries(config).map(([key, value]) => [
+          key.replace(/-./g, (m) => m.toUpperCase()[1]),
+          value,
+        ])
+      );
+
+      for (const [key, value] of Object.entries(config)) {
+        const currentValue = this[key as keyof overridableProperties];
+        const defaultValue =
+          this._defaultProperties[key as keyof overridableProperties];
+        const keepCurrent = !!this.dontOverride?.includes(
+          key as keyof overridableProperties
+        );
+
+        let override = false;
+        switch (typeof currentValue) {
+          case 'object':
+            if (
+              Array.isArray(currentValue) &&
+              Array.isArray(defaultValue) &&
+              currentValue.every((val) => defaultValue.includes(val))
+            )
+              override = true;
+            else if (defaultValue === null) {
+              if (currentValue === defaultValue || currentValue.length === 0)
+                override = true;
+            }
+            break;
+          default:
+            if (currentValue === defaultValue || currentValue === '')
+              override = true;
+            break;
+        }
+
+        this.debug &&
+          console.log({
+            key,
+            current: { value: currentValue, type: typeof currentValue },
+            default: { value: defaultValue, type: typeof defaultValue },
+            received: { value, type: typeof value },
+            override,
+            keepCurrent,
+          });
+
+        if (override && !keepCurrent) {
+          this[key as keyof overridableProperties] = value as never;
+          if (key === 'messages') langHelper.setReference(this.messages);
+        }
+      }
+    }
+  }
+
   private _handleUserAction() {
     if (this._loaded) {
       this._debounceRenewToken();
@@ -468,7 +634,7 @@ export class ExtendedUportalHeader extends LitElement {
               organization-api-url="${this.organizationApiUrl}"
               user-info-api-url="${this.userInfoApiUrl}"
               user-info=${userApiResult}
-              sign-out-url="${this.signoutUrl}"
+              sign-out-url="${this.signOutUrl}"
               user-info-portlet-url="${this.userInfoPortletUrl}"
               switch-org-portlet-url="${this.switchOrgPortletUrl}"
               user-org-id-attribute-name="${this.orgAttributeName}"
@@ -498,7 +664,7 @@ export class ExtendedUportalHeader extends LitElement {
               display-name="${this._userInfos.displayName}"
               picture="${this._picture()}"
               email="${this._userInfos.email}"
-              logout-link="${this.signoutUrl}"
+              logout-link="${this.signOutUrl}"
               more-link="${this.userInfoPortletUrl}"
               avatar-size="28px"
             ></eyebrow-user-info>

diff --git a/@uportal/extended-uportal-header/src/services/templateService.ts b/@uportal/extended-uportal-header/src/services/templateService.ts
@@ -1,8 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type config = Record<string, string | boolean | Array<object>>;
+
 export interface template {
   name: string;
   iconPath: string;
   iconOpacity: number;
   color: string;
+  config?: config;
 }
 export default class templateService {
   static async get(
@@ -41,6 +45,7 @@ export default class templateService {
               iconPath: icon?.path ?? '',
               iconOpacity: icon?.opacity ?? 1,
               color,
+              config: templates.config,
             };
           } else {
             console.error('Incorrect template datas', icon, color);