Skip to content
Snippets Groups Projects
Unverified Commit 6b392fe5 authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Add organization-select package

parent 253e9d4d
No related branches found
No related tags found
No related merge requests found
Pipeline #18059 failed
Stage: test
Stage: deploy
Stage: e2e-stage1
Stage: e2e-stage2
Stage: e2e-stage3
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 932 additions and 0 deletions
packages/organization-select/.eslintignore 0 → 100644
+ 3
− 0
View file @ 6b392fe5
/vendor/**
/dist/**
/*.js
\ No newline at end of file
packages/organization-select/.eslintrc.json 0 → 100644
+ 3
− 0
View file @ 6b392fe5
{
"extends": "./../../eslint.common.json"
}
\ No newline at end of file
packages/organization-select/.gitignore 0 → 100644
+ 5
− 0
View file @ 6b392fe5
dist
node_modules
.idea
npm-debug.log
package-lock.json
packages/organization-select/.npmignore 0 → 100644
+ 5
− 0
View file @ 6b392fe5
node_modules
.idea
npm-debug.log
package-lock.json
index.html
packages/organization-select/LICENSE 0 → 100644
+ 502
− 0
View file @ 6b392fe5
This diff is collapsed.
packages/organization-select/README.md 0 → 100644
+ 51
− 0
View file @ 6b392fe5
# Organization Select Web Component
You can install this component via npm:
```bash
npm i @dbp-toolkit/organization-select
```
## Usage
```html
<dbp-knowledge-base-organization-select></dbp-knowledge-base-organization-select>
<script type="module" src="node_modules/@dbp-toolkit/organization-select/dist/dbp-knowledge-base-organization-select.js"></script>
```
## Attributes
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<dbp-knowledge-base-organization-select lang="de"></dbp-knowledge-base-organization-select>`
- `entry-point-url` (optional, default is the TU Graz entry point url): entry point url to access the api
- example `<dbp-knowledge-base-organization-select entry-point-url="http://127.0.0.1:8000"></dbp-knowledge-base-organization-select>`
- `value` (optional): api path of organization to preload the selector with
- example `<dbp-knowledge-base-organization-select value="/people/testuser"></dbp-knowledge-base-organization-select>`
- the `value` will also be set automatically when an organization is chosen in the selector
- `data-object` (read-only): when an organization is selected the organization object will be set as json string
- example `<dbp-knowledge-base-organization-select data-object="{"@id":"/organizations/1190-F2050","@type":"http://schema.org/Organization","identifier":"1190-F2050","name":"Institut fr Stahlbau","url":"https://online.tugraz.at/tug_online/wborg.display?pOrgNr=1190","alternateName":"F2050"}"></dbp-knowledge-base-organization-select>`
- `auth` object: you need to set that object property for the auth token
- example auth property: `{token: "THE_BEARER_TOKEN"}`
- note: most often this should be an attribute that is not set directly, but subscribed at a provider
## Local development
```bash
# get the source
git clone git@gitlab.tugraz.at:dbp/web-components/toolkit.git
cd toolkit/packages/organization-select
# install dependencies
yarn install
# constantly build dist/bundle.js and run a local web-server on port 8002
yarn run watch
# run tests
yarn test
# build local packages in dist directory
yarn run build
```
Jump to <http://localhost:8002> and you should get a Single Sign On login page.
packages/organization-select/assets/index.html 0 → 100644
+ 12
− 0
View file @ 6b392fe5
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="dbp-knowledge-base-organization-select-demo.js"></script>
</head>
<body>
<dbp-knowledge-base-organization-select-demo auth requested-login-status lang="de" entry-point-url="http://127.0.0.1:8000"></dbp-knowledge-base-organization-select-demo>
</body>
</html>
packages/organization-select/i18next-scanner.config.js 0 → 100644
+ 15
− 0
View file @ 6b392fe5
module.exports = {
input: [
'src/*.js',
],
output: './',
options: {
debug: false,
removeUnusedKeys: true,
lngs: ['en','de'],
resource: {
loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
savePath: 'src/i18n/{{lng}}/{{ns}}.json'
},
},
}
packages/organization-select/karma.conf.js 0 → 100644
+ 1
− 0
View file @ 6b392fe5
module.exports = require('../../karma.common.conf.js');
packages/organization-select/package.json 0 → 100644
+ 60
− 0
View file @ 6b392fe5
{
"name": "@dbp-toolkit/organization-select",
"homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/organization-select",
"version": "0.2.0",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/organization-select"
},
"publishConfig": {
"registry": "https://registry.npmjs.org",
"access": "public"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-replace": "^2.3.3",
"@rollup/plugin-url": "^6.0.0",
"chai": "^4.2.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^32.0.0",
"i18next-scanner": "^3.0.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-firefox-launcher": "^2.1.0",
"karma-mocha": "^2.0.1",
"mocha": "^8.0.1",
"rollup": "^2.33.3",
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.2.2",
"@dbp-toolkit/common": "^0.2.2",
"@open-wc/scoped-elements": "^1.3.2",
"jquery": "^3.4.1",
"lit-element": "^2.4.0",
"select2": "^4.0.10"
},
"scripts": {
"clean": "rm dist/*",
"build": "npm run build-local",
"build-local": "rollup -c",
"build-dev": "rollup -c --environment BUILD:development",
"build-prod": "rollup -c --environment BUILD:production",
"build-demo": "rollup -c --environment BUILD:demo",
"build-test": "rollup -c --environment BUILD:test",
"i18next": "i18next-scanner",
"watch": "npm run watch-local",
"watch-local": "rollup -c --watch",
"watch-dev": "rollup -c --watch --environment BUILD:development",
"test": "npm run build-test && karma start --singleRun",
"lint": "eslint ."
}
}
packages/organization-select/rollup.config.js 0 → 100644
+ 57
− 0
View file @ 6b392fe5
import glob from 'glob';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import json from '@rollup/plugin-json';
import serve from 'rollup-plugin-serve';
import url from "@rollup/plugin-url"
import del from 'rollup-plugin-delete';
import {getPackagePath, getDistPath} from '../../rollup.utils.js';
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
export default (async () => {
return {
input: (build != 'test') ? ['src/dbp-knowledge-base-organization-select.js', 'src/dbp-knowledge-base-organization-select-demo.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
chunkFileNames: 'shared/[name].[hash].[format].js',
format: 'esm',
sourcemap: true
},
onwarn: function (warning, warn) {
// ignore chai warnings
if (warning.code === 'CIRCULAR_DEPENDENCY') {
return;
}
warn(warning);
},
plugins: [
del({
targets: 'dist/*'
}),
resolve(),
commonjs(),
url({
limit: 0,
include: [
await getPackagePath('select2', '**/*.css'),
],
emitFiles: true,
fileName: 'shared/[name].[hash][extname]'
}),
json(),
(build !== 'local' && build !== 'test') ? terser() : false,
copy({
targets: [
{src: 'assets/index.html', dest: 'dist'},
{src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'), dest: 'dist/' + await getDistPath('@dbp-toolkit/common', 'icons')},
],
}),
(process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
]
};
})();
\ No newline at end of file
packages/organization-select/src/dbp-knowledge-base-organization-select-demo.js 0 → 100644
+ 94
− 0
View file @ 6b392fe5
import {i18n} from './i18n.js';
import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {OrganizationSelect} from './organization-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 OrganizationSelectDemo extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
this.lang = 'de';
this.entryPointUrl = '';
this.noAuth = false;
}
static get scopedElements() {
return {
'dbp-auth-keycloak': AuthKeycloak,
'dbp-login-button': LoginButton,
'dbp-knowledge-base-organization-select': OrganizationSelect,
};
}
static get properties() {
return {
...super.properties,
lang: { type: String },
entryPointUrl: { type: String, attribute: 'entry-point-url' },
noAuth: { type: Boolean, attribute: 'no-auth' },
};
}
connectedCallback() {
super.connectedCallback();
i18n.changeLanguage(this.lang);
this.updateComplete.then(()=>{
});
}
static get styles() {
// language=css
return [
commonStyles.getThemeCSS(),
commonStyles.getGeneralCSS(),
css`
h1.title {margin-bottom: 1em;}
div.container {margin-bottom: 1.5em;}
`
];
}
getAuthComponentHtml() {
return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></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"
client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>
</div>
`;
}
render() {
return html`
<section class="section">
<div class="container">
<h1 class="title">Organization-Select-Demo</h1>
</div>
${this.getAuthComponentHtml()}
<div class="container">
<form>
<div class="field">
<label class="label">Organization 1</label>
<div class="control">
<dbp-knowledge-base-organization-select subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-knowledge-base-organization-select>
</div>
</div>
<div class="field">
<label class="label">Organization 2</label>
<div class="control">
<dbp-knowledge-base-organization-select subscribe="auth" lang="${this.lang}" entry-point-url="${this.entryPointUrl}"></dbp-knowledge-base-organization-select>
</div>
</div>
</form>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('dbp-knowledge-base-organization-select-demo', OrganizationSelectDemo);
packages/organization-select/src/dbp-knowledge-base-organization-select.js 0 → 100644
+ 4
− 0
View file @ 6b392fe5
import * as commonUtils from '@dbp-toolkit/common/utils';
import {OrganizationSelect} from './organization-select.js';
commonUtils.defineCustomElement('dbp-knowledge-base-organization-select', OrganizationSelect);
packages/organization-select/src/demo.js 0 → 100644
+ 1
− 0
View file @ 6b392fe5
import './dbp-knowledge-base-organization-select-demo.js';
packages/organization-select/src/i18n.js 0 → 100644
+ 6
− 0
View file @ 6b392fe5
import {createInstance} from '@dbp-toolkit/common/i18next.js';
import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
packages/organization-select/src/i18n/de/select2.js 0 → 100644
+ 46
− 0
View file @ 6b392fe5
/**
* Content from https://github.com/select2/select2/blob/master/src/js/select2/i18n/de.js
*/
export default function () {
// German
return {
errorLoading: function () {
return 'Die Ergebnisse konnten nicht geladen werden.';
},
inputTooLong: function (args) {
var overChars = args.input.length - args.maximum;
return 'Bitte ' + overChars + ' Zeichen weniger eingeben';
},
inputTooShort: function (args) {
var remainingChars = args.minimum - args.input.length;
return 'Bitte ' + remainingChars + ' Zeichen mehr eingeben';
},
loadingMore: function () {
return 'Lade mehr Ergebnisse…';
},
maximumSelected: function (args) {
var message = 'Sie können nur ' + args.maximum + ' Eintr';
if (args.maximum === 1) {
message += 'ag';
} else {
message += 'äge';
}
message += ' auswählen';
return message;
},
noResults: function () {
return 'Keine Übereinstimmungen gefunden';
},
searching: function () {
return 'Suche…';
},
removeAllItems: function () {
return 'Auswahl aufheben';
}
};
}
packages/organization-select/src/i18n/de/translation.json 0 → 100644
+ 7
− 0
View file @ 6b392fe5
{
"select-organization": {
"placeholder": "Bitte wählen Sie ein Institut aus",
"loading": "Wird geladen...",
"load-error": "Fehler beim Laden der Organisation"
}
}
packages/organization-select/src/i18n/en/select2.js 0 → 100644
+ 50
− 0
View file @ 6b392fe5
/**
* Content from https://github.com/select2/select2/blob/master/src/js/select2/i18n/en.js
*/
export default function () {
// English
return {
errorLoading: function () {
return 'The results could not be loaded.';
},
inputTooLong: function (args) {
var overChars = args.input.length - args.maximum;
var message = 'Please delete ' + overChars + ' character';
if (overChars != 1) {
message += 's';
}
return message;
},
inputTooShort: function (args) {
var remainingChars = args.minimum - args.input.length;
var message = 'Please enter ' + remainingChars + ' or more characters';
return message;
},
loadingMore: function () {
return 'Loading more results…';
},
maximumSelected: function (args) {
var message = 'You can only select ' + args.maximum + ' item';
if (args.maximum != 1) {
message += 's';
}
return message;
},
noResults: function () {
return 'No results found';
},
searching: function () {
return 'Searching…';
},
removeAllItems: function () {
return 'Remove selection';
}
};
}
packages/organization-select/src/i18n/en/translation.json 0 → 100644
+ 7
− 0
View file @ 6b392fe5
{
"select-organization": {
"placeholder": "Please select an organization",
"loading": "Loading...",
"load-error": "Error loading the organization"
}
}
packages/organization-select/src/index.js 0 → 100644
+ 3
− 0
View file @ 6b392fe5
import {OrganizationSelect} from './organization-select.js';
export {OrganizationSelect};
\ No newline at end of file
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