diff --git a/packages/app-shell/src/index.js b/packages/app-shell/src/index.js index 6de6fbe17e266d58881114160b9e10e8f7c7ccef..b6ccf8e0e1c84b9f0b09dca48f9f193f09b0814d 100644 --- a/packages/app-shell/src/index.js +++ b/packages/app-shell/src/index.js @@ -13,6 +13,7 @@ import * as events from 'vpu-common/events.js'; import './build-info.js'; import './tugraz-logo.js'; import {send as notify} from 'vpu-notification'; +import {userProfileMeta} from './vpu-app-shell-user-profile.js'; const i18n = createI18nInstance(); @@ -77,8 +78,8 @@ class VPUApp extends LitElement { * @param {string} topicURL The topic metadata URL or relative path to load things from */ async fetchMetadata(topicURL) { - const metadata = {}; - const routes = []; + let metadata = {}; + let routes = []; const result = await (await fetch(topicURL, { headers: {'Content-Type': 'application/json'} @@ -118,6 +119,13 @@ class VPUApp extends LitElement { console.log(error); } } + + // Inject the user profile activity + routes.push("user-profile"); + metadata = Object.assign(metadata, { + "user-profile": userProfileMeta + }); + // this also triggers a rebuilding of the menu this.metadata = metadata; this.routes = routes; @@ -225,7 +233,7 @@ class VPUApp extends LitElement { // listen to the vpu-auth-profile event to switch to the person profile window.addEventListener("vpu-auth-profile", () => { - this.switchComponent('person-profile'); + this.switchComponent('user-profile'); }); this._subscriber.subscribe(this._updateAuth); @@ -296,10 +304,20 @@ class VPUApp extends LitElement { return; } - importNotify(import(metadata.module_src)).then(() => { + let updateFunc = () => { this.updatePageTitle(); this.subtitle = this.activeMetaDataText("short_name"); this.description = this.activeMetaDataText("description"); + }; + + // If it is empty assume the element is already registered through other means + if (!metadata.module_src) { + updateFunc(); + return; + } + + importNotify(import(metadata.module_src)).then(() => { + updateFunc(); }).catch((e) => { console.error(`Error loading ${ metadata.element }`); throw e; diff --git a/packages/app-shell/src/vpu-app-shell-user-profile.js b/packages/app-shell/src/vpu-app-shell-user-profile.js new file mode 100644 index 0000000000000000000000000000000000000000..480d8b8ef5b0279882533837f9d1b3394d15c65f --- /dev/null +++ b/packages/app-shell/src/vpu-app-shell-user-profile.js @@ -0,0 +1,69 @@ +import {createI18nInstance} from './i18n.js'; +import {css, html, LitElement} from 'lit-element'; +import * as commonUtils from 'vpu-common/utils'; +import * as commonStyles from 'vpu-common/styles'; +import 'vpu-person-profile'; + +const i18n = createI18nInstance(); + +class AppShellUserProfile extends LitElement { + + constructor() { + super(); + this.lang = i18n.language; + this._personId = window.VPUPersonId; + this.entryPointUrl = commonUtils.getAPiUrl(); + + } + + static get properties() { + return { + lang: { type: String }, + entryPointUrl: { type: String, attribute: 'entry-point-url' }, + _personId: {type: String, attribute: false}, + }; + } + + connectedCallback() { + super.connectedCallback(); + + window.addEventListener("vpu-auth-person-init", () => { + this._personId = window.VPUPersonId; + }); + } + + static get styles() { + // language=css + return css` + ${commonStyles.getThemeCSS()} + ${commonStyles.getGeneralCSS()} + `; + } + + render() { + return html` + <vpu-person-profile value="${this._personId}" entry-point-url="${this.entryPointUrl}"" lang="${this.lang}"></vpu-person-profile> + `; + } +} + +export const userProfileMeta = { + "element": "vpu-app-shell-user-profile", + "module_src": "", + "routing_name": "user-profile", + "name": { + "de": "Benutzerprofil", + "en": "User profile" + }, + "short_name": { + "de": "Profil", + "en": "Profile" + }, + "description": { + "de": "Zeigt informationen über den Benutzer an", + "en": "Shows information about the user" + }, + visible: false +}; + +commonUtils.defineCustomElement('vpu-app-shell-user-profile', AppShellUserProfile);