From 9470132f9ba34605c57e047c506a69b368b47fbb Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Sat, 7 Aug 2021 10:39:04 +0200 Subject: [PATCH] Fix select component. --- cerberus/src/app/app.module.ts | 4 +- .../create-application.component.html | 6 +- .../create-application.component.ts | 5 ++ .../components/select/select.component.html | 19 +++--- .../components/select/select.component.scss | 54 ++++++++++++++--- .../components/select/select.component.ts | 58 +++++++++++++++++-- 6 files changed, 122 insertions(+), 24 deletions(-) diff --git a/cerberus/src/app/app.module.ts b/cerberus/src/app/app.module.ts index e1cd04a..c042c9f 100644 --- a/cerberus/src/app/app.module.ts +++ b/cerberus/src/app/app.module.ts @@ -11,6 +11,7 @@ import { ApplicationCardComponent } from './core/components/application-card/app import {MatTooltipModule} from '@angular/material/tooltip'; import { AddApplicationButtonComponent } from './core/components/add-application-button/add-application-button.component'; import { ModalComponent } from './core/components/modal/modal.component'; +import { SelectComponent } from './core/components/select/select.component'; @NgModule({ declarations: [ @@ -21,7 +22,8 @@ import { ModalComponent } from './core/components/modal/modal.component'; StatusComponent, ApplicationCardComponent, AddApplicationButtonComponent, - ModalComponent + ModalComponent, + SelectComponent, ], imports: [ RouterModule, diff --git a/cerberus/src/app/applications/create-application/create-application.component.html b/cerberus/src/app/applications/create-application/create-application.component.html index 0f405ee..7e53fd8 100644 --- a/cerberus/src/app/applications/create-application/create-application.component.html +++ b/cerberus/src/app/applications/create-application/create-application.component.html @@ -11,11 +11,7 @@
- +
diff --git a/cerberus/src/app/applications/create-application/create-application.component.ts b/cerberus/src/app/applications/create-application/create-application.component.ts index 92a8b03..8fe1a78 100644 --- a/cerberus/src/app/applications/create-application/create-application.component.ts +++ b/cerberus/src/app/applications/create-application/create-application.component.ts @@ -47,4 +47,9 @@ export class CreateApplicationComponent implements OnInit { onCancel(): void { this._modalService.close(); } + + onServiceTypeSelection(event: ReferentialData): void { + this.form.controls.serviceType.setValue(event.value); + console.log(event.value); + } } diff --git a/cerberus/src/app/core/components/select/select.component.html b/cerberus/src/app/core/components/select/select.component.html index e33ca64..cfad370 100644 --- a/cerberus/src/app/core/components/select/select.component.html +++ b/cerberus/src/app/core/components/select/select.component.html @@ -1,9 +1,14 @@ -
- +
+
- unfold_more + unfold_more
-
+ +
    +
  • + {{option.label}} +
    • +
+
\ No newline at end of file diff --git a/cerberus/src/app/core/components/select/select.component.scss b/cerberus/src/app/core/components/select/select.component.scss index 74b46d4..ac3baaa 100644 --- a/cerberus/src/app/core/components/select/select.component.scss +++ b/cerberus/src/app/core/components/select/select.component.scss @@ -1,16 +1,25 @@ -$btn-primary-background-top: #4ca4f6; -$btn-primary-background-bottom: #0073f7; +@import '../../../../colors.scss'; $select-icon-radius: 4px; -.container { +.dropdown { + width: max-content; position: relative; display: flex; - justify-content: center; align-items: center; + width: 100%; - select { + button { + padding-right: 35px; + border: none; + margin: 0; + box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1); + width: 100%; + justify-content: left; + &:focus { + outline: 2px solid $blue; + } } .icon { @@ -20,20 +29,51 @@ $select-icon-radius: 4px; width: 1.5rem; background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom); color: white; - height: 23px; - top: 3px; + height: 21px; right: 0; border-radius: 0 $select-icon-radius $select-icon-radius 0; + display: flex; + justify-content: center; + align-items: center; mat-icon { font-size: 19px; display: flex; justify-content: center; align-items: center; + padding-right: 2px; &:hover { cursor: default; } } } + + ul { + position: absolute; + top: 24px; + background-color: #fff; + border-radius: 4px; + margin: 0; + padding: .3rem 0; + min-width: 150px; + border: 1px solid #eee; + display: none; + flex-direction: column; + + &.show { + display: flex; + } + + li { + list-style: none; + padding: .2rem 1rem; + + &:hover { + background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom); + color: white; + cursor: pointer; + } + } + } } diff --git a/cerberus/src/app/core/components/select/select.component.ts b/cerberus/src/app/core/components/select/select.component.ts index 56e33d1..8609e91 100644 --- a/cerberus/src/app/core/components/select/select.component.ts +++ b/cerberus/src/app/core/components/select/select.component.ts @@ -1,15 +1,65 @@ -import { Component, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; +import { AbstractControl, FormControl } from '@angular/forms'; + +export interface Option { + value: any; + label: string +} @Component({ selector: 'app-select', templateUrl: './select.component.html', styleUrls: ['./select.component.scss'] }) -export class SelectComponent implements OnInit { +export class SelectComponent implements OnChanges { + _selectedOption?: Option; + _options: Option[] = [] + _active: boolean = false; + private _disableBlurEffect: boolean = false; + @Input() formControl: any; + @Input() options?: any[]; + @Input() optionLabel?: string; + @ViewChild('select', {static: true}) select?: ElementRef; + @ViewChild('selectIcon', {static: true}) selectIcon?: ElementRef; + @Output() onSelection: EventEmitter = new EventEmitter(); - constructor() { } + constructor( - ngOnInit(): void { + ) {} + + ngOnChanges(changes: SimpleChanges): void { + if (this.options?.length) { + this._options = this.options.map(option => ({ + value: option, + label: typeof this.optionLabel === 'undefined' ? undefined : option[this.optionLabel] + } as Option)); + } } + onIconClick(): void { + if (this.select) { + this.select.nativeElement.focus(); + this.select.nativeElement.click(); + } + } + + setOption(selectedOption: Option): void { + this._selectedOption = selectedOption; + this._active = false; + this.select?.nativeElement?.focus(); + this.onSelection.emit(this._selectedOption); + } + + onFocus(): void { + this._disableBlurEffect = true; + window.setTimeout(() => this._disableBlurEffect = false, 150); + } + + onBlur(): void { + window.setTimeout(() => { + if (!this._disableBlurEffect) { + this._active = false; + } + }, 150); + } }