src/app/services/structure.service.ts

@@ -36,6 +36,11 @@ export class StructureService {
 
   public editStructure(structure: Structure): Observable<Structure> {
     structure.updatedAt = new Date().toString();
+    if (structure.dataShareConsentDate) {
+      structure.dataShareConsentDate = new Date().toString();
+    } else {
+      structure.dataShareConsentDate = null;
+    }
     const id = structure._id;
     delete structure._id; // id should not be provided for update
     return this.http.put(`${this.baseUrl}/${id}`, structure).pipe(map((item: Structure) => new Structure(item)));

src/app/shared/components/data-share-consent/data-share-consent.component.html

+<div *ngIf="openned" class="modalBackground">
+  <div class="modal">
+    <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around start">
+      <div class="form">
+        <div class="modalTitle">
+          <h3>
+            Acceptez-vous que les informations de vos structures soient mises à disposition sur la plateforme
+            data.grandlyon.com* ?
+          </h3>
+        </div>
+        <form [formGroup]="consentForm" class="dataShareConsent">
+          <app-radio-form
+            *ngIf="dataConsentPendingStructures && dataConsentPendingStructures.length > 1"
+            name="Toutes les structures"
+            horizontal="true"
+            (selectedEvent)="onRadioBtnChangeAll($event)"
+            [events]="eventsSubject.asObservable()"
+            layoutGap="8px"
+            class="firstLine"
+          ></app-radio-form>
+
+          <div *ngFor="let structure of dataConsentPendingStructures">
+            <app-radio-form
+              name="{{ structure.structureName }}"
+              horizontal="true"
+              [selectedOption]="
+                structure.dataShareConsentDate === undefined
+                  ? null
+                  : structure.dataShareConsentDate === null
+                  ? false
+                  : true
+              "
+              (selectedEvent)="onRadioBtnChangeStructure(structure._id, $event)"
+              layoutGap="8px"
+            ></app-radio-form>
+          </div>
+
+          <p class="informationEndForm">
+            <span class="asterisk">*</span> La Métropole de Lyon, engagée pour la transparence de l’action publique et
+            la valorisation de ses partenaires, encourage l’ouverture des données. Les données de votre structure seront
+            publiées sur la plateforme
+            <a href="https://data.grandlyon.com/" target="_blank">https://data.grandlyon.com/</a> sous la licence
+            ouverte (open data) et seront donc librement accessibles et réutilisables. Vous pourrez modifier votre choix
+            à tout moment, exercer vos droits d’accès et de modification, en le signifiant, par tout moyen à votre
+            convenance, auprès de vos interlocuteurs de la Métropole de Lyon.
+          </p>
+
+          <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+            <button
+              (click)="onSubmit()"
+              class="btn-primary"
+              [disabled]="!isPageValid"
+              [ngClass]="{ invalid: !isPageValid }"
+            >
+              Valider
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/components/data-share-consent/data-share-consent.component.scss

+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/breakpoint';
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/buttons';
+@import '../../../../assets/scss/z-index';
+@import '../../../../assets/scss/hyperlink';
+@import '../radio-form/radio-form.component.scss';
+
+.modalBackground .modal {
+  max-width: 700px;
+  @media #{$large-phone} {
+    max-width: 95%;
+  }
+}
+.modalTitle {
+  display: flex;
+  h3 {
+    margin-top: 6%;
+    width: 90%;
+  }
+}
+h3 {
+  @include cn-bold-26;
+  color: $black;
+  margin-top: 0;
+}
+.form {
+  max-width: 90%;
+  margin: 0 32px;
+  margin-bottom: 8%;
+}
+.footerModal {
+  button {
+    &.invalid {
+      opacity: 0.4;
+    }
+  }
+}
+.dataShareConsent {
+  ::ng-deep button,
+  ::ng-deep .name {
+    font-size: $font-size-small;
+    font-weight: normal;
+    margin: 4px 0;
+    height: 40px;
+    ::ng-deep p {
+      font-weight: normal !important;
+    }
+    @media #{$phone} {
+      height: auto;
+    }
+  }
+  ::ng-deep .name {
+    padding: 0 10px;
+  }
+  ::ng-deep button {
+    width: 162px;
+    height: 40px;
+  }
+  ::ng-deep .firstLine {
+    .name,
+    button {
+      background-color: $grey-4;
+      &.selected {
+        p {
+          color: $black;
+        }
+      }
+    }
+  }
+}
+.informationEndForm {
+  color: $grey-1;
+  font-size: $font-size-xsmall;
+  a {
+    color: $blue;
+    text-decoration: underline;
+    font-weight: bold;
+  }
+}

src/app/shared/components/data-share-consent/data-share-consent.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataShareConsentComponent } from './data-share-consent.component';
+
+describe('DataShareConsentComponent', () => {
+  let component: DataShareConsentComponent;
+  let fixture: ComponentFixture<DataShareConsentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DataShareConsentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataShareConsentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/data-share-consent/data-share-consent.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { Structure } from '../../../models/structure.model';
+import { StructureService } from '../../../services/structure.service';
+
+@Component({
+  selector: 'app-data-share-consent',
+  templateUrl: './data-share-consent.component.html',
+  styleUrls: ['./data-share-consent.component.scss'],
+})
+export class DataShareConsentComponent implements OnInit {
+  public consentForm: FormGroup;
+  public isPageValid: boolean;
+  public loading = false;
+  public submitted = false;
+  public eventsSubject: Subject<Object> = new Subject<Object>();
+
+  constructor(private structureService: StructureService) {}
+
+  @Input() public openned: boolean = true;
+  @Input() public dataConsentPendingStructures: Structure[];
+
+  ngOnInit() {
+    this.consentForm = new FormGroup({});
+    for (let structure of this.dataConsentPendingStructures) {
+      this.consentForm.addControl(
+        structure._id,
+        new FormControl(structure.dataShareConsentDate, [Validators.required])
+      );
+    }
+  }
+
+  public getFormControl(nameControl: string): AbstractControl {
+    return this.consentForm.get(nameControl);
+  }
+
+  public getPendingStructure(id: string): Structure {
+    var result = this.dataConsentPendingStructures.filter(function (o) {
+      return o._id == id;
+    });
+    return result ? result[0] : null;
+  }
+
+  public onRadioBtnChangeAll(bool: boolean): void {
+    for (let structure of this.dataConsentPendingStructures) {
+      structure.dataShareConsentDate = bool ? new Date().toString() : null;
+      this.getFormControl(structure._id).setValue(bool);
+    }
+    this.setValidationsForm();
+  }
+
+  public onRadioBtnChangeStructure(controlName: string, bool: boolean): void {
+    this.getPendingStructure(controlName).dataShareConsentDate = bool ? new Date().toString() : null;
+    this.getFormControl(controlName).setValue(bool);
+
+    // select or unselect "all structures" radio button
+    let isAllYes: boolean = true;
+    let isAllNo: boolean = true;
+    for (let structure of this.dataConsentPendingStructures) {
+      isAllYes = isAllYes && this.getFormControl(structure._id).value === true;
+      isAllNo = isAllNo && this.getFormControl(structure._id).value === false;
+    }
+    this.eventsSubject.next(isAllYes ? true : isAllNo ? false : null);
+
+    this.setValidationsForm();
+  }
+
+  public setValidationsForm(): void {
+    let isPageValid: boolean = true;
+    for (let structure of this.dataConsentPendingStructures) {
+      isPageValid = isPageValid && this.getFormControl(structure._id).valid;
+    }
+    this.isPageValid = isPageValid;
+  }
+
+  public onSubmit(): void {
+    this.submitted = true;
+    this.loading = true;
+    for (let structure of this.dataConsentPendingStructures) {
+      this.structureService.editStructure(structure).subscribe((s: Structure) => {});
+    }
+    this.loading = false;
+    this.openned = false;
+  }
+}

src/app/shared/components/radio-form/radio-form.component.html

-<div [fxLayout]="horizontal ? 'row' : 'column'" [fxLayoutGap]="horizontal ? '17px' : ''">
+<div [fxLayout]="horizontal ? 'row' : 'column'" [fxLayoutGap]="horizontal ? (layoutGap ? layoutGap : '17px') : ''">
+  <div *ngIf="name" fxLayout="row" fxLayoutAlign=" center" [fxLayoutGap]="layoutGap ? layoutGap : '17px'" class="name">
+    {{ name }}
+  </div>
   <button
     (click)="clicked(true)"
     [ngClass]="{ selected: selectedOption && selectedOption != null }"
     fxLayout="row"
     fxLayoutAlign=" center"
-    fxLayoutGap="17px"
+    [fxLayoutGap]="layoutGap ? layoutGap : '17px'"
   >
     <div class="checkmark">
       <svg class="validate" aria-hidden="true">
@@ -18,7 +21,7 @@
     [ngClass]="{ selected: !selectedOption && selectedOption != null }"
     fxLayout="row"
     fxLayoutAlign=" center"
-    fxLayoutGap="17px"
+    [fxLayoutGap]="layoutGap ? layoutGap : '17px'"
   >
     <div class="checkmark">
       <svg class="validate" aria-hidden="true">

src/app/shared/components/radio-form/radio-form.component.scss

@@ -49,3 +49,14 @@ button {
     border-radius: 10px;
   }
 }
+
+.name {
+  width: 310px;
+  background: $grey-6;
+  border-radius: 4px;
+  padding: 0 16px;
+  font-size: $font-size-small;
+  outline: none;
+  border: none;
+  margin: 8px 0;
+}

src/app/shared/components/radio-form/radio-form.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-radio-form',
@@ -10,8 +11,20 @@ export class RadioFormComponent implements OnInit {
 
   @Input() public selectedOption: boolean;
   @Input() public horizontal: boolean;
+  @Input() public layoutGap: string;
+  @Input() public name: string;
+  @Input() events: Observable<Object>;
   @Output() selectedEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
-  ngOnInit(): void {}
+
+  private eventsSubscription: Subscription;
+
+  ngOnInit(): void {
+    if (this.events) this.eventsSubscription = this.events.subscribe((data: boolean) => (this.selectedOption = data));
+  }
+
+  ngOnDestroy() {
+    if (this.eventsSubscription) this.eventsSubscription.unsubscribe();
+  }
 
   public clicked(bool: boolean): void {
     this.selectedOption = bool;