ngx-register-base 1.2.3 → 1.3.1

package/src/lib/components/inputs/param-date-time-range/param-date-time-range.component.ts

@@ -0,0 +1,128 @@
+import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
+import {
+  PrizmDateTime,
+  PrizmDateTimeRange,
+  PrizmDay,
+  PrizmDayLike,
+  PrizmDayRange,
+  PrizmTime,
+  PrizmTimeMode,
+  PrizmTimeRange,
+} from '@prizm-ui/components';
+import { distinctUntilChanged, filter, map, pairwise } from 'rxjs';
+import { ParamDateBase } from '../../../core/param/param-date-base';
+import { FormatterSavedValueType, ParserSavedValueType } from '../../../types/params.types';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+export type InputDateTimeRangeSaveValue = {
+  from: string;
+  to: string;
+} | null;
+
+@Component({
+  selector: 'sproc-param-date-time-range',
+  templateUrl: './param-date-time-range.component.html',
+  styleUrls: ['./param-date-time-range.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamDateTimeRangeComponent extends ParamDateBase<
+  PrizmDateTimeRange | null,
+  InputDateTimeRangeSaveValue
+> {
+  override placeholder = input('Выберите период');
+  @Input() min: PrizmDay | undefined;
+  @Input() max: PrizmDay | undefined;
+  @Input() timeMode: PrizmTimeMode = 'HH:MM';
+  @Input() maxLength: PrizmDayLike | null = null;
+  @Input() override set formatSavedValue(
+    formatter:
+      | FormatterSavedValueType<PrizmDateTimeRange | null, InputDateTimeRangeSaveValue>
+      | undefined
+  ) {
+    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
+  }
+  @Input() override set parseSavedValue(
+    parser: ParserSavedValueType<InputDateTimeRangeSaveValue, PrizmDateTimeRange | null> | undefined
+  ) {
+    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
+  }
+
+  protected override formatterSavedValue = this._defaultFormatterSaveValue;
+  protected override parserSavedValue = this._defaultParserSaveValue;
+
+  private _defaultFormatterSaveValue(
+    range: PrizmDateTimeRange | null
+  ): InputDateTimeRangeSaveValue {
+    if (!range) {
+      return null;
+    }
+
+    const { from, to } = this._dts.prizmDateTimeRangeToNativeDates(range);
+
+    return {
+      from: this._dts.toISOString(from),
+      to: this._dts.toISOString(to),
+    };
+  }
+
+  private _defaultParserSaveValue(value: InputDateTimeRangeSaveValue): PrizmDateTimeRange | null {
+    if (!value) {
+      return null;
+    }
+
+    const from = this._dts.isoToLocalDate(value.from);
+    const to = this._dts.isoToLocalDate(value.to);
+
+    return new PrizmDateTimeRange(
+      PrizmDayRange.fromLocalNativeDate(from, to),
+      new PrizmTimeRange(PrizmTime.fromLocalNativeDate(from), PrizmTime.fromLocalNativeDate(to))
+    );
+  }
+
+  protected override onInit(): void {
+    this._subscribeOnTimeZoneChanges();
+  }
+
+  private _subscribeOnTimeZoneChanges(): void {
+    this.timezoneChange
+      .pipe(
+        distinctUntilChanged((prev, curr) => prev.time_diff === curr.time_diff),
+        pairwise(),
+        map(([prev, curr]) => ({
+          prevDiff: prev.time_diff,
+          currDiff: curr.time_diff,
+          value: this.value,
+        })),
+        filter(({ value }) => !!value),
+        takeUntilDestroyed(this.dr)
+      )
+      .subscribe(({ prevDiff, currDiff, value }) => {
+        const { from, to } = this._dts.prizmDateTimeRangeToNativeDates(value!);
+
+        const newFrom = this.rebuildDateInNewTimezone(from, prevDiff, currDiff);
+        const newTo = this.rebuildDateInNewTimezone(to, prevDiff, currDiff);
+
+        this.control.setValue(this._dts.prizmDateTimeRangeFromNativeDates(newFrom, newTo), {
+          emitEvent: false,
+        });
+      });
+  }
+
+  protected get from(): Date | null {
+    return this._getDateFromRange('from');
+  }
+
+  protected get to(): Date | null {
+    return this._getDateFromRange('to');
+  }
+
+  private _getDateFromRange(date: 'from' | 'to'): Date | null {
+    if (!this.value) {
+      return null;
+    }
+
+    const { dayRange, timeRange } = this.value;
+
+    return new PrizmDateTime(dayRange[date], timeRange?.[date]).toLocalNativeDate();
+  }
+}

package/src/lib/components/inputs/param-month/param-month.component.html

@@ -0,0 +1,46 @@
+<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
+  <ng-template #readTemplate>
+    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
+      <ng-container *ngIf="label">
+        <ng-container [ngSwitch]="paramStyle">
+          <ng-template ngSwitchCase="filter">
+            <div class="label-wrapper">
+              <span class="label">{{ label }}</span>
+              <div class="dashed-row"></div>
+            </div>
+          </ng-template>
+          <ng-template ngSwitchDefault>
+            <span class="label">{{ label }}</span>
+            <div class="dashed-row"></div>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+      <span class="value">
+        <span>{{ showedValue }}</span>
+      </span>
+    </div>
+  </ng-template>
+  <ng-template #editTemplate>
+    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
+      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
+        <span class="label" [class.required]="required">
+          {{ label }}
+        </span>
+        <img
+          *ngIf="hint"
+          src="assets/ngx-register-base/icons/circle-info-empty.svg"
+          [prizmHint]="hint"
+          prizmHintTheme="light"
+          style="margin-bottom: 2px"
+        />
+      </div>
+
+      <prizm-input-layout size="s" [forceClear]="forceClear">
+        <prizm-input-layout-month
+          [placeholder]="placeholder()"
+          [formControl]="control"
+        ></prizm-input-layout-month>
+      </prizm-input-layout>
+    </div>
+  </ng-template>
+</ng-container>

package/src/lib/components/inputs/param-month/param-month.component.less

@@ -0,0 +1,72 @@
+@import 'fonts';
+@import 'common-param';
+
+:host {
+  .container {
+    &--read {
+      .read-style-card;
+      .read-style-filter;
+    }
+
+    &--edit {
+      .edit-style-card;
+      .edit-style-filter;
+
+      &[sproc-param-style='card'] {
+        padding: 0 2px;
+
+        ::ng-deep {
+          .prizm-input-form:not(.prizm-input-form-focused) {
+            background: inherit;
+            border: 1px solid var(--input-stroke);
+            padding: 0 3.5px 0 8px;
+          }
+
+          .prizm-input-form .prizm-input-form-focused {
+            background: inherit;
+            border: 1px solid var(--input-stroke);
+          }
+
+          .prizm-input-form-inner {
+            min-height: 32px;
+            height: 32px;
+          }
+
+          input {
+            .input-text-14px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+
+      &[sproc-param-style='filter'] {
+        ::ng-deep {
+          .prizm-input-form:not(.prizm-input-form-focused) {
+            background: inherit;
+            border: none;
+            border-bottom: 1px solid var(--input-stroke);
+            padding: 0 3.5px 0 8px;
+          }
+
+          .prizm-input-form .prizm-input-form-focused {
+            background: inherit;
+            border: 1px !important;
+            border-bottom: 1px solid var(--input-stroke);
+          }
+
+          .prizm-input-form-inner {
+            min-height: 32px;
+            height: 32px;
+          }
+
+          input {
+            .input-text-12px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/components/inputs/param-month/param-month.component.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
+import { ParamDateBase } from '../../../core/param/param-date-base';
+import { PrizmMonth } from '@prizm-ui/components';
+import { FormatterSavedValueType, ParserSavedValueType } from '../../../types/params.types';
+import { EMonth, MonthMapper } from '../../../consts/month.consts';
+
+export type InputMonthSavedValue = string | null;
+
+@Component({
+  selector: 'sproc-param-month',
+  templateUrl: './param-month.component.html',
+  styleUrls: ['./param-month.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamMonthComponent extends ParamDateBase<PrizmMonth | null, InputMonthSavedValue> {
+  override placeholder = input('Выберите месяц');
+  @Input() override set formatSavedValue(
+    formatter: FormatterSavedValueType<PrizmMonth | null, InputMonthSavedValue> | undefined
+  ) {
+    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
+  }
+  @Input() override set parseSavedValue(
+    parser: ParserSavedValueType<InputMonthSavedValue, PrizmMonth | null> | undefined
+  ) {
+    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
+  }
+  override buildShowedValue = input((value: PrizmMonth | null): string =>
+    value ? `${this._formatMonth(value.month)} ${value.year}` : '-'
+  );
+
+  protected override formatterSavedValue = this._defaultFormatterSaveValue;
+  protected override parserSavedValue = this._defaultParserSaveValue;
+
+  private _defaultFormatterSaveValue(month: PrizmMonth | null): InputMonthSavedValue {
+    if (!month) {
+      return null;
+    }
+
+    return this._dts.toISOString(month.toLocalNativeDate());
+  }
+
+  private _defaultParserSaveValue(value: InputMonthSavedValue): PrizmMonth | null {
+    if (!value) {
+      return null;
+    }
+
+    const date = this._dts.isoToLocalDate(value);
+
+    return new PrizmMonth(date.getFullYear(), date.getMonth());
+  }
+
+  private _formatMonth(month: EMonth): string {
+    return MonthMapper.getRusNamesArr()[month];
+  }
+}

package/src/lib/components/inputs/param-month-range/param-month-range.component.html

@@ -0,0 +1,39 @@
+<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
+  <ng-template #readTemplate>
+    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
+      <ng-container *ngIf="label">
+        <ng-container [ngSwitch]="paramStyle">
+          <ng-template ngSwitchCase="filter">
+            <div class="label-wrapper">
+              <span class="label">{{ label }}</span>
+              <div class="dashed-row"></div>
+            </div>
+          </ng-template>
+          <ng-template ngSwitchDefault>
+            <span class="label">{{ label }}</span>
+            <div class="dashed-row"></div>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+      <span class="value">
+        <span>{{ showedValue }}</span>
+      </span>
+    </div>
+  </ng-template>
+  <ng-template #editTemplate>
+    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
+      <div class="label-wrapper" [class.applied]="applied()">
+        <span class="label" [class.required]="required">
+          {{ label }}
+        </span>
+      </div>
+
+      <prizm-input-layout size="s" [forceClear]="forceClear">
+        <prizm-input-layout-month-range
+          [placeholder]="placeholder()"
+          [formControl]="control"
+        ></prizm-input-layout-month-range>
+      </prizm-input-layout>
+    </div>
+  </ng-template>
+</ng-container>

package/src/lib/components/inputs/param-month-range/param-month-range.component.less

@@ -0,0 +1,71 @@
+@import 'fonts';
+@import 'common-param';
+
+:host {
+  .container {
+    &--read {
+      .read-style-card;
+      .read-style-filter;
+    }
+
+    &--edit {
+      .edit-style-card;
+      .edit-style-filter;
+
+      &[sproc-param-style='card'] {
+        padding: 0 2px;
+
+        ::ng-deep {
+          .prizm-input-form:not(.prizm-input-form-focused) {
+            background: inherit;
+            border: 1px solid var(--input-stroke);
+          }
+
+          .prizm-input-form .prizm-input-form-focused {
+            background: inherit;
+            border: 1px solid var(--input-stroke);
+          }
+
+          .prizm-input-form-inner {
+            min-height: 32px;
+            height: 32px;
+          }
+
+          input {
+            .input-text-14px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+
+      &[sproc-param-style='filter'] {
+        ::ng-deep {
+          .prizm-input-form:not(.prizm-input-form-focused) {
+            background: inherit;
+            border: none;
+            border-bottom: 1px solid var(--input-stroke);
+            padding: 0 3.5px 0 8px;
+          }
+
+          .prizm-input-form .prizm-input-form-focused {
+            background: inherit;
+            border: 1px !important;
+            border-bottom: 1px solid var(--input-stroke);
+          }
+
+          .prizm-input-form-inner {
+            min-height: 32px;
+            height: 32px;
+          }
+
+          input {
+            .input-text-12px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/components/inputs/param-month-range/param-month-range.component.ts

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
+import { PrizmMonth, PrizmMonthRange } from '@prizm-ui/components';
+import { ParamDateBase } from '../../../core/param/param-date-base';
+import { FormatterSavedValueType, ParserSavedValueType } from '../../../types/params.types';
+import { EMonth, MonthMapper } from '../../../consts/month.consts';
+
+export type InputMonthRangeSavedValue = { from: string; to: string } | null;
+
+@Component({
+  selector: 'sproc-param-month-range',
+  templateUrl: './param-month-range.component.html',
+  styleUrls: ['./param-month-range.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamMonthRangeComponent extends ParamDateBase<
+  PrizmMonthRange | null,
+  InputMonthRangeSavedValue
+> {
+  override placeholder = input('Выберите период');
+  @Input() override set formatSavedValue(
+    formatter:
+      | FormatterSavedValueType<PrizmMonthRange | null, InputMonthRangeSavedValue>
+      | undefined
+  ) {
+    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
+  }
+  @Input() override set parseSavedValue(
+    parser: ParserSavedValueType<InputMonthRangeSavedValue, PrizmMonthRange | null> | undefined
+  ) {
+    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
+  }
+  override buildShowedValue = input((range: PrizmMonthRange | null): string => {
+    if (!range) {
+      return '-';
+    }
+
+    const { from, to } = range;
+
+    const fromRuString = `${this._formatMonth(from.month)} ${from.year}`;
+    const toRuString = `${this._formatMonth(to.month)} ${to.year}`;
+
+    return `${fromRuString} - ${toRuString}`;
+  });
+
+  protected override formatterSavedValue = this._defaultFormatterSaveValue;
+  protected override parserSavedValue = this._defaultParserSaveValue;
+
+  private _defaultFormatterSaveValue(range: PrizmMonthRange | null): InputMonthRangeSavedValue {
+    if (!range) {
+      return null;
+    }
+
+    return {
+      from: this._dts.toISOString(range.from.toLocalNativeDate()),
+      to: this._dts.toISOString(range.to.toLocalNativeDate()),
+    };
+  }
+
+  private _defaultParserSaveValue(value: InputMonthRangeSavedValue): PrizmMonthRange | null {
+    if (!value) {
+      return null;
+    }
+
+    const from = this._dts.isoToLocalDate(value.from);
+    const to = this._dts.isoToLocalDate(value.to);
+
+    return new PrizmMonthRange(
+      new PrizmMonth(from.getFullYear(), from.getMonth()),
+      new PrizmMonth(to.getFullYear(), to.getMonth())
+    );
+  }
+
+  private _formatMonth(month: EMonth): string {
+    return MonthMapper.getRusNamesArr()[month];
+  }
+}

package/src/lib/components/inputs/param-multi-select/param-multi-select.component.html

@@ -0,0 +1,84 @@
+<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
+  <ng-template #readTemplate>
+    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
+      <ng-container *ngIf="label">
+        <ng-container [ngSwitch]="paramStyle">
+          <ng-template ngSwitchCase="filter">
+            <div class="label-wrapper">
+              <span class="label">{{ label }}</span>
+              <div class="dashed-row"></div>
+            </div>
+          </ng-template>
+          <ng-template ngSwitchDefault>
+            <span class="label">{{ label }}</span>
+            <div class="dashed-row"></div>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+      <ng-container [ngTemplateOutlet]="value ? showedValueTemplate : emptyTemplate">
+        <ng-template #showedValueTemplate>
+          <ng-container [ngSwitch]="paramStyle">
+            <ng-template ngSwitchCase="filter">
+              <pre class="value">{{ showedValue }}</pre>
+            </ng-template>
+            <ng-template ngSwitchDefault>
+              <div class="value" [tuiHint]="showedValue">
+                <span>{{ showedValue }}</span>
+              </div>
+            </ng-template>
+          </ng-container>
+        </ng-template>
+        <ng-template #emptyTemplate>
+          <span class="value">-</span>
+        </ng-template>
+      </ng-container>
+    </div>
+  </ng-template>
+  <ng-template #editTemplate>
+    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
+      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
+        <span class="label" [class.required]="required">
+          {{ label }}
+        </span>
+        <tui-icon
+          *ngIf="hint"
+          icon="assets/ngx-register-base/icons/circle-info-empty.svg"
+          [tuiHint]="hint"
+          class="hintIcon"
+        ></tui-icon>
+      </div>
+      <tui-multi-select
+        [formControl]="control"
+        [tuiTextfieldLabelOutside]="true"
+        [tuiTextfieldCleaner]="true"
+        tuiAppearance="sproc-input-appearance"
+        [valueContent]="valueContent"
+        tuiTextfieldSize="m"
+        [stringify]="stringify()"
+        [identityMatcher]="identityMatcher()"
+        (searchChange)="onSearch($event)"
+        [editable]="searchable"
+      >
+        <span class="placeholder">{{ placeholder() }}</span>
+
+        <tui-data-list-wrapper
+          *tuiDataList
+          tuiMultiSelectGroup
+          [items]="items"
+          [itemContent]="listItemTemplate ?? itemContent"
+        ></tui-data-list-wrapper>
+      </tui-multi-select>
+
+      <ng-template #itemContent let-data>
+        {{ data.name }}
+      </ng-template>
+      <ng-template #valueContent let-list>
+        @let isSingle = list.length === 1;
+        <span [class]="isSingle ? 'choosed choosed-one' : 'choosed choosed-many'">
+          {{ isSingle ? list[0].name : shortPickedLength() ? 'Выбрано: ' : null }}
+          {{ getListLength(list) }}
+        </span>
+      </ng-template>
+    </div>
+  </ng-template>
+</ng-container>

package/src/lib/components/inputs/param-multi-select/param-multi-select.component.less

@@ -0,0 +1,108 @@
+@import 'fonts';
+@import 'common-param';
+
+:host {
+  @customZIndex: 22;
+
+  .choosed {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    position: absolute;
+    justify-content: space-between;
+    z-index: @customZIndex;
+    border-radius: 2px;
+    height: 16px;
+  }
+
+  .choosed-many {
+    color: var(--main-black);
+    background: var(--input-hover-background-color);
+    padding-left: 8px;
+    width: 80px;
+
+    .table-text-12px;
+  }
+
+  .choosed-one {
+    display: block;
+    min-width: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 200px;
+    flex-shrink: 0;
+
+    .input-text-14px;
+  }
+
+  .container {
+    &--read {
+      .read-style-card;
+      .read-style-filter;
+    }
+
+    &--edit {
+      .edit-style-card;
+      .edit-style-filter;
+
+      &[sproc-param-style='card'] {
+        .label-wrapper {
+          .default-label-wrapper;
+
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .placeholder {
+          .input-text-14px;
+        }
+      }
+
+      &[sproc-param-style='filter'] {
+        .placeholder {
+          margin-left: 8px;
+
+          .input-text-12px;
+        }
+      }
+
+      .selected-item-wrapper {
+        display: flex;
+        flex-direction: row;
+        padding: 4px;
+        margin: 0 2px;
+        min-width: 4px;
+        max-width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 2px;
+        background: var(--chip-background);
+        color: var(--main-black);
+        cursor: pointer;
+
+        .input-text-14px;
+      }
+    }
+  }
+
+  .hintIcon {
+    width: 16px;
+    height: 16px;
+  }
+
+  ::ng-deep {
+    .choosed {
+      display: none;
+    }
+
+    .empty {
+      position: relative;
+    }
+
+    .t-value-content {
+      padding-left: 16px;
+    }
+  }
+}