diff --git a/packages/person-profile/.gitmodules b/packages/person-profile/.gitmodules
index f997e57d8aaedcde29a6a64690d31268c7406e1f..aaa7d63df7f3616a984c4f215581e5acf82d33da 100644
--- a/packages/person-profile/.gitmodules
+++ b/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
diff --git a/packages/person-profile/package.json b/packages/person-profile/package.json
index a593a42645cda8fc64301f48362755b28b096cc2..8e6744e8a42c09aef5d21a949a238b04ac2b2152 100644
--- a/packages/person-profile/package.json
+++ b/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/*",
diff --git a/packages/person-profile/rollup.config.js b/packages/person-profile/rollup.config.js
index 49cddccce69294cac1656419a3eb87312261cde7..ed2b82fd390cf38f2f3c3f6652705f5dcc3a04ca 100644
--- a/packages/person-profile/rollup.config.js
+++ b/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]'
diff --git a/packages/person-profile/src/person-profile-demo.js b/packages/person-profile/src/person-profile-demo.js
index c42fa1a88d6ecedf3f645db8d864ab1a7f484606..2b8c7db0b144e097cb63f82e28154e9699895063 100644
--- a/packages/person-profile/src/person-profile-demo.js
+++ b/packages/person-profile/src/person-profile-demo.js
@@ -1,27 +1,44 @@
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>
`;
diff --git a/packages/person-profile/src/person-profile.js b/packages/person-profile/src/person-profile.js
index 62f3bf54b3721fef1f716a186823a0ed37c19faa..3334fc765fcca64b08dd8e76ab9599a96ec0e335 100644
--- a/packages/person-profile/src/person-profile.js
+++ b/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.` }
`;
}
}
diff --git a/packages/person-profile/vendor/person-select b/packages/person-profile/vendor/person-select
new file mode 160000
index 0000000000000000000000000000000000000000..c5f1ba1c2639646eed6e0ab7dd8fe5f5053f5495
--- /dev/null
+++ b/packages/person-profile/vendor/person-select
@@ -0,0 +1 @@
+Subproject commit c5f1ba1c2639646eed6e0ab7dd8fe5f5053f5495