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