@morozeckiy/dd-lib 0.1.1

package/src/lib/core/directives/counter.directive.ts

@@ -0,0 +1,54 @@
+import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+
+@Directive({
+  selector: '[ddCounter]',
+  standalone: true,
+})
+export class CounterDirective implements OnChanges {
+  @Input() public ddCounter: number | undefined;
+  @Input() public needPositive = false;
+
+  constructor(private el: ElementRef) {}
+
+  public ngOnChanges(change: SimpleChanges): void {
+    this.el.nativeElement.innerHTML = 0;
+    let interval: any;
+    if (change['ddCounter']?.currentValue) {
+      /** получаем шаг для инкремента делением конечного числа на 20*/
+      let step = Math.floor(change['ddCounter'].currentValue / 20);
+      /** бывают маленькие и отрицательные числа*/
+      step = step >= 1 || step <= -1 ? step : 1;
+      let x = 0;
+      if (change['ddCounter'].currentValue > 0) {
+        interval = setInterval(() => {
+          if (x + step >= change['ddCounter'].currentValue) {
+            /** Если шаг увеличивает значение больше чем исходные число, приравниваем к исходнику и заканчиваем*/
+            const transformNumberFirst = new DecimalPipe('ru').transform(change['ddCounter'].currentValue);
+            this.el.nativeElement.innerHTML = this.needPositive
+              ? '+' + transformNumberFirst
+              : transformNumberFirst;
+            clearInterval(interval);
+            return;
+          }
+          x += step;
+          const transformNumber = new DecimalPipe('ru').transform(x);
+          this.el.nativeElement.innerHTML = this.needPositive ? '+' + transformNumber : transformNumber;
+        }, 1);
+      } else if (change['ddCounter'].currentValue < 0) {
+        interval = setInterval(() => {
+          if (x - step <= change['ddCounter'].currentValue) {
+            this.el.nativeElement.innerHTML = new DecimalPipe('ru').transform(change['ddCounter'].currentValue);
+            clearInterval(interval);
+            return;
+          }
+          x += step;
+          this.el.nativeElement.innerHTML = new DecimalPipe('ru').transform(x);
+        }, 10);
+      }
+    }
+    setTimeout(() => {
+      clearInterval(interval);
+    }, 4000);
+  }
+}

package/src/lib/core/directives/declension.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, ElementRef, Input, OnInit } from '@angular/core';
+
+@Directive({
+  selector: '[ddDeclension]',
+  standalone: true,
+})
+export class DeclensionDirective implements OnInit {
+  @Input() public ddDeclension!: string[];
+  @Input() public count = 0;
+  @Input() public whitespace = true;
+  @Input() public needCount = true;
+
+  constructor(private el: ElementRef) {}
+
+  public ngOnInit(): void {
+    const declension = { 1: this.ddDeclension[0], 2: this.ddDeclension[1], 5: this.ddDeclension[2] };
+    let x = this.count >= 10 && this.count <= 20 ? 5 : this.count % 10;
+    if (this.count > 999) {
+      x = this.count % 100;
+    }
+    const keys: [1, 2, 5] = (Object.keys(declension).map(Number) as [1, 2, 5]).sort();
+    const text = !x
+      ? `${declension[keys.pop() || 1]}`
+      : keys.reduce((result, key) => (x >= +key ? declension[key] : result), '');
+    this.el.nativeElement.innerHTML = `${this.whitespace ? '&nbsp;' : ''}${
+      this.needCount ? this.count : ''
+    } ${text}`;
+  }
+}

package/src/lib/core/directives/resize-textarea.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[ddResizeTextarea]',
+  standalone: true,
+})
+export class ResizeTextareaDirective {
+  constructor(private el: ElementRef, private rdr: Renderer2) {}
+
+  @HostListener('input', ['$event'])
+  public onKeyup(): void {
+    const h = this.el.nativeElement.scrollHeight;
+    this.rdr.setStyle(this.el.nativeElement, 'max-height', h + 'px');
+    this.rdr.setStyle(this.el.nativeElement, 'height', h + 'px');
+  }
+}

package/src/lib/core/directives/triangle.directive.ts

@@ -0,0 +1,56 @@
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[ddTriangle]',
+})
+export class TriangleDirective implements OnInit {
+  @Input() public width = 16;
+  @Input() public height = 16;
+  @Input() public fill = '#fff';
+  @Input() public stroke = '#fff';
+  @Input() public points = '0,8 4,0 8,8';
+  @Input() public drTriangle: 'top' | 'left' | 'right' | 'bottom' | 'top-left' = 'left';
+
+  constructor(private rdr: Renderer2, private el: ElementRef) {}
+
+  public ngOnInit(): void {
+    setTimeout(() => {
+      const option = this.el.nativeElement.getBoundingClientRect();
+      let left = option.width / 2 - this.width / 2;
+      let top = -this.height / 2;
+      if (this.drTriangle === 'left') {
+        this.points = '8,0 0,8 8,16';
+        left = -this.width / 2;
+        top = option.height / 2 - this.width / 2;
+      }
+      if (this.drTriangle === 'right') {
+        this.points = '8,0 16,8 8,16';
+        left = option.width - this.width / 2 - 2;
+        top = option.height / 2 - this.width;
+      }
+      if (this.drTriangle === 'bottom') {
+        this.points = '16,8 8,16 0,8';
+        top = option.height - this.height / 2 - 2;
+      }
+      if (this.drTriangle === 'top-left') {
+        left = 46 - this.width / 2;
+      }
+      const svg = this.rdr.createElement('svg', 'svg');
+      this.rdr.setAttribute(svg, 'width', `${this.width}`);
+      this.rdr.setAttribute(svg, 'height', `${this.height}`);
+      this.rdr.setStyle(svg, 'width', `${this.width}px`);
+      this.rdr.setStyle(svg, 'height', `${this.height}px`);
+      this.rdr.setStyle(svg, 'position', 'absolute');
+      this.rdr.setStyle(svg, 'fill', this.fill);
+      this.rdr.setStyle(svg, 'stroke', this.stroke);
+      this.rdr.setStyle(svg, 'top', `${top}px`);
+      this.rdr.setStyle(svg, 'left', `${left}px`);
+      this.rdr.setStyle(svg, 'box-shadow', `0 14px 64px -4px #18274B0F,  0px 8px 22px -6px #18274B0F`);
+      const polyline = this.rdr.createElement('polyline', 'svg');
+      this.rdr.setAttribute(polyline, 'points', this.points);
+      this.rdr.appendChild(svg, polyline);
+      this.rdr.appendChild(this.el.nativeElement, svg);
+    });
+  }
+}

package/src/lib/core/index.ts

@@ -0,0 +1,27 @@
+// services
+export * from './services/theme-constructor.service'
+export * from './services/date.service'
+export * from './services/svg-icons.service'
+export * from './services/destroy.service'
+export * from './services/interceptors.service'
+export * from './services/validators.service'
+export * from './services/fetcher.service'
+// pipes
+export * from './pipes/filter.pipe'
+export * from './pipes/highlight.pipe'
+export * from './pipes/safe.pipe'
+export * from './pipes/reverse.pipe'
+export * from './pipes/filter-tabs.pipe'
+
+// directives
+export * from  './directives/auto-height.directive'
+export * from  './directives/counter.directive'
+export * from  './directives/declension.directive'
+export * from  './directives/click-outside.directive'
+export * from  './directives/resize-textarea.directive'
+export * from './tooltip/tooltip.directive'
+export * from './tooltip/tooltip.component'
+// export * from './directives/triangle.directive'
+// dialog
+
+export * from './dialog/dialog.service'

package/src/lib/core/pipes/filter-tabs.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filterTabs',
+  standalone: true,
+})
+export class FilterTabsPipe implements PipeTransform {
+  public transform(arr: any[] | null, tab?: number | null | undefined): any[] {
+    if (arr) {
+      return arr.filter(v => {
+        if (tab === 0) {
+          return [1, 2].indexOf(v.status.id) !== -1;
+        }
+        if (tab === 1) {
+          return [3, 4].indexOf(v.status.id) !== -1;
+        }
+        if (tab === 2) {
+          return [6].indexOf(v.status.id) !== -1;
+        }
+        return arr;
+      });
+    }
+    return [];
+  }
+}

package/src/lib/core/pipes/filter.pipe.ts

@@ -0,0 +1,36 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { getProperty } from '../tools';
+
+@Pipe({
+  name: 'filter',
+  standalone: true,
+})
+export class FilterPipe implements PipeTransform {
+  public transform(value: any[], args?: number): any {
+    if (value && value.length) {
+      return value.filter((item, i) => i === args);
+    }
+  }
+}
+
+@Pipe({
+  name: 'filterByKey',
+  standalone: true,
+})
+export class FilterByKeyPipe<T> implements PipeTransform {
+  public transform(arr: any, fn: any): any[] {
+    if (!arr?.length) {
+      return arr;
+    }
+    if (typeof fn === 'function') {
+      return arr.filter(fn);
+    } else if (fn?.length) {
+      const [key, value] = fn;
+      return arr.filter((item: any) => getProperty(item, key) === value);
+    } else if (fn) {
+      return arr.filter((item: any) => item === fn);
+    } else {
+      return arr;
+    }
+  }
+}

package/src/lib/core/pipes/highlight.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { log } from '@angular-devkit/build-angular/src/builders/ssr-dev-server';
+
+@Pipe({
+  name: 'highlight',
+  standalone: true,
+})
+export class HighlightPipe implements PipeTransform {
+  public transform(name: string, val?: string): string {
+    if (val) {
+      const re = new RegExp(val, 'gi');
+      return name.toString().replace(re, `<span style="color: #07B700">$&</span>`);
+    } else {
+      return name;
+    }
+  }
+}

package/src/lib/core/pipes/reverse.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'reverse',
+  standalone: true,
+})
+export class ReversePipe implements PipeTransform {
+  public transform(value: any[], sort: string): any[] {
+    return sort === 'asc' ? value : value.reverse();
+  }
+}

package/src/lib/core/pipes/safe.pipe.ts

@@ -0,0 +1,37 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {
+  DomSanitizer,
+  SafeHtml,
+  SafeResourceUrl,
+  SafeScript,
+  SafeStyle,
+  SafeUrl,
+} from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safe',
+  standalone: true,
+})
+export class SafePipe implements PipeTransform {
+  constructor(protected sanitizer: DomSanitizer) {}
+
+  public transform(
+    value: string,
+    type: string,
+  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
+    switch (type) {
+      case 'html':
+        return this.sanitizer.bypassSecurityTrustHtml(value);
+      case 'style':
+        return this.sanitizer.bypassSecurityTrustStyle(value);
+      case 'script':
+        return this.sanitizer.bypassSecurityTrustScript(value);
+      case 'url':
+        return this.sanitizer.bypassSecurityTrustUrl(value);
+      case 'resourceUrl':
+        return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+      default:
+        throw new Error(`Invalid safe type specified: ${type}`);
+    }
+  }
+}

package/src/lib/core/services/date.service.ts

@@ -0,0 +1,153 @@
+import { Injectable } from '@angular/core';
+import { format } from 'date-fns';
+
+export declare type GetDateMethod = () => Date;
+
+export declare type PeriodName = 'day' | 'week' | 'month' | 'month_3' | 'half_year' | 'year' | 'calendar';
+
+export declare interface GetDateBy {
+  day?: GetDateMethod;
+  week?: GetDateMethod;
+  month?: GetDateMethod;
+  month_3?: GetDateMethod;
+  half_year?: GetDateMethod;
+  year?: GetDateMethod;
+  calendar?: GetDateMethod;
+}
+
+export declare type DateTypes = keyof GetDateBy;
+
+export declare interface TimeDate {
+  time: string;
+}
+
+export declare interface CommonDateData {
+  title: string;
+  active: boolean;
+  name: PeriodName;
+  visible: string[];
+}
+
+export declare type PeriodMenuDate = TimeDate & CommonDateData;
+
+export const DEFAULT_FORMAT = 'yyyy-MM-dd';
+const DEFAULT_COMMON_DATE_DATA = {
+  active: false,
+  visible: ['all'],
+};
+
+export interface IDaysInMonth {
+  prevDays: number[];
+  days: number[];
+  lastDays: number[];
+}
+
+@Injectable({ providedIn: 'root' }) /** сервис для обработки дат */
+export class DateService {
+  private commonDateDataBy: Record<DateTypes, CommonDateData> = {
+    day: {
+      ...DEFAULT_COMMON_DATE_DATA,
+      title: 'за день',
+      name: 'day',
+    },
+    week: {
+      ...DEFAULT_COMMON_DATE_DATA,
+      title: 'за неделю',
+      name: 'week',
+    },
+    month: {
+      ...DEFAULT_COMMON_DATE_DATA,
+      title: 'за месяц',
+      name: 'month',
+    },
+    month_3: {
+      ...DEFAULT_COMMON_DATE_DATA,
+      title: 'за 3 месяца',
+      name: 'month_3',
+    },
+    half_year: {
+      ...DEFAULT_COMMON_DATE_DATA,
+      title: 'за полгода',
+      name: 'half_year',
+    },
+    year: {
+      ...DEFAULT_COMMON_DATE_DATA,
+      title: 'за год',
+      name: 'year',
+    },
+    calendar: {
+      active: false,
+      visible: [],
+      name: 'calendar',
+      title: '',
+    },
+  };
+
+  private getDateBy: GetDateBy = {
+    day: () => new Date(new Date().setDate(new Date().getDate() - 1)),
+    week: () => new Date(new Date().setDate(new Date().getDate() - 7)),
+    month: () => new Date(new Date().setMonth(new Date().getMonth() - 1)),
+    month_3: () => new Date(new Date().setMonth(new Date().getMonth() - 3)),
+    half_year: () => new Date(new Date().setMonth(new Date().getMonth() - 6)),
+    year: () => new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
+  };
+
+  public getFormattedDate(dateType: keyof GetDateBy, f: string = DEFAULT_FORMAT): string {
+    const date = this.getDateBy[dateType] || this.getDateBy.day;
+    return format(date!(), f);
+  }
+
+  public getPeriodMenuDate(dateType: DateTypes, f?: string): TimeDate & CommonDateData {
+    return {
+      time: this.getFormattedDate(dateType, f),
+      ...this.commonDateDataBy[dateType],
+    };
+  }
+
+  public getPeriodMenuDateRange(dateTypes: DateTypes[], f?: string): PeriodMenuDate[] {
+    return dateTypes.map(dateType => this.getPeriodMenuDate(dateType, f));
+  }
+
+  public getPeriodTime(name: string) {
+    const period = this.getPeriodMenu();
+    return period.find(p => p.name === name) || period[0];
+  }
+
+  public getPeriodMenu(activePeriodName: DateTypes = 'month'): PeriodMenuDate[] {
+    const arr: DateTypes[] = ['day', 'week', 'month', 'month_3', 'half_year', 'year'];
+
+    const periodMenus = this.getPeriodMenuDateRange(arr);
+    const activePeriod = periodMenus.find(p => p.name === activePeriodName) || periodMenus[0];
+
+    activePeriod.active = true;
+    return periodMenus;
+  }
+
+  public getDaysInMonth(month: number, year: number): IDaysInMonth {
+    const date = new Date(year, month, 1);
+    const datePrev = new Date(year, month, 0);
+    const days = [];
+    const prevDays = [];
+    while (date.getMonth() === month) {
+      days.push(date.getDay());
+      date.setDate(date.getDate() + 1);
+    }
+
+    const needFirstDays = days[0] === 1 ? 0 : days[0] === 0 ? 6 : days[0] - 1;
+    const firstDays = [...Array(needFirstDays)].map(() => 0);
+    const m = month === 0 ? 12 : month;
+    while (datePrev.getMonth() === m - 1 && firstDays.length !== prevDays.length) {
+      prevDays.push(datePrev.getDate());
+      datePrev.setDate(datePrev.getDate() - 1);
+    }
+
+    const needLastDays = days[days.length - 1] === 0 ? 0 : 7 - days[days.length - 1];
+    const lastDays = [...Array(needLastDays)].map((_d, i) => ++i);
+
+    return {
+      prevDays: prevDays.reverse(),
+      days: days.map((_d, i) => ++i),
+      lastDays,
+    };
+  }
+}

package/src/lib/core/services/destroy.service.ts

@@ -0,0 +1,10 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class DestroyService extends Subject<void> implements OnDestroy {
+  public ngOnDestroy(): void {
+    this.next();
+    this.complete();
+  }
+}

package/src/lib/core/services/fetcher.service.ts

@@ -0,0 +1,109 @@
+import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
+import {Inject, Injectable} from '@angular/core';
+
+import {Observable, of} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
+import {isArray} from "@angular/compiler-cli/src/ngtsc/annotations/common";
+
+export interface HttpIResponse<T> {
+  error: string;
+  errorCode: string;
+  message: null | string;
+  redirect: null | string;
+  systemMessage: null | string;
+  result: 'OK' | 'ERROR' | 'FAIL';
+  value: T;
+}
+
+type PayloadMethod = 'post' | 'put' | 'get' | 'delete';
+
+@Injectable({providedIn: 'root'}) /** сервис обработки запросов к api */
+export class FetcherService {
+  // private apiUrl = 'api';
+  private readonly payloadMethods: string[] = ['post', 'put'];
+
+  constructor(private http: HttpClient, @Inject('apiUrl') private apiUrl: string = 'api') {
+  }
+
+  public get<R>(urlParts: string, options: any = {}, urlId?: string | number): Observable<R> {
+    urlParts = urlId ? urlParts.replace(/{[^}]+}/g, urlId.toString()) : urlParts;
+    const url: string = urlParts ? [this.apiUrl].concat(urlParts).join('/') : this.apiUrl;
+    let params = new HttpParams();
+    for (const key of Object.keys(options)) {
+      if (options[key] != null) {
+        if (options[key].length && isArray(options[key])) {
+          options[key].forEach((f: string | number | boolean) => {
+            params = params.append(key, f);
+          });
+        } else {
+          params = params.append(key, options[key]);
+        }
+      }
+    }
+    return this.request('get', url, {params});
+  }
+
+  public post<R>(urlParts: string[] | string, data?: any, options: any = {}): Observable<R> {
+    const url: string = [this.apiUrl].concat(urlParts).join('/');
+    if (options?.params) {
+      let params = new HttpParams();
+      for (const key of Object.keys(options.params)) {
+        if (options.params[key] != null) {
+          params = params.append(key, options.params[key]);
+        }
+      }
+      options.params = params;
+    }
+    return this.request('post', url, options, data);
+  }
+
+  public put<R>(urlParts: string[] | string, options: any = {}, data: any): Observable<any> {
+    const url: string = [this.apiUrl].concat(urlParts).join('/');
+    return this.request('put', url, options, data);
+  }
+
+  public delete<R>(urlParts: string[] | string, options: any = {}): Observable<R> {
+    const url: string = [this.apiUrl].concat(urlParts).join('/');
+    return this.request('delete', url, options);
+  }
+
+  /** перегоняем объкты в форм дату*/
+  public createFormData(form: { [x: string]: any }) {
+    const formData: FormData = new FormData();
+    Object.keys(form).forEach((item: string) => {
+      formData.append(item, form[item]);
+    });
+    return formData;
+  }
+
+  private request<R>(method: PayloadMethod, url: string, options: any, data?: any): Observable<R> {
+    if (options.headers) {
+      options.headers = new HttpHeaders(options.headers);
+    }
+    let request: Observable<any>;
+    options.withCredentials = true;
+
+    if (this.payloadMethods.includes(method)) {
+      request = this.http[method as 'post' | 'put'](url, data, options);
+    } else {
+      request = (this.http as any)[method](url, options);
+    }
+
+    return request.pipe(
+      switchMap((response: any) => {
+        if (response && response.error) {
+          console.error(`API error with status: ${response.status}`);
+          console.error(response.error);
+        }
+        return of(response);
+      }),
+      // catchError((error: any) => {
+      // console.timeEnd('Время выполнения - ' + url);
+      // if (error.status !== 403) {
+      // console.log(error);
+      // }
+      // return of(error);
+      // }),
+    );
+  }
+}

package/src/lib/core/services/interceptors.service.ts

@@ -0,0 +1,26 @@
+import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest,} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {catchError} from 'rxjs/operators';
+import {Router} from '@angular/router';
+
+@Injectable()
+export class InterceptorsService implements HttpInterceptor {
+
+  constructor(private router: Router) {
+  }
+
+  /** перехватчик состояния запросов к api */
+  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(req).pipe(
+      catchError(err => {
+        if (err instanceof HttpErrorResponse) {
+          if (err.status >= 500) {
+            this.router.navigate(['tech-works']);
+          }
+        }
+        throw err;
+      }),
+    );
+  }
+}

package/src/lib/core/services/svg-icons.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {SvgIcon} from "../../../../assets/svg-icons";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SvgIconsService {
+
+  private registry = new Map<string, string>();
+
+  registerIcons(icons: SvgIcon[]): void {
+    icons.forEach((icon: SvgIcon) => this.registry.set(icon.name, icon.data));
+  }
+
+  getIcon(iconName: string): string | undefined {
+    if (!this.registry.has(iconName)) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `We could not find the icon with name ${ iconName }, did you add it to the icon registry?`,
+      );
+    }
+
+    return this.registry.get(iconName);
+  }
+}