DLCM-Portal

This project was generated with Angular CLI version 7.3.8.

Prerequisites

• Install NodeJS LTS (currently version 10.15.3, check with node -v. Include currently npm version 6.4.1, check with npm -v).
• Install Angular CLI (currently version 7.3.8, check with ng version).
• For user of Jetbrains IDE (IntelliJ, WebStorm), go to File > Settings > Appaearance & Behavior > System Settings and disable the option Use "safe write" (save changes to a temporary file first).

Apache

For Windows, same as DLCM-Frontend Php app that use apache to mock Shibboleth, refer to the Apache part of the README.md of DLCM-Frontend app.

For Linux, first install apache and then activate the following modules using a2enmod script:

 a2enmod proxy_http
 a2enmod headers
 a2enmod rewrite

Add the following lines at the end of your apache2.conf:

<IfModule proxy_module>
    ProxyPass "/dlcm-authorization/shiblogin" "http://localhost:16100/dlcm/shiblogin"
    ProxyPassReverse "/dlcm-authorization/shiblogin" "http://localhost:16100/dlcm/shiblogin"

    ProxyPass "/dlcm-authorization/oauth" "http://localhost:16110/dlcm/oauth"
    ProxyPassReverse "/dlcm-authorization/oauth" "http://localhost:16110/dlcm/oauth"


    <IfModule headers_module>
        RequestHeader add mail "florent.poittevin@unige.ch"
        RequestHeader add persistent-id "922399@unige.ch"
        RequestHeader add uniqueid "922399@unige.ch"
        RequestHeader add givenName "Florent"
        RequestHeader add surname "Poittevin"
        RequestHeader add homeOrganization "unige.ch"
        RequestHeader add preferredLanguage "fr-ch"
    </IfModule>

</IfModule>

You can get your info here, (there is no importance on value set here).

N.B: Check and adapt accordingly your urls in case your context path is different of the written above.

Setting

1- Update proxy.conf.json to set the corresponding backend api.

2- Create a file named environment.local.ts inside environment directory

Install

npm install

Development server

Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. This command run a proxy to contact backend services.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Generate client api

If you want to update the DLCM Api :

• Pull the master branch of the project DLCM-Backend in a folder named DLCM-Backend at the same level of the frontend folder
• On the project DLCM-Backend run mvn clean package
• On this project run npm run generate-dlcm-api

Generate element

Run ng generate component component-name to generate a new component.

You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

More info here.

Extract string to translate

Run npm run extract-translations to extract string to translate into assets/i18n/*.json

Debug NGXS state

This project is compatible with Redux Devtools extension.

Running unit tests

Run npm test to execute the unit tests via Karma.

Running end-to-end tests

Run npm e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Grid

There is no grid used in the project. We use pure flex box css rule instead.

If you want to manage specific css behavior depending of screen size, you should use the following mixins :

@include respond-to-breakpoint-and-bigger('md') {
  // css apply only for size >= md (= md, lg)
}

@include respond-to-smaller-than-breakpoint('md') {
  // css apply only for size < md (= xs and sm)
}

Lexical

Types of components :

Concept

With solidify, we introduce a new convention of component :

• Routables : Component routable. Can communicate with the store (dispatch actions and retrieve datas from store)
• Containers : Component non routable. Can communicate with the store (dispatch actions and retrieve datas from store)
• Presentationals : Dumb component (just input / output, no connection with store)
• Dialogs : Component embedded in a material modal. Can communicate with the store (dispatch actions and retrieve datas from store)

Generation

You can use solidify schematics project to generate this types of component.

Please refer to the README.md of the project Solidify-Frontend. As reminder, the shortcut to generate this new type of components are :

ng g solidify-frontend:routable my-routable
ng g solidify-frontend:routable
ng g solidify-frontend:container my-container
ng g solidify-frontend:container
ng g solidify-frontend:presentational my-presentational
ng g solidify-frontend:presentational
ng g solidify-frontend:dialog my-dialog
ng g solidify-frontend:dialog
ng g solidify-frontend:store-resource my-store-resource
ng g solidify-frontend:store-resource
ng g solidify-frontend:store-relation-2-tiers my-store-relation-2-tiers
ng g solidify-frontend:store-relation-2-tiers
ng g solidify-frontend:store-composition my-store-composition
ng g solidify-frontend:store-composition