Commit a9b23865 authored by Hugo SUBTIL's avatar Hugo SUBTIL
Browse files

fix: V2.0.0-beta1 various design returns for onboarding, carto ans structures

parent 3fe6ae0f
......@@ -125,10 +125,6 @@ export class FooterFormComponent implements OnChanges {
//TODO Go to send mail page and send the mail
return;
}
if (this.currentStep === structureFormStep.structureConsent) {
const user: User = await this.profileService.getProfile();
this.structureService.createStructure(this.form.value, user).subscribe(() => {});
}
}
if (this.isPersonalOfferpage()) {
this.endForm.emit({ formType: this.currentForm });
......
......@@ -32,11 +32,7 @@
fxLayoutAlign="space-around"
class="form-list"
[class]="
structure['alreadySelected']
? 'already-selected'
: isSelectedStructure(structure)
? 'item-selected'
: ''
structure.alreadySelected ? 'already-selected' : isSelectedStructure(structure) ? 'item-selected' : ''
"
>
<div fxLayout="row" fxLayoutAlign="space-between center">
......@@ -51,7 +47,7 @@
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<div *ngIf="structure['alreadySelected']" class="sticker">Déjà<br />sélectionnée</div>
<div *ngIf="structure.alreadySelected" class="sticker">Déjà<br />sélectionnée</div>
</div>
</div>
</div>
......
......@@ -15,8 +15,8 @@ export class ProfileStructureChoiceComponent implements OnInit {
@Input() structureForm: FormGroup;
@Output() validateForm = new EventEmitter<Structure>();
@Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
@Output() createStructure = new EventEmitter<any>();
public searchString: string = '';
@Output() createStructure = new EventEmitter<string>();
public searchString = '';
public structures: Structure[];
public selectedStructureItem: Structure;
public isAlreadySearching = false;
......@@ -29,13 +29,15 @@ export class ProfileStructureChoiceComponent implements OnInit {
this.isAlreadySearching = true;
this.profileService.getProfile().then((profile) => {
this.isAlreadySearching = false;
this.profileStructuresLink = profile.structuresLink;
this.profileStructuresLink = [...profile.structuresLink, ...profile.pendingStructuresLink];
this.getStructures(null);
});
}
public onSearchChange(searchString: string) {
if (searchString.length < 3 && this.searchString == '') return;
public onSearchChange(searchString: string): void {
if (searchString.length < 3 && this.searchString === '') {
return;
}
this.searchString = searchString;
const filters: Filter[] = [];
if (searchString.length > 0) {
......@@ -45,28 +47,32 @@ export class ProfileStructureChoiceComponent implements OnInit {
}
public selectedResult(structure: Structure): void {
if (structure['alreadySelected']) return;
if (this.selectedStructureItem) this.selectedStructureItem['selected'] = false;
if (structure.alreadySelected) {
return;
}
this.selectedStructureItem = structure;
this.structureForm.patchValue({ _id: structure._id, structureName: structure.structureName });
this.validateForm.emit();
}
public isSelectedStructure(structure: Structure): boolean {
if (this.selectedStructureItem && this.selectedStructureItem._id === structure._id) return true;
return false;
if (this.selectedStructureItem && this.selectedStructureItem._id === structure._id) {
return true;
} else {
return false;
}
}
private getStructures(filters: Filter[]) {
private getStructures(filters: Filter[]): void {
if (!this.isAlreadySearching) {
this.isAlreadySearching = true;
this.structureService.getStructuresByName(filters).subscribe((structures) => {
structures.forEach((structure) => {
if (this.profileStructuresLink.includes(structure._id)) {
structure['alreadySelected'] = true;
structure.alreadySelected = true;
}
});
if (this.searchString == '') {
if (this.searchString === '') {
structures.sort((a, b) => a.structureName.localeCompare(b.structureName));
}
this.structures = structures;
......@@ -76,6 +82,6 @@ export class ProfileStructureChoiceComponent implements OnInit {
}
public addStructure(): void {
this.createStructure.emit();
this.createStructure.emit(this.searchString);
}
}
......@@ -3,7 +3,7 @@
<app-profile-structure-choice
[structureForm]="structureForm"
(validateForm)="setValidationsForm()"
(createStructure)="goToCreateStructure()"
(createStructure)="goToCreateStructure($event)"
></app-profile-structure-choice>
</ng-container>
<ng-container *ngIf="currentStep === structureFormStep.structureFormTime" class="no-max-width">
......
......@@ -352,7 +352,8 @@ export class StructureFormComponent implements OnChanges {
this.setValidationsForm();
}
public goToCreateStructure(): void {
public goToCreateStructure(structureName = ''): void {
this.structureForm.patchValue({ _id: null, structureName });
this.isNotExistingStructure.emit();
}
}
......@@ -86,7 +86,6 @@ export class LoginComponent implements OnInit {
.subscribe(
() => {
if (this.isWelcome) {
console.log('la ?');
this.router.navigateByUrl('form/profile');
} else {
this.router.navigateByUrl('news');
......
......@@ -63,6 +63,8 @@ export class Structure {
public personalOffers: PersonalOffer[] = [];
public alreadySelected? = false;
constructor(obj?: any) {
Object.assign(this, obj, {
hours: obj && obj.hours ? new Week(obj.hours) : new Week(),
......@@ -176,7 +178,7 @@ export class Structure {
case Equipment.tablet:
return this.nbTablets > 1 ? 'Tablettes' : 'Tablette';
case Equipment.computer:
return this.nbComputers > 1 ? 'Ordinateurs à disposition' : 'Ordinateur à disposition';
return this.nbComputers > 1 ? 'Ordinateurs' : 'Ordinateur';
case Equipment.scanner:
return this.nbScanners > 1 ? 'Scanners' : 'Scanner';
default:
......
......@@ -59,7 +59,7 @@ h1 {
width: 7px;
}
&:focus {
border-color: $blue-middle;
border-color: $focus-color;
}
}
.selected {
......
......@@ -99,7 +99,7 @@
</div>
<!-- Filter with multiple categories -->
<div
class="contentModal maxModal"
class="contentModal maxModal max-height"
fxLayout="row wrap"
fxLayoutAlign="flex-start"
*ngIf="categories.length > 1 && getModalType() !== 'moreFilters'"
......@@ -120,13 +120,16 @@
class="customCheck customCheckPrimary"
[ngClass]="{ halfCheck: getCategoryCheckboxStatus(c) === 'halfChecked' }"
></span>
<div class="label">{{ c.name }}</div>
</label>
<div
class="arrow"
fxLayout="row"
fxLayoutAlign="space-between center"
class="w-100 clickable"
(click)="toggleShowCategory(c.id)"
[ngClass]="{ toggled: this.toggledCategories.includes(c.id) }"
></div>
>
<div class="label">{{ c.name }}</div>
<div class="arrow" [ngClass]="{ toggled: this.toggledCategories.includes(c.id) }"></div>
</div>
</div>
<ul class="blockLigne smallList" [ngClass]="{ show: this.toggledCategories.includes(c.id) }">
<div fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre" *ngFor="let module of c.modules">
......@@ -137,7 +140,7 @@
type="checkbox"
[checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
[value]="module.id"
(change)="onCheckboxChange($event, c.id)"
(change)="onCheckboxChange($event, c.id, module.text)"
/>
<span class="customCheck customCheckPrimary"></span>
<div class="label">{{ module.text }}</div>
......
......@@ -144,6 +144,10 @@
.toggled {
transform: translateY(25%) rotate(-135deg);
}
&.max-height {
max-height: 50vh;
overflow-y: overlay;
}
}
.footer {
box-sizing: border-box;
......@@ -182,6 +186,7 @@
background: white;
margin-top: 10%;
border-radius: 8px;
// overflow: hidden;
}
.backDropModal {
background: white;
......
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { ButtonType } from '../../../shared/components/button/buttonType.enum';
import { TypeModal } from '../../enum/typeModal.enum';
import { Category } from '../../models/category.model';
......@@ -10,8 +10,9 @@ import { SearchService } from '../../services/search.service';
templateUrl: './modal-filter.component.html',
styleUrls: ['./modal-filter.component.scss'],
})
export class ModalFilterComponent implements OnInit {
export class ModalFilterComponent implements OnInit, OnChanges {
constructor(public searchService: SearchService) {}
@Input() public modalType: TypeModal;
@Input() public categories: Category[];
//checked modules filter list
......@@ -28,6 +29,12 @@ export class ModalFilterComponent implements OnInit {
this.checkedModules = this.modules.slice();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.modalType) {
this.checkedModules = this.modules.slice();
}
}
// Management of the checkbox event (Check / Uncheck)
public onCheckboxChange(event, categ: string, text?: string): void {
const checkValue: string = event.target.value;
......
......@@ -235,9 +235,7 @@
fxLayoutAlign="baseline baseline"
fxLayoutGap="12px"
>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<h2>Labellisations</h2>
</div>
<h2>Labellisations</h2>
<div class="wrapper">
<div *ngFor="let labels of structure.labelsQualifications">
<app-logo-card [name]="labels"></app-logo-card>
......@@ -253,9 +251,7 @@
fxLayoutAlign="baseline baseline"
fxLayoutGap="12px"
>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<h2>Aides numérique</h2>
</div>
<h2>Aides numérique</h2>
<div fxLayout="column">
<div class="wrapper">
<div *ngFor="let accompagnement of structure.proceduresAccompaniment">
......@@ -276,11 +272,8 @@
fxLayout="column"
class="structure-details-block noSeparator"
fxLayoutAlign="baseline baseline"
fxLayoutGap="20px"
>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<h2>Formations</h2>
</div>
<h2>Formations</h2>
<div *ngIf="structure.freeWorkShop">
<span *ngIf="multipleWorkshop()" class="bold-info">L'accès à ces formations est gratuit</span>
<span *ngIf="!multipleWorkshop()" class="bold-info">L'accès à cette formation est gratuit</span>
......@@ -424,11 +417,8 @@
fxLayout="column"
class="structure-details-block"
fxLayoutAlign="baseline baseline"
fxLayoutGap="20px"
>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<h2>Matériel et wifi</h2>
</div>
<h2>Matériel et wifi</h2>
<div fxLayout="column">
<div *ngIf="filterOnlyEquipments(structure.equipmentsAndServices).includes('wifiEnAccesLibre')">
{{ getEquipmentsLabel('wifiEnAccesLibre') }}
......@@ -459,15 +449,12 @@
fxLayout="column"
class="structure-details-block noSeparator"
fxLayoutAlign="baseline baseline"
fxLayoutGap="20px"
>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<h2>Accès</h2>
</div>
<h2>Accès</h2>
<div fxLayout="column wrap" fxLayoutGap="24px">
<div *ngFor="let tclStop of tclStopPoints | slice: 0:3">
{{ tclStop.name }}
<div fxLayout="row wrap" fxLayoutGap="24px">
<div fxLayout="row wrap" fxLayoutGap="16px">
<p *ngFor="let sub of tclStop.subLines">
<app-svg-icon [type]="'tcl'" [icon]="sub" [iconClass]="'icon-75'"></app-svg-icon>
</p>
......
......@@ -86,7 +86,6 @@ h3 {
}
}
@media #{$tablet} {
height: calc(100vh - #{$header-height});
.printButton {
display: none !important;
}
......
......@@ -140,7 +140,7 @@ export class StructureDetailsComponent implements OnInit {
case Equipment.tablet:
return this.structure.nbTablets > 1 ? 'Tablettes' : 'Tablette';
case Equipment.computer:
return this.structure.nbComputers > 1 ? 'Ordinateurs à disposition' : 'Ordinateur à disposition';
return this.structure.nbComputers > 1 ? 'Ordinateurs' : 'Ordinateur';
case Equipment.scanner:
return this.structure.nbScanners > 1 ? 'Scanners' : 'Scanner';
default:
......
......@@ -92,7 +92,7 @@
transition: all 300ms ease;
}
&:focus {
border-color: $blue-middle;
border-color: $focus-color;
}
}
.selected {
......@@ -154,7 +154,7 @@
height: 20px;
border: solid 1px $grey-4;
background: white;
margin-left: 0;
margin: 0;
margin-right: 5px;
transition: all 300ms ease;
position: relative;
......@@ -201,7 +201,7 @@
padding: 4px 6px 8px 6px;
&:hover {
.ico-pin-search {
background-color: $blue-middle;
background-color: $primary-color;
}
}
&:focus {
......
<div class="structureList-container" (scroll)="onScrollDown($event)">
<div class="structureList-container">
<div class="structureListHeader hide-on-print">
<div class="nbStructuresLabel" [ngPlural]="structureList.length">
<ng-template ngPluralCase="0">0 structure</ng-template>
......@@ -16,7 +16,7 @@
<div id="listCard" class="listCard" (mouseleave)="mouseLeave()">
<app-card
*ngFor="let structure of structuresListChunked"
*ngFor="let structure of structureList"
[structure]="structure"
(showDetails)="showDetails($event, filters)"
(hover)="handleCardHover($event)"
......
......@@ -23,10 +23,6 @@ export class StructureListComponent implements OnChanges {
public buttonTypeEnum = ButtonType;
public showStructureDetails = false;
public structure: Structure;
public structuresListChunked: Structure[];
private pageStructures = 0;
private arrayChunked: Structure[][] = [];
private chunck = 10;
constructor(
private route: ActivatedRoute,
......@@ -58,7 +54,6 @@ export class StructureListComponent implements OnChanges {
});
}
if (changes.structureList) {
this.structuresListChunked = this.chunckAnArray(this.structureList);
document.getElementById('listCard').scrollTo(0, 0);
}
}
......@@ -93,26 +88,4 @@ export class StructureListComponent implements OnChanges {
public emitUpdatedStructure(s: Structure): void {
this.updatedStructure.emit(s);
}
private chunckAnArray(structures: Structure[]): Structure[] {
this.arrayChunked = [];
this.pageStructures = 0;
for (let i = 0; i < structures.length; i += this.chunck) {
this.arrayChunked.push(structures.slice(i, i + this.chunck));
}
return this.arrayChunked[0];
}
public onScrollDown(event): void {
if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 50) {
this.loadMoreStructures();
}
}
private loadMoreStructures(): void {
if (this.pageStructures < this.arrayChunked.length - 1) {
this.pageStructures++;
const newStructures = _.map(this.arrayChunked[this.pageStructures]);
this.structuresListChunked = [...this.structuresListChunked, ...newStructures];
}
}
}
......@@ -25,7 +25,6 @@ $orange-warning: #da6c2e;
/* OTHERS */
$blue: #348899;
$blue-ultra-light: #eaf8fb;
$blue-middle: #83b6c1;
$blue-light: #c9ecf3;
/* APP COLORS */
$primary-color: $red;
......@@ -39,3 +38,4 @@ $app-background: $grey-8;
$ram-hover-principal: $primary-color;
$scrollbar-track: rgba($grey-8, 0.65);
$scrollbar-thumb: $grey-4;
$focus-color: $grey-1;
......@@ -56,7 +56,7 @@ a {
}
&:hover {
text-decoration: underline;
outline-color: $blue-middle;
outline-color: $primary-color;
}
&.primary {
@include hyperlink;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment