keevo-components 1.5.189 → 1.5.191

package/src/lib/menu/menu.component.scss

@@ -0,0 +1,210 @@
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1em;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga';
+}
+
+::ng-deep .p-button:focus {
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+}
+
+::ng-deep .p-overlaypanel .p-overlaypanel-content {
+  padding: 0;
+}
+
+::ng-deep.hover-btn-cor-padrao.p-button:enabled:hover {
+  background: #0c3e66;
+  border-color: #002542;
+}
+
+.p-button.p-button-icon-only.p-button-rounded {
+  background: #0c3e66;
+  border-color: #002542;
+}
+
+::ng-deep.remove-focus:focus {
+  border: none;
+}
+
+
+::ng-deep.p-sidebar .p-sidebar-content {
+  padding: 0;
+}
+
+::ng-deep.sidebar-header-sistema.p-sidebar .p-sidebar-header {
+  padding-top: 0.5rem;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  display: block;
+}
+
+.btn-sistema {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #0c3e66;
+  font-size: 20px;
+}
+
+::ng-deep .p-sidebar .p-sidebar-header {
+  padding: 0rem !important;
+}
+
+::ng-deep body {
+  // display: initial;
+  margin: 0px !important;
+}
+
+::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron {
+  position: relative;
+  top: 3px;
+  color: #0c3e66 !important;
+}
+
+// .page-content {
+//   background: linear-gradient(to bottom, #d4d3d3 20%, #ffffff 30%);
+// }
+
+.page-content {
+  background: linear-gradient(to bottom, #d4d3d3 16%, #ffffff 19%);
+}
+
+* {
+  margin: 0;
+}
+
+p .item-menu {
+  color: #0c3e66;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+}
+
+::ng-deep .p-breadcrumb ul li:last-child .p-menuitem-text {
+  color: #0c3e66 !important;
+  font-weight: 700;
+  font-size: 0.8rem !important;
+}
+
+::ng-deep .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+
+  color: #0c3e66 !important;
+  font-weight: 500;
+  font-size: 0.8rem !important;
+}
+
+span,
+.breadcrumb-title {
+  font-size: 14px !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+}
+
+::ng-deep .card-container {
+
+  &::-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;
+}
+
+.title-style {
+  position: relative;
+  top: 10px;
+  margin-left: 20px;
+  font-size: 25px;
+  color: #002542;
+  border-bottom: 2px solid green;
+  font-weight: 600;
+  display: inline;
+}
+
+::ng-deep p-sidebar .p-sidebar-content {
+  overflow-y: hidden;
+}
+
+::ng-deep p-dialog .p-dialog-content {
+  overflow-y: unset;
+}
+
+.icon-menu {
+  color: #002542;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+::ng-deep .padding-style {
+  padding: 15px !important;
+}
+
+::ng-deep .menu-option {
+  padding: 15px 5px 15px 5px !important;
+
+}
+
+::ng-deep .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
+  color: #183462 !important;
+  opacity: 0.95;
+  font-weight: 500;
+  font-size: 0.8rem !important;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.pl-3 {
+  padding-left: 0rem !important;
+}
+
+::ng-deep svg.p-icon {
+  width: 0.7rem;
+  height: 1rem;
+}
+
+.hover-color .text-base {
+  color: rgb(255, 255, 255) !important;
+  /* Escolha a cor desejada aqui */
+}
+
+
+.hover-color .icon-hover-color {
+  color: rgb(255, 255, 255) !important;
+  /* Escolha a cor desejada aqui */
+}

package/src/lib/menu/menu.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+
+describe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MenuComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/menu/menu.component.ts

@@ -0,0 +1,246 @@
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core';
+
+import { Sidebar } from 'primeng/sidebar';
+import { OverlayPanel } from 'primeng/overlaypanel';
+
+import { MasterComboModel } from 'keevo-api-services-keevocenter';
+import { menuCompletoModel } from '../api/models/menu/menucompleto.model';
+import { menuModel } from '../api/models/menu/menu.model';
+
+@Component({
+  selector: 'kv-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss'],
+})
+export class MenuComponent implements OnInit {
+
+  @Input() menuCompleto: menuCompletoModel[] = [];
+  @Input() licencas: MasterComboModel[] = []
+  @Input() licencaSelecionada!: MasterComboModel;
+  @Input() logoImage!: any;
+  @Input() nomeUsuario!: string;
+  @Input() breadCrumbs: boolean = false;
+
+  @Output() licencaChange: EventEmitter<any> = new EventEmitter();
+  @Output() gerenciarKeePassEvent: EventEmitter<any> = new EventEmitter();
+  @Output() sairEvent: EventEmitter<any> = new EventEmitter();
+  @Output() expandMenuEmit: EventEmitter<boolean> = new EventEmitter();
+  @Output() trocarLicencaEmit: EventEmitter<boolean> = new EventEmitter();
+
+  @ViewChild('sidebarRef') sidebarRef!: Sidebar;
+  @ViewChild('sistemasPanel') sistemasPanel!: OverlayPanel;
+  @ViewChild('meusDadosPanel') meusDadosPanel!: OverlayPanel;
+
+  licencasOptions: { id: number, descricao: string, cpfcnpj: string }[] = []
+  licencaSelected!: { id: number, descricao: string, cpfcnpj: string };
+
+  menusFiltrados: menuCompletoModel[] = [];
+  menus: menuModel[] = [];
+
+  breadCrumbItems: { label: string, routerLink: string }[] = [];
+
+  heigthCard!: number;
+  widthCard!: number;
+  expandMenu: boolean = true;
+
+  visibleDialogLicenca: boolean = false;
+
+  mouseOverIndex: any;
+  mouseOverFilhoIndex: any;
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.heigthCard = Number(document.getElementById('page-content')?.offsetHeight);
+    this.widthCard = Number(window.innerWidth) - (this.expandMenu ? 333 : 93);
+    this.cdr.detectChanges();
+  }
+
+  constructor(private cdr: ChangeDetectorRef, protected router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.configurarLicencas();
+
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        // console.log('Evento de navegação:', event);
+        this.breadCrumbItems = this.getBreadcrumbs(event.url);
+        // console.log("breadCrumbItems ->", this.breadCrumbItems);
+      }
+    });
+
+    this.heigthCard = Number(document.getElementById('page-content')?.offsetHeight);
+    this.widthCard = Number(window.innerWidth) - (this.expandMenu ? 333 : 93);
+  }
+
+  configurarLicencas() {
+    setTimeout(() => this.setLicenca(), 1500)
+
+    this.licencas.forEach((x, i) => {
+      this.licencasOptions.push({
+        id: i,
+        descricao: x.nome,
+        cpfcnpj: x.cpfcnpj
+      })
+    })
+
+    var licenca = this.licencasOptions.find((x) => x.cpfcnpj == this.licencaSelecionada.cpfcnpj);
+
+    if (licenca != undefined)
+      this.licencaSelected = licenca;
+  }
+
+  private getBreadcrumbs(url: string = '', breadcrumbs: { label: string, routerLink: string }[] = []): { label: string, routerLink: string }[] {
+
+    if (!url || url === '/') {
+      return breadcrumbs.length > 0 ? breadcrumbs : [{ label: 'Home', routerLink: '/' }];
+    }
+
+    const segments = url.split('/').filter(segment => segment !== '');
+
+    let currentUrl = '';
+    for (const segment of segments) {
+      currentUrl += `/${segment}`;
+      breadcrumbs.push({ label: segment, routerLink: currentUrl });
+    }
+
+    if (breadcrumbs.length > 0) {
+      breadcrumbs.forEach(item => {
+        let labelSegments = item.label.split('-');
+        labelSegments = labelSegments.map((segment, index) => {
+          return index === 0 ? segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase() : segment;
+        });
+        item.label = labelSegments.join(' ');
+      });
+    }
+    return breadcrumbs;
+  }
+
+  closeCallback(e: Event): void {
+    this.sidebarRef.close(e);
+  }
+
+  MascaraNomeLicenca(nomeLicenca: any): string {
+    if (nomeLicenca) {
+      if (nomeLicenca.length > 24)
+        return nomeLicenca.substring(0, 24) + '...';
+      else return nomeLicenca;
+    } else return '';
+  }
+
+  MascaraCnpj(cpfcnpj: string): string {
+    const cpfcnpjLimpo = cpfcnpj.replace(/\D/g, '');
+
+    return cpfcnpjLimpo.replace(
+      /^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/,
+      '$1.$2.$3/$4-$5'
+    );
+  }
+
+  definirMenusPorSistema(idsistema: number) {
+    this.menus =
+      this.menuCompleto.find((x) => x.sistema.idsistema == idsistema)?.menus ||
+      [];
+
+    // console.log(this.menus, 'menus')
+    // console.log(this.menuCompleto, 'menuCompleto')
+    // console.log(this.menus[0].menupai, 'menupai')
+
+    if (this.menus[0].menupai) {
+      var filhos = this.retornarMenuFilhos(this.menus[0].idsistema, this.menus[0].idmenu);
+      if (filhos != undefined)
+        this.callRoute(filhos[0].link, true)
+    } else this.callRoute(this.menus[0].link, true)
+
+    this.sistemasPanel.hide();
+  }
+
+  retornarMenuFilhos(idsistema: number, idmenu: number) {
+    return this.menuCompleto
+      .find((x) => x.sistema.idsistema == idsistema)
+      ?.menus.filter((x) => x.idmenupai == idmenu);
+  }
+
+  callRoute(e: any, expand?: boolean) {
+    if (!expand)
+      !this.expandMenu ? this.expandMenu = !this.expandMenu : ''
+    this.router.navigateByUrl(e)
+  }
+
+  toggleMenu() {
+    this.expandMenu = !this.expandMenu;
+    this.expandMenuEvent()
+  }
+
+  trocarLicenca() {
+    this.trocarLicencaEmit.emit();
+  }
+
+  setLicenca() {
+    var licenca = this.licencas.find((licenca) => licenca.idmaster == this.licencaSelected.id);
+    if (licenca) this.licencaSelecionada = licenca;
+
+    this.visibleDialogLicenca = false
+
+    this.licencaChange.emit(this.licencaSelecionada);
+
+    this.definirMenusPorSistema(this.menuCompleto[0]?.sistema.idsistema)
+  }
+
+  gerenciarKeePass(event: any) {
+    this.sistemasPanel.hide();
+    this.gerenciarKeePassEvent.emit(event)
+  }
+
+  sair(event: any) {
+    this.sistemasPanel.hide();
+    this.sairEvent.emit(event)
+  }
+
+  expandMenuEvent() {
+    this.expandMenuEmit.emit(this.expandMenu);
+  }
+
+  ajustarHeigthCard(): number {
+    if (this.widthCard > 400) {
+      if (this.breadCrumbs) return 105
+      else return 85
+    } else return 83
+  }
+
+  verificarPaginaSelecionada(link: any): boolean {
+    return this.router.url.includes(link);
+  }
+
+  // retornarTituloBreadCrumbs(label: any): string {
+  //   if (label)
+  //     return this.breadCrumbItems[this.breadCrumbItems.length - 1]?.label
+  //   else return '';
+  // }
+
+  retornarTituloBreadCrumbs(str: string) {
+
+    if (str.includes('-')) {
+      str = str.replace('-', ' ');
+    }
+
+    var primeiraLetra = str.charAt(0).toUpperCase() + str.slice(1);
+
+    str.slice(1);
+
+    return primeiraLetra;
+  }
+
+  onMouseEnter(index: number) {
+    this.mouseOverIndex = index;
+  }
+
+  onMouseFilhoEnter(index: number) {
+    this.mouseOverFilhoIndex = index;
+  }
+
+  onMouseLeave() {
+    this.mouseOverIndex = null;
+    this.mouseOverFilhoIndex = null;
+  }
+}

package/src/lib/orgchart/orgchart.component.html

@@ -0,0 +1,58 @@
+<div #chartContainer id="chartContainer" [ngClass]="{'backGround': true}">
+
+
+  <div class="div-botoes w-full flex gap-1" >
+
+
+    <span *ngIf="!mostraMenu" class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+    (click)="mostraMenu = !mostraMenu" pTooltip="Expandir menu">menu</span>
+
+
+
+    <span *ngIf="mostraMenu" class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+    (click)="mostraMenu = !mostraMenu" pTooltip="Recolher menu">menu_open</span>
+
+    <div *ngIf="mostraMenu">
+      <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.zoomIn()" pTooltip="Zoom +">zoom_in</span>
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.zoomOut()" pTooltip="Zoom -">zoom_out</span>
+
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.collapseAll()" pTooltip="Expandir">expand_less</span>
+
+    <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="chart.expandAll()" pTooltip="Recolher">expand_more</span>
+
+
+    <!-- <span class="surface-300 shadow-4 p-1 m-2 border-circle material-icons cursor-pointer"
+      (click)="compactSwap()" pTooltip="Compactar">cached</span> -->
+
+    <span class="material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer"
+      (click)="chart.fit().render()" pTooltip="Centralizar">
+      filter_center_focus
+    </span>
+
+    <span class="material-icons surface-300 shadow-4 p-1 m-2 border-circle cursor-pointer"
+      (click)="chart.fullscreen('#chartContainer')" pTooltip="Tela cheia" >
+      fullscreen
+    </span>
+
+    </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"
+/>

package/src/lib/orgchart/orgchart.component.scss

@@ -0,0 +1,21 @@
+#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;
+}
+
+
+

package/src/lib/orgchart/orgchart.component.ts

@@ -0,0 +1,118 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+  RendererFactory2,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { OrgChart } from 'd3-org-chart';
+import * as d3 from 'd3';
+import OrgChartItem from '../api/components/chart/orchart.item';
+import OrgChartConfig from '../api/components/chart/orchart.config';
+
+@Component({
+  selector: 'kv-orgchart',
+  templateUrl: './orgchart.component.html',
+  styleUrls: ['./orgchart.component.scss',],
+})
+export class OrgchartComponent implements OnInit {
+  @ViewChild('chartContainer') chartContainer!: ElementRef;
+  chart!: any;
+
+  @Input() dataSource!: OrgChartItem[];
+  @Input() config!: OrgChartConfig;
+  @Input() template!: string;
+  @Input() nodeTemplate!: TemplateRef<any>;
+
+  @Input() generateTemplate: Function = (data: any, node: any, nodes: any[], index: number):string => '';
+  @Input() templateFuncion: boolean = false;
+
+  @Input() corDeFundo: string = 'red';
+
+  compact: boolean = true;
+  mostraMenu: boolean = false;
+
+
+  constructor(private renderer: Renderer2) {}
+
+  ngOnInit() {
+  }
+
+
+  ngAfterViewInit() {
+    if (!this.chart) {
+      this.chart = new OrgChart();
+    }
+    this.updateChart();
+  }
+
+  ngOnChanges() {
+    this.updateChart();
+  }
+
+  updateChart() {
+    if (!this.dataSource) {
+      return;
+    }
+    if (!this.chart) {
+      return;
+    }
+
+
+
+    const chartContainer = this.chartContainer.nativeElement;
+    this.chart
+      .container(chartContainer)
+      .data(this.dataSource)
+      .nodeWidth(() => this.config.cardWidht)
+      .nodeHeight(() => this.config.cardHeight)
+      .nodeUpdate(function (d:any) {
+      })
+      .linkUpdate((node:any, index:any, nodes:any)=> {
+        d3.select(nodes[index])
+          .attr('stroke-width', this.config.conectionWidth || '2px')
+          .style('stroke', this.config.connectionColor || '#d6d6d6').style('backgroundColor', 'red')
+      })
+      .nodeContent((d: any) => {
+
+
+        if(!this.templateFuncion){
+          if(d.data.template){
+            const jsTemplate = this.stringToTemplateLiteral(d.data.template);
+            var templateConverter = new Function('data', 'return' + jsTemplate);
+            var x = templateConverter(d.data.data);
+          }else{
+            const jsTemplate = this.stringToTemplateLiteral(this.config.templateItem);
+            var templateConverter = new Function('data', 'return' + jsTemplate);
+            var x = templateConverter(d.data.data);
+          }
+        }else{
+          var x = this.generateTemplate(d)
+
+        }
+        return x;
+      })
+      .defaultFont('Roboto')
+      .render()
+
+
+  }
+  stringToTemplateLiteral(string: string): string {
+    const convertedTemplate = string.replace(
+      /\{\{([^}]*)\}\}/g,
+      '${$1}'
+    );
+
+    return '`' + convertedTemplate + '`';
+  }
+  compactSwap() {
+    this.compact = !this.compact;
+    this.chart.compact(this.compact).render();
+  }
+}

package/src/lib/orgchart/orgchart.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OrgchartComponent } from './orgchart.component';
+import { PrimeNgModule } from '../../public-api';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PrimeNgModule
+  ],
+  declarations: [OrgchartComponent],
+  exports: [OrgchartComponent]
+})
+export class OrgchartModule { }