Skip to content
Snippets Groups Projects
Commit 29f677d3 authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Port to scoped elements

parent a033f2b3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 143 additions and 128 deletions
packages/person-profile/package.json
+ 4
− 4
View file @ 29f677d3
{ {
"name": "vpu-person-profile", "name": "vpu-person-profile",
"version": "1.0.0", "version": "1.0.0",
"main": "src/vpu-person-profile.js", "main": "src/index.js",
"devDependencies": { "devDependencies": {
"karma": "^4.2.0", "karma": "^4.2.0",
"karma-chai": "^0.1.0", "karma-chai": "^0.1.0",
...@@ -20,7 +20,6 @@ ...@@ -20,7 +20,6 @@
"rollup-plugin-terser": "^5.1.1", "rollup-plugin-terser": "^5.1.1",
"rollup-plugin-delete": "^1.1.0", "rollup-plugin-delete": "^1.1.0",
"rollup-plugin-json": "^4.0.0", "rollup-plugin-json": "^4.0.0",
"rollup-plugin-multi-entry": "^2.1.0",
"rollup-plugin-url": "^2.2.2", "rollup-plugin-url": "^2.2.2",
"i18next-scanner": "^2.10.2", "i18next-scanner": "^2.10.2",
"vpu-auth": "file:./vendor/auth", "vpu-auth": "file:./vendor/auth",
...@@ -28,8 +27,9 @@ ...@@ -28,8 +27,9 @@
"vpu-person-select": "file:./vendor/person-select" "vpu-person-select": "file:./vendor/person-select"
}, },
"dependencies": { "dependencies": {
"lit-element": "^2.2.1", "@open-wc/scoped-elements": "^1.0.8",
"jquery": "^3.4.1" "jquery": "^3.4.1",
"lit-element": "^2.2.1"
}, },
"scripts": { "scripts": {
"clean": "rm dist/*", "clean": "rm dist/*",
......
packages/person-profile/rollup.config.js
+ 3
− 3
View file @ 29f677d3
import glob from 'glob';
import path from 'path'; import path from 'path';
import resolve from 'rollup-plugin-node-resolve'; import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs'; import commonjs from 'rollup-plugin-commonjs';
...@@ -5,7 +7,6 @@ import copy from 'rollup-plugin-copy'; ...@@ -5,7 +7,6 @@ import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser"; import {terser} from "rollup-plugin-terser";
import json from 'rollup-plugin-json'; import json from 'rollup-plugin-json';
import serve from 'rollup-plugin-serve'; import serve from 'rollup-plugin-serve';
import multiEntry from 'rollup-plugin-multi-entry';
import url from "rollup-plugin-url" import url from "rollup-plugin-url"
import consts from 'rollup-plugin-consts'; import consts from 'rollup-plugin-consts';
import del from 'rollup-plugin-delete'; import del from 'rollup-plugin-delete';
...@@ -14,7 +15,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : ' ...@@ -14,7 +15,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : '
console.log("build: " + build); console.log("build: " + build);
export default { export default {
input: (build != 'test') ? ['src/vpu-person-profile.js', 'src/vpu-person-profile-demo.js'] : 'test/**/*.js', input: (build != 'test') ? ['src/vpu-person-profile.js', 'src/vpu-person-profile-demo.js'] : glob.sync('test/**/*.js'),
output: { output: {
dir: 'dist', dir: 'dist',
entryFileNames: '[name].js', entryFileNames: '[name].js',
...@@ -26,7 +27,6 @@ export default { ...@@ -26,7 +27,6 @@ export default {
del({ del({
targets: 'dist/*' targets: 'dist/*'
}), }),
(build == 'test') ? multiEntry() : false,
consts({ consts({
environment: build, environment: build,
}), }),
......
packages/person-profile/src/index.js 0 → 100644
+ 3
− 0
View file @ 29f677d3
import {PersonProfile} from './person-profile.js';
export {PersonProfile};
\ No newline at end of file
packages/person-profile/src/person-profile.js 0 → 100644
+ 120
− 0
View file @ 29f677d3
import JSONLD from 'vpu-common/jsonld';
import {css, html} from 'lit-element';
import {i18n} from './i18n.js';
import VPULitElement from 'vpu-common/vpu-lit-element';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
export class PersonProfile extends VPULitElement {
constructor() {
super();
this.lang = 'de';
this.entryPointUrl = commonUtils.getAPiUrl();
this.jsonld = null;
this.value = '';
this.person = null;
}
static get properties() {
return {
lang: { type: String },
active: { type: Boolean, attribute: false },
entryPointUrl: { type: String, attribute: 'entry-point-url' },
value: { type: String },
person: { type: Object, attribute: false },
};
}
connectedCallback() {
super.connectedCallback();
this.updateComplete.then(()=>{
});
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
switch (propName) {
case "lang":
i18n.changeLanguage(this.lang);
break;
case "entryPointUrl":
const that = this;
JSONLD.initialize(this.entryPointUrl, function (jsonld) {
that.jsonld = jsonld;
}, {}, that.lang);
break;
case 'value':
if (this.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:
}
});
super.update(changedProperties);
}
static get styles() {
// language=css
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
`;
}
render() {
let role = i18n.t('person-profile.unknown');
if (this.person !== null && this.person.roles !== undefined) {
// roles are only defined for self-disclosure
if (this.person.roles.indexOf('ROLE_STAFF') > -1) {
role = i18n.t('person-profile.staff');
} else if (this.person.roles.indexOf('ROLE_ALUMNI') > -1) {
role = i18n.t('person-profile.alumni');
}
}
commonUtils.initAssetBaseURL('vpu-person-profile-src');
return html`
<style>
.profile {
padding: 1rem
}
.td-profile {
padding-right: 2rem
}
</style>
${this.person !== null && this.person.name !== '' ? html`<h3>${i18n.t('person-profile.profile-caption')} ${this.person.name}</h3>
<table class="profile">
<thead></thead>
<tbody>
<tr><td class="td-profile">${i18n.t('person-profile.given-name')}</td><td>${this.person.givenName}</td></tr>
<tr><td class="td-profile">${i18n.t('person-profile.family-name')}</td><td>${this.person.familyName}</td></tr>
<tr><td class="td-profile">${i18n.t('person-profile.email')}</td><td>${this.person.email}</td></tr>
<tr><td class="td-profile">${i18n.t('person-profile.telephone')}</td><td>${this.person.telephone}</td></tr>
<tr><td class="td-profile">${i18n.t('person-profile.role')}</td><td>${role}</td></tr>
</tbody>
<tfoot></tfoot>
</table>` : i18n.t('person-profile.none-selected') }
`;
}
}
commonUtils.defineCustomElement('vpu-person-profile', PersonProfile);
packages/person-profile/src/vpu-person-profile-demo.js
+ 12
− 3
View file @ 29f677d3
import 'vpu-auth'; import 'vpu-auth';
import {i18n} from './i18n.js'; import {i18n} from './i18n.js';
import {css, html, LitElement} from 'lit-element'; import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import VPULitElement from 'vpu-common/vpu-lit-element'; import VPULitElement from 'vpu-common/vpu-lit-element';
import './vpu-person-profile.js'; import {PersonProfile} from './index.js';
import * as commonUtils from 'vpu-common/utils'; import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles'; import * as commonStyles from 'vpu-common/styles';
import $ from 'jquery'; import $ from 'jquery';
import 'vpu-person-select'; import 'vpu-person-select';
class PersonProfileDemo extends VPULitElement { class PersonProfileDemo extends ScopedElementsMixin(VPULitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this.lang = 'de';
...@@ -17,6 +18,14 @@ class PersonProfileDemo extends VPULitElement { ...@@ -17,6 +18,14 @@ class PersonProfileDemo extends VPULitElement {
this.noAuth = false; this.noAuth = false;
} }
static get scopedElements() {
return {
'vpu-person-profile': PersonProfile,
'vpu-auth': customElements.get('vpu-auth'),
'vpu-person-select': customElements.get('vpu-person-select'),
};
}
static get properties() { static get properties() {
return { return {
lang: { type: String }, lang: { type: String },
......
packages/person-profile/src/vpu-person-profile.js
+ 1
− 117
View file @ 29f677d3
import JSONLD from 'vpu-common/jsonld';
import {css, html} from 'lit-element';
import {i18n} from './i18n.js';
import VPULitElement from 'vpu-common/vpu-lit-element';
import * as commonUtils from 'vpu-common/utils'; import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles'; import {PersonProfile} from './person-profile.js';
class PersonProfile extends VPULitElement {
constructor() {
super();
this.lang = 'de';
this.entryPointUrl = commonUtils.getAPiUrl();
this.jsonld = null;
this.value = '';
this.person = null;
}
static get properties() {
return {
lang: { type: String },
active: { type: Boolean, attribute: false },
entryPointUrl: { type: String, attribute: 'entry-point-url' },
value: { type: String },
person: { type: Object, attribute: false },
};
}
connectedCallback() {
super.connectedCallback();
this.updateComplete.then(()=>{
});
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
switch (propName) {
case "lang":
i18n.changeLanguage(this.lang);
break;
case "entryPointUrl":
const that = this;
JSONLD.initialize(this.entryPointUrl, function (jsonld) {
that.jsonld = jsonld;
}, {}, that.lang);
break;
case 'value':
if (this.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:
}
});
super.update(changedProperties);
}
static get styles() {
// language=css
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
`;
}
render() {
let role = i18n.t('person-profile.unknown');
if (this.person !== null && this.person.roles !== undefined) {
// roles are only defined for self-disclosure
if (this.person.roles.indexOf('ROLE_STAFF') > -1) {
role = i18n.t('person-profile.staff');
} else if (this.person.roles.indexOf('ROLE_ALUMNI') > -1) {
role = i18n.t('person-profile.alumni');
}
}
commonUtils.initAssetBaseURL('vpu-person-profile-src');
return html`
<style>
.profile {
padding: 1rem
}
.td-profile {
padding-right: 2rem
}
</style>
${this.person !== null && this.person.name !== '' ? html`<h3>${i18n.t('person-profile.profile-caption')} ${this.person.name}</h3>
<table class="profile">
<thead></thead>
<tbody>
<tr><td class="td-profile">${i18n.t('person-profile.given-name')}</td><td>${this.person.givenName}</td></tr>
<tr><td class="td-profile">${i18n.t('person-profile.family-name')}</td><td>${this.person.familyName}</td></tr>
<tr><td class="td-profile">${i18n.t('person-profile.email')}</td><td>${this.person.email}</td></tr>
<tr><td class="td-profile">${i18n.t('person-profile.telephone')}</td><td>${this.person.telephone}</td></tr>
<tr><td class="td-profile">${i18n.t('person-profile.role')}</td><td>${role}</td></tr>
</tbody>
<tfoot></tfoot>
</table>` : i18n.t('person-profile.none-selected') }
`;
}
}
commonUtils.defineCustomElement('vpu-person-profile', PersonProfile); commonUtils.defineCustomElement('vpu-person-profile', PersonProfile);
packages/person-profile/test/unit.js
+ 0
− 1
View file @ 29f677d3
import '../src/vpu-person-profile.js';
import '../src/demo.js'; import '../src/demo.js';
describe('vpu-person-profile demo', () => { describe('vpu-person-profile demo', () => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment