README.md 5.85 KB
Newer Older
1
# DLCM-Portal
Hugues.Cazeaux's avatar
Hugues.Cazeaux committed
2

Florent Poittevin's avatar
Florent Poittevin committed
3
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.
Hugues.Cazeaux's avatar
Hugues.Cazeaux committed
4

Florent Poittevin's avatar
Florent Poittevin committed
5
6
## Prerequisites

7
8
- Install [NodeJS LTS](https://nodejs.org/en/) : Use ALWAYS the "LTS" version.
- Install [Angular CLI](https://angular.io/cli) : version 10.0.4
Florent Poittevin's avatar
Florent Poittevin committed
9
10
11
12
- 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

13
14
15
16
17
18
19
20
21
22
23
24
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>
Alicia.DeDiosFuente's avatar
Alicia.DeDiosFuente committed
25
26
    ProxyPass "/dlcm-authorization/shiblogin" "http://localhost:16100/dlcm/shiblogin"
    ProxyPassReverse "/dlcm-authorization/shiblogin" "http://localhost:16100/dlcm/shiblogin"
27

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

31
32
33
34
35
36
37
38
39
40
41
42

    <IfModule headers_module>
        RequestHeader add mail "florent.poittevin@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>
```
Alicia.DeDiosFuente's avatar
Alicia.DeDiosFuente committed
43
44
45
46
47

You can get your info [here](https://showmyinfo.unige.ch/in/), (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.

Florent Poittevin's avatar
Florent Poittevin committed
48
49
50
51
## Install

`npm install`

Florent Poittevin's avatar
Florent Poittevin committed
52
53
## Development server

54
55
56
57
58
59
60
61
62
63
For a dev server, run command `npm start`. Navigate to `http://localhost:4200/`. 

If you use config server in docker you need to change the ports used :
- in your environment.local.ts defined the property : `admin: "http://localhost:16105/dlcm/admin",`
- in the proxy.conf.local.js add the following lines :  
`
  ...proxyConfVariable.oauth(16110),
  ...proxyConfVariable.shiblogin(16110),
`

Florent Poittevin's avatar
Florent Poittevin committed
64
65
The app will automatically reload if you change any of the source files.
This command run a proxy to contact backend services.
Florent Poittevin's avatar
Florent Poittevin committed
66
67
68
69


## Build

70
71
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.

72
## Generate client api 
Florent Poittevin's avatar
Florent Poittevin committed
73
74
75
76

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`
Florent POITTEVIN's avatar
Florent POITTEVIN committed
77
- On this project run `npm run generate-models`
Florent Poittevin's avatar
Florent Poittevin committed
78
79
80
81
82
83
84
85
86

## 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](https://angular.io/cli/generate).

87
88
89
## Extract string to translate

Run `npm run extract-translations` to extract string to translate into assets/i18n/*.json
Florent Poittevin's avatar
Florent Poittevin committed
90

91
92
93
94
## Debug NGXS state

This project is compatible with [Redux Devtools extension](http://extension.remotedev.io/).

Florent Poittevin's avatar
Florent Poittevin committed
95
96
## Running unit tests

Florent Poittevin's avatar
Florent Poittevin committed
97
Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).
Florent Poittevin's avatar
Florent Poittevin committed
98
99
100

## Running end-to-end tests

Florent Poittevin's avatar
Florent Poittevin committed
101
Run `npm e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Florent Poittevin's avatar
Florent Poittevin committed
102
103
104
105

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
106

107
108
## Grid

109
110
There is no grid used in the project.
We use pure [flex box](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) css rule instead.
111

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

114
115
116
117
118
119
    @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)
120
121
    }

122
123
124
## Lexical

### Types of components :
125
126
#### Concept
With solidify, we introduce a new convention of component :
Florent Poittevin's avatar
Florent Poittevin committed
127
- Routables : Component routable. Can communicate with the store (dispatch actions and retrieve datas from store)
128
- Containers : Component non routable. Can communicate with the store (dispatch actions and retrieve datas from store)
Florent Poittevin's avatar
Florent Poittevin committed
129
130
- 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)
131
132
133
#### Generation
You can use solidify schematics project to generate this types of component.

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

137
138
139
140
141
142
143
144
145
146
147
148
149
150
    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
Homada.Boumedane's avatar
Homada.Boumedane committed
151
152
153
154
155
156
157
158
159
160
161
162
    
#### Cypress E2E Tests
For now e2e test can be executed ba running the script :
    
    npm run cypress
    
or by running the script :

    npm run cypress-open
    
the first command will run simultaneously the portal and cypress console, the second command will just run the cypress console.