keevo-components 1.5.189 → 1.5.191

package/src/lib/login/login.component.html

@@ -0,0 +1,108 @@
+<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"
+        class="flex flex-column align-items-center justify-content-between bg-white border-round-xl "
+        [style.width.rem]="19"
+        [style.height.px]="435"
+        (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">
+
+            <div
+                class=" w-full "
+                class="mb-2"
+            >
+                <img
+                    [style.height.rem]="2.5"
+                    class="ml-2"
+                    alt="keepass"
+                    src="https://work-assets.keevo.com.br/img/keepass-logo.png"
+                />
+            </div>
+
+            <kv-input-text
+                componentId="usuario"
+                label="CPF ou Email"
+                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"
+                id="kvLogin-esqueceu-senha"
+            >
+                <a
+                    href="https://keepass.seg.br/redefinirsenha"
+                    target="_blank"
+                    style="font-size: 0.8rem;"
+                    [style.color]="SystemColorPrimary"
+                >
+                    Esqueceu a senha?
+                </a>
+            </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 id="kvLogin-cadastro">
+        <p
+            [style.color]="SystemColorSecondary"
+            style="font-size: 1rem;"
+        >
+            Não possui um Evopass?
+            <a
+                href="https://keepass.seg.br/cadastrar"
+                target="_blank"
+                [style.color]="SystemColorSecondary"
+                style="font-size: 1rem;"
+            >
+                Cadastre-se
+            </a>
+        </p>
+    </div>
+
+    <div class="logo-keevo">
+        <img
+            src="https://work-assets.keevo.com.br/img/keevo-logo.png"
+            [style.height.rem]="4"
+        />
+    </div>
+
+</div>

package/src/lib/login/login.component.scss

@@ -0,0 +1,48 @@
+#kvLogin-container {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol " !important;
+    background: no-repeat center;
+    background-size: cover;
+}
+
+#kvLogin-esqueceu-senha {
+    position: relative;
+    bottom: .5rem;
+    padding-right: 10px;
+}
+
+#kvLogin-esqueceu-senha a,
+#kvLogin-cadastro a {
+    text-decoration: none;
+    font-weight: 500;
+    cursor: pointer;
+    gap: 3px;
+
+    transition: text-shadow 0.2s ease-in-out;
+
+    &:hover {
+        text-shadow: 0 0 2px rgba(158, 158, 158, 0.692);
+    }
+}
+
+#kvLogin-login-button {
+    width: 100%;
+    height: 3rem !important;
+    border-radius: 0 0 10px 10px;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all ease-in 0.2s;
+    -webkit-transition: all ease-in 0.2s;
+    -moz-transition: all ease-in 0.2s;
+    -ms-transition: all ease-in 0.2s;
+    -o-transition: all ease-in 0.2s;
+}
+
+#kvLogin-login-button:hover {
+    opacity: 0.9;
+}
+
+.logo-keevo {
+    position: relative;
+    top: 50px;
+}

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

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

package/src/lib/login/login.component.ts

@@ -0,0 +1,65 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { BaseComponentCrudForm } from '../api/base-components/base-component-crud-form';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { NotificationService } from '../api/services/notification.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { KeevoValidators } from '../../public-api';
+
+/**
+ * Componente de login personalizado.
+ * Este componente permite que os usuários façam login no sistema utilizando o estilo padrão dos sistemas Keevo.
+ */
+@Component({
+  selector: 'kv-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent extends BaseComponentCrudForm {
+
+  /** URL da imagem de fundo do componente. */
+  @Input() Background!: any;
+  /** URL do logo do sistema. */
+  @Input() SystemLogo!: any;
+  /** Cor primária do sistema. */
+  @Input() SystemColorPrimary!: string;
+  /** Cor secundária do sistema. */
+  @Input() SystemColorSecondary!: string;
+  /** Evento emitido quando o usuário faz login. */
+  @Output() onLogin: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    dialogService: DialogService,
+    notificationService: NotificationService,
+    activatedRoute: ActivatedRoute,
+    dynamicDialogRef: DynamicDialogRef,
+    dynamicDialogConfig: DynamicDialogConfig,
+    router: Router,
+    private formBuilder: FormBuilder) {
+    super(
+      dialogService,
+      notificationService,
+      activatedRoute,
+      dynamicDialogRef,
+      dynamicDialogConfig,
+      router
+    )
+  }
+
+  override configureForm(): void {
+    this.formGroup = this.formBuilder.group({
+      usuario: ['', KeevoValidators.required('Campo obrigatório')],
+      senha: ['', KeevoValidators.required('Campo obrigatório')]
+    });
+  }
+
+  override loadForm(id: any): void {
+
+  }
+
+  override save(): void {
+    if (this.validateForm()) {
+      this.onLogin.emit(this.formGroup.value);
+    }
+  }
+}

package/src/lib/menu/kvmenu.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MenuComponent } from './menu.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { PrimeNgModule } from '../api/modules/primeng.module';
+import { KvInputsModule } from '../inputs/kvinputs.module';
+import { KvButtonsModule } from '../buttons/kvbutton.module';
+
+
+
+@NgModule({
+  declarations: [
+    MenuComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+    ReactiveFormsModule,
+    KvInputsModule,
+    KvButtonsModule
+  ],
+  exports: [
+    MenuComponent
+  ]
+})
+export class KvMenuModule { }

package/src/lib/menu/menu.component.html

@@ -0,0 +1,342 @@
+<div class="flex flex-row overflow-y-hidden w- full-container">
+
+  <div [style]="{minWidth: expandMenu ? '300px' : '60px'}"></div>
+
+  <p-sidebar
+    #sidebarRef
+    [visible]="true"
+    [showCloseIcon]="false"
+    [modal]="false"
+    [style]="{width: expandMenu ? '300px' : '60px'}"
+  >
+    <ng-template pTemplate="headless">
+      <div class="flex flex-column {{expandMenu ? 'mx-1' : 'mx-1'}}">
+        <div class="flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2">
+          <div
+            class="flex flex-row align-items-center {{expandMenu ? 'justify-content-between' : 'justify-content-center'}} py-3"
+          >
+            <img
+              *ngIf="expandMenu"
+              alt="Card"
+              [src]="logoImage"
+              width="150"
+            />
+
+            <button
+              pButton
+              class="p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu"
+              (click)="toggleMenu()"
+              [pTooltip]="expandMenu ? 'Ocutar Menu' : 'Expandir Menu'"
+              [tooltipPosition]="'right'"
+            >
+              <i class="material-symbols-outlined">
+                menu
+              </i>
+            </button>
+          </div>
+
+          <div
+            class="flex flex-row align-items-center {{expandMenu ? 'justify-content-between' : 'justify-content-center'}}"
+          >
+            <div
+              class="flex flex-column cursor-pointer"
+              *ngIf="expandMenu"
+              (click)="trocarLicenca()"
+            >
+              <span
+                class="text-sm font-semibold mr-2"
+                [pTooltip]="this.licencaSelecionada.nome"
+                [tooltipPosition]="'right'"
+              >
+                {{MascaraNomeLicenca(this.licencaSelecionada.nome)}}
+              </span>
+              <span class="text-sm mt-1">{{MascaraCnpj(this.licencaSelecionada.cpfcnpj)}}</span>
+            </div>
+
+            <button
+              pButton
+              class="p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu"
+              (click)="trocarLicenca()"
+              [pTooltip]="'Alterar workspace'"
+              [tooltipPosition]="'right'"
+            >
+              <i class="material-symbols-outlined">
+                sync_alt
+              </i>
+            </button>
+
+          </div>
+          <p-divider type="solid"></p-divider>
+        </div>
+
+        <div
+          class="list-none m-0  card-container {{expandMenu ? 'mx-1' : ''}}"
+          [style.max-height]="(heigthCard - 220) + 'px'"
+          style="overflow-y: auto;"
+        >
+          <!-- menus -->
+          <li *ngFor="let menu of menus; let i = index">
+            <!-- menu que não tem filho -->
+            <a
+              (mouseenter)="onMouseEnter(i)"
+              (mouseleave)="onMouseLeave()"
+              [ngClass]="{'hover-color': mouseOverIndex === i}"
+              (click)="callRoute(menu.link)"
+              *ngIf="!menu.menupai && menu.idmenupai == 0"
+              pRipple
+              [pTooltip]="!expandMenu ? menu.descricaomenu : ''"
+              [tooltipPosition]="'right'"
+              class="{{verificarPaginaSelecionada(menu.link) ? 'bg-green-600' : ''}} menu-option flex align-items-center no-underline {{!expandMenu ? 'justify-content-center' : ''}} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple"
+            >
+
+              <i
+                class="material-symbols-outlined icon-menu {{expandMenu ? 'ml-1 mr-2' : ''}}  icon-hover-color {{verificarPaginaSelecionada(menu.link) ? 'text-white' : ''}}"
+                *ngIf="menu.icone && menu.icone !== ''"
+              >
+                {{ menu.icone }}
+              </i>
+              <span
+                class="text-base text-blue-900 font-medium {{verificarPaginaSelecionada(menu.link) ? 'text-white' : ''}}"
+                *ngIf="expandMenu"
+              >{{ menu.descricaomenu }}</span>
+            </a>
+            <!-- menu com filho -->
+            <div *ngIf="menu.menupai">
+              <a
+                (mouseenter)="onMouseEnter(i)"
+                (mouseleave)="onMouseLeave()"
+                [ngClass]="{'hover-color': mouseOverIndex === i}"
+                pRipple
+                pStyleClass="@next"
+                enterClass="hidden"
+                enterActiveClass="slidedown"
+                leaveToClass="hidden"
+                leaveActiveClass="slideup"
+                class="menu-option flex align-items-center {{!expandMenu ? 'justify-content-center' : 'justify-content-between'}} cursor-pointer border-round text-700 hover:bg-green-600 hover:text-white transition-duration-150 transition-colors p-ripple"
+                [tooltipPosition]="'right'"
+                [pTooltip]="!expandMenu ? menu.descricaomenu : ''"
+                (click)="!expandMenu ? expandMenu = !expandMenu : ''"
+              >
+                <div class="flex flex-row align-items-center">
+
+                  <i
+                    class="material-symbols-outlined icon-menu {{expandMenu ? 'ml-1 mr-2' : ''}} icon-hover-color"
+                    *ngIf="menu.icone && menu.icone !== ''"
+                    [ngClass]="{'hover-color': mouseOverIndex === i}"
+                  >
+                    {{ menu.icone }}
+                  </i>
+                  <span
+                    class="text-base text-blue-900 font-medium"
+                    *ngIf="expandMenu"
+                  >{{ menu.descricaomenu }}</span>
+                </div>
+                <i
+                  class="pi pi-chevron-down text-blue-900 mr-1 icon-hover-color"
+                  *ngIf="expandMenu"
+                  [ngClass]="{'hover-color': mouseOverIndex === i}"
+                ></i>
+              </a>
+
+              <!-- filhos -->
+              <div
+                class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out"
+              >
+          <li *ngFor="
+              let filho of retornarMenuFilhos(menu.idsistema, menu.idmenu);  let iFilho = index
+            ">
+            <a
+              (mouseenter)="onMouseFilhoEnter(filho.idmenu)"
+              (mouseleave)="onMouseLeave()"
+              [ngClass]="{'hover-color': mouseOverFilhoIndex === filho.idmenu}"
+              *ngIf="expandMenu"
+              (click)="callRoute(filho.link)"
+              pRipple
+              class="{{verificarPaginaSelecionada(filho.link) ? 'bg-green-600' : ''}} menu-option flex align-items-center no-underline cursor-pointer border-round text-700 hover:bg-green-600 transition-duration-150 transition-colors p-ripple p-2"
+            >
+              <i
+                class="pi pi-chart-line mr-2 ml-1 adjust-icon-menu"
+                *ngIf="filho.icone && filho.icone !== ''"
+              ></i>
+              <span
+                class="text-base text-blue-900 ml-4 {{verificarPaginaSelecionada(filho.link) ? 'text-white' : ''}}"
+                *ngIf="expandMenu"
+              >{{ filho.descricaomenu }}</span>
+            </a>
+          </li>
+        </div>
+      </div>
+</div>
+</div>
+</ng-template>
+</p-sidebar>
+
+
+<div
+  class="w-auto h-screen page-content overflow-y-hidden"
+  id="page-content"
+>
+
+  <div class="flex flex-row align-items-center justify-content-between m-3">
+    <div *ngIf="breadCrumbs">
+      <p class="text-xl font-semibold text-blue-900 breadcrumb-title">{{breadCrumbItems[breadCrumbItems.length -
+        1]?.label}}</p>
+      <p-breadcrumb
+        *ngIf="widthCard > 400"
+        styleClass="border-none p-0 flex align-items-center h-2rem !important;"
+        [model]="breadCrumbItems"
+        [style]="{backgroundColor: '#d4d3d3'}"
+        (onItemClick)="callRoute($event.item.routerLink, true)"
+      ></p-breadcrumb>
+    </div>
+
+    <div *ngIf="!breadCrumbs"></div>
+
+    <div class="w-auto flex flex-row align-items-center gap-2">
+      <button
+        pButton
+        class="p-button-rounded p-button-text h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu padding-style"
+        (click)="sistemasPanel.toggle($event)"
+        [pTooltip]="'Sistemas'"
+        [tooltipPosition]="'left'"
+      >
+        <i class="material-symbols-outlined">
+          apps
+        </i>
+      </button>
+      <button
+        pButton
+        class="p-button-rounded p-button-text h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu padding-style"
+        (click)="meusDadosPanel.toggle($event)"
+        [pTooltip]="'Menu do Usuário'"
+        [tooltipPosition]="'left'"
+      >
+        <i class="material-symbols-outlined">
+          person
+        </i>
+      </button>
+    </div>
+  </div>
+
+
+  <p-card
+    class="card-container"
+    styleClass="m-3 border-noround overflow-y-auto card-container"
+    [style]="{height: heigthCard - ajustarHeigthCard() + 'px'}"
+  >
+    <div class="card-container w-full">
+      <ng-content></ng-content>
+    </div>
+  </p-card>
+
+</div>
+
+
+</div>
+
+<p-overlayPanel
+  #sistemasPanel
+  [showTransitionOptions]="'350ms ease-out'"
+  [hideTransitionOptions]="'250ms ease-in'"
+>
+
+  <ng-template pTemplate="container">
+
+    <p class="title-style mt-3">Sistemas</p>
+    <div
+      class="flex flex-row flex-wrap gap-2 align-items-center justify-content-center mt-5 mb-3"
+      style="width: 250px; height: 100%;"
+    >
+      <button
+        *ngFor="let menu of menuCompleto"
+        pButton
+        pRipple
+        class="btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem"
+        (click)="definirMenusPorSistema(menu.sistema.idsistema)"
+        [pTooltip]="menu.sistema.descricaosistema"
+        [tooltipPosition]="'left'"
+      >
+        <!-- <img
+          alt="logo"
+          style="width: 2rem; height: 2rem;"
+        /> -->
+        {{ menu.sistema.nomesistema.charAt(0).toUpperCase() }}
+
+      </button>
+
+
+      <!-- <p-button styleClass="p-button-outlined">
+        <img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem" />
+        <span class="ml-2 font-bold">PrimeNG</span>
+    </p-button> -->
+
+    </div>
+  </ng-template>
+</p-overlayPanel>
+
+<p-overlayPanel
+  #meusDadosPanel
+  [showTransitionOptions]="'350ms ease-out'"
+  [hideTransitionOptions]="'250ms ease-in'"
+>
+
+  <ng-template pTemplate="container">
+
+    <p class="title-style mt-3">Olá, {{nomeUsuario ? nomeUsuario.split(' ')[0] : 'Usuário'}} !</p>
+    <div class="mt-5 mb-3">
+
+    </div>
+
+    <p-button
+      icon="pi pi-lock"
+      label="Gerênciar KeevoPass"
+      (onClick)="gerenciarKeePass($event)"
+      styleClass="border-noround w-full p-button-text text-blue-900"
+      [disabled]="true"
+    ></p-button>
+    <p-button
+      icon="pi pi-sign-out"
+      label="Sair"
+      (onClick)="sair($event)"
+      styleClass="border-noround w-full p-button-text text-blue-900"
+    ></p-button>
+  </ng-template>
+
+</p-overlayPanel>
+
+<p-dialog
+  [(visible)]="visibleDialogLicenca"
+  [modal]="true"
+  [draggable]="false"
+  header="Trocar Licença"
+  [style]="{width: '50vh' }"
+>
+  <div class="flex flex-column align-items-end">
+
+    <div class="w-full">
+      <p-dropdown
+        styleClass="w-full"
+        [options]="licencasOptions"
+        [(ngModel)]="licencaSelected"
+        optionLabel="descricao"
+      ></p-dropdown>
+    </div>
+
+    <kv-button-success
+      [label]="'Salvar'"
+      class="mt-2"
+      (onClick)="setLicenca()"
+    ></kv-button-success>
+
+  </div>
+
+</p-dialog>
+
+<!-- <p-confirmDialog
+  [style]="{width: '40vw'}"
+  [baseZIndex]="10000"
+  rejectButtonStyleClass="p-button-text"
+>
+</p-confirmDialog>
+
+<p-toast></p-toast> -->