myrta-ui 17.0.18 → 17.0.20

package/src/lib/components/form/input-date-time/enum/timezone.ts

@@ -0,0 +1,7 @@
+export enum Timezone {
+  'default' = 0,
+  'Europe/Moscow' = 3,
+  'America/New_York' = -5
+}
+
+export type TimezoneType = 'default' | 'Europe/Moscow' | 'America/New_York'

package/src/lib/components/form/input-date-time/helpers/clean-date.ts

@@ -0,0 +1,5 @@
+import dayjs from 'dayjs';
+
+export const cleanDate = (value: string): string => {
+  return dayjs(value).second(0).millisecond(0).toISOString()
+}

package/src/lib/components/form/input-date-time/helpers/cursor-position.ts

@@ -0,0 +1,18 @@
+export const markPosition = (start: number | null, end: number | null, pattern: string = 'date'): any => {
+  if (start) {
+    if (start === 1) {
+      return {start: 0, end: 2}
+    } else if (start === 4) {
+      return {start: 3, end: 5}
+    } else if (start >= 7 && start <= 9) {
+      return {start: 6, end: 10}
+    } else if (start === 12) {
+      return {start: 11, end: 13}
+    } else if (start === 15) {
+      return {start: 14, end: 16}
+    }
+    else {
+      return {start, end}
+    }
+  }
+}

package/src/lib/components/form/input-date-time/helpers/formatting-from-models.ts

@@ -0,0 +1,10 @@
+import { DateModel, TimeModel } from './validate-value-models';
+import dayjs, { Dayjs } from 'dayjs';
+
+export const formattingFromModels = (dateModel: DateModel, timeModel: TimeModel, timepicker: boolean): Dayjs => {
+  if (timepicker) {
+    return dayjs(`${dateModel.year}-${dateModel.month}-${dateModel.day} ${timeModel.hour}:${timeModel.minute}`, 'YYYY-MM-DD HH:mm')
+  } else {
+    return dayjs(`${dateModel.year}-${dateModel.month}-${dateModel.day}`, 'YYYY-MM-DD')
+  }
+}

package/src/lib/components/form/input-date-time/helpers/formatting-moscow-timezone.ts

@@ -0,0 +1,12 @@
+import { Timezone, TimezoneType } from '../enum/timezone';
+
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+export const formattingToMoscowTimezone = (date: any, tz: TimezoneType): string => {
+  dayjs.extend(utc)
+  dayjs.extend(timezone)
+
+  return dayjs.utc(date).utcOffset(Timezone[tz], tz !== 'default').toISOString()
+}

package/src/lib/components/form/input-date-time/helpers/validate-value-models.ts

@@ -0,0 +1,84 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat)
+
+export const validateDateModel = (value: string): DateModel => {
+  const splitDateAndTime = value.split(' ')
+  const dateArray = splitDateAndTime[0].split('.')
+  const day = validateDay(dateArray[0]) || ''
+  const month = validateMonth(dateArray[1]) || ''
+  const year = dateArray[2] || ''
+
+  return {
+    view: `${day}${month ? '.' + month : ''}${year ? '.' + year : value[5] ? '.' + '' : ''}`,
+    day: day,
+    month: month,
+    year: year,
+    invalid: !(dayjs(`${dateArray[2]}-${dateArray[1]}-${dateArray[0]}`, 'YYYY-MM-DD').isValid() && splitDateAndTime[0].length === 10)
+  }
+}
+
+export const validateTimeModel = (value: string): TimeModel => {
+  const splitDateAndTime = value.split(' ')
+  const timeArray = splitDateAndTime[1] ? splitDateAndTime[1].split(':') : ''
+  const hour = validateHours(timeArray[0]) || ''
+  const minutes = validateMinutes(timeArray[1]) || ''
+
+  return {
+    view: `${hour}${minutes ? ':' + minutes : ''}`,
+    hour: hour,
+    minute: minutes,
+    invalid: !!splitDateAndTime[1] ? splitDateAndTime[1].length !== 5 : true
+  }
+}
+
+export const validateDay = (value: string): string => {
+  if (Number(value) > 31) {
+    return '31'
+  }
+  if (value === '00') {
+    return '01'
+  }
+  return value
+}
+
+export const validateMonth = (value: string): string => {
+  if (Number(value) > 12) {
+    return '12'
+  }
+  if (value === '00') {
+    return '01'
+  }
+  return value
+}
+
+
+export const validateHours = (value: string): string => {
+  if (Number(value) > 23) {
+    return '23'
+  }
+  return value
+}
+
+export const validateMinutes = (value: string): string => {
+  if (Number(value) > 59) {
+    return '59'
+  }
+  return value
+}
+
+export type DateModel = {
+  view: string,
+  day: string,
+  month: string,
+  year: string,
+  invalid: boolean
+}
+
+export type TimeModel = {
+  view: string,
+  hour: string,
+  minute: string,
+  invalid: boolean
+}

package/src/lib/components/form/input-date-time/helpers/value-parser.ts

@@ -0,0 +1,46 @@
+import { DateModel, TimeModel } from './validate-value-models';
+import { Timezone, TimezoneType } from '../enum/timezone';
+import dayjs from 'dayjs';
+import tz from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+export const dateModelValueParse = (value: string, timezone: TimezoneType): DateModel => {
+  dayjs.extend(utc)
+  dayjs.extend(tz)
+
+  const date = timezone === 'default' ? dayjs(value) : dayjs.utc(value).utcOffset(Timezone[timezone])
+  const day = date.date()
+  const month = date.month() + 1
+  const year = date.year()
+  const formattedDay = String(day).length === 2 ? String(day) : String('0' + day)
+  const formattedMonth = String(month).length === 2 ? String(month) : String('0' + month)
+  const dateString = `${String(year)}.${String(formattedMonth)}.${String(formattedDay)}`
+
+  return {
+    view: dayjs(dateString).format('DD.MM.YYYY'),
+    day: formattedDay,
+    month: formattedMonth,
+    year: String(year),
+    invalid: !(dayjs(dateString).isValid() && dateString.length === 10)
+  }
+}
+
+export const timeModelValueParse = (value: string, timezone: TimezoneType): TimeModel => {
+  dayjs.extend(utc)
+  dayjs.extend(tz)
+
+  const date = timezone === 'default' ? dayjs(value) : dayjs.utc(value).utcOffset(Timezone[timezone])
+
+  const hour = date.hour()
+  const minute = date.minute()
+  const formattedHour = String(hour).length === 2 ? String(hour) : String('0' + hour)
+  const formattedMinute = String(minute).length === 2 ? String(minute) : String('0' + minute)
+  const timeString = `${formattedHour}:${formattedMinute}`
+
+  return {
+    view: timeString,
+    hour: formattedHour,
+    minute: formattedMinute,
+    invalid: timeString.length !== 5
+  }
+}

package/src/lib/components/form/input-date-time/input-date-time.component.html

@@ -0,0 +1,60 @@
+<div
+    class="mrx-input-date"
+    [class.mrx-input-error]="invalid || innerInvalid"
+    [class.mrx-input-readonly]="readonly"
+    [class]="getClasses"
+>
+  <div class="">
+    <mrx-label *ngIf="timeLabel || dateLabel">{{ dateLabel }}</mrx-label>
+    <div class="mrx-input-date__wrapper">
+      <input
+          #dateInput
+          type="text"
+          autocomplete="nope"
+          class="mrx-input-date__input mrx-input-date__date"
+          [placeholder]="datePlaceholder"
+          [ngModel]="getDateValue"
+          [mask]="'00.00.0000 00:m0'"
+          [leadZeroDateTime]="true"
+          [validation]="false"
+          [disabled]="disabled"
+          [readOnly]="!isManualInput"
+          (input)="updateDateValue(dateInput)"
+          (click)="clickToInput(dateInput)"
+      />
+
+      <div *ngIf="!disabled" class="mrx-input-date__icons">
+          <span
+              class="mrx-icon icon-close"
+              *ngIf="isViewCleanIcon"
+              (click)="clickToIconClear()"
+              [class.icon-font-16]="size === 'small'"
+              [class.icon-font-24]="size === 'medium' || size === 'large'"
+          ></span>
+        <span
+            class="mrx-icon icon-calendar"
+            (click)="clickToIconCalendar()"
+            [class.icon-font-16]="size === 'small'"
+            [class.icon-font-24]="size === 'medium' || size === 'large'"
+        ></span>
+      </div>
+    </div>
+  </div>
+
+    <mrx-error-message
+        *ngIf="invalid; else innerInvalidTemplate"
+        [invalidMessage]="invalidMessage"
+    ></mrx-error-message>
+
+  <ng-template #innerInvalidTemplate>
+    <mrx-error-message
+        *ngIf="innerInvalid"
+        [invalidMessage]="innerInvalidMessage"
+    ></mrx-error-message>
+  </ng-template>
+
+  <mrx-save-state [id]="uuid" [fields]="fields"></mrx-save-state>
+</div>
+
+
+

package/src/lib/components/form/input-date-time/input-date-time.component.ts

@@ -0,0 +1,378 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import AirDatepicker from 'air-datepicker'
+import {
+  ExtraTime,
+  InputDateSizesEnum,
+  InputDateSizesTypes,
+  InputDateTimeValueTypes,
+  InputDateTimeValueWithId
+} from './input-date-time.enum';
+import { DateModel, TimeModel, validateDateModel, validateTimeModel } from './helpers/validate-value-models';
+import { dateModelConstant, timeModelConstant } from './constants/value-models';
+import { dateModelValueParse, timeModelValueParse } from './helpers/value-parser';
+import { markPosition } from './helpers/cursor-position';
+import { cleanDate } from './helpers/clean-date';
+import { formattingToMoscowTimezone } from './helpers/formatting-moscow-timezone';
+import { TimezoneType } from './enum/timezone';
+import { formattingFromModels } from './helpers/formatting-from-models';
+import dayjs from 'dayjs';
+import { v4 as uuidv4 } from 'uuid';
+import { createPopper } from '@popperjs/core';
+import { Field } from "../../../services";
+
+@Component({
+  selector: 'mrx-input-date-time',
+  templateUrl: 'input-date-time.component.html',
+  styleUrls: ['input-date-time.components.less'],
+  providers: [
+    {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true}
+  ]
+})
+export class InputDateTimeComponent implements ControlValueAccessor, OnChanges, AfterViewInit {
+  public dt: any
+  public value: any = '';
+  public dateModel: DateModel = dateModelConstant
+  public timeModel: TimeModel = timeModelConstant
+
+  public innerInvalid = false;
+  public innerInvalidMessage = '';
+
+  // SAVE STATE
+  public uuid: string = uuidv4()
+  @Input() public fields: Field[] = [];
+
+  @Input() public size: InputDateSizesTypes = 'large';
+  @Input() public customClasses = '';
+  @Input() public dateLabel = '';
+  @Input() public timeLabel = '';
+  @Input() public datePlaceholder = 'дд.мм.гггг';
+  @Input() public timePlaceholder = '00:00';
+  @Input() public disabled = false;
+  @Input() public readonly = false;
+  @Input() public required = false;
+  @Input() public timepicker = false
+  @Input() public minDate = '';
+  @Input() public maxDate = '';
+  @Input() public timezone: TimezoneType = 'default';
+  @Input() public inline = false
+  @Input() public isManualInput = true;
+  @Input() public addMinTime = false
+  @Input() public addMaxTime = false
+  @Input() public addMinTimeObj!: ExtraTime
+  @Input() public addMaxTimeObj!: ExtraTime
+
+  @Input() public disableValidate = false
+
+  @Input() public container = 'div.page-wrapper';
+
+  @Input() public invalid = false;
+  @Input() public invalidMessage: string | string[] = '';
+  @Input() public checkInvalid: true | false | null = null;
+
+  @ViewChild('dateInput') dateInput!: ElementRef;
+  @ViewChild('timeInput') timeInput!: ElementRef;
+
+  @Output() public changed: EventEmitter<string> = new EventEmitter();
+  @Output() public modelChange: EventEmitter<InputDateTimeValueWithId> = new EventEmitter<InputDateTimeValueWithId>();
+
+  constructor() {
+  }
+
+  ngAfterViewInit(): void {
+    this.dt = new AirDatepicker(this.dateInput.nativeElement, {
+      container: this.container,
+      locale: {
+        dateFormat: 'dd.MM.yyyy',
+        timeFormat: 'HH:mm',
+      },
+      autoClose: true,
+      multipleDatesSeparator: ' - ',
+      timepicker: this.timepicker,
+      minDate: this.minDate,
+      maxDate: this.maxDate,
+      inline: this.inline,
+      position({ $datepicker, $target, $pointer, done }) {
+        let popper = createPopper($target, $datepicker, {
+          placement: 'bottom-start',
+          modifiers: [
+            {
+              name: 'flip',
+              options: {
+                padding: {
+                  top: 64
+                }
+              }
+            },
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 10]
+              }
+            },
+            {
+              name: 'arrow',
+              options: {
+                element: $pointer
+              }
+            }
+          ]
+        });
+
+        return function completeHide() {
+          popper.destroy();
+          done();
+        };
+      },
+      onSelect: ({date, formattedDate, datepicker}) => {
+
+        if (date instanceof Date && typeof formattedDate === 'string') {
+          this.dateModel = validateDateModel(formattedDate)
+          this.timeModel = validateTimeModel(formattedDate)
+
+          this._checkExtraTime()
+
+          if (this.isValidModels) {
+            this.updateValueModel(this.dateModel, this.timeModel)
+          }
+        }
+      }
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.dt) {
+      if (changes['maxDate']) {
+        this.dt.update({maxDate: this.maxDate})
+        this.value && this.dt.selectDate(dayjs(this.value).toDate(), {updateTime: this.timepicker, silent: true})
+
+        if (!this.disableValidate) {
+          const invalid = this.innerInvalid
+          const isValid = this.checkingInvalid(this.value, this.maxDate, this.minDate)
+
+          if (invalid && isValid) {
+            setTimeout(() => {
+              this.updateValueModel(this.dateModel, this.timeModel)
+            }, 0)
+          }
+        }
+      }
+
+      if (changes['minDate']) {
+        this.dt.update({minDate: this.minDate})
+        this.value && this.dt.selectDate(dayjs(this.value).toDate(), {updateTime: this.timepicker, silent: true})
+
+        if (!this.disableValidate) {
+          const invalid = this.innerInvalid
+          const isValid = this.checkingInvalid(this.value, this.maxDate, this.minDate)
+
+          if (invalid && isValid) {
+            setTimeout(() => {
+              this.updateValueModel(this.dateModel, this.timeModel)
+            }, 0)
+          }
+        }
+      }
+    }
+  }
+
+  public get getDateValue(): string {
+    return `${this.dateModel.view}${this.timeModel.view ? ' ' + this.timeModel.view : ''}`
+  }
+
+  public get getClasses(): string {
+    return `${InputDateSizesEnum[this.size]} ${this.customClasses} ${this.checkValidClasses}`
+  }
+
+  private get isValidModels(): boolean {
+    return !this.dateModel.invalid && (this.timepicker ? !this.timeModel.invalid : true)
+  }
+
+  public get isViewCleanIcon() {
+    return !!this.dateInput?.nativeElement.value
+  }
+
+  public get checkValidClasses(): string {
+    return this.checkInvalid === false ?
+      'mrx-input-checked-success' :
+      this.checkInvalid === true ? 'mrx-input-checked-error' : ''
+  }
+
+  private _checkExtraTime() {
+    if (this.addMaxTime && !this.timepicker) {
+      this.timeModel.hour = '23'
+      this.timeModel.minute = '59'
+    }
+    if (this.addMinTime && !this.timepicker) {
+      this.timeModel.hour = '00'
+      this.timeModel.minute = '00'
+    }
+    if (this.addMaxTimeObj && !this.timepicker) {
+      this.timeModel.hour = this.addMaxTimeObj.hour
+      this.timeModel.minute = this.addMaxTimeObj.minute
+    }
+    if (this.addMinTimeObj && !this.timepicker) {
+      this.timeModel.hour = this.addMinTimeObj.hour
+      this.timeModel.minute = this.addMinTimeObj.minute
+    }
+  }
+
+  public clickToIconCalendar(): void {
+    this.dateInput.nativeElement.focus()
+  }
+
+  public clickToIconClear(): void {
+    this.dt.setViewDate(new Date())
+    this.dt && this.dt.clear()
+    this.dateModel = dateModelConstant
+    this.timeModel = timeModelConstant
+    this.updateValue('')
+    this.innerInvalid = false
+    this.innerInvalidMessage = ''
+  }
+
+  private updateValueModel(dateModel: DateModel, timeModel: TimeModel, bol: boolean = false) {
+    if (dateModel.view === '') {
+      this.clickToIconClear()
+    } else {
+      const date = formattingFromModels(dateModel, timeModel, this.timepicker || this.addMaxTime || this.addMinTime)
+
+      const formattingDate = formattingToMoscowTimezone(date.toISOString(), this.timezone)
+
+      const isValid = this.checkingInvalid(formattingDate, this.maxDate, this.minDate)
+
+      if (date.isValid() && isValid) {
+        this.dt.selectDate(formattingFromModels(dateModel, timeModel, this.timepicker).toISOString(), {
+          updateTime: this.timepicker,
+          silent: true
+        })
+        this.dt.setViewDate(formattingFromModels(dateModel, timeModel, this.timepicker).toISOString())
+        this.updateValue(formattingDate)
+      }
+    }
+  }
+
+  private dateFormattingOutput(value: Date): string {
+    if (value) {
+      return dayjs(value).toISOString()
+    } else {
+      return ''
+    }
+  }
+
+  private invalidMessageOn(message: string): void {
+    this.innerInvalid = true
+    this.innerInvalidMessage = message
+  }
+
+  private invalidMessageOff(): void {
+    this.innerInvalid = false
+    this.innerInvalidMessage = ''
+  }
+
+  public updateDateValue(dateInput: HTMLInputElement): void {
+    const selectionStart = dateInput.selectionStart
+    this.dateModel = validateDateModel(dateInput.value)
+    this.timeModel = validateTimeModel(dateInput.value)
+
+    dateInput.value = this.getDateValue
+    dateInput.selectionStart = selectionStart
+    dateInput.selectionEnd = dateInput.selectionStart
+
+    this._checkExtraTime()
+
+    if (this.isValidModels || this.dateModel.view === '') {
+      this.updateValueModel(this.dateModel, this.timeModel)
+    }
+  }
+
+  public clickToInput(input: HTMLInputElement): void {
+    if (input.selectionStart === input.selectionEnd && (input.selectionStart && input.selectionStart > 0)) {
+      const {start, end} = markPosition(input.selectionStart, input.selectionEnd)
+      input.selectionStart = start
+      input.selectionEnd = end
+    }
+  }
+
+  private checkingInvalid(value: string, maxDate: string, minDate: string) {
+    if (this.disableValidate) {
+      this.invalidMessageOff()
+      return true
+    }
+    if (maxDate && (dayjs(value).diff(dayjs(maxDate)) === 0)) {
+      this.invalidMessageOn('Дата и время окончания не может быть равна дате и времени начала')
+      return false
+    } else if (maxDate && (dayjs(value).diff(dayjs(maxDate)) > 0)) {
+      this.invalidMessageOn('Дата окончания не может быть раньше даты начала')
+      return false
+    } else if (minDate && (dayjs(value).diff(dayjs(minDate)) === 0)) {
+      this.invalidMessageOn('Дата и время окончания не может быть равна дате и времени начала')
+      return false
+    } else if (minDate && dayjs(value).diff(dayjs(minDate)) < 0) {
+      this.invalidMessageOn('Дата окончания не может быть раньше даты начала')
+      return false
+    } else {
+      this.invalidMessageOff()
+      return true
+    }
+  }
+
+  public writeValue(outsideValue: InputDateTimeValueTypes) {
+    if (outsideValue) {
+      this.value = cleanDate(outsideValue);
+      this.dateModel = dateModelValueParse(outsideValue, this.timezone)
+      this.timeModel = timeModelValueParse(outsideValue, this.timezone)
+
+      this.checkingInvalid(outsideValue, this.maxDate, this.minDate)
+
+      this.dt.selectDate(formattingFromModels(this.dateModel, this.timeModel, this.timepicker).toISOString(), {
+        updateTime: this.timepicker,
+        silent: true
+      })
+      this.dt.setViewDate(formattingFromModels(this.dateModel, this.timeModel, this.timepicker).toISOString())
+    } else {
+      if (this.dt) {
+        this.dt.clear()
+        this.value = ''
+        this.dateModel = dateModelConstant
+        this.timeModel = timeModelConstant
+      }
+    }
+  }
+
+  private onChange = (value: any) => {
+  };
+  private onTouched = () => {
+  };
+
+  public registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: () => {}): void {
+    this.onTouched = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
+  public updateValue(insideValue: InputDateTimeValueTypes) {
+    this.value = insideValue
+    this.changed.emit(insideValue);
+    this.modelChange.emit({value: insideValue, id: this.uuid})
+    this.onChange(insideValue);
+    this.onTouched();
+  }
+}

package/src/lib/components/form/input-date-time/input-date-time.components.less

@@ -0,0 +1,4 @@
+@import "assets/input-date";
+@import "assets/input-date-sizes";
+@import "assets/input-date-error";
+@import "assets/input-date-icons";

package/src/lib/components/form/input-date-time/input-date-time.enum.ts

@@ -0,0 +1,25 @@
+export enum InputDateSizesEnum {
+  'small' = 'mrx-input-date-sm',
+  'medium' = 'mrx-input-date-md',
+  'large' = 'mrx-input-date-lg',
+}
+
+export type InputDateSizesTypes = 'small' | 'medium' | 'large';
+
+export type InputDateTimeValueTypes = string;
+
+export interface InputDateTimeValueWithId {
+  value: InputDateTimeValueTypes,
+  id: string
+}
+
+/**
+ * Пример использования <br/>
+ * message="Не более {diff} дней" <br/>
+ * @param hour = 0 - 23
+ * @param minute = 0 - 59
+ */
+export interface ExtraTime {
+  hour: string
+  minute: string
+}

package/src/lib/components/form/input-date-time/input-date-time.module.ts

@@ -0,0 +1,30 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputDateTimeComponent } from './input-date-time.component';
+import { FormsModule } from '@angular/forms';
+import { NgxMaskDirective, IConfig, provideNgxMask } from 'ngx-mask';
+import { SaveStateModule } from "../../save-state/save-state.module";
+import { ErrorMessageModule } from "../../error-message/error-message.module";
+import { LabelModule } from "../../label/label.module";
+
+const maskConfigFunction: () => Partial<IConfig> = () => {
+  return {
+    validation: false,
+  };
+};
+
+@NgModule({
+  declarations: [InputDateTimeComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    SaveStateModule,
+    ErrorMessageModule,
+    LabelModule,
+    NgxMaskDirective
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [provideNgxMask(maskConfigFunction)],
+  exports: [InputDateTimeComponent],
+})
+export class InputDateTimeModule {}