From f868677fc4822c47ee35bb1223f7ce2bc56eca5c Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Tue, 3 Nov 2020 16:09:36 +0100
Subject: [PATCH] fix(search) : change select design when filters checked
---
api/server.js | 88 +++++++++----------
.../modal-filter/modal-filter.component.ts | 6 +-
.../components/search/search.component.html | 8 +-
.../components/search/search.component.scss | 7 +-
.../components/search/search.component.ts | 78 ++++++++++------
src/app/structure-list/models/module.model.ts | 4 +-
.../models/structureCounter.model.ts | 2 +-
.../structure-list/services/search.service.ts | 14 ++-
8 files changed, 123 insertions(+), 84 deletions(-)
diff --git a/api/server.js b/api/server.js
index e85ef232a..4cd6c1318 100644
--- a/api/server.js
+++ b/api/server.js
@@ -13,54 +13,54 @@ server.use(middlewares);
server.get('/structures/count', (req, res) => {
let structureCountTab = [];
// Compétences de base
- structureCountTab.push({ id: 260, count: 3 });
- structureCountTab.push({ id: 260, count: 3 });
- structureCountTab.push({ id: 259, count: 3 });
- structureCountTab.push({ id: 261, count: 3 });
- structureCountTab.push({ id: 249, count: 3 });
- structureCountTab.push({ id: 222, count: 2 });
- structureCountTab.push({ id: 212, count: 3 });
- structureCountTab.push({ id: 186, count: 2 });
- structureCountTab.push({ id: 183, count: 2 });
+ structureCountTab.push({ id: '260', count: 3 });
+ structureCountTab.push({ id: '260', count: 3 });
+ structureCountTab.push({ id: '259', count: 3 });
+ structureCountTab.push({ id: '261', count: 3 });
+ structureCountTab.push({ id: '249', count: 3 });
+ structureCountTab.push({ id: '222', count: 2 });
+ structureCountTab.push({ id: '212', count: 3 });
+ structureCountTab.push({ id: '186', count: 2 });
+ structureCountTab.push({ id: '183', count: 2 });
// Accès aux droits
- structureCountTab.push({ id: 176, count: 2 });
- structureCountTab.push({ id: 175, count: 1 });
- structureCountTab.push({ id: 174, count: 1 });
- structureCountTab.push({ id: 173, count: 1 });
- structureCountTab.push({ id: 172, count: 1 });
- structureCountTab.push({ id: 171, count: 1 });
- structureCountTab.push({ id: 167, count: 1 });
- structureCountTab.push({ id: 165, count: 1 });
+ structureCountTab.push({ id: '176', count: 2 });
+ structureCountTab.push({ id: '175', count: 1 });
+ structureCountTab.push({ id: '174', count: 1 });
+ structureCountTab.push({ id: '173', count: 1 });
+ structureCountTab.push({ id: '172', count: 1 });
+ structureCountTab.push({ id: '171', count: 1 });
+ structureCountTab.push({ id: '167', count: 1 });
+ structureCountTab.push({ id: '165', count: 1 });
// Insertion sociale et professionnelle
- structureCountTab.push({ id: 254, count: 2 });
- structureCountTab.push({ id: 240, count: 2 });
- structureCountTab.push({ id: 194, count: 3 });
- structureCountTab.push({ id: 193, count: 3 });
- structureCountTab.push({ id: 192, count: 3 });
- structureCountTab.push({ id: 191, count: 3 });
- structureCountTab.push({ id: 262, count: 3 });
- structureCountTab.push({ id: 263, count: 2 });
- structureCountTab.push({ id: 3, count: 2 });
+ structureCountTab.push({ id: '254', count: 2 });
+ structureCountTab.push({ id: '240', count: 2 });
+ structureCountTab.push({ id: '194', count: 3 });
+ structureCountTab.push({ id: '193', count: 3 });
+ structureCountTab.push({ id: '192', count: 3 });
+ structureCountTab.push({ id: '191', count: 3 });
+ structureCountTab.push({ id: '262', count: 3 });
+ structureCountTab.push({ id: '263', count: 2 });
+ structureCountTab.push({ id: '3', count: 2 });
// Aide à la parentalité
- structureCountTab.push({ id: 257, count: 2 });
- structureCountTab.push({ id: 238, count: 2 });
- structureCountTab.push({ id: 178, count: 1 });
- structureCountTab.push({ id: 166, count: 1 });
+ structureCountTab.push({ id: '257', count: 2 });
+ structureCountTab.push({ id: '238', count: 2 });
+ structureCountTab.push({ id: '178', count: 1 });
+ structureCountTab.push({ id: '166', count: 1 });
// Culture et sécurité numérique
- structureCountTab.push({ id: 264, count: 2 });
- structureCountTab.push({ id: 255, count: 2 });
- structureCountTab.push({ id: 265, count: 2 });
- structureCountTab.push({ id: 232, count: 2 });
- structureCountTab.push({ id: 225, count: 2 });
- structureCountTab.push({ id: 221, count: 2 });
- structureCountTab.push({ id: 218, count: 1 });
- structureCountTab.push({ id: 209, count: 1 });
- structureCountTab.push({ id: 208, count: 1 });
- structureCountTab.push({ id: 206, count: 2 });
- structureCountTab.push({ id: 195, count: 1 });
- structureCountTab.push({ id: 164, count: 1 });
- structureCountTab.push({ id: 163, count: 1 });
- structureCountTab.push({ id: 162, count: 2 });
+ structureCountTab.push({ id: '264', count: 2 });
+ structureCountTab.push({ id: '255', count: 2 });
+ structureCountTab.push({ id: '265', count: 2 });
+ structureCountTab.push({ id: '232', count: 2 });
+ structureCountTab.push({ id: '225', count: 2 });
+ structureCountTab.push({ id: '221', count: 2 });
+ structureCountTab.push({ id: '218', count: 1 });
+ structureCountTab.push({ id: '209', count: 1 });
+ structureCountTab.push({ id: '208', count: 1 });
+ structureCountTab.push({ id: '206', count: 2 });
+ structureCountTab.push({ id: '195', count: 1 });
+ structureCountTab.push({ id: '164', count: 1 });
+ structureCountTab.push({ id: '163', count: 1 });
+ structureCountTab.push({ id: '162', count: 2 });
return res.status(200).jsonp(structureCountTab);
});
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.ts b/src/app/structure-list/components/modal-filter/modal-filter.component.ts
index ee1a02278..f4056cd8b 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.ts
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.ts
@@ -29,13 +29,13 @@ export class ModalFilterComponent implements OnInit {
}
// Return index of a specific module in array modules
- public getIndex(id: number, categ: string): number {
+ public getIndex(id: string, categ: string): number {
return this.checkedModules.findIndex((m: Module) => m.id === id && m.text === categ);
}
// Management of the checkbox event (Check / Uncheck)
public onCheckboxChange(event, categ: string): void {
- const checkValue: number = parseInt(event.target.value, 10);
+ const checkValue: string = event.target.value;
if (event.target.checked) {
this.checkedModules.push(new Module(checkValue, categ));
} else {
@@ -55,7 +55,7 @@ export class ModalFilterComponent implements OnInit {
}
});
});
- this.emitModules([]);
+ this.emitModules(this.checkedModules);
}
// Sends an array containing all modules
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index e8acc2e99..848365d03 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -29,7 +29,7 @@
<button
type="button"
[disabled]="modalTypeOpened === TypeModal[0]"
- [ngClass]="{ selected: modalTypeOpened === TypeModal[0] }"
+ [ngClass]="{ selected: modalTypeOpened === TypeModal[0], containCheckedFilters: numberAccompanimentChecked }"
(click)="openModal(TypeModal[0])"
fxLayout="row"
fxLayoutAlign="space-between center"
@@ -40,7 +40,7 @@
<button
type="button"
[disabled]="modalTypeOpened === TypeModal[1]"
- [ngClass]="{ selected: modalTypeOpened === TypeModal[1] }"
+ [ngClass]="{ selected: modalTypeOpened === TypeModal[1], containCheckedFilters: numberTrainingChecked }"
(click)="openModal(TypeModal[1])"
fxLayout="row"
fxLayoutAlign="space-between center"
@@ -51,8 +51,8 @@
<button
type="button"
[disabled]="modalTypeOpened === TypeModal[2]"
- [ngClass]="{ selected: modalTypeOpened === TypeModal[2] }"
- (click)="modalTypeOpened === TypeModal[2] ? test() : openModal(TypeModal[2])"
+ [ngClass]="{ selected: modalTypeOpened === TypeModal[2], containCheckedFilters: numberMoreFiltersChecked }"
+ (click)="openModal(TypeModal[2])"
fxLayout="row"
fxLayoutAlign="space-between center"
>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 8087cdd84..9d93e9bf7 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -63,9 +63,12 @@
@include cn-regular-14;
}
}
+ .containCheckedFilters {
+ border-color: $secondary-color;
+ }
.selected {
- border: 1px solid $primary-color;
- color: $primary-color;
+ border-color: $primary-color;
+ color: inherit;
.arrow {
background-color: transparent;
border-bottom: 1px solid $primary-color;
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index 604a1967a..0d5f4221b 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -30,6 +30,10 @@ export class SearchComponent implements OnInit {
// Checkbox variable
public checkedModulesFilter: Module[];
+ public numberTrainingChecked: number = 0;
+ public numberAccompanimentChecked: number = 0;
+ public numberMoreFiltersChecked: number = 0;
+
ngOnInit(): void {
// Will store the different categories
this.categories = [];
@@ -64,13 +68,39 @@ export class SearchComponent implements OnInit {
}
// Delete when getting back-end
- private mockApiNumber(nb: number): string {
+ private mockApiNumber(nb: string): string {
return ('00' + nb).slice(-3);
}
public fetchResults(checkedModules: Module[]): void {
const inputTerm = this.searchForm.get('searchTerm').value;
+ // Check if some modules is checked in filters
+ if (this.checkedModulesFilter !== checkedModules) {
+ // First btn filter
+ if (this.modalTypeOpened === TypeModal[0]) {
+ // Check if some modules is checked on first filter and store number of modules checked
+ checkedModules.length && this.numberTrainingChecked + this.numberMoreFiltersChecked != checkedModules.length
+ ? (this.numberAccompanimentChecked =
+ checkedModules.length - (this.numberTrainingChecked + this.numberMoreFiltersChecked))
+ : (this.numberAccompanimentChecked = 0);
+ } // Second btn filter
+ else if (this.modalTypeOpened === TypeModal[1]) {
+ // Check if some modules is checked on first filter and store number of modules checked
+ checkedModules.length &&
+ this.numberAccompanimentChecked + this.numberMoreFiltersChecked != checkedModules.length
+ ? (this.numberTrainingChecked =
+ checkedModules.length - (this.numberAccompanimentChecked + this.numberMoreFiltersChecked))
+ : (this.numberTrainingChecked = 0);
+ } // Third btn filter
+ else if (this.modalTypeOpened === TypeModal[2]) {
+ // Check if some modules is checked on first filter and store number of modules checked
+ checkedModules.length && this.numberAccompanimentChecked + this.numberTrainingChecked != checkedModules.length
+ ? (this.numberMoreFiltersChecked =
+ checkedModules.length - (this.numberAccompanimentChecked + this.numberTrainingChecked))
+ : (this.numberMoreFiltersChecked = 0);
+ }
+ }
// Store checked modules
this.checkedModulesFilter = checkedModules;
@@ -81,8 +111,6 @@ export class SearchComponent implements OnInit {
// Open the modal and display the list according to the right filter button
public openModal(option: string): void {
- console.log(this.modalTypeOpened);
- console.log(option);
this.categories = [];
if (this.modalTypeOpened !== option) {
this.modalTypeOpened = option;
@@ -91,9 +119,6 @@ export class SearchComponent implements OnInit {
this.modalTypeOpened = null;
}
}
- test() {
- console.log('test');
- }
public closeModal(): void {
this.modalTypeOpened = null;
}
@@ -111,21 +136,21 @@ export class SearchComponent implements OnInit {
.replace('?', '');
}
- // Fake service api
- private mockService(module: Category[], titre: string, categ: any, nbCateg: number): void {
- const category = new Category({ name: titre, modules: [] });
- for (let i = 0; i < nbCateg; i++) {
- category.modules.push(new Module(categ.id + i, categ.name + i));
- }
- module.push(category);
- }
-
// Get the correct list of checkbox/modules depending on the type of modal.
private fakeData(option: string): void {
if (option === TypeModal[0]) {
- this.mockService(this.categories, 'Accompagnement des démarches', { name: 'CAF', id: 5 }, 7);
+ forkJoin([this.searchService.getCategoriesAccompaniment(), this.searchService.getFakeCounterModule()]).subscribe(
+ (res) => {
+ const categories: Category[] = res[0];
+ const structureCounter: StructureCounter[] = res[1];
+ categories.forEach((category) => {
+ category = this.searchService.setCountModules(category, structureCounter);
+ this.categories.push(category);
+ });
+ }
+ );
} else if (option === TypeModal[1]) {
- forkJoin([this.searchService.getCategoriesFormations(), this.searchService.getFakeCounterModule()]).subscribe(
+ forkJoin([this.searchService.getCategoriesTraining(), this.searchService.getFakeCounterModule()]).subscribe(
(res) => {
const categories: Category[] = res[0];
const structureCounter: StructureCounter[] = res[1];
@@ -136,17 +161,16 @@ export class SearchComponent implements OnInit {
}
);
} else if (option === TypeModal[2]) {
- this.mockService(
- this.categories,
- 'Équipements',
- { name: 'Accès à des revues ou livres infoirmatiques numériques', id: 1 },
- 8
+ forkJoin([this.searchService.getCategoriesMoreFilters(), this.searchService.getFakeCounterModule()]).subscribe(
+ (res) => {
+ const categories: Category[] = res[0];
+ const structureCounter: StructureCounter[] = res[1];
+ categories.forEach((category) => {
+ category = this.searchService.setCountModules(category, structureCounter);
+ this.categories.push(category);
+ });
+ }
);
- this.mockService(this.categories, "Modalité d'accueil", { name: 'Matériel mis à dispostion', id: 2 }, 6);
- this.mockService(this.categories, "Type d'acteurs", { name: 'Lieux de médiation (Pimms, assos...)', id: 3 }, 5);
- this.mockService(this.categories, 'Publics', { name: 'Langues étrangères autres qu’anglais', id: 4 }, 12);
- this.mockService(this.categories, 'Labelisation', { name: 'Prescripteur du Pass Numérique', id: 5 }, 6);
- this.mockService(this.categories, 'Type de structure', { name: 'Espace de co-working', id: 6 }, 6);
}
}
}
diff --git a/src/app/structure-list/models/module.model.ts b/src/app/structure-list/models/module.model.ts
index 340c04092..5bbbc940c 100644
--- a/src/app/structure-list/models/module.model.ts
+++ b/src/app/structure-list/models/module.model.ts
@@ -1,9 +1,9 @@
export class Module {
- id: number;
+ id: string;
text: string;
count: number;
- constructor(id: number, text: string) {
+ constructor(id: string, text: string) {
this.id = id;
this.text = text;
}
diff --git a/src/app/structure-list/models/structureCounter.model.ts b/src/app/structure-list/models/structureCounter.model.ts
index d208192f0..4121bb18c 100644
--- a/src/app/structure-list/models/structureCounter.model.ts
+++ b/src/app/structure-list/models/structureCounter.model.ts
@@ -1,5 +1,5 @@
export class StructureCounter {
- id: number;
+ id: string;
count: number;
constructor(obj?: any) {
diff --git a/src/app/structure-list/services/search.service.ts b/src/app/structure-list/services/search.service.ts
index 1b6a33b59..b7d825016 100644
--- a/src/app/structure-list/services/search.service.ts
+++ b/src/app/structure-list/services/search.service.ts
@@ -12,11 +12,21 @@ import { StructureCounter } from '../models/structureCounter.model';
export class SearchService {
constructor(private http: HttpClient) {}
- public getCategoriesFormations(): Observable<Category[]> {
+ public getCategoriesTraining(): Observable<Category[]> {
return this.http
.get('/api/CategoriesFormations')
.pipe(map((data: any[]) => data.map((item) => new Category(item))));
}
+ public getCategoriesAccompaniment(): Observable<Category[]> {
+ return this.http
+ .get('/api/CategoriesAccompagnement')
+ .pipe(map((data: any[]) => data.map((item) => new Category(item))));
+ }
+ public getCategoriesMoreFilters(): Observable<Category[]> {
+ return this.http
+ .get('/api/CategoriesPlusDeFiltres')
+ .pipe(map((data: any[]) => data.map((item) => new Category(item))));
+ }
public getFakeCounterModule(): Observable<StructureCounter[]> {
return this.http
@@ -26,6 +36,8 @@ export class SearchService {
public setCountModules(category: Category, structureCountTab: StructureCounter[]): Category {
category.modules.forEach((m: Module) => {
for (let i = 0; i < structureCountTab.length; i++) {
+ // Force type
+ m.id = m.id.toString();
if (structureCountTab[i].id === m.id) {
m.count = structureCountTab[i].count;
}
--
GitLab