Add NumRanges
Max Ehrlicher-Schmidt
4 years ago
parent
2fc902403e
commit
65761b500f
@ -1,8 +0,0 @@
|
||||
.number-range-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.range-spacer {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<p>date-range-cell works!</p>
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-date-range-cell',
|
||||
templateUrl: './date-range-cell.component.html',
|
||||
styleUrls: ['./date-range-cell.component.scss']
|
||||
})
|
||||
export class DateRangeCellComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
<div
|
||||
*ngIf="editable || label"
|
||||
class="number-range-wrapper"
|
||||
[formGroup]="rangeForm"
|
||||
>
|
||||
<mat-form-field class="number-range-form-field">
|
||||
<mat-label *ngIf="label">{{ label }} min</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="number"
|
||||
formControlName="minValue"
|
||||
(input)="minValueChange($event)"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<span class="range-spacer">-</span>
|
||||
<mat-form-field class="number-range-form-field">
|
||||
<mat-label *ngIf="label">{{ label }} max</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="maxValue"
|
||||
type="number"
|
||||
(input)="maxValueChange($event)"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="!editable && !label">
|
||||
{{ min }} - {{ max }}
|
||||
</div>
|
||||
@ -0,0 +1,8 @@
|
||||
.number-range-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.range-spacer {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,123 @@
|
||||
import { DatePipe } from '@angular/common';
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ChangeDetectorRef,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-number-range-cell',
|
||||
templateUrl: './number-range-cell.component.html',
|
||||
styleUrls: ['./number-range-cell.component.scss'],
|
||||
})
|
||||
export class NumberRangeCellComponent implements OnInit {
|
||||
@Input()
|
||||
set min(value: number) {
|
||||
this._min = value;
|
||||
this.rangeForm?.controls['minValue'].setValue(value);
|
||||
}
|
||||
get min() {
|
||||
return this._min;
|
||||
}
|
||||
_min: number;
|
||||
|
||||
@Input()
|
||||
set max(value: number) {
|
||||
this._max = value;
|
||||
this.rangeForm?.controls['maxValue'].setValue(value);
|
||||
}
|
||||
get max() {
|
||||
return this._max;
|
||||
}
|
||||
_max: number;
|
||||
|
||||
rangeForm: FormGroup;
|
||||
|
||||
@Output() minChange = new EventEmitter<number>();
|
||||
@Output() maxChange = new EventEmitter<number>();
|
||||
|
||||
@Input()
|
||||
set editable(value) {
|
||||
this._editable = value;
|
||||
if (value) {
|
||||
this.rangeForm?.controls['minValue'].enable();
|
||||
this.rangeForm?.controls['maxValue'].enable();
|
||||
} else {
|
||||
this.rangeForm?.controls['minValue'].disable();
|
||||
this.rangeForm?.controls['maxValue'].disable();
|
||||
}
|
||||
}
|
||||
_editable = false;
|
||||
get editable() {
|
||||
return this._editable;
|
||||
}
|
||||
@Input()
|
||||
required = false;
|
||||
@Input()
|
||||
label: string = null;
|
||||
@Output() validityChange = new EventEmitter<boolean>();
|
||||
isValid = true;
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef, public datepipe: DatePipe) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.rangeForm = new FormGroup({
|
||||
minValue: new FormControl(),
|
||||
maxValue: new FormControl(),
|
||||
});
|
||||
this.rangeForm.controls['minValue'].markAsTouched();
|
||||
this.rangeForm.controls['maxValue'].markAsTouched();
|
||||
this.rangeForm?.controls['minValue'].setValue(this.min);
|
||||
this.rangeForm?.controls['maxValue'].setValue(this.max);
|
||||
}
|
||||
|
||||
minValueChange(event) {
|
||||
this.min = this.toPositiveNumber(event.target.value);
|
||||
this.minChange.emit(this.min);
|
||||
this.checkIfRangeIsValid();
|
||||
}
|
||||
|
||||
maxValueChange(event) {
|
||||
this.max = this.toPositiveNumber(event.target.value);
|
||||
this.maxChange.emit(this.max);
|
||||
this.checkIfRangeIsValid();
|
||||
}
|
||||
|
||||
checkIfRangeIsValid() {
|
||||
if (this.min == null || this.max == null) {
|
||||
this.setRangeError(false);
|
||||
return;
|
||||
}
|
||||
if (this.min <= this.max) {
|
||||
this.setRangeError(false);
|
||||
return;
|
||||
}
|
||||
this.setRangeError(true);
|
||||
}
|
||||
|
||||
setRangeError(error: boolean): void {
|
||||
this.validityChange.emit(!error);
|
||||
if (error) {
|
||||
this.rangeForm.controls['minValue'].setErrors({ rangeError: true });
|
||||
this.rangeForm.controls['maxValue'].setErrors({ rangeError: true });
|
||||
} else {
|
||||
this.rangeForm.controls['minValue'].setErrors(null);
|
||||
this.rangeForm.controls['maxValue'].setErrors(null);
|
||||
}
|
||||
}
|
||||
|
||||
toPositiveNumber(str: string): number {
|
||||
if (str === '') {
|
||||
return null;
|
||||
}
|
||||
const number = +str;
|
||||
if (number < 0) {
|
||||
return Math.abs(number);
|
||||
}
|
||||
return number;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue