@ferhaps/easy-ui-lib 1.0.0 → 1.1.0

package/src/lib/components/error-handler/error-handler.component.ts

@@ -1,44 +0,0 @@
-import { OnDestroy, inject } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { Component } from '@angular/core';
-import { HttpErrorResponse } from '@angular/common/http';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { ErrorPopupComponent } from './error-popup/error-popup.component';
-import { NoopScrollStrategy } from '@angular/cdk/overlay';
-import { ErrorService } from '../../services/error.service';
-
-@Component({
-  selector: 'lib-error-handler',
-  templateUrl: 'error-handler.component.html',
-  styleUrls: ['error-handler.component.scss'],
-  imports: [
-    MatDialogModule
-  ]
-})
-export class ErrorHandlerComponent implements OnDestroy {
-  private errSubscriptions = new Subscription();
-  private errorService = inject(ErrorService);
-  private dialog = inject(MatDialog);
-
-  constructor() {
-    this.errSubscriptions.add(
-      this.errorService.error$.subscribe((err: HttpErrorResponse) => {
-        console.log(err);
-        this.showPopup(err);
-      }),
-    );
-  }
-
-  private showPopup(error: HttpErrorResponse): void {
-    this.dialog.closeAll();
-    this.dialog.open(ErrorPopupComponent, {
-      data: error,
-      width: '400px',
-      scrollStrategy: new NoopScrollStrategy(),
-    });
-  }
-
-  public ngOnDestroy(): void {
-    this.errSubscriptions.unsubscribe();
-  }
-}

package/src/lib/components/error-handler/error-popup/error-popup.component.html

@@ -1,13 +0,0 @@
-<lib-default-dialog [dialogTitle]="'Аn error has occurred'">
-  <div class="dialog-content">
-    <div class="status-info">
-      <div>{{ error.status }}</div>
-      @if (error.status) {
-        <div>{{ httpStatusCodes[error.status] }}</div>
-      }
-    </div>
-    <div class="error-info">
-      <lib-error-dispaly [error]="error" />
-    </div>
-  </div>
-</lib-default-dialog>

package/src/lib/components/error-handler/error-popup/error-popup.component.scss

@@ -1,19 +0,0 @@
-.dialog-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-inline: 1rem;
-
-  .status-info {
-    display: flex;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    font-size: 18px;
-    gap: 0.5rem;
-  }
-
-  .error-info {
-    display: grid;
-    place-items: center;
-  }
-}

package/src/lib/components/error-handler/error-popup/error-popup.component.ts

@@ -1,21 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { HttpErrorResponse } from '@angular/common/http';
-import { DefaultDialogComponent } from '../../default-dialog/default-dialog.component';
-import { ErrorDispalyComponent } from '../../error-dispaly.component';
-import { HTTP_STATUS_CODES } from '../../../utils/utils';
-
-@Component({
-  selector: 'lib-error-popup',
-  imports: [
-    DefaultDialogComponent,
-    ErrorDispalyComponent
-  ],
-  templateUrl: './error-popup.component.html',
-  styleUrls: ['./error-popup.component.scss']
-})
-export class ErrorPopupComponent {
-  protected httpStatusCodes = HTTP_STATUS_CODES;
-  
-  constructor(@Inject(MAT_DIALOG_DATA) public error: HttpErrorResponse) { }
-}

package/src/lib/components/global-loader/global-loader.component.html

@@ -1,5 +0,0 @@
-@if (loaderService.loading$ | async) {
-  <div class="loader">
-    <mat-spinner />
-  </div>
-}

package/src/lib/components/global-loader/global-loader.component.scss

@@ -1,12 +0,0 @@
-.loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.2);
-  z-index: 9999;
-}

package/src/lib/components/global-loader/global-loader.component.ts

@@ -1,17 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { LoaderService } from '../../services/loader.service';
-import { AsyncPipe } from '@angular/common';
-
-@Component({
-  selector: 'lib-global-loader',
-  imports: [
-    AsyncPipe,
-    MatProgressSpinnerModule
-  ],
-  templateUrl: './global-loader.component.html',
-  styleUrl: './global-loader.component.scss'
-})
-export class GlobalLoaderComponent {
-  protected loaderService = inject(LoaderService);
-}

package/src/lib/components/search-bar.component.ts

@@ -1,70 +0,0 @@
-import { Component, output, input } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-import { debounceTime, distinctUntilChanged } from 'rxjs';
-
-@Component({
-  selector: 'lib-search-bar',
-  template: `
-  <form class="search-bar" [formGroup]="searchForm">
-    <mat-icon>search</mat-icon>
-    <input class="search-input" type="search" name="field"
-      [placeholder]="'Search ' + for()" autocomplete="off" formControlName="search" />
-  </form>
-`,
-  styles: [`
-  .search-bar {
-    width: 270px;
-    border: 1px solid #A4A4A4;
-    display: flex;
-    align-items: center;
-  }
-
-  .search-input {
-    border: none;
-    padding: 7px 11px;
-    height: 100%;
-    width: 100%;
-    background-color: transparent;
-  }
-
-  mat-icon {
-    margin-inline: 8px;
-  }
-
-  .search-input:focus {
-    border: none;
-    outline: none;
-  }
-
-  @media (max-width: 1086px) {
-    .search-bar {
-      width: 170px;
-    }
-  }
-`],
-  imports: [
-    MatIconModule,
-    ReactiveFormsModule
-  ]
-})
-export class SearchBarComponent {
-  public for = input.required<string>();
-  protected search = output<string>();
-
-  protected searchForm: FormGroup = new FormGroup({
-    search: new FormControl('')
-  });
-
-  constructor() {
-    this.searchForm.get('search')?.valueChanges.
-      pipe(
-        debounceTime(1000),
-        distinctUntilChanged(),
-      ).subscribe((searchTerm: string) => {
-        if (searchTerm.trim() !== '') {
-          this.search.emit(searchTerm);
-        }
-      });
-  }
-}

package/src/lib/components/table/table.component.html

@@ -1,121 +0,0 @@
-<div class="flexer">
-  @if (config().title) {
-    <div class="row-heading-labels mb05">{{config().title}}</div>
-  }
-  <ng-content select=".upper-part"></ng-content>
-  @if (config().withAdd) {
-    <div class="flexer action pointer gap05 mb05" (click)="action.emit({action: 'add'})">
-      <mat-icon>add_circle_outline</mat-icon>
-      <div>add</div>
-    </div>
-  }
-</div>
-
-<div class="scroll" #scrollContainer (scroll)="onScroll()">
-  <table [class.with-options]="config().options?.length">
-    <thead>
-      <tr>
-        @for (heading of config().tableHeadings; track heading; let i = $index) {
-          <th>
-            <div class="flexer gap05">
-              {{heading}}
-              @if (config().sortable && !config().draggable) {
-                <lib-table-sort-header
-                  [selected]="currentSortColumn === i"
-                  (click)="currentSortColumn = i"
-                  (sort)="sortByProp(config().dataProps[i], $event)"
-                />
-              }
-            </div>
-          </th>
-        }
-        @if (config().options?.length) {
-          <th></th>
-        }
-      </tr>
-    </thead>
-    @if (config().draggable) {
-      <tbody cdkDropList (cdkDropListDropped)="drop($event)">
-        @for (obj of config().data; track trackById(i, obj); let i = $index) {
-          <tr
-            (mouseover)="hoverRowIndex = i"
-            (mouseleave)="hoverRowIndex = -1"
-            cdkDrag cdkDragLockAxis="y"
-            [class.pointer]="config().selectableRows"
-            [class.hover-row]="hoverRowIndex == i"
-            [class.selected-row]="config().selectableRows && selectedRowIndex == i"
-            (click)="onRowClick($event, obj, i)"
-            @fadeInOut>
-            @for (prop of config().dataProps; track prop; let cellIndex = $index) {
-              <td
-                [class.dragCol]="cellIndex === 0">
-                <div class="data" [classList]="getClass(obj, prop)"
-                  [class.flexer]="cellIndex === 0">
-                  @if (cellIndex === 0) {
-                    <mat-icon class="draggable" cdkDragHandle>
-                      drag_indicator
-                    </mat-icon>
-                  }
-                  {{obj[prop] | blankFiller}}
-                </div>
-              </td>
-            }
-            @if (config().options?.length) {
-              <td class="right-align" (click)="$event.stopPropagation()">
-                <button mat-icon-button class="pointer dots right" [matMenuTriggerFor]="optionsMenu">
-                  <mat-icon>more_vert</mat-icon>
-                </button>
-                <mat-menu #optionsMenu="matMenu">
-                  @for (option of config().options; track option) {
-                    <div
-                      mat-menu-item (click)="selectOption(option, obj, i)"
-                      [class.red]="option == 'Remove' || option == 'Delete'">
-                      {{option}}
-                    </div>
-                  }
-                </mat-menu>
-              </td>
-            }
-          </tr>
-        }
-      </tbody>
-    } @else {
-      <tbody>
-        @for (obj of config().data; track trackById(i, obj); let i = $index) {
-          <tr
-            (mouseover)="hoverRowIndex = i"
-            (mouseleave)="hoverRowIndex = -1"
-            [class.pointer]="config().selectableRows"
-            [class.hover-row]="hoverRowIndex == i"
-            [class.selected-row]="config().selectableRows && selectedRowIndex == i"
-            (click)="onRowClick($event, obj, i)"
-            @fadeInOut>
-            @for (prop of config().dataProps; track prop; let cellIndex = $index) {
-              <td>
-                <div class="data" [classList]="getClass(obj, prop)">
-                  {{obj[prop] | blankFiller}}
-                </div>
-              </td>
-            }
-            @if (config().options?.length) {
-              <td class="right-align" (click)="$event.stopPropagation()">
-                <button mat-icon-button class="pointer dots right" [matMenuTriggerFor]="optionsMenu">
-                  <mat-icon>more_vert</mat-icon>
-                </button>
-                <mat-menu #optionsMenu="matMenu">
-                  @for (option of config().options; track option) {
-                    <div
-                      mat-menu-item (click)="selectOption(option, obj, i)"
-                      [class.red]="option == 'Remove' || option == 'Delete'">
-                      {{option}}
-                    </div>
-                  }
-                </mat-menu>
-              </td>
-            }
-          </tr>
-        }
-      </tbody>
-    }
-  </table>
-</div>

package/src/lib/components/table/table.component.scss

@@ -1,116 +0,0 @@
-.scroll {
-  overflow-y: auto;
-  max-height: 94%;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0px;
-
-  &.with-options {
-    td {
-      padding-block: 3px !important;
-    }
-  }
-}
-
-.flexer {
-  display: flex;
-  align-items: center;
-}
-
-.action {
-  color: #009ddc;
-  font-weight: 500;
-  text-align: right;
-  margin-left: auto;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.gap05 {
-  gap: 0.5rem;
-}
-
-.mb05 {
-  margin-bottom: 0.5;
-}
-
-.data {
-  white-space: pre-wrap;
-}
-
-.row-heading-labels {
-  font-weight: 700;
-  font-size: 20px;
-}
-
-.selected-row td {
-  background-color: #d3edf8;
-}
-
-.hover-row {
-  background-color: #ebf7fc;
-}
-
-.red {
-  color: #ff0000;
-}
-
-@media (max-width: 1086px) {
-  table td, table th {
-    padding: 3px !important;
-    width: auto !important;
-  }
-}
-
-td, th {
-  padding: 0.5rem 1rem;
-  font-size: 14px;
-}
-
-th {
-  background-color: #f6f6f6;
-  text-align: left;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  border-top: 2px solid #E5E4E7;
-}
-
-td {
-  border-bottom: 2px solid #E5E4E7;
-  border-top: 2px solid #E5E4E7;
-}
-
-.dots {
-  width: fit-content;
-}
-
-.draggable {
-  cursor: grabbing;
-}
-
-.dragCol {
-  padding-left: 0 !important;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  font-size: 1.5em;
-  text-align: center;
-  opacity: 0.8;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.dragdrop-placeholder {
-  background: #ccc;
-  border: dotted 3px #999;
-  min-height: 30px;
-  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
-}

package/src/lib/components/table/table.component.ts

@@ -1,105 +0,0 @@
-import { Component, ElementRef, input, output, viewChild } from '@angular/core';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { SortState, TableSortHeaderComponent } from '../table-sort-header/table-sort-header.component';
-import { WhiteSpaceFillerPipe } from '../../pipes/blank-filler.pipe';
-import { CdkDragDrop, DragDropModule, moveItemInArray } from "@angular/cdk/drag-drop";
-import { fader } from '../../utils/animations';
-
-export type TableEvent = {
-  action: string;
-  obj?: any;
-  prop?: string;
-  index?: number;
-  selected?: boolean;
-  sortState?: SortState;
-  event?: Event;
-};
-
-export type Config = {
-  data: any[];
-  title: string;
-  dataProps: string[];
-  tableHeadings: string[];
-  options?: string[];
-  withAdd?: boolean;
-  selectableRows?: boolean;
-  sortable?: boolean;
-  draggable?: boolean;
-  classRules?: ClassRule[];
-};
-
-export type ClassRule = {
-  className: string;
-  condition: (obj: any, prop: string) => boolean;
-};
-
-@Component({
-  selector: 'lib-table',
-  templateUrl: 'table.component.html',
-  styleUrls: ['table.component.scss'],
-  animations: [fader],
-  imports: [
-    WhiteSpaceFillerPipe,
-    MatMenuModule,
-    MatIconModule,
-    MatButtonModule,
-    TableSortHeaderComponent,
-    DragDropModule
-  ]
-})
-export class TableComponent {
-  public config = input.required<Config>();
-  protected action = output<TableEvent>();
-  protected scrollContainer = viewChild.required<ElementRef<HTMLDivElement>>('scrollContainer');
-
-  protected selectedRowIndex: number = -1;
-  protected hoverRowIndex: number = -1;
-  protected currentSortColumn: number = -1;
-
-  protected getClass(obj: any, prop: string): string {
-    if (!this.config().classRules) return '';
-
-    const classes: string[] = [];
-    for (let rule of (this.config().classRules as ClassRule[])) {
-      if (rule.condition(obj, prop)) {
-        classes.push(rule.className);
-      }
-    }
-
-    return classes.join(' ');
-  }
-
-  protected drop(event: CdkDragDrop<any>) {
-    if (this.config().draggable) {
-      moveItemInArray(this.config().data, event.previousIndex, event.currentIndex);
-      this.action.emit({ action: 'drag', obj: this.config().data[event.currentIndex], index: event.currentIndex });
-    }
-  }
-
-  protected onScroll() {
-    const container = this.scrollContainer().nativeElement;
-    // console.log(Math.ceil(container.scrollTop), container.offsetHeight, container.scrollHeight)
-    if ((Math.ceil(container.scrollTop) + container.offsetHeight) >= container.scrollHeight) {
-      this.action.emit({ action: 'scrolled' });
-    }
-  }
-
-  protected onRowClick(event: Event, obj: any, index: number): void {
-    this.selectedRowIndex = index === this.selectedRowIndex ? -1 : index;
-    this.action.emit({ action: 'rowClick', obj, index, selected: this.selectedRowIndex === index, event });
-  }
-
-  protected selectOption(оption: string, obj: any, index: number): void {
-    this.action.emit({ action: оption.toLowerCase(), obj, index, selected: this.selectedRowIndex === index });
-  }
-
-  protected sortByProp(prop: string, sortState: SortState): void {
-    this.action.emit({ action: 'sort', prop, sortState });
-  }
-
-  protected trackById(index: number, obj: any): number {
-    return obj.id || index;
-  }
-}

package/src/lib/components/table-sort-header/table-sort-header.component.html

@@ -1,7 +0,0 @@
-<div class="sorting-container" (click)="onSortClick()">
-  <mat-icon
-    [class.selected]="selected() && sortState != 'none'"
-    [class.rotated]="sortState == 'asc'">
-    sort
-  </mat-icon>
-</div>

package/src/lib/components/table-sort-header/table-sort-header.component.scss

@@ -1,17 +0,0 @@
-.sorting-container {
-  display: flex;
-  align-items: center;
-
-  * {
-    cursor: pointer;
-  }
-
-  .selected {
-    color: #31ADFF;
-    background-color: #ebf7fc;
-  }
-  
-  .rotated {
-    transform: rotate(180deg) scaleX(-1);
-  }
-}

package/src/lib/components/table-sort-header/table-sort-header.component.ts

@@ -1,31 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-
-export type SortState = 'none' | 'asc' | 'desc';
-
-@Component({
-  selector: 'lib-table-sort-header',
-  imports: [
-    MatIconModule,
-  ],
-  templateUrl: './table-sort-header.component.html',
-  styleUrls: ['./table-sort-header.component.scss']
-})
-export class TableSortHeaderComponent {
-  public selected = input.required<boolean>();
-  public sort = output<SortState>();
-
-  protected sortState: SortState = 'none';
-
-  protected onSortClick(): void {
-    if (this.sortState === 'none') {
-      this.sortState = 'desc';
-    } else if (this.sortState === 'desc') {
-      this.sortState = 'asc';
-    } else {
-      this.sortState = 'none';
-    }
-
-    this.sort.emit(this.sortState);
-  }
-}

package/src/lib/directives/fields-match-validator.directive.ts

@@ -1,35 +0,0 @@
-import { Directive, input } from '@angular/core';
-import { AbstractControl, NG_VALIDATORS, Validator } from '@angular/forms';
-
-@Directive({
-  selector: '[libFieldsMatchValidator]',
-  providers: [
-    {
-      provide: NG_VALIDATORS,
-      useExisting: FieldsMatchValidatorDirective,
-      multi: true,
-    },
-  ],
-})
-export class FieldsMatchValidatorDirective implements Validator {
-  public fieldToMatch = input.required<string>();
-
-  public validate(control: AbstractControl): { [key: string]: any } | null {
-    const value = control.value;
-
-    if (!value) {
-      return null;
-    }
-
-    const matchingControl = control.root.get(this.fieldToMatch());
-    if (!matchingControl) {
-      return null;
-    }
-
-    if (value !== matchingControl.value) {
-      return { mismatch: true };
-    }
-
-    return null;
-  }
-}

package/src/lib/directives/password-validator.directive.ts

@@ -1,26 +0,0 @@
-import { Directive } from '@angular/core';
-import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
-
-@Directive({
-  selector: '[libPasswordValidator]',
-  providers: [
-    {
-      provide: NG_VALIDATORS,
-      useExisting: PasswordValidatorDirective,
-      multi: true
-    }
-  ]
-})
-export class PasswordValidatorDirective implements Validator {
-  public validate(control: AbstractControl): ValidationErrors | null {
-    const password = control.value;
-
-    const pattern = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#\$%\^&\*])(?=.*\d).{8,}$/
-
-    if (password && !pattern.test(password)) {
-      return { passwordInvalid: true };
-    }
-
-    return null;
-  }
-}