Display Name/email/phone in Profile

add person-select to demo

packages/person-profile/.gitmodules

@@ -4,3 +4,6 @@
 [submodule "vendor/common"]
 	path = vendor/common
 	url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
+[submodule "vendor/person-select"]
+	path = vendor/person-select
+	url = git@gitlab.tugraz.at:VPU/WebComponents/PersonSelect.git

packages/person-profile/package.json

@@ -23,11 +23,13 @@
     "rollup-plugin-url": "^2.2.2",
     "i18next-scanner": "^2.10.2",
     "vpu-auth": "file:./vendor/auth",
-    "vpu-common": "file:./vendor/common"
+    "vpu-common": "file:./vendor/common",
+    "vpu-person-select": "file:./vendor/person-select"
   },
   "dependencies": {
     "bulma": "^0.7.5",
-    "lit-element": "^2.2.1"
+    "lit-element": "^2.2.1",
+    "jquery": "^3.4.1"
   },
   "scripts": {
     "clean": "rm dist/*",

packages/person-profile/rollup.config.js

@@ -37,6 +37,7 @@ export default {
             include: [
                 "node_modules/bulma/**/*.css",
                 "node_modules/bulma/**/*.sass",
+                "node_modules/select2/**/*.css",
             ],
             emitFiles: true,
             fileName: 'shared/[name].[hash][extname]'

packages/person-profile/src/person-profile-demo.js

 import {i18n} from './i18n.js';
 import {html, LitElement} from 'lit-element';
+import VPULitElement from 'vpu-common/vpu-lit-element';
 import './person-profile.js';
 import * as commonUtils from 'vpu-common/utils';
 import bulmaCSSPath from "bulma/css/bulma.min.css";
 import {getAssetURL} from "./utils";
+import $ from 'jquery';
+import 'vpu-person-select';
 
-class PersonProfileDemo extends LitElement {
+class PersonProfileDemo extends VPULitElement {
     constructor() {
         super();
         this.lang = 'de';
+        this.person = '';
+        this.selectedPerson = '';
     }
 
     static get properties() {
         return {
             lang: { type: String },
+            person: { type: String, attribute: false },
+            selectedPerson: { type: String, attribute: false },
         };
     }
 
     connectedCallback() {
         super.connectedCallback();
         i18n.changeLanguage(this.lang);
+        const that = this;
 
         this.updateComplete.then(()=>{
+            window.addEventListener("vpu-auth-person-init", () => {
+                that.person = that._('vpu-auth').person.identifier;
+            });
+
+            const personSelect = that._('vpu-person-select');
+            personSelect.onchange = function () {
+                that.selectedPerson = $(this).data("object").identifier;
+            };
+
         });
     }
 
@@ -41,7 +58,18 @@ class PersonProfileDemo extends LitElement {
                     <h1 class="title">Person-Profile-Demo</h1>
                 </div>
                 <div class="container">
-                    <vpu-person-profile lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}"></vpu-person-profile>
+                    <vpu-person-profile lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}" value="${this.person}"></vpu-person-profile>
+                </div>
+            </section>
+            <section class="section">
+                <div class="container">
+                    <h1 class="title">Select-Profile-Demo</h1>
+                </div>
+                <div class="container">
+                    <div class="control">
+                        <vpu-person-select lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}"></vpu-person-select>
+                    </div>
+                    <vpu-person-profile lang="${this.lang}" entry-point-url="${commonUtils.getAPiUrl()}" value="${this.selectedPerson}"></vpu-person-profile>
                 </div>
             </section>
         `;

packages/person-profile/src/person-profile.js

@@ -15,6 +15,7 @@ class PersonProfile extends VPULitElement {
         this.entryPointUrl = commonUtils.getAPiUrl();
         this.jsonld = null;
         this.value = '';
+        this.person = null;
     }
 
     static get properties() {
@@ -23,6 +24,7 @@ class PersonProfile extends VPULitElement {
             active: { type: Boolean, attribute: false },
             entryPointUrl: { type: String, attribute: 'entry-point-url' },
             value: { type: String },
+            person: { type: Object, attribute: false },
         };
     }
 
@@ -46,6 +48,22 @@ class PersonProfile extends VPULitElement {
                         that.jsonld = jsonld;
                     }, {}, that.lang);
                     break;
+                case 'value':
+                    const apiUrl = this.entryPointUrl + '/people/' + this.value;
+
+                    // load person
+                    fetch(apiUrl, {
+                        headers: {
+                            'Content-Type': 'application/ld+json',
+                            'Authorization': 'Bearer ' + window.VPUAuthToken,
+                        },
+                    })
+                    .then(response => response.json())
+                    .then((person) => {
+                        this.person = person;
+                    });
+                    break;
+                default:
             }
         });
 
@@ -53,13 +71,39 @@ class PersonProfile extends VPULitElement {
     }
 
     render() {
+        let role = 'unbekannt';
+        if (this.person !== null && this.person.roles !== undefined) {
+            // roles are only defined for self-disclosure
+            if (this.person.roles.indexOf('ROLE_STAFF') > -1) {
+                role = 'Mitarbeiter/in';
+            } else if (this.person.roles.indexOf('ROLE_ALUMNI') > -1) {
+                role = 'Absolvent/in';
+            }
+        }
         const bulmaCSS = getAssetURL(bulmaCSSPath);
         return html`
             <link rel="stylesheet" href="${bulmaCSS}">
             <style>
+            .profile {
+                padding: 1rem
+            }
+            .td-profile {
+                padding-right: 2rem
+            }
             </style>
 
-            PROFILE
+            ${this.person !== null && this.person.name !== '' ? html`<h3>PROFILE for ${this.person.name}</h3>
+            <table class="profile">
+            <thead></thead>
+            <tbody>
+                <tr><td class="td-profile">Vorname</td><td>${this.person.givenName}</td></tr>
+                <tr><td class="td-profile">Nachname</td><td>${this.person.familyName}</td></tr>
+                <tr><td class="td-profile">Email</td><td>${this.person.email}</td></tr>
+                <tr><td class="td-profile">Telefon</td><td>${this.person.telephone}</td></tr>
+                <tr><td class="td-profile">Funktion</td><td>${role}</td></tr>
+            </tbody>
+            <tfoot></tfoot>
+            </table>` : html`Keine Person ausgewählt.` }
         `;
     }
 }

person-select @ c5f1ba1c

+Subproject commit c5f1ba1c2639646eed6e0ab7dd8fe5f5053f5495