keevo-components 2.0.105 → 2.0.107

package/ng-package.json

@@ -0,0 +1,14 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/keevo-components",
+    "lib": {
+        "entryFile": "./src/public-api.ts"
+    },
+    "assets": [
+        "src/assets",
+        "./src/lib/components/keevo-components-styles.scss",
+        "./src/lib/components/kv-button/kv-button.component.scss",
+        "./src/lib/components/kv-table/kv-table.component.scss",
+        "./src/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.scss"
+    ]
+}

package/package.json

@@ -1,42 +1,32 @@
-{
-  "name": "keevo-components",
-  "version": "2.0.105",
-  "peerDependencies": {
-    "@angular/common": "^17.3.8",
-    "@angular/core": "^17.3.8",
-    "@types/d3": "^7.4.3",
-    "@types/d3-org-chart": "^3.1.2",
-    "@types/vkbeautify": "^0.99.4",
-    "chart.js": "^4.4.2",
-    "d3": "^7.9.0",
-    "d3-org-chart": "^3.1.1",
-    "html2canvas": "^1.4.1",
-    "jspdf": "^3.0.1",
-    "ng2-pdf-viewer": "^10.2.2",
-    "ngx-image-cropper": "^8.1.0",
-    "ngx-loading": "^17.0.0",
-    "primeflex": "^3.3.1",
-    "primeicons": "^7.0.0",
-    "primeng": "17.17.0",
-    "quill": "^2.0.2",
-    "vkbeautify": "^0.99.3"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "description": "Componentes utilizados no frontend dos sistemas da Keevo Software.",
-  "module": "fesm2022/keevo-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/keevo-components.mjs",
-      "esm": "./esm2022/keevo-components.mjs",
-      "default": "./fesm2022/keevo-components.mjs"
-    }
-  }
-}
+{
+  "name": "keevo-components",
+  "version": "2.0.107",
+  "peerDependencies": {
+    "@angular/common": "^17.3.8",
+    "@angular/core": "^17.3.8",
+    "@types/d3": "^7.4.3",
+    "@types/d3-org-chart": "^3.1.2",
+    "@types/vkbeautify": "^0.99.4",
+    "chart.js": "^4.4.2",
+    "d3": "^7.9.0",
+    "d3-org-chart": "^3.1.1",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.1",
+    "ng2-pdf-viewer": "^10.2.2",
+    "ngx-image-cropper": "^8.1.0",
+    "ngx-loading": "^17.0.0",
+    "primeflex": "^3.3.1",
+    "primeicons": "^7.0.0",
+    "primeng": "17.17.0",
+    "quill": "^2.0.2",
+    "vkbeautify": "^0.99.3"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "description": "Componentes utilizados no frontend dos sistemas da Keevo Software.",
+  "devDependencies": {
+    "@types/jspdf": "^2.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

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

@@ -0,0 +1,29 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output
+} from '@angular/core';
+
+@Component({
+  template: '',
+})
+export class BaseComponentButton {
+
+  @Input() icon: string = '';
+  @Input() label: string = '';
+  @Input() loading: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() text: boolean = false;
+  @Input() color: string = 'bg-blue-100';
+
+
+
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+
+  constructor() { }
+
+  click(event: any): void {
+    this.onClick.emit();
+  }
+}

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

@@ -0,0 +1,118 @@
+import { Component, EventEmitter, OnInit, Output, ViewChild } from "@angular/core";
+import { Observable } from "rxjs";
+
+import { chartModel } from "../components/chart/chart.model";
+import { ChartConfig, ChartDatasetConfig } from "../components/chart/chart.config";
+import { KvChartComponent, PeriodosChart } from "../../components/kv-chart/kv-chart.component";
+
+@Component({
+  template: ''
+})
+export abstract class BaseChartComponent implements OnInit {
+
+  chartConfig!: ChartConfig;
+  selectedData: number = 0;
+  enablePeriodos: number[] = [];
+  periodos = PeriodosChart;
+
+  @ViewChild(KvChartComponent) chartComponent?: KvChartComponent;
+
+  @Output() onPrintReport: EventEmitter<any> = new EventEmitter();
+
+  constructor() { }
+
+  protected changeData(event: any) {
+    if (event) {
+      this.selectedData = event?.value;
+      this.loadData();
+    }
+  }
+
+  ngOnInit(): void {
+    this.loadData()
+  }
+
+  abstract loadData(): void;
+
+  protected loadGraphic(obs: Observable<any>) {
+    obs
+      .subscribe({
+        next: (data: any) => {
+          this.chartConfig = this.assembleGraphic(data as chartModel[]);
+          this.chartComponent?.reInit(this.chartConfig);
+        },
+        error: (error: any) => { },
+      });
+  }
+
+  protected assembleGraphic(data: chartModel[]) {
+    let labels: string[] = [];
+    let datasets: ChartDatasetConfig[] = [];
+
+    // Tratando legendas
+    data.map((element: any) => {
+      if (element.labels && !labels.includes(element.labels)) {
+        labels.push(element.labels);
+      }
+    });
+
+    //Descobrindo quantas dimensões tem o gráfico
+    let numDatasets = Math.max(...data.map(o => o.numDatasets));
+
+    //Populando datasets
+    for (let i = 0; i <= numDatasets; i++) {
+      let backgroundColor: string[] = [];
+      let hoverBackgroundColor: string[] = [];
+      let borderColor: string[] = [];
+      let values: number[] = [];
+      let labelDataset: string = '';
+      let borderRadius: number = 10;
+      let hoverOffset: number = 0;
+      let borderWidth: number = 0;
+      
+
+      data.filter((obj) => {
+        return obj.numDatasets === i;
+      }).map((obj) => {
+        if (obj.backgroundColor && !backgroundColor.includes(obj.backgroundColor)) {
+          backgroundColor.push(obj.backgroundColor);
+        }
+        if (obj.borderColor && !borderColor.includes(obj.borderColor)) {
+          borderColor.push(obj.borderColor);
+        }
+        if (obj.hoverBackgroundColor && !hoverBackgroundColor.includes(obj.hoverBackgroundColor)) {
+          hoverBackgroundColor.push(obj.hoverBackgroundColor);
+        }
+        if (obj.labelDataset) labelDataset = obj.labelDataset;
+
+        if(obj.borderRadius) borderRadius = obj.borderRadius;
+
+        if(obj.hoverOffset) hoverOffset = obj.hoverOffset;
+
+        if(obj.borderWidth) borderWidth = obj.borderWidth;
+
+        values.push(obj.datasets);
+      });
+
+      datasets.push(
+        {
+          label: labelDataset,
+          backgroundColor: backgroundColor,
+          hoverBackgroundColor: hoverBackgroundColor,
+          borderColor: borderColor?.length === 0 ? undefined : borderColor,
+          data: values,
+          borderRadius: borderRadius,
+          hoverOffset: hoverOffset,
+          borderWidth: borderWidth
+        }
+      );
+    }
+
+    let dados: ChartConfig = {
+      labels: labels,
+      datasets: datasets
+    };
+
+    return dados;
+  }
+}

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

@@ -0,0 +1,377 @@
+import { ActivatedRoute, Router } from '@angular/router';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import {
+  DialogService,
+  DynamicDialogConfig,
+  DynamicDialogRef,
+} from 'primeng/dynamicdialog';
+import { FormGroup, ValidatorFn } from '@angular/forms';
+import { Observable, combineLatest, filter, finalize } from 'rxjs';
+
+import { ActionItem } from '../components/table/action-item';
+import { BaseComponentCrud } from './base-component-crud';
+import { FormService } from '../services/form.service';
+import { NotificationService } from '../services/notification.service';
+import { loading } from '../../components/kv-loader/kv-loader.service';
+
+export interface DadosTela {
+  subTituloForm: string | undefined;
+  tituloForm: string | undefined;
+  rotaListar: string;
+  mensagemValidacao: boolean;
+}
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentCrudForm
+  extends BaseComponentCrud
+  implements OnInit, OnDestroy
+{
+  protected isAccordionExpanded = false;
+  protected isNewRegistry = false;
+  protected isSaveLoading = false;
+  protected isView = false;
+
+  protected formGroup: FormGroup = new FormGroup({});
+  protected actions: ActionItem[] = [];
+
+  protected dadosTela: DadosTela | undefined;
+  protected popup: boolean = false;
+  protected registry: any = null;
+
+  private onSetFormValues: boolean = false;
+
+  constructor(
+    dialogService: DialogService,
+    notificationService: NotificationService,
+    protected activatedRoute: ActivatedRoute,
+    protected dynamicDialogRef: DynamicDialogRef,
+    protected dynamicDialogConfig: DynamicDialogConfig,
+    protected router: Router
+  ) {
+    super(dialogService, notificationService);
+  }
+
+  /**
+   * Método disparado para configuração do form
+   */
+  abstract configureForm(): void;
+
+  /**
+   * Método disparado para o carregamento do form
+   * @param id
+   */
+  abstract loadForm(id: any): void;
+
+  /**
+   * Método disparado para salvamento dos dados
+   */
+  abstract save(): void;
+
+  /**
+   * Método disparado para tratamento das notificações do backend
+   * @param err - Notificação
+   */
+  protected backendError(err: any): void {
+    if (err) {
+      if (err.status == 404) {
+        this.notificationService.toastError(err.error.item2[0].message);
+        return;
+      } else if (err.status == 400) {
+        // Erros de validação de domínio do backend
+        if (Array.isArray(err.error)) {
+          if (err.error?.length) {
+            if (err.error.length == 1 && err.error[0].key == '') {
+              this.notificationService.toastError(err.error[0].message);
+              return;
+            }
+
+            this.invalidForm(err.error);
+            return;
+          }
+        } else if (Array.isArray(err.error.item2)) {
+          if (err.error.item2?.length) {
+            if (err.error.item2.length == 1) {
+              this.notificationService.toastError(err.error.item2[0].message);
+              return;
+            }
+
+            this.invalidForm(err.error.item2);
+            return;
+          }
+        } else if (err.error?.title) {
+          // Erro de json no backend
+          this.notificationService.toastError(err.error.title);
+          return;
+        }
+      } else if (err.status == 415) {
+        if (err.error?.title) {
+          // Erro de json no backend
+          this.notificationService.toastError(err.error.title);
+          return;
+        }
+      }
+
+      // Qualquer outro tipo de erro que tenha mensagem
+      if (err.message) {
+        this.notificationService.toastError(err.message);
+      }
+    }
+  }
+
+  /**
+   * Método disparado ao clicar no botão de cancelamento
+   */
+  protected cancel() {
+    this.notificationService.question({
+      type: 'question',
+      message: 'Deseja cancelar a operação?',
+      accept: () => {
+        this.navigateList();
+      },
+    });
+  }
+
+  /**
+   * Verifica se houveram alterações nos componentes do formControl
+   * @param controls - Nomes do controles no formGroup
+   * @returns Observable
+   */
+  protected detectFormControlChanges(controls: Array<string>): Observable<any> {
+    const controlList: Observable<any>[] = [];
+    controls.forEach((controlName) =>
+      controlList.push(this.formGroup.controls[controlName].valueChanges)
+    );
+    return combineLatest(controlList).pipe(filter(() => !this.onSetFormValues));
+  }
+
+  /**
+   * Método responsável por desabilitar um componente
+   * @param controlName - Nome do controle no formGroup
+   */
+  protected disableComponent(controlName: string) {
+    FormService.disableControl(this.formGroup, controlName);
+  }
+
+  /**
+   * Método responsável por limpar e desabilitar um componente
+   * @param controlName - Nome do controle no formGroup
+   * @param value - Valor default
+   */
+  protected disableAndClearComponent(controlName: string, value?: any) {
+    FormService.disableAndClearControl(this.formGroup, controlName, value);
+  }
+
+  /**
+   * Método responsável por habilitar um componente
+   * @param controlName - Nome do controle no formGroup
+   */
+  protected enableComponent(controName: string) {
+    FormService.enableControl(this.formGroup, controName);
+  }
+
+  /**
+   * Método que retorna o valor de um componente
+   * @param controlName - Nome do controle no formGroup
+   * @returns - Valor
+   */
+  protected getFormValue<T>(controlName: string): T {
+    return FormService.getFormValue<T>(this.formGroup, controlName);
+  }
+
+  /**
+   * Verifica se o componente possui erro
+   * @param controlName - Nome do controle no formGroup
+   */
+  protected hasControlError(controlName: string, errorCode?: string): boolean {
+    return FormService.hasControlError(this.formGroup, controlName, errorCode);
+  }
+
+  /**
+   * Seta inconsistências para o fomulário
+   * @param notification - Lista de notificações
+   */
+  protected invalidForm(notification?: any) {
+    FormService.invalidForm(this.formGroup, notification);
+  }
+
+  /**
+   * Tratamento de inconsistências do formulário
+   */
+  protected invalidateForm() {
+    this.isAccordionExpanded = true;
+    this.invalidForm();
+
+    if (this.dadosTela?.mensagemValidacao) {
+      this.notificationService.dialog({
+        type: 'alert',
+        message: 'Verifique os campos obrigatórios.',
+      });
+    }
+  }
+
+  /**
+   * Método responsável pelo carregamento da tela
+   * @param obs - Observable responsável pelo salvamento dos dados
+   */
+  public loadData<T>(obs: Observable<any>, setFormValuesCallback?: (data: T) => void) {
+    obs.pipe(loading()).subscribe((data: any) => {
+      this.isNewRegistry = false;
+      this.registry = data as T;
+
+      if(!setFormValuesCallback)
+        this.setFormValues(this.registry);
+      else
+        setFormValuesCallback(this.registry);
+
+      this.loadGrids();
+      this.setTitlePopup();
+    });
+  }
+
+  async loadDataAsync<T>(obs: Observable<any>, setFormValuesCallback?: (data: T) => void) {
+    await obs.pipe(loading()).toPromise();
+    const data: any = await obs.toPromise();
+
+    this.isNewRegistry = false;
+    this.registry = data as T;
+
+    if(!setFormValuesCallback)
+      this.setFormValues(this.registry);
+    else
+      setFormValuesCallback(this.registry);
+
+    this.loadGrids();
+    this.setTitlePopup();
+  }
+
+  /**
+   * Método disparado para carregamento de grids (Disparado após o loadData)
+   */
+  public loadGrids() {}
+
+  /**
+   * Método disparado para retornar a lista
+   */
+  protected navigateList(id: any = null) {
+    if (this.popup) {
+      this.dynamicDialogRef.close(id);
+    } else if (this.dadosTela?.rotaListar) {
+      this.router.navigate([this.dadosTela.rotaListar]);
+    }
+  }
+
+  public ngOnDestroy() {
+    if (this.dynamicDialogRef) {
+      this.dynamicDialogRef.close();
+    }
+  }
+
+  public ngOnInit() {
+    this.configureForm();
+
+    this.popup = this.dynamicDialogConfig?.data?.popup || false;
+
+    this.activatedRoute.params.subscribe((params: any) => {
+      if (params['id']) {
+        this.loadForm(params['id']);
+      } else if (this.dynamicDialogConfig?.data?.id) {
+        this.loadForm(this.dynamicDialogConfig.data.id);
+      } else {
+        this.isNewRegistry = true;
+        this.loadGrids();
+        this.setTitlePopup();
+      }
+    });
+  }
+
+  /**
+   * Método disparado para salvar dados
+   * @param obs - Observable responsável pelo salvamento dos dados
+   */
+  protected saveData(obs: Observable<any>) {
+    obs
+      .pipe((src: Observable<any>) => {
+        this.isSaveLoading = true;
+        return src.pipe(
+          finalize(() => {
+            this.isSaveLoading = false;
+          })
+        );
+      })
+      .subscribe({
+        next: (res: any) => {
+          this.notificationService.toastSuccess(res.item2[0].message);
+          this.navigateList(res.item1);
+        },
+        error: (e) => {
+          this.backendError(e);
+        },
+      });
+  }
+
+  /**
+   * Método se atualiza o valor de um componente do formGroup
+   * @param controName - Nome do controle
+   * @param value - Valor para atualização
+   */
+  protected setControlValue(controName: string, value: any) {
+    FormService.setControlValue(this.formGroup, controName, value);
+  }
+
+  /**
+   * Atualiza valores dos componentes do formGroup
+   * @param values - Valores para atualização
+   */
+  protected setFormValues(values: any) {
+    this.onSetFormValues = true;
+    this.formGroup.patchValue(values, { emitEvent: false });
+    this.onSetFormValues = false;
+  }
+
+  /**
+   * Seta o título do popup
+   */
+  private setTitlePopup() {
+    if (this.popup) {
+      if (this.dynamicDialogConfig)
+        this.dynamicDialogConfig.header = this.dadosTela?.tituloForm;
+    }
+  }
+
+  /**
+   * Atualiza o validador de um componente do formGroup
+   * @param controName - Nome do controle
+   * @param validators - Regra de validação
+   */
+  protected setValidators(
+    controName: string,
+    validators: ValidatorFn | ValidatorFn[] | null
+  ) {
+    FormService.setValidators(this.formGroup, controName, validators);
+  }
+
+  /**
+   * Dispara os métodos de validações do formulário
+   * @returns - True/False
+   */
+  protected validateForm(): boolean {
+    let valid: boolean = false;
+
+    if (this.formGroup && this.formGroup.valid) {
+      valid = true;
+    } else {
+      this.invalidateForm();
+    }
+
+    return valid;
+  }
+
+  /**
+   * Método que dispara a atualização da página inteira
+   */
+  protected refresh() {
+    window.location.reload();
+  }
+}