ecabs-components 1.0.17 → 1.0.19

package/src/lib/ecabs-date-time-picker/ecabs-date-time-picker.component.ts

@@ -0,0 +1,185 @@
+import { DecimalPipe } from '@angular/common';
+import { AfterViewInit, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
+import { format, isValid, parse, setHours, setMinutes, setSeconds } from 'date-fns';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, UntypedFormControl } from '@angular/forms';
+import ElementBaseComponent from '../base/element-base';
+import { EcabsDateTimePickerHeaderComponent } from './components/ecabs-date-time-picker-header/ecabs-date-time-picker-header.component';
+
+@Component( {
+  selector: 'ecabs-date-time-picker',
+  templateUrl: './ecabs-date-time-picker.component.html',
+  styleUrls: [ './ecabs-date-time-picker.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsDateTimePickerComponent,
+      multi: true,
+    },
+    DecimalPipe,
+  ],
+} )
+export class EcabsDateTimePickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+  @Input() minDate: Date;
+  @Input() maxDate: Date;
+  @Input() touchUi = false;
+  @Input() hideSeconds = true;
+  @Input() cancleLabel = 'Cancel';
+  @Input() applyLabel = 'Apply';
+  @Input() selectDateLabel = 'Select date and time';
+
+  @Output() onblur = new EventEmitter<any>();
+
+  _hours = '12';
+  _minutes = '00';
+  _seconds = '00';
+  _date: Date;
+  _pickerValue: string;
+  val: Date;
+  header = EcabsDateTimePickerHeaderComponent;
+  maxValueHours = 23;
+  maxValueMinutesSeconds = 59;
+
+  get value(): Date {
+    return this.val;
+  }
+
+  get pickerValue(): string {
+    return this._pickerValue;
+  }
+
+  get hours(): string {
+    return this._hours;
+  }
+
+  get minutes(): string {
+    return this._minutes;
+  }
+
+  get seconds(): string {
+    return this._seconds;
+  }
+
+  set hours( value: string ) {
+    if ( value !== undefined && this._hours !== value ) {
+      this._hours = this.roundNumber( +value );
+    }
+  }
+
+  set minutes( value: string ) {
+    if ( value !== undefined && this._minutes !== value ) {
+      this._minutes = this.roundNumber( +value );
+    }
+  }
+
+  set seconds( value: string ) {
+    if ( value !== undefined && this._seconds !== value ) {
+      this._seconds = this.roundNumber( +value );
+    }
+  }
+
+  set value( val ) {
+    if ( val && this.val !== new Date( val ) ) {
+      this.val = new Date( val );
+      this.pickerValue = this.formatDateTime( val );
+      this.onChange( val );
+      this.onTouch( val );
+    }
+  }
+
+  set pickerValue( val: string ) {
+    if ( val ) {
+      const date = parse(
+        val.replace( '_', '' ),
+        this.hideSeconds ? `dd/MM/yyyy, HH:mm` : `dd/MM/yyyy, HH:mm:ss`,
+        new Date()
+      );
+      if ( isValid( date ) && this._pickerValue !== val ) {
+        this._pickerValue = val;
+        this.value = date;
+      }
+    }
+  }
+
+  constructor( private readonly injector: Injector, private readonly decimalPipe: DecimalPipe ) {
+    super();
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null );
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+
+      setTimeout( () => {
+        const controlDate = !!this.control.value ? new Date( this.control.value ) : new Date();
+
+        if ( controlDate ) {
+          this.setValues( controlDate );
+        }
+      }, 10 );
+    }
+  }
+
+  onChange: any = () => { };
+  onTouch: any = () => { };
+
+  writeValue( value: any ): void {
+    this.value = value;
+  }
+
+  registerOnChange( fn: any ): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched( fn: any ): void {
+    this.onTouch = fn;
+  }
+
+  blurChange( e: any ): void {
+    this.onblur.emit( e );
+  }
+
+  onApply(): void {
+    if ( this._date && this._seconds && this._minutes && this._hours ) {
+      const date = setSeconds( setMinutes( setHours( new Date( this._date ), +this._hours ), +this._minutes ), +this._seconds );
+
+      if ( this.minDate && date < this.minDate ) {
+        this.setValues( this.minDate );
+        this.value = this.minDate;
+
+        return;
+      }
+
+      if ( this.maxDate && date > this.maxDate ) {
+        this.setValues( this.maxDate );
+        this.value = this.maxDate;
+
+        return;
+      }
+
+      this.value = date;
+    }
+  }
+
+  private formatDateTime( date: Date ): string {
+    let result = '';
+
+    if ( date && isValid( new Date( date ) ) ) {
+      result = this.hideSeconds
+        ? format( new Date( date ), `dd/MM/yyyy, HH:mm` )
+        : format( new Date( date ), `dd/MM/yyyy, HH:mm:ss` );
+    }
+
+    return result;
+  }
+
+  private roundNumber( num: number ): string | null {
+    return this.decimalPipe.transform( num, '2.0-0' ) ?? '00';
+  }
+
+  private setValues( date: Date ): void {
+    this._date = date;
+    this.hours = date.getHours().toString();
+    this.minutes = date.getMinutes().toString();
+    this.seconds = date.getSeconds().toString();
+  }
+}

package/src/lib/ecabs-date-time-picker/ecabs-date-time-picker.module.ts

@@ -0,0 +1,38 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatIconModule} from '@angular/material/icon';
+import {MaskDateDirectiveModule} from '../base/directives/date-mask.directive.module';
+import {DigitsOnlyDirectivesModule} from '../base/directives/digits-only.directive.module';
+import {NumberBorderDirectiveModule} from '../base/directives/number-border.directive.module';
+import {ElementWrapperModule} from '../base/element-wrapper/element-wrapper.module';
+import {EcabsButtonsModule} from '../ecabs-buttons/ecabs-buttons.module';
+import {EcabsPickerHeaderModule} from '../ecabs-picker-header/ecabs-picker-header.module';
+import {
+  EcabsDateTimePickerHeaderComponent
+} from './components/ecabs-date-time-picker-header/ecabs-date-time-picker-header.component';
+import {EcabsDateTimePickerComponent} from './ecabs-date-time-picker.component';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+
+
+@NgModule({
+  declarations: [EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatIconModule,
+    MatDatepickerModule,
+    MatButtonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    EcabsPickerHeaderModule,
+    EcabsButtonsModule,
+    DigitsOnlyDirectivesModule,
+    NumberBorderDirectiveModule,
+    MaskDateDirectiveModule
+  ],
+  exports: [EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent],
+})
+export class EcabsDatetimePickerModule {
+}

package/src/lib/ecabs-date-time-range-picker/components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component.html

@@ -0,0 +1,4 @@
+<div class="select-date-label text-xl font-semibold">
+  {{ headerLabel }}
+  </div>
+  <ecabs-picker-header ></ecabs-picker-header>

package/src/lib/ecabs-date-time-range-picker/components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component.scss

@@ -0,0 +1,5 @@
+:host ::ng-deep {
+    ecabs-picker-header{
+      display: none !important;
+    }
+  }

package/src/lib/ecabs-date-time-range-picker/components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EcabsDateTimeRangePickerHeaderComponent } from './ecabs-date-time-range-picker-header.component';
+
+describe('FormDateTimeRangePickerHeaderComponent', () => {
+  let component: EcabsDateTimeRangePickerHeaderComponent;
+  let fixture: ComponentFixture<EcabsDateTimeRangePickerHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+     
+      declarations: [EcabsDateTimeRangePickerHeaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EcabsDateTimeRangePickerHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/ecabs-date-time-range-picker/components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ecabs-date-time-range-picker-header',
+  templateUrl: './ecabs-date-time-range-picker-header.component.html',
+  styleUrls: ['./ecabs-date-time-range-picker-header.component.scss'],
+})
+export class EcabsDateTimeRangePickerHeaderComponent {
+  @Input() headerLabel = 'Applicable times';
+}

package/src/lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.component.html

@@ -0,0 +1,116 @@
+<app-element-wrapper [data]="getData()">
+  <div class="form-field__input--wrapper w-full">
+    <input
+      class="fake-input"
+      [id]="_date"
+      [(ngModel)]="_date"
+      [placeholder]="placeholder"
+      [disabled]="disabled || controlDate?.disabled"
+      [matDatepicker]="picker"
+      (blur)="onTouch()"
+    />
+    <mat-datepicker
+      (opened)="opened()"
+      #picker
+      [calendarHeaderComponent]="header"
+      [touchUi]="touchUi"
+    >
+      <mat-datepicker-actions>
+        <div class="flex flex-col w-full gap-y-4">
+          <div class="flex gap-2 justify-center items-center">
+            <div class="flex flex-col justify-center">
+              <div class="text-center">{{ from }}</div>
+              <div class="flex gap-2 justify-center items-center">
+                <input
+                  class="block form-field__input time"
+                  appDigitsOnly
+                  appNumberBorder
+                  [digitsOnly]="true"
+                  [id]="hoursFrom"
+                  [maxValue]="maxValueHours"
+                  [(ngModel)]="hoursFrom"
+                />
+
+                <span class="font-bold">:</span>
+                <input
+                  class="form-field__input time"
+                  [id]="minutesFrom"
+                  [(ngModel)]="minutesFrom"
+                  appDigitsOnly
+                  appNumberBorder
+                  [digitsOnly]="true"
+                  [maxValue]="maxValueMinutesSeconds"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="time--inputs"></div>
+          <div class="flex gap-2 justify-center items-center mb-5">
+            <div class="flex flex-col justify-center">
+              <div class="text-center">{{ to }}</div>
+              <div class="flex gap-2 justify-center items-center">
+                <input
+                  class="form-field__input time"
+                  appDigitsOnly
+                  appNumberBorder
+                  [digitsOnly]="true"
+                  [id]="hoursTo"
+                  [maxValue]="maxValueHours"
+                  [(ngModel)]="hoursTo"
+                />
+                <span class="font-bold">:</span>
+                <input
+                  class="form-field__input time"
+                  [id]="minutesTo"
+                  [(ngModel)]="minutesTo"
+                  appDigitsOnly
+                  appNumberBorder
+                  [digitsOnly]="true"
+                  [maxValue]="maxValueMinutesSeconds"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="grid-picker-actions">
+            <button
+              type="button"
+              mat-stroked-button
+              class="w-full cancel-button"
+              color="primary"
+              matDatepickerCancel
+            >
+              {{ cancleLabel }}
+            </button>
+
+            <button
+              type="button"
+              mat-button
+              class="w-full ml-0 apply-button"
+              color="primary"
+              matDatepickerApply
+              (click)="onApply()"
+            >
+              {{ applyLabel }}
+            </button>
+          </div>
+        </div>
+      </mat-datepicker-actions>
+    </mat-datepicker>
+    <input
+      class="form-field__input w-full date-input"
+      [id]="name"
+      [(ngModel)]="pickerValue"
+      [placeholder]="placeholder"
+      [disabled]="disabled || controlDate?.disabled"
+      appTimeRange
+      [all]="all"
+      (blur)="onTouch()"
+      (blur)="blurChange($event)"
+      (keyup)="blurChange($event)"
+      (keydown)="keydownChange($event)"
+    />
+    <button type="button" class="datepicker-toggle" (click)="picker.open()">
+      <mat-icon>access_time</mat-icon>
+    </button>
+  </div>
+</app-element-wrapper>

package/src/lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.component.scss

@@ -0,0 +1,43 @@
+@import "./../../styles/scss/utilities/helpers";
+
+.datepicker-toggle {
+  transform: translateX(-1.75rem);
+}
+
+.time {
+  width: 3.375rem;
+}
+
+.fake-input {
+  visibility: hidden;
+  width: 0;
+  padding: 0;
+}
+
+.date-input {
+  margin: 0rem -0.25rem 0rem 0.125rem;
+}
+
+.time--inputs {
+  position: relative;
+  margin-bottom: 2.4rem;
+
+  &::after {
+    @extend %pseudos;
+    height: 1px;
+    right: 0;
+    left: 0;
+    background-color: var(--color-gray-300);
+  }
+
+  &::after {
+    bottom: -1.6rem;
+  }
+}
+
+:host ::ng-deep {
+  .form-field {
+    margin-right: -1.25rem;
+    margin-left: -0.125rem;
+  }
+}

package/src/lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.component.spec.ts

@@ -0,0 +1,24 @@
+import { DecimalPipe } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EcabsDateTimeRangePickerComponent } from './ecabs-date-time-range-picker.component';
+
+describe('FormDateTimeRangePickerComponent', () => {
+  let component: EcabsDateTimeRangePickerComponent;
+  let fixture: ComponentFixture<EcabsDateTimeRangePickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({     
+      declarations: [EcabsDateTimeRangePickerComponent],
+      providers: [DecimalPipe],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EcabsDateTimeRangePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.component.ts

@@ -0,0 +1,206 @@
+import { DecimalPipe } from '@angular/common';
+import { AfterViewInit, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, UntypedFormControl } from '@angular/forms';
+import ElementBaseComponent from '../base/element-base';
+import { EcabsDateTimeRangePickerHeaderComponent } from './components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component';
+
+@Component({
+  selector: 'ecabs-date-time-range-picker',
+  templateUrl: './ecabs-date-time-range-picker.component.html',
+  styleUrls: ['./ecabs-date-time-range-picker.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsDateTimeRangePickerComponent,
+      multi: true,
+    },
+    DecimalPipe,
+  ],
+})
+export class EcabsDateTimeRangePickerComponent
+  extends ElementBaseComponent
+  implements ControlValueAccessor, AfterViewInit {
+  @Input() touchUi = false;
+
+  @Output() onblur = new EventEmitter<any>();
+
+
+  @Input() cancleLabel = 'Cancel';
+  @Input() applyLabel = 'Apply';
+  @Input() all = 'All';
+  @Input() from = 'From';
+  @Input() to = 'To';
+
+  
+
+  _hoursFrom = '12';
+  _minutesFrom = '00';
+  _hoursTo = '12';
+  _minutesTo = '00';
+  _seconds = '00';
+  _date: string;
+  _pickerValue: string;
+  val: string;
+  header = EcabsDateTimeRangePickerHeaderComponent;
+  maxValueHours = 23;
+  maxValueMinutesSeconds = 59;
+  controlDate: UntypedFormControl;
+
+  get value(): string {
+    return this.val;
+  }
+
+  get pickerValue(): string {
+    return this._pickerValue;
+  }
+
+  get hoursFrom(): string {
+    return this._hoursFrom;
+  }
+
+  get minutesFrom(): string {
+    return this._minutesFrom;
+  }
+
+  get hoursTo(): string {
+    return this._hoursTo;
+  }
+
+  get minutesTo(): string {
+    return this._minutesTo;
+  }
+
+  get seconds(): string {
+    return this._seconds;
+  }
+
+  set hoursFrom(value: string) {
+    if (value !== undefined && this._hoursFrom !== value) {
+      this._hoursFrom = this.roundNumber(+value);
+    }
+  }
+
+  set minutesFrom(value: string) {
+    if (value !== undefined && this._minutesFrom !== value) {
+      this._minutesFrom = this.roundNumber(+value);
+    }
+  }
+
+  set hoursTo(value: string) {
+    if (value !== undefined && this._hoursTo !== value) {
+      this._hoursTo = this.roundNumber(+value);
+    }
+  }
+
+  set minutesTo(value: string) {
+    if (value !== undefined && this._minutesTo !== value) {
+      this._minutesTo = this.roundNumber(+value);
+    }
+  }
+
+  set seconds(value: string) {
+    if (value !== undefined && this._seconds !== value) {
+      this._seconds = this.roundNumber(+value);
+    }
+  }
+
+  set value(val) {
+    if (val && this.val !== val) {
+      this.val = val;
+      this.pickerValue = val;
+      this.onChange(val);
+      this.onTouch(val);
+    }
+  }
+
+  set pickerValue(val: string) {
+    if (val) {
+      this._pickerValue = val;
+      this.value = val;
+    }
+  }
+
+  constructor(
+    private readonly injector: Injector,
+    private readonly decimalPipe: DecimalPipe
+  ) {
+    super();
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get(NgControl, null);
+    if (ngControl) {
+      this.control = ngControl.control as UntypedFormControl;
+
+      setTimeout(() => {
+        this.controlDate = this.control;
+        const controlDate = !!this.control.value ? this.control.value : '';
+
+        if (controlDate) {
+          this.setValues(controlDate);
+        }
+      }, 10);
+    }
+  }
+
+  onChange: any = () => { };
+  onTouch: any = () => { };
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  blurChange(e: any): void {
+    this.onblur.emit(e);
+  }
+
+  keydownChange(e: any): void {
+    if (e?.target.value === this.all) {
+      const val = '';
+      this.val = val;
+      this._pickerValue = val;
+      this.onChange(val);
+      this.onTouch(val);
+    }
+  }
+
+  onApply(): void {
+    if (this._minutesFrom && this._hoursFrom && this._minutesTo && this._hoursTo) {
+      this.setValues(this._hoursFrom + ':' + this._minutesFrom + ' - ' + this._hoursTo + ':' + this._minutesTo);
+      this.value = this._hoursFrom + ':' + this._minutesFrom + ' - ' + this._hoursTo + ':' + this._minutesTo;
+
+      return;
+    }
+  }
+
+  opened(): void {
+    setTimeout(() => {
+      const elements = document.getElementsByClassName('mat-calendar-content');
+      while (elements.length > 0) {
+        elements[0].parentNode.removeChild(elements[0]);
+      }
+
+      let cols = Array.from(document.getElementsByClassName('mat-calendar') as HTMLCollectionOf<HTMLElement>);
+      for(let i=0; i<cols.length; i++) {
+        cols[i].style.height = '50px';
+      }      
+
+    });
+  }
+
+  private roundNumber(num: number): string | null {
+    return this.decimalPipe.transform(num, '2.0-0') ?? '00';
+  }
+
+  private setValues(date: string): void {
+    this._date = date;
+  }
+}