keevo-components 1.5.189 → 1.5.191

package/src/lib/api/base-components/base-component-crud-list.ts

@@ -0,0 +1,111 @@
+import { Component, OnInit } from "@angular/core";
+import { DialogService } from "primeng/dynamicdialog";
+import { Router } from "@angular/router";
+
+import { BaseComponentCrud } from "./base-component-crud";
+import { TablePaginate } from "../components/table/table.paginate";
+import { TableConfig } from "../components/table/table.config";
+import { ActionItem } from "../components/table/action-item";
+import { NotificationService } from "../services/notification.service";
+import { Observable } from "rxjs";
+import { loading } from "../../loader/loader.service";
+
+@Component({
+  template: ''
+})
+export abstract class BaseComponentCrudList extends BaseComponentCrud implements OnInit {
+
+  dataSource: any;
+  selectedItem: any;
+  tableConfig!: TableConfig;
+  totalRecords: number = 0;
+  actionsPageList: ActionItem[] = [];
+
+  constructor(
+    dialogService: DialogService,
+    notificationService: NotificationService,
+    public router: Router) {
+    super
+      (
+        dialogService,
+        notificationService
+      );
+  }
+
+  ngOnInit() {
+    this.loadFilters();
+    this.configureTable();
+
+    // Tabela não configurada para paginação
+    if (!this.tableConfig.lazy)
+      this.loadTable(new TablePaginate());
+  }
+
+  /**
+   * Método disparado para configuração das tabelas do componente de lista
+   */
+  abstract configureTable(): void;
+
+  /**
+   * Método disparado para edição de registros
+   * @param registry - Registro que está sendo editado
+   *
+   */
+  abstract edit(registry: any): void;
+
+  /**
+   * Método disparado para carregamento dos filtros da tela
+   */
+  abstract loadFilters(): void;
+
+  /**
+   * Método disparado para carregar a tabela do componente de lista
+   * @param tablePaginate - Classe dos dados da paginação da tabela
+   */
+  abstract loadTable(tablePaginate: TablePaginate): void;
+
+  /**
+   * Método disparado ao clicar no botão de novo registro
+   */
+  abstract newRegistry(): void;
+
+  /**
+   * Método que seta o registro selecionado na tabela
+   * @param event - Registro
+   */
+  protected activeItem(event: any) {
+    this.selectedItem = event;
+  }
+
+  /**
+   * Método que dispara o carregamento da tabela
+   * @param obs - Observable de carregamento dos dados
+   */
+  protected loadData(obs: Observable<any>) {
+    obs
+      .pipe(loading())
+      .subscribe({
+        next: (res: any) => {
+          this.totalRecords = res.item1;
+          this.dataSource = res.item2
+        },
+        error: (e) => {
+          this.toastError(e);
+        },
+      });
+  }
+
+  /**
+   * Método que dispara a paginação
+   */
+  protected paginate(event: any) {
+    this.loadTable(event);
+  }
+
+  /**
+   * Método que dispara a atualização da página inteira
+   */
+  protected refresh() {
+    this.loadTable(new TablePaginate());
+  }
+}

package/src/lib/api/base-components/base-component-crud.ts

@@ -0,0 +1,70 @@
+import { DialogService } from 'primeng/dynamicdialog';
+import { Component, Type } from "@angular/core";
+import { FormService, paramsDialog } from "../services/form.service";
+import { NotificationService } from '../services/notification.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  template: ''
+})
+export abstract class BaseComponentCrud {
+
+  public isReport: boolean = false;
+  public itemsReport: any = [];
+
+  constructor(
+    public dialogService: DialogService,
+    public notificationService: NotificationService) {
+  }
+
+  /**
+   * Fecha um relatório
+   */
+  public closeReport() {
+    this.isReport = false;
+  }
+
+  /**
+   * Abre um form dialog
+   * @param componentType - Componente que será renderizado
+   * @param callBackFunction - Função de callback que deverá ser chamada após o fechamento do dialog
+   * @param paramsDialog - Parâmetros do dialog
+   */
+  protected openDialog(componentType: Type<any>, callBackFunction: Function, paramsDialog?: paramsDialog) {
+    FormService.openDialog(
+      this.dialogService,
+      componentType,
+      callBackFunction,
+      paramsDialog);
+  }
+
+  /**
+   * Imprime um relatório na tela
+   * @param obs - Observable com o carregamento do relatório
+   */
+  protected printReportFilter(obs: Observable<any>) {
+    obs
+      //.pipe(loading())
+      .subscribe({
+        next: (res: any) => {
+          this.itemsReport = res;
+          this.isReport = true;
+        },
+        error: (e) => {
+          this.toastError(e);
+        },
+      });
+  }
+
+  /**
+   * Exibe um toast com um erro
+   * @param err - Erro
+   */
+  protected toastError(err: any) {
+    if (err) {
+      if (err.message) {
+        this.notificationService.toastError(err.message);
+      }
+    }
+  }
+}

package/src/lib/api/base-components/base-component-dropdown-new.ts

@@ -0,0 +1,112 @@
+import { Component, Input, TemplateRef } from "@angular/core";
+import { BaseComponentDropDown } from "./base-component-dropdown"
+import { FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { KeevoComponentsModule } from "../../keevo-components.module";
+import { PrimeNgModule } from "../modules/primeng.module";
+import { LabelModule } from "../../label/label.module";
+import { kvErrorModule } from "../components/error/kverror.module";
+
+@Component({
+    selector: 'app-base-dropdown',
+    template: `
+    <span>
+      <kv-label
+        [componentId]="componentId"
+        [label]="label"
+      />
+      <p-dropdown
+        appendTo="body"
+        [class]="baseInputClass"
+        [disabled]="disabled"
+        [filter]="filter"
+        [inputId]="componentId"
+        [(ngModel)]="value"
+        [options]="filteredOptions"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [optionDisabled]="optionDisabled"
+        [group]="group"
+        [optionGroupLabel]="optionGroupLabel"
+        [optionGroupChildren]="optionGroupChildren"
+        [showClear]="showClear"
+        [lazy]="lazy"
+        scrollHeight="250px"
+        (onBlur)="onInputBlur($event)"
+        (onClick)="onInputClick($event)"
+        (onChange)="onInputChange($event)"
+        (onFilter)="onInputFilter($event)"
+        [style]="{'width':widthField}"
+        [panelStyle]="{ width: widthField, overflow: 'auto' }"
+        styleClass="inputs"
+      >
+
+        <ng-template
+          *ngIf="showAddButton"
+          pTemplate="footer"
+        >
+          <p-divider></p-divider>
+          <div class="flex flex-wrap card-container p-1">
+            <div class="flex justify-content-center">
+              <button
+                pButton
+                label="Incluir"
+                pTooltip="Clique aqui para incluir um novo registro"
+                tooltipPosition="bottom"
+                icon="pi pi-plus"
+                class="p-button-rounded p-button-success mr-2"
+                (click)="addClick($event)"
+              ></button>
+            </div>
+          </div>
+        </ng-template>
+
+        <ng-template
+          let-selectedItem
+          pTemplate="item"
+          *ngIf="itemTemplate"
+        >
+          <ng-container
+            [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: selectedItem }"
+          >
+          </ng-container>
+        </ng-template>
+
+
+        <ng-template
+          let-item
+          pTemplate="selectedItem"
+          *ngIf="selectedItemTemplate"
+        >
+          <ng-container
+            [ngTemplateOutlet]="selectedItemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item }"
+          >
+
+          </ng-container>
+        </ng-template>
+
+      </p-dropdown>
+
+      <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+    </span>
+    <ng-content></ng-content>
+    `,
+    standalone: true,
+    imports: [KeevoComponentsModule, ReactiveFormsModule, FormsModule, PrimeNgModule, LabelModule, kvErrorModule]
+})
+export class BaseComponentDropdownNew extends BaseComponentDropDown {
+
+    @Input() formGroup!: FormGroup;
+    @Input() formControlName!: string;
+
+    @Input() dropDowValue!: any;
+    @Input() itemTemplate!: TemplateRef<any>;
+    @Input() selectedItemTemplate!: TemplateRef<any>;
+
+    override ngOnInit(): void {
+        if (this.dropDowValue)
+            this.value = this.dropDowValue;
+    }
+
+}

package/src/lib/api/base-components/base-component-dropdown.ts

@@ -0,0 +1,164 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Type,
+} from '@angular/core';
+
+import { FormControl } from '@angular/forms';
+import { Observable, of } from 'rxjs';
+import { DialogService } from 'primeng/dynamicdialog';
+import { BaseComponentInput } from './base-component-input';
+import { ComponentService } from '../services/component.service';
+import { ObjectService } from '../services/object.service';
+import { filtroCombo } from '../components/dropdown/filtro.combo';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentDropDown extends BaseComponentInput<any> implements OnInit {
+
+  @Input() filteredOptions!: any[];
+  @Input() options!: any[];
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() optionDisabled!: string;
+
+  @Input() group!: boolean;
+  @Input() optionGroupLabel!: string;
+  @Input() optionGroupChildren!: string;
+
+  @Input() filter: boolean = true;
+  @Input() lazy: boolean = false;
+
+  @Input() showAddButton: boolean = false;
+  @Input() showClear: boolean = true;
+  @Input() widthField?: string;
+
+  @Output() onAddClick: EventEmitter<any> = new EventEmitter();
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  @Output() requestComplete: EventEmitter<any> = new EventEmitter();
+
+  constructor(
+    componentService: ComponentService,
+    private dialogService: DialogService
+  ) {
+    super(componentService);
+    this.registerOnTouched(() => { });
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.setPlaceHolder('Selecione um valor');
+
+    if (!this.lazy) this.carregarCombo();
+  }
+
+  protected addClick(event: Event) {
+    this.onAddClick.emit(event);
+  }
+
+  public carregarCombo(filtro?: filtroCombo): void {
+    if (filtro) {
+      this.carregarComboObs(this.listarCombo(filtro));
+    }
+    else {
+      this.carregarComboObs(this.listar());
+    }
+  }
+
+  private carregarComboObs(obs: Observable<any>) {
+    if (obs) {
+      obs
+        .subscribe({
+          next: (data: any) => {
+            this.options = data;
+            this.filteredOptions = data;
+            this.requestComplete.emit(true);
+          },
+          error: (error: any) => {
+            console.log(error);
+          },
+        });
+    }
+  }
+
+  public filterOptions(field: string, value: any): void {
+    if (this.options) {
+      let lista = ObjectService.filterObject(this.options, field, value);
+      if (lista?.length > 0) {
+        of(lista).subscribe((opts: any[]) => {
+          this.filteredOptions = opts;
+        });
+      } else this.filteredOptions = [];
+    }
+  }
+
+  protected listar(): any { }
+  protected listarCombo(value: any): any { }
+
+  protected openDialog(
+    componentType: Type<any>,
+    width?: string,
+    height?: string
+  ) {
+    const ref = this.dialogService.open(componentType, {
+      width: width || '70%',
+      height: height,
+      closable: false,
+      maximizable: true,
+      data: { popup: true },
+    });
+
+    ref.onClose.subscribe((id: any) => {
+      if (id) {
+        this.listar().subscribe((data: any) => {
+          this.options = data;
+          this.filteredOptions = data;
+          if (id) this.formControl?.setValue(id);
+        });
+      }
+    });
+  }
+
+  protected onInputChange(event: any) {
+    this.onSelectionValue.emit(event);
+
+    if (this.formControl) {
+      const controlName = this.getName(this.formControl as FormControl);
+      if (controlName) {
+        let currentItem = ObjectService.findObject(
+          this.options,
+          controlName,
+          event.value
+        );
+        this.onSelectionChange.emit(currentItem);
+      }
+    }
+  }
+
+  onInputClick(event: any) {
+    this.onClick.emit(event);
+  }
+
+  onInputFilter(event: any) {
+    if (event) {
+      if (event.filter) {
+        if (event.filter.length > 2) {
+          this.carregarCombo({ termoPesquisa: event.filter } as filtroCombo);
+        }
+      }
+    }
+  }
+
+  override writeValue(value: any): void {
+    if (this.lazy && value) {
+      this.carregarCombo({ id: value } as filtroCombo);
+    }
+    this.value = value;
+  }
+}

package/src/lib/api/base-components/base-component-input.ts

@@ -0,0 +1,107 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  ViewChildren
+} from "@angular/core";
+
+import { FormControl } from '@angular/forms';
+
+import { BaseComponent } from './base-component';
+
+import { ComponentService } from '../services/component.service';
+import { ErrorComponent } from '../components/error/error.component';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentInput<T> extends BaseComponent<T> implements OnInit, AfterContentInit, AfterViewInit {
+
+  protected formControl: FormControl | undefined;
+  protected hasError: boolean | undefined = false;
+
+  @Input() placeholder: string = '';
+
+  @Output() onBlur: EventEmitter<any> = new EventEmitter();
+  @Output() onInput: EventEmitter<any> = new EventEmitter();
+  @Output() onClose: EventEmitter<any> = new EventEmitter();
+
+  @ViewChildren(ErrorComponent) viewErrors!: QueryList<ErrorComponent>;
+  @ContentChildren(ErrorComponent) contentErrors!: QueryList<ErrorComponent>;
+
+  constructor(protected readonly componentService: ComponentService) {
+    super();
+  }
+
+  public get baseInputClass(): string {
+    return `${this.hasError ? 'ng-invalid ng-dirty' : ''} !important`;
+  }
+
+  erroMessage(): string | undefined {
+    if (!this.formControl?.errors) return;
+
+    let message: string = '';
+
+    if (this.formControl.errors) {
+      const objErrors = this.formControl.errors as any;
+      if (objErrors.erroMessage) message = objErrors.erroMessage;
+    }
+
+    return message;
+  }
+
+  getName(control: FormControl): string | null {
+    return Object.entries(control.parent?.controls ?? []).find(([_, value]) => value === control)?.[0] ?? null;
+  }
+
+  hasControlError(): boolean {
+    if (!this.formControl) return false;
+    return (this.formControl.dirty || this.formControl.touched) && this.formControl.errors !== null;
+  }
+
+  ngAfterViewInit(): void {
+    this.viewErrors.forEach(c => {
+      c.emitError.subscribe(res => {
+        this.hasError = res;
+        this.componentService.changeDetectorRef.detectChanges();
+      });
+    });
+  }
+
+  ngAfterContentInit() {
+    this.contentErrors.forEach(c => {
+      c.emitError.subscribe(res => {
+        this.hasError = res;
+      });
+    });
+  }
+
+  ngOnInit(): void {
+    this.formControl = this.componentService.getFormControl();
+  }
+
+  onInputBlur(event: Event) {
+    if (this.onTouched)
+      this.onTouched();
+
+    this.onBlur.emit(event);
+  }
+
+  onInputClose(event: Event) {
+    this.onClose.emit(event);
+  }
+
+  onInputInput(event: Event) {
+    this.onInput.emit(event);
+  }
+
+  protected setPlaceHolder(p: string) {
+    if (!this.placeholder) this.placeholder = p;
+  }
+}

package/src/lib/api/base-components/base-component-multi-select.ts

@@ -0,0 +1,136 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+import { FormControl } from '@angular/forms';
+import { Observable, of } from 'rxjs';
+import { BaseComponentInput } from './base-component-input';
+import { ComponentService } from '../services/component.service';
+import { ObjectService } from '../services/object.service';
+import { filtroCombo } from '../components/dropdown/filtro.combo';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentMultiSelect extends BaseComponentInput<any> implements OnInit {
+
+  @Input() options: any;
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() filter: boolean = false;
+  @Input() showClear: boolean = false;
+
+  @Input() lazy: boolean = false;
+  @Input() filteredOptions!: any[];
+
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() onPanelHide: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+
+  loadedCombo: boolean = false;
+
+  constructor(
+    componentService: ComponentService,
+  ) {
+    super(componentService);
+    this.registerOnTouched(() => { });
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.setPlaceHolder('Selecione um valor');
+
+    if (!this.lazy) this.carregarCombo();
+  }
+
+  public carregarCombo(filtro?: filtroCombo): void {
+    if (filtro) {
+      this.carregarComboObs(this.listarCombo(filtro));
+    }
+    else {
+      this.carregarComboObs(this.listar());
+    }
+  }
+
+  private carregarComboObs(obs: Observable<any>) {
+    if (obs) {
+      obs
+        .subscribe({
+          next: (data: any) => {
+            this.options = data;
+            this.filteredOptions = data;
+            this.loadedCombo = true
+          },
+          error: (error: any) => {
+            console.log(error);
+          },
+        });
+    }
+  }
+
+  public filterOptions(field: string, value: any): void {
+    if (this.options) {
+      let lista = ObjectService.filterObject(this.options, field, value);
+      if (lista?.length > 0) {
+        of(lista).subscribe((opts: any[]) => {
+          this.filteredOptions = opts;
+        });
+      } else this.filteredOptions = [];
+    }
+  }
+
+  protected onInputChange(event: any) {
+    this.onSelectionValue.emit(event);
+
+    if (this.formControl) {
+      const controlName = this.getName(this.formControl as FormControl);
+      if (controlName) {
+        let currentItem = ObjectService.findObject(
+          this.options,
+          controlName,
+          event.value
+        );
+        this.onSelectionChange.emit(currentItem);
+      }
+    }
+  }
+
+  onInputClick(event: any) {
+    this.onClick.emit(event);
+  }
+
+  onInputFilter(event: any) {
+    if (event) {
+      if (event.filter) {
+        if (event.filter.length > 2) {
+          this.carregarCombo({ termoPesquisa: event.filter } as filtroCombo);
+        }
+      }
+    }
+  }
+
+  protected listar(): any { }
+  protected listarCombo(value: any): any { }
+
+  panelHide(event: Event) {
+    this.onPanelHide.emit(event);
+  }
+
+  public override get baseInputClass(): string {
+    return `p-multiselect-sm ${this.hasError ? 'ng-invalid ng-dirty' : ''}`;
+  }
+
+  selectionChange(event: Event) {
+    this.onSelectionChange.emit(event);
+  }
+
+  public requestCompleted() {
+    return this.loadedCombo;
+  }
+
+}