Maretha Angular WebUI

The Angular app is located under `.\maretha-angular-webui\src\main\web-app\app`.

Generating a Maven package

1. Make sure you have the latest version of [npm]( installed!
2. Run `mvn clean install -DskipTests` at the same folder level as this README file to have the package .zip file generated.


You need to register an OAuth2 client on your Nuxeo Platform for authentication purposes:
1. Using nuxeo-web-ui, go to `${NUXEO_SERVER}/nuxeo/ui/#!/admin/cloud-services`
2. Click on **Consumers**
3. Click on the **Add** button
4. Create a new entry with the following attributes:
– Name: `Maretha Angular UI`
– Client Id: `maretha-angular-webui`
– Redirect URIs: `${NUXEO_SERVER}/nuxeo/ng/#`
5. Enable the new OAuth2 Consumer
> Replace ${NUXEO_SERVER} with your actual Nuxeo server URL.


Edit maretha-angular-webui/src/main/web-app/env.js for:
– customizing the type of documents that are displayed on the dashboard’s statistics section
– enable/disable certain addon-specific features (ex. retention)


1. Make sure you have the latest version of [npm]( installed!
2. Run `mvn clean install –legacy-peer-deps` at the same folder level as this README file to install all dependencies.
For development purposes, simply run `ng serve` at the same folder level as the Angular app (`.maretha-angular-webui\src\main\web-app\app`), which will start the app at http://localhost:4200/#. The hash at the end of the url is needed because that’s where the Nuxeo server is expecting the UI to be located, otherwise refreshing the page would result in a 404 error.

Project structure

The root folder for the web application is `.maretha-angular-webui\src\main\web-app\app`.
The `.\directive` sub-folder holds all the directives used throughout the app:
– nxAutofocus: when applied to any input element, it will automatically move the focus to that element when the containing component shows up
– nxClickOutside: allows us to know when a user clicks outside a certain element
– nxDragAndDrop: turns on/off dragging and dropping on a certain element
– nxLazyLoad: uses IntersectionObserver to know when an element enters view
The `.\helpers` sub-folder holds singleton services used in multiple places in the app:
– AuthService: responsible with logging the user on and off
– HttpInterceptorService: responsible with attaching the Authorization header to all outgoing HTTP requests and additionally re-fetching the auth token when it expires
– LazyCacheService: used to cache media for identical requests
– SettingsGuardService: protects the /settings route against unauthorized access
– TokenService: is used to keep track of the access tokens and their validity
– UsersAndGroupsFinderService: deals with finding users and groups and retrieving a user’s profile
– WorkflowsService: handles various actions related to workflows (starting/abandoning/reassigning/etc)
The `.\pipes` sub-folder has all the pipes used in the app:
– DurationPipe: display a number as “hh:mm:ss”
– FileSizePipe: display a number as a file size (Kb, Mb, etc)
– OrdinalPipe: displays a number as an ordinal value (eg: 1st, 5th, etc)
– SizePipe: displays a shorter representation of a number (eg: 10000 as 10K)
– UnescapePipe: removes escape characters from a string
The `.\shared.contansts.ts` file holds different constants used throughout the app.
The `.\assets\i18n` folder contains translation files for the app.
The `.\assets\js` folder holds 3rd party libraries/web components.
The `.\styles` folder contains global styling .scss files.
The application is split into a multiple modules:
– `.\modules\shared` is where common components are found
– a confirmation dialog
– a component that displays a document’s icon, title and a few more properties like type, creation date
– a file upload component
– a component allowing users to pick a user/user group from a list
– `.\modules\settings` is where all components visible when accessing the /settings route
– `.\modules\search` is where the document search component is located along with its helper service
– `.\modules\explorer` is where we keep all the components and services used when accessing the /browse route such as: clipboard, collections, comments, contributors, navigation bar, document specific viewers and editors and workflows, etc