Nuxeo Angular WebUI Technical Details

The Angular app is located under .\ng-nuxeo-angular-ui\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.

Deployment

Once the package is installed, you can customize the \nxserver\nuxeo.war\ng\env.js file to

  • point to a specific Nuxeo instance if it’s different that the default location
  • customize the type of files that are displayed on the dashboard’s statistics section
  • enable/disable certain addon-specific features

Development

  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 (.ng-nuxeo-angular-ui\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 .ng-nuxeo-angular-ui\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