diff --git a/src/app/structure/components/recherche/recherche.component.html b/src/app/structure/components/recherche/recherche.component.html
index 7c556416241ce939bf04c77eee0a1b0383ebed09..00eecd6dae38e1e104c5b0a5000a87ca201fe5b1 100644
--- a/src/app/structure/components/recherche/recherche.component.html
+++ b/src/app/structure/components/recherche/recherche.component.html
@@ -11,46 +11,50 @@
</div>
<div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
- <button type="button" [className]="btnServicesChecked ? 'selected' : ''" (click)="openModal(this.modalType[0])">
+ <button
+ type="button"
+ [className]="modalOpened == modalType[0] ? 'selected' : ''"
+ (click)="openModal(this.modalType[0])"
+ >
<span class="btnText">Services</span>
<div class="arrow"></div>
</button>
- <button type="button" [className]="btnHomeChecked ? 'selected' : ''" (click)="openModal(this.modalType[1])">
+ <button
+ type="button"
+ [className]="modalOpened == modalType[1] ? 'selected' : ''"
+ (click)="openModal(this.modalType[1])"
+ >
<span class="btnText">Accueil</span>
<div class="arrow"></div>
</button>
- <button type="button" [className]="btnMoreFilterchecked ? 'selected' : ''" (click)="openModal(this.modalType[2])">
+ <button
+ type="button"
+ [className]="modalOpened == modalType[2] ? 'selected' : ''"
+ (click)="openModal(this.modalType[2])"
+ >
<span class="btnText">Plus de filtres</span>
<div class="arrow"></div>
</button>
</div>
- <form
- [formGroup]="form"
- (ngSubmit)="applyFilter()"
- novalidate
- *ngIf="modalOpened"
- class="modal"
- fxLayout="column"
- fxLayoutAlign="space-between"
- >
+ <div *ngIf="modalOpened" fxLayout="column" fxLayoutAlign="space-between" [ngClass]="['modal', 'modal' + modalOpened]">
<div class="contentModal" fxLayout="row wrap">
<!--<div class="blockFiltre" *ngFor="let s of services">-->
- <div class="blockFiltre" *ngFor="let s of services">
+ <div class="blockFiltre" *ngFor="let m of modules">
<div class="blockLigne">
- <h4>{{ s.titre }}</h4>
+ <h4>{{ m.titre }}</h4>
<div
fxLayout="row"
class="ligneFiltre"
fxLayoutAlign="space-between center"
- *ngFor="let categ of s.categories"
+ *ngFor="let categ of m.categories"
>
<div class="checkbox">
<label>
<input
type="checkbox"
- [checked]="isChecked(categ)"
+ [checked]="this.checkedTab.indexOf(categ) > -1"
[value]="categ"
- (change)="onCheckboxChange($event, true)"
+ (change)="onCheckboxChange($event, false)"
/>
<span class="customCheck"></span>
</label>
@@ -62,10 +66,10 @@
</div>
</div>
<div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
- <a (click)="onCheckboxChange($event, false)">Effacer</a>
- <button type="submit" value="Submit">Appliquer</button>
+ <a (click)="onCheckboxChange($event, true)">Effacer</a>
+ <button type="button" (click)="applyFilter(modalOpened)">Appliquer</button>
</div>
- </form>
+ </div>
</div>
<div class="footer" fxLayout="row" fxLayoutAlign="space-between center">
<div class="checkbox">
diff --git a/src/app/structure/components/recherche/recherche.component.scss b/src/app/structure/components/recherche/recherche.component.scss
index 9ea829dac1e4afa6273fb72c9086d96b1d703b93..e1ac58b8da643240cc956af7b1325cf1029b20e2 100644
--- a/src/app/structure/components/recherche/recherche.component.scss
+++ b/src/app/structure/components/recherche/recherche.component.scss
@@ -118,8 +118,14 @@
text-decoration-line: underline;
}
}
+.modalaccueil {
+ margin-left: 100px;
+}
+.modalplusFiltres {
+ margin-left: 196px;
+}
.modal {
- height: 654px;
+ max-height: 654px;
max-width: 1100px;
background: $white;
border: 1px solid $purple;
@@ -193,6 +199,7 @@
display: grid;
align-items: center;
grid-template-columns: min-content auto;
+ min-height: 25px;
input {
opacity: 0;
display: none;
diff --git a/src/app/structure/components/recherche/recherche.component.ts b/src/app/structure/components/recherche/recherche.component.ts
index 5aaac22efd2fda1c9ba1125fcfdb8ef0baea00f8..34881d906883cd3a710b1732194f59883a54cbc3 100644
--- a/src/app/structure/components/recherche/recherche.component.ts
+++ b/src/app/structure/components/recherche/recherche.component.ts
@@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core';
-import { Service } from '../../models/recherche.model';
-import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
+import { Module } from '../../models/recherche.model';
@Component({
selector: 'app-recherche',
@@ -8,99 +7,134 @@ import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
styleUrls: ['./recherche.component.scss'],
})
export class RechercheComponent implements OnInit {
- constructor(private fb: FormBuilder) {
- this.form = this.fb.group({
- checkArray: this.fb.array([]),
- });
- }
- form: FormGroup;
- modalOpened: string;
+ constructor() {}
+ //Variables btn filtres
modalType: string[] = ['services', 'accueil', 'plusFiltres'];
- btnServicesChecked: boolean;
- btnHomeChecked: boolean;
- btnMoreFilterchecked: boolean;
- test = '50%';
- services: Service[];
+
+ //Variable gestion liste modal
+ servicesCategories: Module[];
+ modaliteCategories: Module[];
+ modules: Module[];
+ filtresCategories: Module[];
+ modalOpened: string;
+
+ //Variable gestion Checkbox
+ checkedTab: string[];
+ filterCheck: string[];
ngOnInit(): void {
+ //Sert à afficher la modal et indiquer le type de filtre choisit
this.modalOpened = null;
- this.btnServicesChecked = false;
- this.services = [];
- //Block en attendant
- this.mockService('Accompagnement aux démarches en ligne', 'CAF', 7);
- this.mockService('Insertion sociale et professionnelle', ' Diffuser son CV en ligne', 5);
- this.mockService('Accès aux droits', 'Déclarer ses revenus en ligne et découvertes des services proposés', 8);
- this.mockService('Aide à la parentalité/éducation', 'Découvrir l’univers des jeux vidéos', 4);
- this.mockService('Compétences de base', 'Faire un diagnostic des compétences', 8);
- this.mockService('Culture et sécurité numérique', 'Traitement de texte : découverte', 4);
- //Fin block en attendant
- }
- //Fonction en attendant
- mockService(titre: string, categ: string, nbCateg: number) {
- var service1 = new Service();
- service1.titre = titre;
- service1.categories = [];
- for (var i = 0; i < nbCateg; i++) {
- service1.categories.push(categ + '_' + i);
- }
- this.services.push(service1);
+
+ //Sert à stocker les différentes catégories
+ this.servicesCategories = [];
+ this.modaliteCategories = [];
+ this.modules = [];
+ this.filtresCategories = [];
+
+ //Sert à gérer la checkbox multiple
+ this.checkedTab = new Array();
+ this.filterCheck = new Array();
}
- //Fin fonction en attendant
+
+ //Ouvrir la modal et afficher la liste en fonction du btn de filtre appuyé
openModal(option: string) {
- this.modalOpened = null;
+ this.modules = [];
switch (option) {
case this.modalType[0]:
- this.btnServicesChecked = !this.btnServicesChecked;
- this.btnHomeChecked = false;
- this.btnMoreFilterchecked = false;
- if (this.btnServicesChecked) this.modalOpened = this.modalType[0];
+ //Vérifie si le btn n'est pas actif
+ if (this.modalOpened != this.modalType[0]) {
+ this.modalOpened = this.modalType[0];
+ this.fakeDataServices();
+ } else {
+ this.modalOpened = null;
+ }
break;
case this.modalType[1]:
- this.btnHomeChecked = !this.btnHomeChecked;
- this.btnMoreFilterchecked = false;
- this.btnServicesChecked = false;
- if (this.btnHomeChecked) this.modalOpened = this.modalType[1];
+ //Vérifie si le btn n'est pas actif
+ if (this.modalOpened != this.modalType[1]) {
+ this.modalOpened = this.modalType[1];
+ this.fakeDataModalite();
+ } else {
+ this.modalOpened = null;
+ }
break;
case this.modalType[2]:
- this.btnMoreFilterchecked = !this.btnMoreFilterchecked;
- this.btnServicesChecked = false;
- this.btnHomeChecked = false;
- if (this.btnMoreFilterchecked) this.modalOpened = this.modalType[2];
+ //Vérifie si le btn n'est pas actif
+ if (this.modalOpened != this.modalType[2]) {
+ this.modalOpened = this.modalType[2];
+ this.fakeDataFiltres();
+ } else {
+ this.modalOpened = null;
+ }
break;
}
+ //Initialisation de la liste temporaire
+ this.checkedTab = this.filterCheck.slice();
}
+
+ //Envoie d'un tableau contenant tous les filtres
applyFilter() {
+ this.filterCheck = this.checkedTab.slice();
this.openModal(this.modalOpened);
- console.log(this.form.value);
+ console.log(this.filterCheck);
}
+ //Gestion de l'evenement checkbox(Cocher/Décocher)
onCheckboxChange(e, reset: boolean) {
- const checkArray: FormArray = this.form.get('checkArray') as FormArray;
- if (reset) {
+ //Condition btn effacer filtre d'une liste
+ if (!reset) {
if (e.target.checked) {
- checkArray.push(new FormControl(e.target.value));
+ this.checkedTab.push(e.target.value);
} else {
- let i: number = 0;
- checkArray.controls.forEach((item: FormControl) => {
- if (item.value == e.target.value) {
- checkArray.removeAt(i);
- return;
- }
- i++;
- });
+ //Vérifie si la case décochée est présente dans la liste temporaire et la supprime
+ if (this.checkedTab.indexOf(e.target.value) > -1) {
+ this.checkedTab.splice(this.checkedTab.indexOf(e.target.value), 1);
+ }
}
} else {
- checkArray.clear();
+ //Efface uniquement les éléments de la liste en cours
+ this.modules.forEach((m) => {
+ m.categories.forEach((categ) => {
+ if (this.checkedTab.indexOf(categ) > -1) this.checkedTab.splice(this.checkedTab.indexOf(categ), 1);
+ });
+ });
}
}
- isChecked(module: string) {
- const checkArray: FormArray = this.form.get('checkArray') as FormArray;
- var bool: boolean = false;
- checkArray.controls.forEach((item: FormControl) => {
- if (item.value == module) {
- bool = true;
- }
- });
- return bool;
+
+ /**
+ * En attendant les apis
+ */
+ mockService(module: Module[], titre: string, categ: string, nbCateg: number) {
+ var m = new Module();
+ m.titre = titre;
+ m.categories = [];
+ for (var i = 0; i < nbCateg; i++) {
+ m.categories.push(categ + i);
+ }
+ module.push(m);
+ }
+ fakeDataServices() {
+ this.mockService(this.modules, 'Accompagnement aux démarches en ligne', 'CAF', 7);
+ this.mockService(this.modules, 'Insertion sociale et professionnelle', ' Diffuser son CV en ligne', 5);
+ this.mockService(
+ this.modules,
+ 'Accès aux droits',
+ 'Déclarer ses revenus en ligne et découvertes des services proposés',
+ 8
+ );
+ this.mockService(this.modules, 'Aide à la parentalité/éducation', 'Découvrir l’univers des jeux vidéos', 4);
+ this.mockService(this.modules, 'Compétences de base', 'Faire un diagnostic des compétences', 8);
+ this.mockService(this.modules, 'Culture et sécurité numérique', 'Traitement de texte : découverte', 4);
+ }
+ fakeDataModalite() {
+ this.mockService(this.modules, "Modalité d'accueil", 'Matériel mis à dispostion', 6);
+ }
+ fakeDataFiltres() {
+ this.mockService(this.modules, 'Équipements', 'Accès à des revues ou livres infoirmatiques numériques', 8);
+ this.mockService(this.modules, "Type d'acteurs", 'Lieux de médiation (Pimms, assos...)', 5);
+ this.mockService(this.modules, 'Publics', 'Langues étrangères autres qu’anglais', 12);
+ this.mockService(this.modules, 'Labelisation', 'Prescripteur du Pass Numérique', 6);
+ this.mockService(this.modules, 'Type de structure', 'Espace de co-working', 6);
}
}
diff --git a/src/app/structure/models/recherche.model.ts b/src/app/structure/models/recherche.model.ts
index 5904abd46cc7a2f49bf837bf79efbcbff748ad0b..a498b7318945a60e7476b2e612bd2cadfb3a1524 100644
--- a/src/app/structure/models/recherche.model.ts
+++ b/src/app/structure/models/recherche.model.ts
@@ -1,4 +1,4 @@
-export class Service {
+export class Module {
titre: string;
categories: string[];
size: number;