keevo-components 1.8.263 → 1.8.264

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

@@ -0,0 +1,136 @@
+import { Component, OnInit, ViewChild } 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 "../../components/kv-loader/kv-loader.service";
+import { TreeTableConfig } from "../components/tree-table/tree-table.config";
+import { KvTableComponent } from "../../components/kv-table/kv-table.component";
+import { KvTreetableComponent } from "../../components/kv-tree-table/kv-tree-table.component";
+
+@Component({
+  template: ''
+})
+export abstract class BaseComponentCrudList extends BaseComponentCrud implements OnInit {
+
+  dataSource: any = [];
+  selectedItem: any;
+  tableConfig!: TableConfig | TreeTableConfig;
+  totalRecords: number = 0;
+  actionsPageList: ActionItem[] = [];
+
+  @ViewChild(KvTableComponent) table!: KvTableComponent;
+  @ViewChild(KvTreetableComponent) treetable!: KvTreetableComponent;
+
+
+  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) => {
+          if (res) {
+            if (Array.isArray(res)) {
+              //Tratamento para retorno do tipo listar ([])
+              this.totalRecords = res.length;
+              this.dataSource = res
+            }
+            else {
+              //Tratamento para retorno do tipo listarPaginado (<int,[]>)
+              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());
+  }
+
+  protected resetTable() {
+    this.table?.resetTable();
+  }
+
+  protected resetTreeTable(){
+    this.treetable?.resetTreeTable();
+  }
+}

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

@@ -0,0 +1,83 @@
+import { DialogService, DynamicDialogRef } 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);
+    
+    const dialogRef: DynamicDialogRef = FormService.openDialog(this.dialogService, componentType, callBackFunction, paramsDialog);
+    
+    // Garante que o estado atual seja mantido no histórico
+    window.history.pushState(null, '', window.location.href);
+    // Configura a ação para quando o botão de voltar do navegador é pressionado
+    window.onpopstate = function () {
+      // Verifica se o dialog está aberto antes de fechá-lo
+      if (dialogRef && dialogRef.close) {
+        // dialogRef.onClose.subscribe(callBackFunction());
+        dialogRef.close();
+      }
+    };
+  }
+
+  /**
+   * 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-external.ts

@@ -0,0 +1,29 @@
+import { AfterViewInit, Component, Input, ViewChild } from "@angular/core";
+import { ComponentService } from "../services/component.service";
+import { DialogService } from "primeng/dynamicdialog";
+import { FormGroup } from "@angular/forms";
+import { BaseComponentDropDown } from "./base-component-dropdown";
+import { KvDropdownComponent } from "../../components/kv-inputs/kv-dropdown/kv-dropdown.component";
+
+@Component({
+    template: '',
+})
+export abstract class BaseComponentDropDownExternal extends BaseComponentDropDown implements AfterViewInit {
+
+    @Input() formGroup!: FormGroup;
+    @ViewChild(KvDropdownComponent) dropDownComponent!: KvDropdownComponent;
+
+    constructor(
+        componentService: ComponentService,
+        dialogService: DialogService) {
+        super(componentService, dialogService);
+    }
+
+    override ngAfterViewInit(): void {
+        super.ngAfterViewInit();
+
+        if (this.dropDownComponent) {
+            this.dropDownComponent.formControl = this.formControl;
+        }
+    }
+}

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 "../../components/keevo-components.module";
+import { PrimeNgModule } from "../modules/primeng.module";
+import { KvLabelModule } from "../../components/kv-label/kv-label.module";
+import { kvErrorModule } from "../../components/kv-error/kv-error.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, KvLabelModule, 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,192 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Type,
+} from '@angular/core';
+
+import { FormControl } from '@angular/forms';
+import { Observable, debounceTime, finalize, 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() loading: 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() onLoadCombo: 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());
+    }
+  }
+
+  protected carregarComboObs(obs: Observable<any>) {
+    if (obs) {
+      obs
+        .pipe
+        (
+          debounceTime(450),
+          this.loadingCombo()
+        )
+        .subscribe({
+          next: (data: any) => {
+            this.options = data;
+            this.filteredOptions = data;
+            this.requestComplete.emit(true);
+          },
+          error: (error: any) => {
+            console.log(error);
+          },
+        });
+    }
+  }
+
+  public emptyMessage() {
+    return (this.lazy ? 'Digite para pesquisar' : 'Nenhum resultado encontrado');
+  }
+
+  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 { }
+
+  loadingCombo = (): any => {
+    if (!this.lazy) {
+      return (src: Observable<any>) => {
+        this.loading = true;
+        return src.pipe(finalize(() => {
+          this.loading = false;
+        }));
+      };
+    }
+  };
+
+  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()
+          .pipe(this.loadingCombo())
+          .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) {
+          let fil = { termoPesquisa: event.filter } as filtroCombo;
+          this.carregarCombo(fil);
+          this.onLoadCombo.emit(fil);
+        }
+      }
+    }
+  }
+
+  override writeValue(value: any): void {
+    if (this.lazy && value) {
+      let fil = { id: value } as filtroCombo;
+      this.carregarCombo(fil);
+      this.onLoadCombo.emit(fil);
+    }
+    this.value = value;
+  }
+}

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

@@ -0,0 +1,121 @@
+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 { KvErrorComponent } from '../../components/kv-error/kv-error.component';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentInput<T>
+  extends BaseComponent<T>
+  implements OnInit, AfterContentInit, AfterViewInit
+{
+  public formControl: FormControl | undefined;
+  protected hasError: boolean | undefined = false;
+  public showAsterisk = false;
+
+  @Input() placeholder: string = '';
+  @Input() autocomplete: string = '';
+  
+
+  @Output() onBlur: EventEmitter<any> = new EventEmitter();
+  @Output() onInput: EventEmitter<any> = new EventEmitter();
+  @Output() onClose: EventEmitter<any> = new EventEmitter();
+
+  @ViewChildren(KvErrorComponent) viewErrors!: QueryList<KvErrorComponent>;
+  @ContentChildren(KvErrorComponent)
+  contentErrors!: QueryList<KvErrorComponent>;
+
+  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();
+
+    if (this.formControl?.errors) this.showAsterisk = true;
+  }
+
+  onInputBlur(event: Event) {
+    if (this.onTouched) this.onTouched();
+
+    this.onBlur.emit(event);
+  }
+
+  onInputClose(event: any) {
+    this.onClose.emit(event);
+  }
+
+  onInputInput(event: Event) {
+    this.onInput.emit(event);
+  }
+
+  protected setPlaceHolder(p: string) {
+    if (!this.placeholder) this.placeholder = p;
+  }
+}