keevo-components 2.0.106 → 2.0.107

package/src/lib/components/kv-orgchart/kv-orgchart.component.html

@@ -0,0 +1,125 @@
+<div #chartContainer id="chartContainer" [ngClass]="{ backGround: true }">
+  <div class="div-botoes w-full flex gap-1">
+    <div
+      id="menubar"
+      class="shadow-2 flex justify-content-between align-content-center"
+    >
+      <div class="grid formgrid p-fluid flex-grow-1">
+        <!-- <div #filterContainer class="col-4 grid formgrid p-fluid">
+            <kv-input-text class="col-12" #filtro (onInput)="pesquisar($event)">
+            </kv-input-text>
+          </div>
+
+          @if(filtrosOpt().length > 0) {
+ 
+              <div id="filtro-org-chart" [style.width.px]="filterContainer.offsetWidth*0.9">
+
+                @for (opt of filtrosOpt(); track $index) {
+                  <div class="filtro-org-chart-item">
+                    {{ opt.data.name }}
+
+                  </div>
+
+                }
+
+              </div>
+
+          } -->
+
+        <p-dropdown
+          #filter
+          placeholder="Filtrar..."
+          [style]="{
+            height: '30px',
+            'display': 'flex',
+            'align-items': 'center',
+            'margin-left': '15px',
+            'max-width': '95%'
+          }"
+          [filter]="true"
+          [filterFields]="config.filters"
+          [options]="this.dataSource()!"
+          [showClear]="true"
+          (onChange)="centralizarNo($event.value.id)"
+        >
+          <!-- [itemTemplate]="itemTemplate"
+              [selectedItemTemplate]="selectedItemTemplate" -->
+          <!-- [filteredOptions]="this.dataSource()!" -->
+          <!-- [filterFields]="data.name" -->
+
+          <ng-template #itemTemplate let-item pTemplate="item">
+            <ng-container
+              [ngTemplateOutlet]="filterItemTemplate!"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          </ng-template>
+
+          <ng-template #selectedItemTemplate let-item pTemplate="selectedItem">
+            <ng-container
+              [ngTemplateOutlet]="filterSelectedItemTemplate!"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          </ng-template>
+        </p-dropdown>
+      </div>
+
+      <!-- Actions bar -->
+      <div class="flex gap-1 flex-row flex-grow-0">
+        <div style="width: 30px" class="mr-2">
+          <kv-button
+            (onClick)="chart.expandAll()"
+            class="button-expand-all"
+            [fullWidth]="false"
+            size="small"
+            severity="tertiary"
+            [icon]="'expand_all'"
+            [pTooltip]="'Expandir Todos'"
+          >
+          </kv-button>
+        </div>
+
+        <div style="width: 30px" class="mr-2">
+          <kv-button
+            (onClick)="chart.collapseAll()"
+            class="button-colappse-all"
+            [fullWidth]="false"
+            size="small"
+            severity="tertiary"
+            [icon]="'collapse_all'"
+            [pTooltip]="'Recolher Todos'"
+          >
+          </kv-button>
+        </div>
+
+        <div style="width: 30px" class="mr-2">
+          <kv-button
+            (onClick)="chart.fit().render()"
+            class="button-focus-center"
+            [fullWidth]="false"
+            size="small"
+            severity="primary"
+            [icon]="'center_focus_weak'"
+            [pTooltip]="'Centralizar Organograma'"
+          >
+          </kv-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+/>
+
+<div style="display: none">
+  <ng-template #nodeTemplate let-node>
+    <div class="node-content">erro</div>
+  </ng-template>
+</div>

package/src/lib/components/kv-orgchart/kv-orgchart.component.scss

@@ -0,0 +1,73 @@
+#chartContainer{
+  height: 100%;
+  overflow: hidden;
+
+}
+:host ::ng-deep #chartContainer svg.svg-chart-container {
+  height: 100% !important;
+  position: relative;
+  width: 100%;
+  top: -56px;
+  z-index: 0;
+  background-color: #fff;
+}
+.div-botoes{
+  z-index: 1;
+  width:  100%;
+  position: relative;
+}
+
+
+
+
+
+/* your-component.css */
+:host ::ng-deep .p-organizationChart {
+  overflow: hidden;
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+}
+
+#menubar{
+  width: 100%;
+  padding: 5px;
+  border-radius: 8px;
+  background: #EAEAEA;
+
+
+
+}
+.filtro-input{
+  width: 300px;
+}
+#filtro-org-chart{
+  height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+  top: 40px;
+  left: 8px;
+  background: #ffffff;
+  color: #4b5563;
+  border: 0 none;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+}
+
+.filtro-org-chart-item{
+  cursor: pointer;
+  height: 35px;
+  padding: 3px;
+
+  &:hover {
+    background-color: #D9DADB;
+  }
+
+  &:active {
+      background-color: #C0C1C2;
+  }
+}

package/src/lib/components/kv-orgchart/kv-orgchart.component.ts

@@ -0,0 +1,283 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  model,
+  Output,
+  signal,
+  SimpleChanges,
+  TemplateRef,
+  viewChild,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+
+import { OrgChart } from 'd3-org-chart';
+import * as d3 from 'd3';
+
+import OrgChartConfig from '../../api/components/chart/orchart.config';
+import OrgChartNode from '../../api/components/chart/orchartnode';
+import { fromEvent, Subscription } from 'rxjs';
+import { OrgChartService } from '../../api/services/orgchart.service';
+
+import { FilterService } from 'primeng/api';
+import { Dropdown, DropdownModule } from 'primeng/dropdown';
+
+
+@Component({
+  selector: 'kv-orgchart',
+  templateUrl: './kv-orgchart.component.html',
+  styleUrls: ['./kv-orgchart.component.scss'],
+})
+export class KvOrgchartComponent {
+
+
+  chart!: any;
+
+  dataSource = model<OrgChartNode[] | null>(null);
+
+  filtrosOpt = signal<OrgChartNode[]>([]);
+  selectedOpt = null
+
+  @Input() config!: OrgChartConfig;
+  @ViewChild('chartContainer') chartContainer!: ElementRef;
+  @ViewChild('nodeTemplate', { read: ViewContainerRef })
+  viewContainerRef!: ViewContainerRef;
+  @Input() nodeTemplate!: TemplateRef<any>;
+
+  @Input() filterItemTemplate!: TemplateRef<any>;
+  @Input() filterSelectedItemTemplate!: TemplateRef<any>;
+
+
+
+  //#region Emissores de evento
+
+  @Output() onNodeClick = new EventEmitter<any>();
+
+  // #endregion
+
+  compact: boolean = true;
+  mostraMenu: boolean = false;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private service: OrgChartService,
+    private filterService: FilterService
+  ) {}
+
+  //#region Iniciar OrgChart e Atualização de dados
+  ngOnInit(): void {
+    this.iniciarHandlersDeEventos();
+  }
+
+  ngAfterViewInit() {
+    if (!this.chart) {
+      this.chart = new OrgChart();
+    }
+    this.iniciarChart();
+  }
+
+  iniciarChart() {
+    if (!this.dataSource() || !this.chart) {
+      return;
+    }
+
+    const chartContainer = this.chartContainer.nativeElement;
+    this.chart
+      .createZoom(() => {
+        return d3.zoom().filter((e) => {
+          const element: HTMLElement = e.srcElement;
+          if (element.classList.contains('no-zoom')) {
+            return false;
+          }
+          return true;
+        });
+      })
+      .container(chartContainer)
+      .data(this.dataSource())
+      .nodeWidth(() => this.config.cardWidht)
+      .nodeHeight((d: any) => {
+        return d.data.expanded && this.config.cardExpandedHeight
+          ? this.config.cardExpandedHeight
+          : this.config.cardHeight;
+      })
+      .compact(false)
+      .buttonContent(({ node, state }: { node: any; state: any }) => {
+        return `<div style="color:#FFFFFF; border-radius:100%;font-size:5px;margin:auto auto;background-color:#64748B;">
+          <span>
+          ${
+            node.children && node.children.length > 0
+              ? `<i class="material-symbols-outlined">
+              keyboard_arrow_up
+              </i>`
+              : `<i class="material-symbols-outlined">
+              keyboard_arrow_down
+            </i>`
+          }
+          </span>
+            </div>`;
+      })
+      .linkUpdate((node: any, index: any, nodes: any) => {
+        d3.select(nodes[index])
+          .attr('stroke-width', this.config.conectionWidth || '2px')
+          .style('stroke', this.config.connectionColor || '#d6d6d6');
+      })
+      .nodeContent((d: any) => {
+        const node: OrgChartNode = {
+          data: d.data.data,
+          children: d.children,
+          id: d.data.id,
+          parentId: d.data.parentId,
+          expanded: d.data.expanded,
+          orgConfig: d.orgConfig,
+        };
+        const x = this.renderNodeTemplate(node);
+        return x;
+      })
+      .nodeUpdate(function (this: any, d: any) {
+        d.data.orgConfig.clicks.forEach((click: any) => {
+          d3.select(this)
+            .select(click)
+            .on('click', (e, d) => {
+              const dados: any = d;
+              const node: OrgChartNode = {
+                data: dados.data.data,
+                children: dados.children,
+                id: dados.data.id,
+                parentId: dados.data.parentId,
+                expanded: dados.data.expanded,
+                orgConfig: dados.orgConfig,
+              };
+
+              window.dispatchEvent(
+                new CustomEvent('KvOrgChart_NodeClick', {
+                  detail: {
+                    node,
+                    seletor: click,
+                  },
+                })
+              );
+            });
+        });
+      })
+      .defaultFont('Roboto')
+      .render();
+
+    this.chart.expandAll();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['dataSource']) {
+      this.iniciarChart();
+    }
+  }
+  //#endregion
+
+  // #region Renderização de template
+  renderNodeTemplate(node: OrgChartNode): string {
+    this.viewContainerRef.clear();
+    const view = this.viewContainerRef.createEmbeddedView(this.nodeTemplate, {
+      node: node,
+    });
+    this.cdr.detectChanges();
+    return view.rootNodes[0].outerHTML;
+  }
+  // #endregion
+
+  // #region Eventos
+  private nodeClickSubscription!: Subscription;
+  private nodeAddSubscription!: Subscription;
+  private nodeRemoveSubscription!: Subscription;
+
+  iniciarHandlersDeEventos() {
+    this.nodeClickSubscription = fromEvent<CustomEvent>(
+      window,
+      'KvOrgChart_NodeClick'
+    ).subscribe((event: CustomEvent) => {
+      this.emitirClick(event.detail.node, event.detail.seletor);
+    });
+
+    this.nodeAddSubscription = this.service.nodeAdd$.subscribe(
+      (node: OrgChartNode) => {
+        this.adicionarNode(node);
+      }
+    );
+
+    this.nodeRemoveSubscription = this.service.nodeRemove$.subscribe(
+      (id: number) => {
+        this.removerNode(id);
+      }
+    );
+  }
+  ngOnDestroy(): void {
+    this.nodeClickSubscription.unsubscribe();
+    this.nodeAddSubscription.unsubscribe();
+    this.nodeRemoveSubscription.unsubscribe();
+  }
+
+  emitirClick(node: Node, seletorCss?: string) {
+    const event = {
+      node: node,
+      seletorCss: seletorCss ?? '',
+    };
+    this.onNodeClick.emit(event);
+  }
+  adicionarNode(node: OrgChartNode) {
+    const arr = [...this.dataSource()!, node];
+    this.dataSource.set(arr);
+    this.iniciarChart();
+  }
+  removerNode(id: number) {
+    const indPai = this.dataSource()!.some((x: any) => x.parentId == id);
+    if (indPai) {
+      alert('Não é possível remover um nó que possui filhos');
+    } else {
+      const arr = this.dataSource()!.filter((x: any) => x.id != id);
+      this.dataSource.set(arr);
+      this.iniciarChart();
+    }
+  }
+  // #endregion
+
+
+
+  // #region Funções de utilidade
+
+  pesquisar(e: any) {
+    const valor = e.target.value
+    this.filtrosOpt.set(this.filtrarArray(valor)!)
+  }
+
+  filtrarArray(valor: string): OrgChartNode[] | null {
+    if (valor && this.config.filters) {
+      const dataSource = this.dataSource()!;
+      const valorLower = valor.toLowerCase(); // Converte o valor de busca para minúsculas
+
+      const arr = dataSource.filter((node: OrgChartNode) => {
+        return this.config.filters!.every((filter: string) => {
+          // Converte os valores para minúsculas e verifica se contém a string de busca
+          return node.data[filter].toLowerCase().includes(valorLower);
+        });
+      });
+
+      return arr ?? null;
+    } else {
+      return null;
+    }
+  }
+
+  @ViewChild('filter') filter!: Dropdown;
+
+
+  centralizarNo(id: any) {
+    console.log(id)
+    this.chart.setCentered(id).render()
+    this.filter.hide()
+    this.filter.clear()
+  }
+
+
+  // #endregion
+}

package/src/lib/components/kv-orgchart/kv-orgchart.module.ts

@@ -0,0 +1,31 @@
+import { kvErrorModule } from './../kv-error/kv-error.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvOrgchartComponent } from './kv-orgchart.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { OrganizationChartModule } from 'primeng/organizationchart';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import {  DropdownModule } from 'primeng/dropdown';
+import { FormsModule } from '@angular/forms';
+import { FloatLabelModule } from 'primeng/floatlabel';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+    kvErrorModule,
+    PrimeNgModule,
+    OrganizationChartModule,
+    KvButtonModule,
+    KvInputsModule,
+    AutoCompleteModule,
+    DropdownModule,
+    FloatLabelModule
+  ],
+  declarations: [KvOrgchartComponent],
+  exports: [KvOrgchartComponent]
+})
+export class KvOrgchartModule { }

package/src/lib/components/kv-page-form/kv-page-form.component.html

@@ -0,0 +1,91 @@
+<div
+  [formGroup]="formGroup"
+  class="h-full flex flex-column overflow-hidden relative p-0 m-0"
+>
+  <!-- Renderização do form -->
+  <div class="m-0 {{!popup && 'p-3'}} h-full flex-1 overflow-y-auto page-content">
+    <ng-content></ng-content>
+  </div>
+
+  <!-- Divider -->
+  <!-- <p-divider class="col-12"></p-divider> -->
+
+  <!-- Barra de ações -->
+
+  <div
+    class="flex flex-column md:flex-row md:justify-content-end md:align-items-center col-12 gap-2 barra-acoes flex-init border-round-bottom-md p-2"
+    id="barra-acoes"
+  >
+    @if(showMessageCamposObrigatorios) {
+    <span class="w-full text-xs text-gray-500 font-medium">
+      <span class="font-bold">*</span> Preenchimento obrigatório</span>
+    }
+
+    <kv-button
+      *ngIf="showBtnCancel"
+      [label]="txtBtnCancel"
+      [icon]="iconBtnCancel"
+      [disabled]="isSaveLoading"
+      (onClick)="cancel($event)"
+      class="w-full md:w-auto"
+      severity="secondary"
+      type="text"
+    >
+    </kv-button>
+
+    <kv-button
+      *ngIf="actionsCancelToogle && showBtnCancelToogle"
+      [label]="txtBtnCancelToogle"
+      class="w-full md:w-auto"
+      [severity]="'secondary'"
+      type="text"
+      [disabled]="isSaveLoading"
+      [popup]="true"
+      [items]="actionsCancelToogle"
+      iconPosition="left"
+    />
+
+    <kv-button
+      *ngIf="showBtnSecundary"
+      [label]="txtBtnSecundary"
+      [icon]="iconBtnSecundary"
+      [disabled]="isSaveLoading"
+      severity="tertiary"
+      (onClick)="actionSecundary($event)"
+      class="w-full md:w-auto"
+    />
+
+    <kv-button
+      *ngIf="actionsToogle && showBtnToogle"
+      [label]="txtBtnToogle"
+      [icon]="iconBtnToogle"
+      class="w-full md:w-auto"
+      severity="tertiary"
+      [disabled]="isSaveLoading"
+      [popup]="true"
+      [items]="actionsToogle"
+    />
+
+    <kv-button
+      *ngIf="showBtnSave"
+      [label]="txtBtnSave"
+      [icon]="iconBtnSave"
+      [disabled]="disableBtnSave"
+      [loading]="isSaveLoading"
+      (onClick)="save($event)"
+      severity="primary"
+      class="w-full md:w-auto"
+    />
+
+    <kv-button
+      *ngIf="actionsSaveToogle && showBtnSaveToogle"
+      [label]="txtBtnSaveToogle"
+      [icon]="iconBtnSaveToogle"
+      [loading]="isSaveLoading"
+      class="w-full md:w-auto"
+      [severity]="'primary'"
+      [popup]="true"
+      [items]="actionsSaveToogle"
+    />
+  </div>
+</div>

package/src/lib/components/kv-page-form/kv-page-form.component.scss

@@ -0,0 +1,100 @@
+// ::ng-deep .p-dialog .p-dialog-header {
+//     color: white !important;
+//     background: #002542 !important;
+//     display: flex !important;
+//     flex-wrap: wrap;
+// }
+
+::ng-deep .p-dialog .p-dialog-content {
+    padding: 0.75rem !important;
+}
+
+// ::ng-deep .p-dialog {
+//     min-width: 320px;
+// }
+
+// .sub-title {
+//     // color: white !important;
+//     color: yellow;
+//     position: relative;
+//     bottom: 25px;
+//     z-index: 1;
+// }
+
+// ::ng-deep .p-dialog-content {
+
+//     &::-webkit-scrollbar {
+//         width: 8px;
+
+//         &:hover {
+//             background-color: rgba(222, 222, 222, 0.75);
+//         }
+//     }
+
+//     &::-webkit-scrollbar-thumb {
+//         border-radius: 4px;
+//         background-color: transparent;
+//     }
+
+//     &:hover::-webkit-scrollbar-thumb {
+//         border-left: 2px solid white;
+//         background-color: rgba(0, 0, 0, 0.5);
+//     }
+
+//     &::-webkit-scrollbar-track {
+//         border-left: 2px solid white;
+//         background-color: rgba(222, 222, 222, 0.75);
+//     }
+
+//     overflow-x: hidden;
+// }
+
+::ng-deep .page-content {
+  &::-webkit-scrollbar {
+    width: 6px;
+
+    &:hover {
+      background-color: rgba(222, 222, 222, 0.75);
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    border-left: 2px solid white;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-left: 2px solid white;
+    background-color: rgba(222, 222, 222, 0.75);
+  }
+
+  overflow-x: hidden;
+}
+
+* {
+  padding-bottom: 0rem;
+  padding-top: 0rem;
+}
+
+.barra-acoes {
+  bottom: 0;
+  right: 0;
+  background-color: rgb(255, 255, 255);
+  // z-index: 999;
+}
+
+// #page-form-container {
+//   height: 100% !important;
+//   padding-bottom: 40px;
+// }
+
+// @media screen and (max-width: 768px) {
+//   #page-form-container {
+//     padding-bottom: 100px;
+//   }
+// }