keevo-components 1.8.493 → 1.8.495

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

@@ -0,0 +1,416 @@
+import { ActivatedRoute, Router } from '@angular/router';
+
+import {
+  ChangeDetectorRef,
+  Component,
+  computed,
+  contentChildren,
+  effect,
+  EventEmitter,
+  HostListener,
+  input,
+  Input,
+  model,
+  OnChanges,
+  OnInit,
+  Output,
+  signal,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+  WritableSignal,
+} from '@angular/core';
+
+import { OverlayPanel } from 'primeng/overlaypanel';
+import { Sidebar } from 'primeng/sidebar';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import { TopActionsModel } from '../top-icons/top-icons.component';
+import { link } from 'd3';
+import { MenuItem } from 'primeng/api';
+
+export interface LayoutMenuItem {
+  idmenu: number;
+  idmenupai: number | null;
+  idaplicativo: number;
+  descricaomenu: string;
+  link: string | null;
+  icone: string | null;
+  indpublicado: boolean;
+  indmenupai: boolean;
+  listaidvisaomenu: number[];
+  bgColor?: string;
+  textColor?: string;
+} 
+
+export interface PMenuItem{
+  label: string;
+  
+  items: PMenuItem[];
+}
+
+@Component({
+  selector: 'kv-layout',
+  templateUrl: './kv-layout.component.html',
+  styleUrls: ['./kv-layout.component.scss'],
+  // animations: [
+  //   trigger('sidebarWidthTrigger', [
+  //     state('collapsed', style({
+  //       width: '60px'
+  //     })),
+  //     state('expanded', style({
+  //       width: '359px'
+  //     })),
+  //     transition('collapsed <=> expanded', animate('100ms ease-out'))
+  //   ])
+  // ]
+})
+export class KvLayoutComponent implements OnInit, OnChanges {
+  @Input() apps: {
+    idaplicativo: number;
+    idsistema: number;
+    nomeaplicativo: string;
+    descricaoaplicativo: string;
+    rotapadrao: string;
+    indpublicado: boolean;
+    indpublicacaogradativa: boolean;
+    indexigeempresaentrada: boolean;
+    urlicone?: string;
+  }[] = [];
+
+  @Input() actions: { icon: string; label: string; action: () => void }[] = [];
+
+  topActions = input<TopActionsModel[]>([
+    {
+      icon: 'list-check',
+      tooltip: 'Tarefas',
+      numNotifications: 2,
+      action: () => {},
+    },
+    {
+      icon: 'bell',
+      tooltip: 'Notificações',
+      numNotifications: 0,
+      action: () => {},
+    },
+    {
+      icon: 'sparkles',
+      tooltip: 'Kiara',
+      numNotifications: 0,
+      action: () => {},
+    },
+    {
+      icon: 'message',
+      tooltip: 'Comunicador',
+      numNotifications: 3,
+      action: () => {},
+    },
+    {
+      icon: 'person',
+      tooltip: 'Meus Dados',
+      numNotifications: 0,
+      img: 'https://cdn.comunhao.com.br/wp-content/uploads/2022/09/27085403/alexandremoraes.jpg',
+      action: () => {
+        this.meusDadosPanel.show(event);
+      },
+    }
+  ]);
+
+
+  @Input() breadCrumbItems: {
+    label: string;
+    routerLink: string;
+  }[] = [];
+
+  @Input() masters: {
+    idmaster: number;
+    cpfcnpj: string;
+    nome: string;
+    idmasternome: string;
+  }[] = [];
+
+  menus = model<LayoutMenuItem[]>([]);
+
+
+  menuPModels = computed<MenuItem[]>(() => {
+    const convertToMenuItem = (menu: LayoutMenuItem): MenuItem => ({
+      label: menu.descricaomenu,
+      id: menu.idmenu.toString(),
+      items: this.returnMenuChild(menu.idmenu).map(convertToMenuItem),
+      url: menu.link ?? undefined,
+    });
+
+    return this.menus().map(convertToMenuItem);
+  });
+
+  ver(x:any){
+    console.log(x)
+  }
+
+  returnMenuChilds = computed(() => (idmenu: number) => {
+    return this.menuPModels().filter((x: MenuItem) => Number(x.id) === idmenu);
+  });
+
+  expandMenu = model<boolean>(true);
+
+  @Input() logoMenuExpand!: any;
+  @Input() logoMenuHide!: any;
+
+  @Input() selectedApp!: number;
+  @Input() selectedEmpresa!: any;
+  @Input() selectedMaster!: number;
+
+  @Input() showButtonApps: boolean = true;
+  @Input() showButtonUser: boolean = true;
+  @Input() showExpandMenu: boolean = true;
+  @Input() showDropdownLicenca: boolean = true;
+  @Input() showMenu: boolean = true;
+  @Input() showTrocaEmpresa: boolean = false;
+  @Input() showBreadcrumb: boolean = true;
+  @Input() userName: string = 'Usuário';
+  @Input() masterName!: string;
+  @Input() empresaName!: string;
+
+  @Output() accessKeePassEmit: EventEmitter<any> = new EventEmitter();
+  @Output() changeEmpresaEmit: EventEmitter<boolean> = new EventEmitter();
+  @Output() changeLicenseEmit: EventEmitter<number> = new EventEmitter();
+  @Output() expandMenuEmit: EventEmitter<boolean> = new EventEmitter();
+  @Output() logoutEmit: EventEmitter<any> = new EventEmitter();
+  @Output() selectAppEmit: EventEmitter<number> = new EventEmitter();
+  @Output() navigateToDefaultRouteEmit: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('meusDadosPanel') meusDadosPanel!: OverlayPanel;
+  @ViewChild('sidebarRef') sidebarRef!: Sidebar;
+  @ViewChild('sistemasPanel') sistemasPanel!: OverlayPanel;
+
+  topMenuActions = contentChildren<TemplateRef<any>>('topMenuAction');
+
+  formGroup!: FormGroup;
+  heightCard!: number;
+  mouseOverFilhoIndex: any;
+  mouseOverIndex: any;
+  widthCard!: number;
+
+  widthPage = signal<number>(0);
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private fb: FormBuilder,
+    protected router: Router,
+    protected activatedRoute: ActivatedRoute
+  ) {
+  }
+
+  public accessKeePass(event: any) {
+    this.accessKeePassEmit.emit(event);
+  }
+
+  public adjustHeightCard(): number {
+    if (this.widthCard > 400) {
+      if (this.widthPage() < 992 && this.showLicencas()) return 145;
+
+      if (this.breadCrumbItems.length > 0) return 95;
+      else return 85;
+    }
+
+    return 125;
+  }
+
+  private adjustWidthCard() {
+    this.widthPage.set(window.innerWidth);
+
+    this.heightCard = Number(
+      document.getElementById('page-content')?.offsetHeight
+    );
+    if (this.showMenu)
+      this.widthCard =
+        Number(window.innerWidth) - (this.expandMenu() ? 333 : 93);
+    else this.widthCard = Number(window.innerWidth);
+  }
+
+  public callRoute(e: any, expand?: boolean) {
+    console.log(e, expand)
+    if (!expand && !this.expandMenu() && this.showExpandMenu)
+      this.expandMenu.update((currentValue: boolean) => !currentValue);
+
+    if (this.widthPage() != 0 && this.widthPage() < 800 && this.expandMenu() && this.showExpandMenu)
+      this.expandMenu.set(false);
+
+    this.router.navigateByUrl(e);
+  }
+
+  public changeEmpresa(event: any) {
+    this.changeEmpresaEmit.emit(event);
+  }
+
+  public changeLicense(event: any) {
+    this.changeLicenseEmit.emit(event);
+  }
+
+  private verifyMenuBehavior() {
+    if (this.widthPage() < 800)
+      this.expandMenu.set(false);
+  }
+
+  private expandMenuEvent() {
+    this.expandMenuEmit.emit(this.expandMenu());
+  }
+
+  public logout(event: any) {
+    this.logoutEmit.emit(event);
+  }
+
+  private menusPerApp() {
+    if (this.router.url && this.menus && this.menus.length > 0) {
+      if (this.router.url === '/') {
+        // this.navigateToFirstMenu();
+      } else {
+        const menuSelecionado = this.menus().find(
+          (menu: any) =>
+            menu.link && menu.link.includes(this.router.url.slice(1))
+        );
+        if (menuSelecionado) {
+          this.navigateToMenu(menuSelecionado);
+        }
+      }
+    }
+
+    if (this.sistemasPanel) {
+      this.sistemasPanel.hide();
+    }
+  }
+
+  public nameEmpresa(nomeLicenca: any): string {
+    if (nomeLicenca) {
+      if (nomeLicenca.length > 23) return nomeLicenca.substring(0, 23) + '...';
+      else return nomeLicenca;
+    } else return '';
+  }
+
+  private navigateToFirstMenu(): void {
+    const firstMenu = this.menus()[0];
+    if (firstMenu.indmenupai) {
+      const filhos = this.returnMenuChild(firstMenu.idmenu);
+      if (filhos) {
+        this.callRoute(filhos[0].link, true);
+      }
+    } else {
+      this.callRoute(firstMenu.link, true);
+    }
+  }
+
+  private navigateToMenu(menu: any): void {
+    if (menu.menupai) {
+      const filhos = this.returnMenuChild(menu.idmenu);
+      if (filhos) {
+        this.callRoute(filhos[0].link, true);
+      }
+    } else {
+      this.callRoute(menu.link, true);
+    }
+  }
+
+  menuSelecionado = signal<any>(null);
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const latestRequest = changes['menus'];
+    if (latestRequest?.currentValue) {
+      this.menusPerApp();
+    }
+
+    this.selecionarMenu();
+  }
+
+  public ngOnInit(): void {
+    this.formGroup = this.fb.group({
+      idmaster: [this.selectedMaster, []],
+    });
+
+    this.adjustWidthCard();
+    this.verifyMenuBehavior();
+    this.expandMenuEvent();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  public onWindowResize() {
+    this.adjustWidthCard();
+    this.verifyMenuBehavior();
+    this.cdr.detectChanges();
+  }
+
+  isSelectedMenuPai(menu: any) {
+    if (!this.expandMenu() && menu.indmenupai)
+      return menu.idmenu === this.menuSelecionado()?.idmenupai;
+
+    return false;
+  }
+
+  selecionarMenu() {
+    const url = new URL(this.router.url, window.origin);
+
+    const currentPath = url.pathname;
+    const purePath = currentPath.match(/^[^;]*/i);
+
+    const paths = purePath![0];
+
+    this.menus.set(
+      this.menus().map((menu) => {
+        if (menu.link) {
+          return {
+            ...menu,
+            bgColor: paths.includes(menu.link!) ? 'rgb(41, 185, 45)' : '',
+            textColor: paths.includes(menu.link!) ? 'text-white' : '',
+          };
+        }
+        return menu;
+      })
+    )
+
+    const menu = this.menus().find((menu: any) => {
+      return menu.link && paths.includes(menu.link!);
+    });
+
+    this.menuSelecionado.set(menu);
+  }
+
+  public returnMenuChild(idmenu: number) {
+    return this.menus().filter((x: any) => x.idmenupai == idmenu);
+  }
+
+
+  public selectApp(idaplicativo: number) {
+    this.selectAppEmit.emit(idaplicativo);
+  }
+
+  public showLicencas(): boolean {
+    return this.showDropdownLicenca && (this.masters || []).length > 1;
+  }
+
+  public toggleMenu() {
+    this.expandMenu.update((currentValue: boolean) => !currentValue);
+    this.expandMenuEvent();
+  }
+
+  navigateToDefaultRoute() {
+    if (this.widthPage() < 800 && this.expandMenu())
+      this.expandMenu.set(false);
+
+    this.navigateToDefaultRouteEmit.emit();
+  }
+
+  // getSidebarState() {
+  //   return this.expandMenu() ? 'expanded' : 'collapsed';
+  // }
+
+  get exibirNomes() {
+    return !this.showLicencas() && (this.masterName || this.empresaName);
+  }
+
+
+}

package/src/lib/components/kv-layout/top-icons/top-icons.component.html

@@ -0,0 +1,14 @@
+<div class="top-icons-container">
+    @for (item of topActions(); track $index) {
+
+            <kv-icon
+                [icon]="item.icon"
+                [numNotifications]="item.numNotifications||0"
+                [pTooltip]="item.tooltip"
+                [tooltipPosition]="'left'"
+                (onClick)="item.action()"
+                [img]="item.img"
+                [clickable]="true"
+            />
+    }
+</div>

package/src/lib/components/kv-layout/top-icons/top-icons.component.scss

@@ -0,0 +1,7 @@
+.top-icons-container{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: .8rem;
+}

package/src/lib/components/kv-layout/top-icons/top-icons.component.spec.ts

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

package/src/lib/components/kv-layout/top-icons/top-icons.component.ts

@@ -0,0 +1,25 @@
+import { Component, input } from '@angular/core';
+import { KvIconComponent } from "../../kv-icon/kv-icon.component";
+import { TooltipModule } from 'primeng/tooltip';
+import { KvIconModule } from '../../kv-icon/kv-icon.module';
+
+export interface TopActionsModel {
+  icon?: string;
+  tooltip?: string;
+  numNotifications?: number;
+  img?: string;
+  action: () => void;
+}
+
+@Component({
+  selector: 'kv-top-icons',
+  standalone: true,
+  imports: [TooltipModule, KvIconModule],
+  templateUrl: './top-icons.component.html',
+  styleUrl: './top-icons.component.scss'
+})
+export class TopIconsComponent {
+
+  topActions = input<TopActionsModel[]>([]);
+
+}

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

@@ -0,0 +1 @@
+<ngx-loading [show]="loading() > 0"></ngx-loading>

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

@@ -0,0 +1,11 @@
+import { Component, type Signal } from '@angular/core';
+
+import { KvLoaderService } from './kv-loader.service';
+
+@Component({
+  selector: 'kv-loader',
+  templateUrl: './kv-loader.component.html'
+})
+export class KvLoaderComponent {
+  public loading: Signal<number> = KvLoaderService.loading;
+}

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

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxLoadingModule } from 'ngx-loading';
+
+import { KvLoaderComponent } from './kv-loader.component';
+
+@NgModule({
+  declarations: [KvLoaderComponent],
+  exports: [KvLoaderComponent],
+  imports: [
+    CommonModule,
+    NgxLoadingModule.forRoot({
+      fullScreenBackdrop: true
+    })
+  ]
+})
+export class KvLoaderModule { }

package/src/lib/components/kv-loader/kv-loader.service.ts

@@ -0,0 +1,29 @@
+import { Injectable, signal } from '@angular/core';
+import {
+  Observable,
+  finalize,
+} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KvLoaderService {
+  public static loading = signal(0);
+
+  public static show() {
+    KvLoaderService.loading.update(x => x + 1);
+  }
+
+  public static hide() {
+    KvLoaderService.loading.update(x => x - 1);
+  }
+}
+
+export const loading = <T>(): (src: Observable<T>) => Observable<T> => {
+  return (src: Observable<T>) => {
+    KvLoaderService.show();
+    return src.pipe(finalize(() => {
+      KvLoaderService.hide();
+    }));
+  };
+};

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

@@ -0,0 +1,101 @@
+<div
+  id="kvLogin-container"
+  class="flex justify-content-center align-items-center flex-column h-screen"
+  [style.background-image]="'url(' + Background + ')'"
+>
+  <!-- CARD PRINCIPAL -->
+  <div
+    [formGroup]="formGroup"
+    id="kvLogin-card"
+    class="flex flex-column align-items-center justify-content-between bg-white border-round-xl"
+    [style.width.rem]="20"
+    [style.height.rem]="28"
+    (keydown.enter)="save()"
+  >
+    <!-- LOGO DO SISTEMA -->
+    <div
+      class="flex flex-row align-items-center justify-content-center p-3 mt-2"
+    >
+      <img alt="Logo do Sistema" [style.height.rem]="4" [src]="SystemLogo" />
+    </div>
+
+    <!-- INFORMAÇÕES CENTRAIS -->
+    <div class="grid formgrid p-fluid gap-2 p-3 pb-0">
+      <div
+        class="mb-2 w-full flex flex-row align-items-center justify-content-srart gap-1 font-medium"
+      >
+        <img
+          [style.height.rem]="1.5"
+          class="ml-2"
+          alt="keepass"
+          src="https://work-assets.keevo.com.br/img/icone-keepass-preto.png"
+        />
+        <label class="mt-1 text-sm"> Entrar com KeePass </label>
+      </div>
+
+      <kv-input-text
+        componentId="usuario"
+        label="CPF ou e-mail"
+        formControlName="usuario"
+        class="field col-12"
+      >
+      </kv-input-text>
+
+      <kv-input-password
+        componentId="senha"
+        label="Senha"
+        [toggleMask]="true"
+        formControlName="senha"
+        [required]="true"
+        class="field col-12"
+      >
+      </kv-input-password>
+
+      <div
+        class="flex w-full justify-content-end mb-2 h-2"
+        id="kvLogin-esqueceu-senha"
+      >
+        <a
+          [href]="urlRedefinirSenha"
+          target="_blank"
+          class="text-xs"
+          [style.color]="SystemColorPrimary"
+        >
+          Esqueceu a senha?
+        </a>
+      </div>
+
+      <div id="kvLogin-cadastro" class="flex w-full justify-content-center h-2">
+        <label class="text-xs font-normal">
+          Novo no KeePass?
+          <a
+            [href]="urlCadastrarKeepass"
+            target="_blank"
+            class="text-xs m-0 p-0"
+            [style.color]="SystemColorPrimary"
+          >
+            Cadastre-se.
+          </a>
+        </label>
+      </div>
+    </div>
+
+    <button
+      id="kvLogin-login-button"
+      [style.background-color]="SystemColorPrimary"
+      [style.color]="'white'"
+      class="w-full"
+      (click)="save()"
+      [style.height.px]="50"
+    >
+      <strong>Login</strong>
+    </button>
+  </div>
+
+  <div class="logo-keevo">
+    <img src="https://work-assets.keevo.com.br/img/keevo-logo-temp.png" />
+    <label class="text-xs" [style.color]="SystemColorSecondary">
+      Copyright © 2024 - Keevo Ltda Todos os direitos reservados.
+    </label>
+  </div>
+</div>