Merge pull request #2 from rwth-acis/metadata-yjs

Metadata yjs

README.md

@@ -2,8 +2,9 @@
 
 [![Java CI with Gradle](https://github.com/rwth-acis/las2peer-project-service/actions/workflows/gradle.yml/badge.svg?branch=main)](https://github.com/rwth-acis/las2peer-project-service/actions/workflows/gradle.yml)
 [![codecov](https://codecov.io/gh/rwth-acis/las2peer-project-service/branch/main/graph/badge.svg)](https://codecov.io/gh/rwth-acis/las2peer-project-service)
+[![npmjs](https://img.shields.io/npm/v/@rwth-acis/las2peer-project-service-frontend?color=success)](https://www.npmjs.com/package/@rwth-acis/las2peer-project-service-frontend)
 
-A [las2peer](https://github.com/rwth-acis/las2peer) service for managing projects and their members. We provide a project-list [LitElement](/frontend) which can be used as a frontend for this service.
+A [las2peer](https://github.com/rwth-acis/las2peer) service for managing projects and their members. We provide a [project-list](/frontend) LitElement which can be used as a frontend for this service.
 
 Build
 --------

frontend/README.md

@@ -1,14 +1,91 @@
-# \<project-list\>
+# Project-List Frontend
+[![npmjs](https://img.shields.io/npm/v/@rwth-acis/las2peer-project-service-frontend?color=success)](https://www.npmjs.com/package/@rwth-acis/las2peer-project-service-frontend)
 
-A LitElement for listing projects given by the las2peer-project-service and for creating new projects.
+The project-list is a LitElement for listing projects given by the las2peer-project-service and for creating new projects.
 
-## Development
-For testing the element during development, run `npm i` and  `npm run serve`.
+Basic Usage
+-------------------
+
+To use the project-list LitElement in your project, just install it from [npmjs](https://www.npmjs.com/package/@rwth-acis/las2peer-project-service-frontend):
+
+```
+npm i @rwth-acis/las2peer-project-service-frontend
+```
+
+Then you can use the project-list element as follows:
+
+```html
+<project-list system="{SYSTEM_NAME}"
+              projectServiceURL="{PROJECT_SERVICE_URL}"
+              contactServiceURL="{CONTACT_SERVICE_URL}"
+              yjsAddress="http://127.0.0.1:1234"
+              yjsResourcePath="./socket.io"></project-list>
+```
+
+Here, SYSTEM_NAME needs to match with a system that is configured in the project-service.
+For the configuration of systems, see the [main README](https://github.com/rwth-acis/las2peer-project-service).
+Set PROJECT_SERVICE_URL and CONTACT_SERVICE_URL to the address of the webconnector, where the respective service can be found.
+
+The project-list element uses [Yjs](https://github.com/yjs/yjs) to share the metadata of the currently selected/opened project with other project members that have selected the same project.
+This ensures, that every project member always gets the latest changes to the metadata.
+To configure the used y-websockets-server instance, use the attributes `yjsAddress` and `yjsResourcePath`.
+Please note: To keep the metadata of projects secured, the project-list uses an extended version of y-websockets-server and y-websockets-client.
+This extension allows to use Yjs rooms that only project members can access.
+The extensions can be found in the rwth-acis forks [rwth-acis/y-websockets-server#project-service](https://github.com/rwth-acis/y-websockets-server/tree/project-service) and [rwth-acis/y-websockets-client#v8](https://github.com/rwth-acis/y-websockets-client/tree/v8).
+
+
+You may also use the `disableAllProjects` attribute to disable the tab where all available projects are listed.
+
+Events
+-------------
+
+**Events fired by the project-list element:**
+
+`projects-loaded`:
+
+The project-list element fires this event whenever the projects are reloaded from the project-service.
+The event details contain a list of all projects that the current user can access.
+Depending on how the visibility of all projects is configured in the project-service, also projects where the current user is no member of will be part of the list.
 
-## Slots
+`project-selected`:
 
-The component can be extended or overridden at these slots.
+Whenever the user clicks on one of the projects in the list, this event will be fired.
+It contains detailed information on the selected project and its metadata.
 
-| Slot   | Description                                          |
-|--------|------------------------------------------------------|
-| TODO   | TODO                                                 |
+`metadata-changed`:
+
+If the metadata of the currently selected/opened project got changed, this event will be fired.
+It contains the updated project metadata.
+If you display the metadata in the UI and want to keep it up-to-date, then you can use this event.
+
+**Events that the project-list element listens for:**
+
+`metadata-change-request`:
+
+The project-list element listens to the event "metadata-change-request".
+It can be used to update the metadata of the currently selected project.
+If you send the event and set the event details to the updated metadata, the project-list element will send it to the project-service and after that the "metadata-changed" event will be fired.
+
+`metadata-reload-request`:
+
+If you updated the metadata without using the "metadata-change-request" event, as an example by using the RMI interface of the project-service, then you should use this event to inform the project-list element about it.
+When receiving the event, the project-list will fetch the metadata from the project-service again and will also send a "metadata-changed" event.
+
+`projects-reload-request`:
+
+This event can be used to reload the list of projects.
+It might be used after the user has logged in.
+
+Extension: SyncMeta Online User List
+-------------------------------------------
+
+If your projects are using [SyncMeta](https://github.com/rwth-acis/syncmeta), you can use the online user list extension.
+It allows to display the users that are currently online in a project / SyncMeta room.
+To use the online user list, the project-list element needs to know which project is using which Yjs room(s) for modelling.
+You can use the method "setOnlineUserListYjsRooms", that the project-list element provides, for this.
+As a parameter you use a map that maps project names to a list of Yjs room names (which are used for modelling inside the project).
+
+Development
+-----------------------------
+For testing the element during development, run `npm i` and  `npm run serve`.
+There is a demo available that can be used during development.

frontend/dev/demo-element.js

@@ -20,7 +20,6 @@ export class DemoElement extends LitElement {
   }
   // I didnt get how to use ready, so simply used firstUpdated which is always called after render...
   firstUpdated(changedProperties){
-    console.log("sas");
     const statusBar = this.shadowRoot.querySelector("#statusBar");
     // in the following we use (event) => this.method(event) in order to be able to access
     // this.shadowRoot in the handleLogin and handleLogout methods
@@ -29,22 +28,25 @@ export class DemoElement extends LitElement {
   }
 
   handleLogin(event) {
-    console.log("swsqwsw");
     console.log(event.detail.access_token);
     Auth.setAuthDataToLocalStorage(event.detail.access_token);
 
-      var url = localStorage.userinfo_endpoint + '?access_token=' + localStorage.access_token;
-      console.log(url);
-      fetch(url, {method: "GET"}).then(response => {
-        if(response.ok) {
-          return response.json();
-        }
-      }).then(data => {
-        console.log(data.name);
-       // const userInfo = Common.getUserInfo();
-        //userInfo.sub = data.sub;
-        Common.storeUserInfo(data);
-      });
+    var url = "https://api.learning-layers.eu/auth/realms/main/protocol/openid-connect/userinfo";
+    fetch(url, {method: "GET", headers: {
+      "Authorization": "Bearer " + Auth.getAccessToken()
+    }}).then(response => {
+      if(response.ok) {
+        return response.json();
+      }
+    }).then(data => {
+      console.log(data.name);
+      // const userInfo = Common.getUserInfo();
+      //userInfo.sub = data.sub;
+      Common.storeUserInfo(data);
+
+      // reload projects 
+      window.dispatchEvent(new CustomEvent("projects-reload-request", { bubbles: true }));
+    });
   }
 
   handleLogout() {
@@ -61,8 +63,8 @@ export class DemoElement extends LitElement {
     service="Project List Demo"
     oidcpopupsigninurl="/callbacks/popup-signin-callback.html"
     oidcpopupsignouturl="/callbacks/popup-signout-callback.html"
-    oidcsilentsigninturl="/callbacks/silent-callback.html"
-    oidcclientid="d8e6c0d3-fb09-49cc-9a6d-f1763d39a0a7"
+    oidcsilentsigninurl="/callbacks/silent-callback.html"
+    oidcclientid="localtestclient"
     suppresswidgeterror="true"
     autoAppendWidget=true
     ></las2peer-frontend-statusbar>
@@ -88,11 +90,9 @@ export class DemoElement extends LitElement {
   }
 
   _triggerChange(event){
-    let events = new CustomEvent("metadata-changed", {
+    let events = new CustomEvent("metadata-change-request", {
       detail: {
-        message: "Changed Project",
-        project: this.selectedProject,
-        newMetadata: {"random":this.shadowRoot.querySelector("#metadataInput").value}
+        "random": this.shadowRoot.querySelector("#metadataInput").value
       },
       bubbles: true
     });
@@ -116,6 +116,13 @@ export class DemoElement extends LitElement {
    */
   _onProjectsLoaded(event) {
     let projects = event.detail.projects;
+
+    window.addEventListener("metadata-changed", e => {
+        console.log("metadata has changed", e.detail);
+        const project = JSON.parse(this.selectedProject);
+        project.metadata = e.detail;
+        this.selectedProject = JSON.stringify(project);
+    });
 
     // uncomment this, if you want to test the online user list
     /*let mapProjectRooms = {};

frontend/index.html

@@ -5,6 +5,11 @@
     <meta charset="utf-8">
     <title>project-list Demo</title>
     <script type="module" src="dev/demo-element.js"></script>
+
+    <script src="/node_modules/yjs/dist/y.js"></script>
+    <script src="/node_modules/y-map/dist/y-map.js"></script>
+    <script src="/node_modules/y-memory/dist/y-memory.js"></script>
+    <script src="/node_modules/y-websockets-client/dist/y-websockets-client.js"></script>
   </head>
   <body>
     <div>