From 5a94bf4e393741c1cf465f3834e08b6c12ad23a3 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Mon, 2 Nov 2020 15:51:09 +0100
Subject: [PATCH] fix(search) : fix review merge
---
api/server.js | 5 +-
.../modal-filter/modal-filter.component.scss | 4 +-
.../components/search/search.component.html | 14 +++---
.../components/search/search.component.ts | 49 ++++++++++---------
src/app/structure-list/enum/typeModal.enum.ts | 5 ++
.../models/structureCounter.model.ts | 8 +++
.../structure-list/services/search.service.ts | 10 ++--
.../structure-list.component.html | 1 -
.../structure-list.component.scss | 5 --
9 files changed, 57 insertions(+), 44 deletions(-)
create mode 100644 src/app/structure-list/enum/typeModal.enum.ts
create mode 100644 src/app/structure-list/models/structureCounter.model.ts
diff --git a/api/server.js b/api/server.js
index 43c5b108c..e85ef232a 100644
--- a/api/server.js
+++ b/api/server.js
@@ -11,7 +11,6 @@ server.use(middlewares);
// Add custom routes before JSON Server router
server.get('/structures/count', (req, res) => {
- console.log('ok');
let structureCountTab = [];
// Compétences de base
structureCountTab.push({ id: 260, count: 3 });
@@ -62,9 +61,7 @@ server.get('/structures/count', (req, res) => {
structureCountTab.push({ id: 164, count: 1 });
structureCountTab.push({ id: 163, count: 1 });
structureCountTab.push({ id: 162, count: 2 });
- return res.status(200).jsonp({
- structureCountTab,
- });
+ return res.status(200).jsonp(structureCountTab);
});
// Use default router
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index 5275c2945..ccb052e16 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -5,14 +5,14 @@
@import '../../../../assets/scss/shapes';
@import '../../../../assets/scss/buttons';
-.modalformations {
+.modaltraining {
@media #{$desktop} {
margin-left: 0;
}
margin-left: 196px;
}
-.modalplusFiltres {
+.modalmoreFilters {
@media #{$desktop} {
margin-left: 0;
}
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 44fa60bd2..9de95de24 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -14,7 +14,7 @@
<div class="icon close" (click)="clearInput()">
<div class="ico-close grey"></div>
</div>
- <div class="separator"></div>
+ <span class="separator"></span>
<div class="icon pin">
<div class="ico-pin-search blue"></div>
</div>
@@ -28,8 +28,8 @@
<div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
<button
type="button"
- [ngClass]="{ selected: modalTypeOpened === modalType[0] }"
- (click)="openModal(this.modalType[0])"
+ [ngClass]="{ selected: modalTypeOpened === TypeModal[0] }"
+ (click)="openModal(TypeModal[0])"
fxLayout="row"
fxLayoutAlign="space-between center"
>
@@ -38,8 +38,8 @@
</button>
<button
type="button"
- [ngClass]="{ selected: modalTypeOpened === modalType[1] }"
- (click)="openModal(this.modalType[1])"
+ [ngClass]="{ selected: modalTypeOpened === TypeModal[1] }"
+ (click)="openModal(TypeModal[1])"
fxLayout="row"
fxLayoutAlign="space-between center"
>
@@ -48,8 +48,8 @@
</button>
<button
type="button"
- [ngClass]="{ selected: modalTypeOpened === modalType[2] }"
- (click)="openModal(this.modalType[2])"
+ [ngClass]="{ selected: modalTypeOpened === TypeModal[2] }"
+ (click)="openModal(TypeModal[2])"
fxLayout="row"
fxLayoutAlign="space-between center"
>
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index d95cf649b..1fb011826 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -1,8 +1,11 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
+import { forkJoin } from 'rxjs';
+import { TypeModal } from '../../enum/typeModal.enum';
import { Category } from '../../models/category.model';
import { Filter } from '../../models/filter.model';
import { Module } from '../../models/module.model';
+import { StructureCounter } from '../../models/structureCounter.model';
import { SearchService } from '../../services/search.service';
@Component({
@@ -20,24 +23,26 @@ export class SearchComponent implements OnInit {
@Output() searchEvent = new EventEmitter();
// Form search input
- searchForm: FormGroup;
-
- // Button variable
- modalType: string[] = ['accompagnement', 'formations', 'plusFiltres'];
-
+ private searchForm: FormGroup;
// Modal variable
- categories: Category[];
- modalTypeOpened: string;
-
+ private categories: Category[];
+ private modalTypeOpened: string;
// Checkbox variable
- checkedModulesFilter: Module[];
+ private checkedModulesFilter: Module[];
ngOnInit(): void {
// Will store the different categories
this.categories = [];
this.checkedModulesFilter = new Array();
+ console.log(TypeModal[0]);
}
+
+ // Accessor to template angular.
+ public get TypeModal(): typeof TypeModal {
+ return TypeModal;
+ }
+
// Clear input search
public clearInput(): void {
this.searchForm.reset();
@@ -110,22 +115,22 @@ export class SearchComponent implements OnInit {
module.push(category);
}
- // Fake data
+ // Get the correct list of checkbox/modules depending on the type of modal.
private fakeData(option: string): void {
- if (option === this.modalType[0]) {
+ if (option === TypeModal[0]) {
this.mockService(this.categories, 'Accompagnement des démarches', { name: 'CAF', id: 5 }, 7);
- } else if (option === this.modalType[1]) {
- this.searchService.getCategoriesFormations().subscribe((categories: Category[]) => {
- this.searchService
- .getFakeCounterModule()
- .subscribe((res: { structureCountTab: { id: number; count: number }[] }) => {
- categories.forEach((category) => {
- category = this.searchService.setCountModules(category, res.structureCountTab);
- this.categories.push(category);
- });
+ } else if (option === TypeModal[1]) {
+ forkJoin([this.searchService.getCategoriesFormations(), 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 === this.modalType[2]) {
+ }
+ );
+ } else if (option === TypeModal[2]) {
this.mockService(
this.categories,
'Équipements',
diff --git a/src/app/structure-list/enum/typeModal.enum.ts b/src/app/structure-list/enum/typeModal.enum.ts
new file mode 100644
index 000000000..ab391e2f6
--- /dev/null
+++ b/src/app/structure-list/enum/typeModal.enum.ts
@@ -0,0 +1,5 @@
+export enum TypeModal {
+ accompaniment,
+ training,
+ moreFilters,
+}
diff --git a/src/app/structure-list/models/structureCounter.model.ts b/src/app/structure-list/models/structureCounter.model.ts
new file mode 100644
index 000000000..d208192f0
--- /dev/null
+++ b/src/app/structure-list/models/structureCounter.model.ts
@@ -0,0 +1,8 @@
+export class StructureCounter {
+ id: number;
+ count: number;
+
+ constructor(obj?: any) {
+ Object.assign(this, obj);
+ }
+}
diff --git a/src/app/structure-list/services/search.service.ts b/src/app/structure-list/services/search.service.ts
index 906fc3aee..1b6a33b59 100644
--- a/src/app/structure-list/services/search.service.ts
+++ b/src/app/structure-list/services/search.service.ts
@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Category } from '../models/category.model';
import { Module } from '../models/module.model';
+import { StructureCounter } from '../models/structureCounter.model';
@Injectable({
providedIn: 'root',
@@ -16,10 +17,13 @@ export class SearchService {
.get('/api/CategoriesFormations')
.pipe(map((data: any[]) => data.map((item) => new Category(item))));
}
- public getFakeCounterModule(): Observable<any> {
- return this.http.get('/api/structures/count');
+
+ public getFakeCounterModule(): Observable<StructureCounter[]> {
+ return this.http
+ .get('/api/structures/count')
+ .pipe(map((data: any[]) => data.map((item) => new StructureCounter(item))));
}
- public setCountModules(category: Category, structureCountTab: { id: number; count: number }[]): Category {
+ public setCountModules(category: Category, structureCountTab: StructureCounter[]): Category {
category.modules.forEach((m: Module) => {
for (let i = 0; i < structureCountTab.length; i++) {
if (structureCountTab[i].id === m.id) {
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index e0de815ee..95735d1d1 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,6 +1,5 @@
<div class="topBlock">
<app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search>
- <div class="divider"></div>
<span class="nbStructuresLabel">{{ structureList.length }} structures</span>
</div>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 5b09b7ee8..ee31dcc05 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -2,11 +2,6 @@
@import '../../assets/scss/icons';
@import '../../assets/scss/typography';
-.divider {
- width: 100%;
- height: 1px;
- background-color: $grey-4;
-}
.nbStructuresLabel {
color: $grey;
@include cn-regular-16;
--
GitLab