From 8c12f7a19709e838930c8dbf32147c4d457b4456 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 4 Jan 2022 23:24:51 -0800 Subject: [PATCH 1/4] feat: datetime picker as form field --- .../datetime-picker.component.ts | 49 ++++++++++++++++--- .../src/form-field/form-field.component.ts | 2 +- .../time-picker/time-picker.component.scss | 15 ++---- 3 files changed, 47 insertions(+), 19 deletions(-) diff --git a/projects/components/src/datetime-picker/datetime-picker.component.ts b/projects/components/src/datetime-picker/datetime-picker.component.ts index f5486ff36..46c4c40d6 100644 --- a/projects/components/src/datetime-picker/datetime-picker.component.ts +++ b/projects/components/src/datetime-picker/datetime-picker.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Time, TypedSimpleChanges } from '@hypertrace/common'; import { InputAppearance } from '../input/input-appearance'; @@ -6,6 +7,13 @@ import { InputAppearance } from '../input/input-appearance'; selector: 'ht-datetime-picker', styleUrls: ['./datetime-picker.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: NG_VALUE_ACCESSOR, + multi: true, + useExisting: DatetimePickerComponent + } + ], template: `
@@ -21,17 +29,19 @@ import { InputAppearance } from '../input/input-appearance'; > - +
` }) -export class DatetimePickerComponent implements OnChanges { +export class DatetimePickerComponent implements ControlValueAccessor, OnChanges { @Input() public label?: string; @@ -41,6 +51,9 @@ export class DatetimePickerComponent implements OnChanges { @Input() public date?: Date = new Date(); + @Input() + public showDateOnly: boolean = false; + @Output() public readonly dateChange: EventEmitter = new EventEmitter(); @@ -52,10 +65,30 @@ export class DatetimePickerComponent implements OnChanges { } } + private propagateControlValueChange?: (value?: Date) => void; + private propagateControlValueChangeOnTouch?: (value?: Date) => void; + public getInputDate(): string { return this.date?.toISOString().slice(0, 10) ?? ''; } + public writeValue(value?: Date): void { + this.date = value; + } + + public registerOnChange(onChange: (value?: Date) => void): void { + this.propagateControlValueChange = onChange; + } + + public registerOnTouched(onTouch: (value?: Date) => void): void { + this.propagateControlValueChangeOnTouch = onTouch; + } + + private propagateValueChangeToFormControl(value?: Date): void { + this.propagateControlValueChange?.(value); + this.propagateControlValueChangeOnTouch?.(value); + } + private getInputTime(date: Date): Time { return new Time(date.getHours(), date.getMinutes()); } @@ -67,11 +100,13 @@ export class DatetimePickerComponent implements OnChanges { d.setFullYear(Number(yearMonthDay[0]), Number(yearMonthDay[1]) - 1, Number(yearMonthDay[2])); this.date = d; this.dateChange.emit(d); + this.propagateValueChangeToFormControl(d); } public onTimeChange(time: Time): void { this.time = time; this.date?.setUTCHours(time.hours, time.minutes, time.seconds, time.milliseconds); this.dateChange.emit(this.date); + this.propagateValueChangeToFormControl(this.date); } } diff --git a/projects/components/src/form-field/form-field.component.ts b/projects/components/src/form-field/form-field.component.ts index 41a53dd44..3fd4c36d8 100644 --- a/projects/components/src/form-field/form-field.component.ts +++ b/projects/components/src/form-field/form-field.component.ts @@ -23,7 +23,7 @@ import { IconSize } from '../icon/icon-size'; class="content" [ngClass]="{ 'show-border': this.showBorder, - 'error-border': this.showFormError && this.errorLabel + 'error-border': this.showBorder && this.showFormError && this.errorLabel }" > diff --git a/projects/components/src/time-picker/time-picker.component.scss b/projects/components/src/time-picker/time-picker.component.scss index bd94cacd1..0502e9d72 100644 --- a/projects/components/src/time-picker/time-picker.component.scss +++ b/projects/components/src/time-picker/time-picker.component.scss @@ -1,23 +1,14 @@ @import 'mixins'; .time-picker { - @include disableable; display: flex; .time-selector { @include body-1-medium($gray-7); height: 32px; + border: 1px solid $gray-1; + background: $gray-1; border-radius: 4px; - - &.with-background { - border: 1px solid $gray-1; - background: $gray-1; - } - - &.with-border { - border: 1px solid $color-border; - border-radius: 6px; - } } } @@ -28,6 +19,7 @@ height: 32px; padding: 0 8px; cursor: pointer; + min-width: 108px; .trigger-icon { padding: 0 8px; @@ -48,6 +40,7 @@ background: white; overflow: auto; max-height: 320px; + min-width: 108px; .popover-item { @include list-hover; From 26adb2f704698c388dd8fb5f0426dbf66064e613 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 4 Jan 2022 23:58:18 -0800 Subject: [PATCH 2/4] fix: adding wrong removed code --- .../src/time-picker/time-picker.component.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/projects/components/src/time-picker/time-picker.component.scss b/projects/components/src/time-picker/time-picker.component.scss index 0502e9d72..4d7160090 100644 --- a/projects/components/src/time-picker/time-picker.component.scss +++ b/projects/components/src/time-picker/time-picker.component.scss @@ -1,14 +1,23 @@ @import 'mixins'; .time-picker { + @include disableable; display: flex; .time-selector { @include body-1-medium($gray-7); height: 32px; - border: 1px solid $gray-1; - background: $gray-1; border-radius: 4px; + + &.with-background { + border: 1px solid $gray-1; + background: $gray-1; + } + + &.with-border { + border: 1px solid $color-border; + border-radius: 6px; + } } } From a3191b1f4844a6ade08764724bbf7eb627d1213d Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Wed, 5 Jan 2022 09:45:30 -0800 Subject: [PATCH 3/4] feat: control value accessor impl for text area --- .../src/textarea/textarea.component.ts | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/projects/components/src/textarea/textarea.component.ts b/projects/components/src/textarea/textarea.component.ts index 828b7c8ee..edf4006a3 100644 --- a/projects/components/src/textarea/textarea.component.ts +++ b/projects/components/src/textarea/textarea.component.ts @@ -1,10 +1,18 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { LoggerService } from '@hypertrace/common'; @Component({ selector: 'ht-textarea', styleUrls: ['./textarea.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: NG_VALUE_ACCESSOR, + multi: true, + useExisting: TextareaComponent + } + ], template: `