Add initial implementation

ae568d47 · Bekerle, Patrizio · Reiter, Christoph · 8e8ec164 · ae568d47 · ae568d47
Commit ae568d47 authored 5 years ago by Bekerle, Patrizio Committed by Reiter, Christoph 4 years ago
--- a/packages/person-profile/.gitignore
+++ b/packages/person-profile/.gitignore
+dist
+node_modules
+.idea
+npm-debug.log
+package-lock.json
--- a/packages/person-profile/.gitlab-ci.yml
+++ b/packages/person-profile/.gitlab-ci.yml
+image: debian:buster
+
+before_script:
+  - apt update
+  - apt install -y git
+  - "sed -i 's|git@gitlab.tugraz.at:VPU|../..|g' .gitmodules"
+  - git submodule sync
+  - git submodule update --init
+
+stages:
+  - test
+
+test:
+  stage: test
+  script:
+    - apt update
+    - apt install -y npm chromium
+    - npm install
+    - npm run build
+    - npm test
--- a/packages/person-profile/.gitmodules
+++ b/packages/person-profile/.gitmodules
+[submodule "vendor/auth"]
+	path = vendor/auth
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Auth.git
+[submodule "vendor/common"]
+	path = vendor/common
+	url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
--- a/packages/person-profile/assets/index.html
+++ b/packages/person-profile/assets/index.html
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script type="module" src="bundle.js"></script>
+</head>
+
+<body>
+
+<vpu-person-profile-demo lang="de"></vpu-person-profile-demo>
+</body>
+</html>
--- a/packages/person-profile/i18next-scanner.config.js
+++ b/packages/person-profile/i18next-scanner.config.js
+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'
+        },
+    },
+}
--- a/packages/person-profile/karma.conf.js
+++ b/packages/person-profile/karma.conf.js
+// Trick to use the auto-downloaded puppeteer chrome binary
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
+module.exports = function(config) {
+  config.set({
+    basePath: 'dist',
+    frameworks: ['mocha', 'chai'],
+    files: [
+      {pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
+      {pattern: './**/*', included: false, watched: true, served: true},
+    ],
+    autoWatch: true,
+    browsers: ['ChromeHeadlessNoSandbox'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
+    singleRun: false,
+    logLevel: config.LOG_ERROR
+  });
+}
--- a/packages/person-profile/package.json
+++ b/packages/person-profile/package.json
+{
+  "name": "vpu-person-profile",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "devDependencies": {
+    "karma": "^4.2.0",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^3.0.0",
+    "karma-mocha": "^1.3.0",
+    "node-sass": "^4.12.0",
+    "puppeteer": "^1.19.0",
+    "mocha": "^6.2.0",
+    "chai": "^4.2.0",
+    "rollup": "^1.19.4",
+    "rollup-plugin-commonjs": "^10.0.2",
+    "rollup-plugin-consts": "^1.0.1",
+    "rollup-plugin-copy": "^3.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-terser": "^5.1.1",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-multi-entry": "^2.1.0",
+    "rollup-plugin-url": "^2.2.2",
+    "i18next-scanner": "^2.10.2",
+    "vpu-auth": "file:./vendor/auth",
+    "vpu-common": "file:./vendor/common"
+  },
+  "dependencies": {
+    "bulma": "^0.7.5",
+    "lit-element": "^2.2.1"
+  },
+  "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"
+  }
+}
--- a/packages/person-profile/rollup.config.js
+++ b/packages/person-profile/rollup.config.js
+import path from 'path';
+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 multiEntry from 'rollup-plugin-multi-entry';
+import url from "rollup-plugin-url"
+import consts from 'rollup-plugin-consts';
+
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+
+export default {
+    input: (build != 'test') ? 'src/demo.js' : 'test/**/*.js',
+    output: {
+        file: 'dist/bundle.js',
+        format: 'esm'
+    },
+    plugins: [
+        multiEntry(),
+        consts({
+            environment: build,
+        }),
+        resolve({
+          customResolveOptions: {
+            // ignore node_modules from vendored packages
+            moduleDirectory: path.join(process.cwd(), 'node_modules')
+          }
+        }),
+        commonjs({
+            include: 'node_modules/**'
+        }),
+        url({
+            limit: 0,
+            include: [
+                "node_modules/bulma/**/*.css",
+                "node_modules/bulma/**/*.sass",
+            ],
+            emitFiles: true,
+            fileName: 'shared/[name].[hash][extname]'
+        }),
+        json(),
+        (build !== 'local' && build !== 'test') ? terser() : false,
+        copy({
+            targets: [
+                {src: 'assets/index.html', dest: 'dist'},
+            ],
+        }),
+        (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
+    ]
+};
--- a/packages/person-profile/src/demo.js
+++ b/packages/person-profile/src/demo.js
+import 'vpu-auth';
+import './person-profile-demo.js';
--- a/packages/person-profile/src/i18n.js
+++ b/packages/person-profile/src/i18n.js
+import {createInstance} from 'vpu-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
--- a/packages/person-profile/src/i18n/de/translation.json
+++ b/packages/person-profile/src/i18n/de/translation.json
+{
+}
--- a/packages/person-profile/src/i18n/en/translation.json
+++ b/packages/person-profile/src/i18n/en/translation.json
+{
+}
--- a/packages/person-profile/src/index.js
+++ b/packages/person-profile/src/index.js
+import './person-profile.js';
--- a/packages/person-profile/src/person-profile-demo.js
+++ b/packages/person-profile/src/person-profile-demo.js
+import {i18n} from './i18n.js';
+import {html, LitElement} from '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";
+
+class PersonProfileDemo extends LitElement {
+    constructor() {
+        super();
+        this.lang = 'de';
+    }
+
+    static get properties() {
+        return {
+            lang: { type: String },
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        i18n.changeLanguage(this.lang);
+
+        this.updateComplete.then(()=>{
+        });
+    }
+
+    render() {
+        const bulmaCSS = getAssetURL(bulmaCSSPath);
+        return html`
+            <link rel="stylesheet" href="${bulmaCSS}">
+
+            <header>
+                <div class="container">
+                    <vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" load-person remember-login style="float:right"></vpu-auth>
+                </div>
+            </header>
+
+            <section class="section">
+                <div class="container">
+                    <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>
+                </div>
+            </section>
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('vpu-person-profile-demo', PersonProfileDemo);
--- a/packages/person-profile/src/person-profile.js
+++ b/packages/person-profile/src/person-profile.js
+import {getAssetURL} from './utils.js';
+import JSONLD from 'vpu-common/jsonld';
+import {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 bulmaCSSPath from "bulma/css/bulma.min.css";
+
+
+class PersonProfile extends VPULitElement {
+
+    constructor() {
+        super();
+        this.lang = 'de';
+        this.entryPointUrl = commonUtils.getAPiUrl();
+        this.jsonld = null;
+        this.value = '';
+    }
+
+    static get properties() {
+        return {
+            lang: { type: String },
+            active: { type: Boolean, attribute: false },
+            entryPointUrl: { type: String, attribute: 'entry-point-url' },
+            value: { type: String },
+        };
+    }
+
+    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;
+            }
+        });
+
+        super.update(changedProperties);
+    }
+
+    render() {
+        const bulmaCSS = getAssetURL(bulmaCSSPath);
+        return html`
+            <link rel="stylesheet" href="${bulmaCSS}">
+            <style>
+            </style>
+
+            PROFILE
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('vpu-person-profile', PersonProfile);
--- a/packages/person-profile/src/utils.js
+++ b/packages/person-profile/src/utils.js
+export const getAssetURL = (path) => {
+    const elm = document.getElementById('vpu-library-shelving-wc-src');
+    if (!elm)
+        return path;
+    const url = elm.src;
+    // newer browsers only
+    //var url = import.meta.url;
+    return new URL(path, url).href;
+};
--- a/packages/person-profile/test/unit.js
+++ b/packages/person-profile/test/unit.js
+import '../src/person-profile.js';
+import '../src/demo.js';
+
+describe('vpu-person-profile demo', () => {
+  let node;
+
+  beforeEach(async () => {
+    node = document.createElement('vpu-person-profile-demo');
+    document.body.appendChild(node);
+    await node.updateComplete;
+  });
+
+  afterEach(() => {
+    node.remove();
+  });
+
+  it('should render', () => {
+      expect(node).to.have.property('shadowRoot');
+  });
+});