From 49defde1d759b866cd5ddff5507e43cef6f200c7 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 21 Oct 2020 10:59:40 +0200
Subject: [PATCH] fix(search) : add some test + fix design modal
---
debug.log | 1 +
.../components/search/search.component.html | 61 +++++++++++--------
.../components/search/search.component.scss | 16 +++--
.../search/search.component.spec.ts | 28 ++++++++-
.../services/search.service.spec.ts | 6 +-
.../services/structure-list.service.spec.ts | 12 ++--
6 files changed, 83 insertions(+), 41 deletions(-)
create mode 100644 debug.log
diff --git a/debug.log b/debug.log
new file mode 100644
index 000000000..e4874e229
--- /dev/null
+++ b/debug.log
@@ -0,0 +1 @@
+[1021/094448.838:ERROR:directory_reader_win.cc(43)] FindFirstFile: Le chemin d�acc�s sp�cifi� est introuvable. (0x3)
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 8f8826d2e..f59c9ba93 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -55,35 +55,42 @@
fxLayoutAlign="space-between"
[ngClass]="['modal', 'modal' + modalTypeOpened]"
>
- <div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
- <!--<div class="blockFiltre" *ngFor="let s of services">-->
- <div class="blockFiltre" *ngFor="let c of categories">
- <h4>{{ c.name }}</h4>
+ <div class="borderTricks">
+ <div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
+ <!--<div class="blockFiltre" *ngFor="let s of services">-->
+ <div class="blockFiltre" *ngFor="let c of categories">
+ <h4>{{ c.name }}</h4>
- <ul class="blockLigne">
- <div fxLayout="row" class="ligneFiltre" fxLayoutAlign="space-between center" *ngFor="let module of c.modules">
- <li class="checkbox">
- <div class="checkboxItem">
- <label>
- <input
- type="checkbox"
- [checked]="getIndex(module.id, c.name) > -1"
- [value]="module.id"
- (change)="onCheckboxChange($event, c.name)"
- />
- <span class="customCheck"></span>
- <div class="label">{{ module.text }}</div>
- </label>
- </div>
- </li>
- <span class="nbResult">{{ module.count ? module.count : '0' }}</span>
- </div>
- </ul>
+ <ul class="blockLigne">
+ <div
+ fxLayout="row"
+ class="ligneFiltre"
+ fxLayoutAlign="space-between center"
+ *ngFor="let module of c.modules"
+ >
+ <li class="checkbox">
+ <div class="checkboxItem">
+ <label>
+ <input
+ type="checkbox"
+ [checked]="getIndex(module.id, c.name) > -1"
+ [value]="module.id"
+ (change)="onCheckboxChange($event, c.name)"
+ />
+ <span class="customCheck"></span>
+ <div class="label">{{ module.text }}</div>
+ </label>
+ </div>
+ </li>
+ <span class="nbResult">{{ module.count ? module.count : '0' }}</span>
+ </div>
+ </ul>
+ </div>
+ </div>
+ <div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
+ <a (click)="clearFilters()">Effacer</a>
+ <button type="button" (click)="applyFilter(searchForm.value.searchTerm)">Appliquer</button>
</div>
- </div>
- <div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
- <a (click)="clearFilters()">Effacer</a>
- <button type="button" (click)="applyFilter(searchForm.value.searchTerm)">Appliquer</button>
</div>
</div>
</div>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 160f8dffe..e15560478 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -103,13 +103,18 @@
margin-left: 412px;
}
.modal {
- -moz-box-shadow: -5px 5px 10px 0px $grey;
- box-shadow: -5px 5px 10px 0px $grey;
max-height: 648px;
max-width: 754px;
width: 94%;
background: $white;
- border: 1px solid $grey;
+ border-left: 6.5px solid transparent;
+ border-bottom: 6.5px solid transparent;
+ border-radius: 11px;
+ //repeating-linear-gradient(37deg, transparent 0, transparent 1px, $grey 2px, $grey 2px) 12;
+ //border-image: repeating-linear-gradient(-45deg, transparent 0, transparent 4px, $grey 4px, $grey 5px) 8;
+
+ background: linear-gradient($white, $white) padding-box,
+ repeating-linear-gradient(-45deg, transparent 0, transparent 4px, $grey 4px, $grey 5px) border-box;
box-sizing: border-box;
z-index: 1;
position: absolute;
@@ -125,12 +130,15 @@
background: $grey;
border-radius: 6px;
}
-
+ .borderTricks {
+ border: 1px solid #e0e0e0;
+ }
.contentModal {
overflow-y: auto;
max-width: 1100px;
border-bottom: 1px solid $grey;
margin-bottom: 10px;
+ max-height: 500px;
.blockFiltre {
width: 100%;
diff --git a/src/app/structure-list/components/search/search.component.spec.ts b/src/app/structure-list/components/search/search.component.spec.ts
index 56e05f1d6..62c81724c 100644
--- a/src/app/structure-list/components/search/search.component.spec.ts
+++ b/src/app/structure-list/components/search/search.component.spec.ts
@@ -1,14 +1,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ReactiveFormsModule } from '@angular/forms';
+import { Category } from '../../models/category.model';
+import { Filter } from '../../models/filter.model';
+import { Module } from '../../models/module.model';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
import { SearchComponent } from './search.component';
+import { SearchService } from '../../services/search.service';
-describe('RechercheComponent', () => {
+describe('SearchComponent', () => {
let component: SearchComponent;
let fixture: ComponentFixture<SearchComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [SearchComponent],
+ imports: [HttpClientTestingModule, ReactiveFormsModule],
}).compileComponents();
});
@@ -21,4 +27,22 @@ describe('RechercheComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('should emit filters', () => {
+ const filter: Filter[] = [new Filter('nom', 'valInput', false)];
+ spyOn(component.searchEvent, 'emit');
+ component.applyFilter('valInput');
+ expect(component.searchEvent.emit).toHaveBeenCalled();
+ expect(component.searchEvent.emit).toHaveBeenCalledWith(filter);
+ });
+
+ it('should update categories', () => {
+ let categories: Category[] = [new Category({ name: 'Accompagnement des démarches' })];
+ categories[0].modules = [];
+ for (let i = 0; i < 7; i++) {
+ categories[0].modules.push(new Module(5 + i, 'CAF' + i));
+ }
+ component.openModal('accompagnement');
+ expect(component.categories).toEqual(categories);
+ });
});
diff --git a/src/app/structure-list/services/search.service.spec.ts b/src/app/structure-list/services/search.service.spec.ts
index 23c42c7bb..d8b757560 100644
--- a/src/app/structure-list/services/search.service.spec.ts
+++ b/src/app/structure-list/services/search.service.spec.ts
@@ -1,12 +1,14 @@
import { TestBed } from '@angular/core/testing';
-
+import { HttpClientTestingModule } from '@angular/common/http/testing';
import { SearchService } from './search.service';
describe('SearchService', () => {
let service: SearchService;
beforeEach(() => {
- TestBed.configureTestingModule({});
+ TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule],
+ });
service = TestBed.inject(SearchService);
});
diff --git a/src/app/structure-list/services/structure-list.service.spec.ts b/src/app/structure-list/services/structure-list.service.spec.ts
index 243602d45..230f2e331 100644
--- a/src/app/structure-list/services/structure-list.service.spec.ts
+++ b/src/app/structure-list/services/structure-list.service.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
import { inject, TestBed } from '@angular/core/testing';
import { Day } from '../models/day.model';
import { Structure } from '../models/structure.model';
@@ -7,15 +7,15 @@ import { StructureService } from './structure-list.service';
const { DateTime } = require('luxon');
describe('StructureService', () => {
+ let structureService: StructureService;
+
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [HttpClientModule],
+ imports: [HttpClientTestingModule],
+ providers: [StructureService],
});
+ structureService = TestBed.inject(StructureService);
});
- let structureService: StructureService;
- beforeEach(inject([StructureService], (s: StructureService) => {
- structureService = s;
- }));
it('Mise à jour ouverture de la structure : should return true', () => {
// Init structure avec aucun horaire
--
GitLab