CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to [ngpr_prodige_contribution](https://gitlab.adullact.net/prodige/ngpr_prodige_contribution) project will be documented in this file.
 
+## [5.0.6](https://gitlab.adullact.net/prodige/ngpr_prodige_contribution/compare/5.0.5...5.0.6) - 2023-03-15
+
 ## [5.0.5](https://gitlab.adullact.net/prodige/ngpr_prodige_contribution/compare/5.0.4...5.0.5) - 2023-03-08
 
 ## [5.0.4](https://gitlab.adullact.net/prodige/ngpr_prodige_contribution/compare/5.0.3...5.0.4) - 2023-03-08

VERSION.txt

-5.0.5
\ No newline at end of file
+5.0.6
\ No newline at end of file

cicd/dev/README.md

@@ -47,13 +47,15 @@ docker exec --user node -w /home/node/app -it ngpr_prodige_contribution_dev_node
 In container
 ```bash
 # Install
+cd site
+npm run login
 npm install
 
 # Serve
 npm run dev 
 ```
 
-The url web site are http://localhost:4200
+The url web site are https://contribution.prodige.internal/
 
 
 ## Stop developpement

package-lock.json

+{
+  "name": "app",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

site/README.md

@@ -2,9 +2,11 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.1.
 
+to install see cicd/dev/README.md
+
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+Run `npm run dev` for a dev server. Navigate to `https://contribution.prodige.internal/`. The application will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
@@ -12,16 +14,8 @@ Run `ng generate component component-name` to generate a new component. You can
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Further help
+## Eslint
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Run `npm run lint`

site/src/app/app-routing.module.ts

@@ -6,19 +6,19 @@ import { ContributionResolver } from './core/services/contribution.resolver';
 // TODO: ajout d'une route pour la mise à jour de données
 const routes: Routes = [
   {
-    path:         `home`,
+    path:         `contribute/home`,
     pathMatch:    `full`,
     canActivate:  [CasGuard],
     loadChildren: () => import( `./pages/home/home.module` ).then(({ HomeModule }) => HomeModule ),
   }, {
-    path:         `stepper/:id`,
+    path:         `contribute/form/:id`,
     canActivate:  [CasGuard],
     loadChildren: () => import( `./pages/stepper/stepper.module` ).then(({ StepperModule }) => StepperModule ),
     resolve:      [ContributionResolver],
   },
   {
     path:       `**`,
-    redirectTo: `home`,
+    redirectTo: `contribute/home`,
     pathMatch:  `full`,
   },
 ];

site/src/app/app.component.html

-<alk-header></alk-header>
-<router-outlet></router-outlet>
-<alk-footer></alk-footer>
+
+<alk-header *ngIf="!loading"></alk-header>
+<router-outlet (activate)="onAppActivate()"></router-outlet>
+<alk-footer *ngIf="!loading"></alk-footer>
+<ng-container *ngIf="loading">
+  <div class="app-loading" >
+    <h1 i18n="@@loading">Chargement...  <i class="fa fa-spinner fa-spin" aria-hidden="true"></i></h1>
+  </div>
+</ng-container>
+

site/src/app/app.component.scss

-/* empty */
+.app-loading {
+  left: 0 !important;
+  top: 0 !important;
+  z-index: 10000 !important;
+  width: 100% !important;
+  height: 100% !important;
+  position: fixed !important;
+  background-color: rgba(0,0,0,0.9) !important;
+  visibility: visible !important;
+  transition: visibility 0s, opacity 0.4s linear !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: wait !important;
+}
+.app-loading i.fa.fa-spinner.fa-spin, .spinner-big {
+  font-size: 100px !important;
+}

site/src/app/app.component.ts

 import { Component } from '@angular/core';
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router, RouterEvent } from '@angular/router';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -8,6 +9,27 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = `app`;
+  loading: boolean = true;
 
-  // TODO: ajout d'un intercepteur pour les 401
+  private appActive = false;
+
+  constructor( private router: Router ) {
+    router.events.subscribe(( routerEvent ) => {
+      this.checkRouterEvent( <RouterEvent>routerEvent );
+    });
+  }
+
+  checkRouterEvent( routerEvent: RouterEvent ): void {
+    if ( routerEvent instanceof NavigationStart && !this.appActive ) {
+      this.loading = true;
+    }
+
+    if ( routerEvent instanceof NavigationEnd || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationError ) {
+      this.loading = false;
+    }
+  }
+
+  onAppActivate(){
+    this.appActive = true;
+  }
 }

site/src/app/core/components/footer/footer.component.html

-<p>footer</p>
+<footer class="mb-auto">
+  <nav class="navbar nav-color">
+    <div class="container-fluid">
+      <div class="d-flex justify-content-start">
+        {{plateformName}} – Module contribution
+      </div>
+    </div>
+  </nav>
+</footer>
+

site/src/app/core/components/footer/footer.component.scss

+.nav-color{
+  background-color: #f8f8f8;
+
+}

site/src/app/core/components/footer/footer.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ProdigeSettingService } from '../../services/prodige-setting.service';
+import { BaseComponent } from '../base/base.component';
+import { takeUntil } from 'rxjs';
 
 @Component({
   selector:    `alk-footer`,
   templateUrl: `./footer.component.html`,
   styleUrls:   [`./footer.component.scss`],
 })
-export class FooterComponent {
+export class FooterComponent extends BaseComponent implements OnInit{
+  public plateformName:string;
 
+  constructor(
+    private prodigeSettingService: ProdigeSettingService,
+  ) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.prodigeSettingService.getPlateformName().pipe(
+      takeUntil( this.endSubscriptions ),
+    )
+      .subscribe(( name )=> this.plateformName = name );
+  }
 }

site/src/app/core/components/header/header.component.html

@@ -8,7 +8,7 @@
       </div>
       <div class="d-flex justify-content-end align-items justify-content">
         <div class="align-self-center p-1 bd-highlight" *ngIf="this.user">
-          <strong >{{this.user.firstname}} {{this.user.lastname}}</strong>
+          <strong >{{this.user.firstName}} {{this.user.name}}</strong>
         </div>
         <div class="bd-highlight">
           <button class="btn btn-outline-secondary btn-sm" (click)="this.loggout()" i18n="@@logout">

site/src/app/core/models/prodige-setting.ts

+import { z } from 'zod';
+
+export const prodigeSettingValidator = z.object({
+  'system/site/name': z.string(),
+});
+
+export type ProdigeSetting = z.infer<typeof prodigeSettingValidator>;

site/src/app/core/models/user.ts

-/** TODO: en attendant que carto.prodige.internal fonctionne, après utiliser zod */
-export interface User {
-  firstname: string,
-  lastname: string
-}
+import { z } from 'zod';
+
+export const userValidator = z.object({
+  login:     z.string(),
+  name:      z.string(),
+  firstName: z.string(),
+});
+
+export type User = z.infer<typeof userValidator>;

site/src/app/core/services/cas/cas.service.ts

@@ -33,10 +33,8 @@ export class CasService {
   /**
    * Déconnexion du cas avec redirection vers un service
    * compatible avec prodige v5
-   * @param serviceUrl par défaut vers catalogue
    */
-  logout( serviceUrl?: string ): void {
-    const serviceEnconde = encodeURI( serviceUrl ? serviceUrl : `https://catalogue.prodige.internal/geonetwork` );
-    window.location.href = `https://cas.prodige.internal/logout?service=${serviceEnconde}`;// TODO: disconet all
+  logout(): void {
+    window.location.href = `https://admin.prodige.internal/prodige/disconnectAll`;
   }
 }

site/src/app/core/services/contribution.service.ts

@@ -10,7 +10,7 @@ import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@ang
   providedIn: `root`,
 })
 export class ContributionService {
-  private headerGet = { 'Accept': `application/ld+json`, 'Content-Type': `application/ld+json` }; // TODO: faire service / enum, avec les différent header
+  private headerGet = { 'Accept': `application/ld+json`, 'Content-Type': `application/ld+json` };
   private contribution!: Contribution;
   private contribution$ = new ReplaySubject<Contribution>( 1 ); // bufferSize à 1 pour avoir seulement la dernière valeur
 

site/src/app/core/services/prodige-setting.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ProdigeSettingService } from './prodige-setting.service';
+
+describe('ProdigeSettingService', () => {
+  let service: ProdigeSettingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProdigeSettingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

site/src/app/core/services/prodige-setting.service.ts

+import { Injectable } from '@angular/core';
+import { GetDataService } from './get-data.service';
+import { ProdigeSetting, prodigeSettingValidator } from '../models/prodige-setting';
+import { HttpClient } from '@angular/common/http';
+import { map, Observable } from 'rxjs';
+import { EnvService } from './env/env.service';
+
+@Injectable({
+  providedIn: `root`,
+})
+export class ProdigeSettingService extends GetDataService<ProdigeSetting>  {
+
+  constructor(
+    protected override httpClient: HttpClient,
+    private envService: EnvService,
+  ) {
+    super( httpClient );
+  }
+
+  getPlateformName(): Observable<string>{
+    const url =  `${this.envService.catalogueUrl}/geonetwork/srv/api/site/settings`;
+
+    return this.getData$( url, prodigeSettingValidator ).pipe(
+      map(( result ) => result[`system/site/name`]),
+    );
+  }
+
+}

site/src/app/core/services/user.service.ts

 import { Injectable } from '@angular/core';
-import { Observable, ReplaySubject } from 'rxjs';
-import { User } from '../models/user';
+import { Observable } from 'rxjs';
+import { User, userValidator } from '../models/user';
+import { GetDataService } from './get-data.service';
+import { HttpClient } from '@angular/common/http';
+import { EnvService } from './env/env.service';
 
 @Injectable({
   providedIn: `root`,
 })
-export class UserService {
-  private user: User;
-  private user$ = new ReplaySubject<User>( 1 );
+export class UserService extends GetDataService<User>{
+  private headerGet = { 'Accept': `application/ld+json`, 'Content-Type': `application/ld+json`, withCredentials: true };
 
-  constructor() { }
+  constructor(
+    private envService: EnvService,
+    protected override httpClient: HttpClient,
+  ) {
+    super( httpClient );
+  }
 
   getUser$(): Observable<User>{
-    if ( !this.user ){
-      /** TODO: requête http quand carto.prodige.internal sera fonctionnel */
-      this.user = {
-        firstname: ``,
-        lastname:  ``,
-      };
-
-      this.user$.next( this.user );
-    }
+    const url = `${this.envService.urlAdmin}/api/internal/me`;
 
-    return this.user$.asObservable();
+    return this.getData$( url, userValidator, this.headerGet );
   }
 }