The project-list is a LitElement for listing projects given by the las2peer-project-service and for creating new projects.
To use the project-list LitElement in your project, just install it from npmjs:
npm i @rwth-acis/las2peer-project-service-frontend
Then you can use the project-list element as follows:
<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. 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 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 and rwth-acis/y-websockets-client#v8.
You may also use the disableAllProjects attribute to disable the tab where all available projects are listed.
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.
project-selected:
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.
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.
If your projects are using 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).
For testing the element during development, run npm i and npm run serve.
There is a demo available that can be used during development.