Select Git revision
-
Reiter, Christoph authored
We want the users to access all properties of the resources, so the limited set of transformations wont work here.
Reiter, Christoph authoredWe want the users to access all properties of the resources, so the limited set of transformations wont work here.
dbp-person-select-demo.js 4.88 KiB
import {createInstance} from './i18n.js';
import {css, html} from 'lit';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {PersonSelect} from './person-select.js';
import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles';
import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
export class PersonSelectDemo extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
this._i18n = createInstance();
this.lang = this._i18n.language;
this.entryPointUrl = '';
this.noAuth = false;
}
static get scopedElements() {
return {
'dbp-auth-keycloak': AuthKeycloak,
'dbp-login-button': LoginButton,
'dbp-person-select': PersonSelect,
};
}
static get properties() {
return {
...super.properties,
lang: {type: String},
entryPointUrl: {type: String, attribute: 'entry-point-url'},
noAuth: {type: Boolean, attribute: 'no-auth'},
};
}
static get styles() {
// language=css
return [
commonStyles.getThemeCSS(),
commonStyles.getGeneralCSS(),
css`
h1.title {
margin-bottom: 1em;
}
div.container {
margin-bottom: 1.5em;
}
`,
];
}
update(changedProperties) {
if (changedProperties.has('lang')) {
this._i18n.changeLanguage(this.lang);
}
super.update(changedProperties);
}
getAuthComponentHtml() {
return this.noAuth
? html`
<dbp-login-button subscribe="auth" lang="${this.lang}"></dbp-login-button>
`
: html`
<div class="container">
<dbp-auth-keycloak
subscribe="requested-login-status"
lang="${this.lang}"
entry-point-url="${this.entryPointUrl}"
silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
url="https://auth-dev.tugraz.at/auth"
realm="tugraz-vpu"
client-id="auth-dev-mw-frontend-local"
try-login></dbp-auth-keycloak>
<dbp-login-button subscribe="auth" lang="${this.lang}"></dbp-login-button>
</div>
`;
}
render() {
return html`
<section class="section">
<div class="container">
<h1 class="title">Person-Select-Demo</h1>
</div>
${this.getAuthComponentHtml()}
<div class="container">
<form>
<div class="field">
<label class="label">Person 1</label>
<div class="control">
<dbp-person-select
subscribe="auth"
lang="${this.lang}"
entry-point-url="${this.entryPointUrl}"></dbp-person-select>
</div>
</div>
<div class="field">
<label class="label">Person 2</label>
<div class="control">
<dbp-person-select
subscribe="auth"
lang="${this.lang}"
entry-point-url="${this.entryPointUrl}"
show-reload-button
reload-button-title="Click me"></dbp-person-select>
</div>
</div>
<div class="field">
<label class="label">Person 3 unsubscribed</label>
<div class="control">
<dbp-person-select
lang="${this.lang}"
entry-point-url="${this.entryPointUrl}"
show-reload-button
reload-button-title="Click me"></dbp-person-select>
</div>
<p>
This component doesn't get any notification about user's login and
will become active.
</p>
</div>
</form>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('dbp-person-select-demo', PersonSelectDemo);