keevo-components 2.0.106 → 2.0.107

package/src/lib/components/kv-widget-card/kv-widget-card.component.ts

@@ -0,0 +1,107 @@
+import { Component, input, OnInit } from '@angular/core';
+import * as IconModels from '../kv-icon/kv-icon.model';
+
+export interface KvWidgetCardNavigationModel {
+  label: string;
+  redirectIcon: string;
+  action: () => void;
+}
+
+@Component({
+  selector: 'kv-widget-card',
+  templateUrl: './kv-widget-card.component.html',
+  styleUrls: ['./kv-widget-card.component.scss']
+})
+
+/**
+ * Componente para exibição de um card widget.
+ * 
+ * @description
+ * O KvWidgetCardComponent é utilizado para exibir informações resumidas em formato de card,
+ * como indicadores, títulos e mensagens informativas, com opções de navegação e ícones.
+ * 
+ * @example
+ * <kv-widget-card
+ *   [title]="'Tarefas em Atraso'"
+ *   [indicator]="'50'"
+ *   [informationMessage]="'Atraso de 2 dias'"
+ *  [icon]="'info'"
+ *  [iconShape]="'circle'"
+ *  [iconSeverity]="'success'"
+ * >
+ * </kv-widget-card>
+ * 
+ * @publicApi
+ */
+/**
+ * Componente para exibição de cards de widgets.
+ */
+
+
+export class KvWidgetCardComponent {
+  /**
+   * Define o ícone do card.
+   * @required
+   */
+  icon = input.required<string>();
+
+  /**
+   * Define o formato do ícone do card.
+   * @required
+   */
+  iconShape = input.required<'circle' | 'hexagon' | 'square'>();
+
+  /**
+   * Define a cor do ícone do card.
+   * @required
+   */
+  iconSeverity = input.required<'system' | 'warning' | 'danger' | 'success' | 'contrast' | 'info'>();
+
+  /**
+   * Título do card.
+   * @required
+   */
+  title = input.required<string>();
+
+  /**
+   * Define se a navegação do card deve ser exibida.
+   * @default true
+   */
+  showNavigation = input<boolean>(false);
+
+  /**
+   * Define se a borda do card deve ser exibida.
+   * @default false
+   */
+  border = input<boolean>(false);
+
+  /**
+   * Define o background-color do card.
+   * @default true
+   */
+  severity = input<'system' | 'warning' | 'danger' | 'success'>('system');
+
+  /**
+   * Valor do indicador principal do card.
+   * @default 
+   */
+  indicator = input<number>();
+
+  /**
+   * Mensagem informativa adicional exibida no card.
+   * @default ''
+   */
+  informationMessage = input<string>('');
+
+  /**
+   * Dados de navegação do card, incluindo rótulo, ícone e ação a ser executada.
+   * @default {label: '', redirectIcon: '', action: function que lança erro}
+   */
+  navigationData = input<KvWidgetCardNavigationModel>({
+    label: '',
+    redirectIcon: '',
+    action: function (): void {
+      throw new Error();
+    }
+  });
+}

package/src/lib/components/kv-widget-card/kv-widget-card.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvWidgetCardComponent } from './kv-widget-card.component';
+import { PrimeNgModule } from 'keevo-components';
+import { KvIconModule } from '../kv-icon/kv-icon.module';
+
+@NgModule({
+    declarations: [
+        KvWidgetCardComponent
+    ],
+    imports: [
+        CommonModule,
+        PrimeNgModule,
+        KvIconModule
+    ],
+    exports: [
+        KvWidgetCardComponent
+    ]
+})
+export class KvWidgetCardModule { }

package/src/lib/components/kv-workspace/empresa/kv-workspace-empresa.component.html

@@ -0,0 +1,22 @@
+<div class="flex flex-column px-2 overflow-y-auto max-h-24rem cards-container gap-1">
+
+  @for(empresa of empresas; track $index) {
+  <div
+    class="grid formgrid flex-row flex-nowrap p-fluid gap-2 p-0 m-0 align-items-center option-box px-1"
+    (click)="selecionarEmpresa(empresa)"
+  >
+    <span class="p-0 col-3 my-2 text-xs text-truncate text-no-wrap">{{
+      mascaraCpfCnpj()(empresa.cpfcnpj)
+    }}</span>
+    <span class="p-0 col-8 text-xs text-truncate text-no-wrap">{{
+      empresa.razaosocial
+    }}</span>
+
+    <div class="p-0 col flex justify-content-end">
+      <div class=" icon-box">
+        <span class="material-symbols-outlined" [style.fontSize]="'1.1rem'">chevron_right</span>
+      </div>
+    </div>
+  </div>
+  }
+</div>

package/src/lib/components/kv-workspace/empresa/kv-workspace-empresa.component.scss

@@ -0,0 +1,36 @@
+.text-no-wrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.option-box {
+  border-bottom: solid 1px #eeeeee;
+  transition: all 0.2s;
+
+
+  &:hover {
+    cursor: pointer;
+    background-color: rgba(var(--kv-color-system), 0.05);
+  }
+
+  &:active {
+    background-color: rgba(var(--kv-color-system), 0.125);
+  }
+}
+
+.icon-box {
+  border: 1px solid rgba(var(--kv-color-system), 0.1);
+  border-radius: 0.5rem;
+  // padding: 0.25rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.8;
+  }
+}

package/src/lib/components/kv-workspace/empresa/kv-workspace-empresa.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { WorkspaceEmpresaComponent } from './kv-workspace-empresa.component';
+
+describe('WorkspaceEmpresaComponent', () => {
+  let component: WorkspaceEmpresaComponent;
+  let fixture: ComponentFixture<WorkspaceEmpresaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkspaceEmpresaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkspaceEmpresaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-workspace/empresa/kv-workspace-empresa.component.ts

@@ -0,0 +1,41 @@
+import {
+  Component,
+  computed,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+@Component({
+  selector: 'kv-workspace-empresa',
+  templateUrl: './kv-workspace-empresa.component.html',
+  styleUrls: ['./kv-workspace-empresa.component.scss', '../workspace/kv-workspace.component.scss']
+})
+export class WorkspaceEmpresaComponent {
+
+  @Input() empresas: any[] = [];
+  @Input() empresaSelecionada!: any;
+  @Input() totalEmpresas: number = 0;
+
+  @Output() onEmpresaSelecionada = new EventEmitter<any>();
+  @Output() onPaginate = new EventEmitter<any>();
+
+  mascaraCpfCnpj = computed(() => (cpfcnpj: string) => {
+    const regexCpf = /^(\d{3})(\d{3})(\d{3})(\d{2})$/;
+    const regexCnpj = /^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/;
+  
+    if (cpfcnpj.length === 11) return cpfcnpj.replace(regexCpf, '$1.$2.$3-$4'); 
+    else if (cpfcnpj.length === 14) return cpfcnpj.replace(regexCnpj, '$1.$2.$3/$4-$5');
+
+    return cpfcnpj; 
+  });
+  
+
+  constructor() { }
+
+  selecionarEmpresa(empresa: any) {
+    this.empresaSelecionada = empresa;
+    this.onEmpresaSelecionada.emit(this.empresaSelecionada);
+  }
+}

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

@@ -0,0 +1,45 @@
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { CommonModule } from '@angular/common';
+
+import {
+    FormsModule,
+    ReactiveFormsModule
+} from '@angular/forms';
+
+import { NgModule } from '@angular/core';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+
+import { WokspaceLogoComponent } from './logo/kv-workspace-logo.component';
+import { WorkspaceComponent } from './workspace/kv-workspace.component';
+import { WorkspaceEmpresaComponent } from './empresa/kv-workspace-empresa.component';
+import { WorkspaceMasterComponent } from './master/kv-workspace-master.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvButtonsModule } from '../kv-buttons/kv-button.module';
+import { KvTableModule } from '../kv-table/kv-table.module';
+import { KvButtonModule } from "../kv-button/kv-button.module";
+import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
+
+@NgModule({
+    declarations: [
+        WorkspaceComponent,
+        WorkspaceEmpresaComponent,
+        WokspaceLogoComponent,
+        WorkspaceMasterComponent
+    ],
+    exports: [
+        WorkspaceComponent
+    ],
+    imports: [
+        CommonModule,
+        PrimeNgModule,
+        ReactiveFormsModule,
+        ProgressSpinnerModule,
+        AutoCompleteModule,
+        FormsModule,
+        KvButtonsModule,
+        KvTableModule,
+        KvButtonModule,
+        KvInputsModule,
+    ]
+})
+export class KvWorkspaceModule { }

package/src/lib/components/kv-workspace/logo/kv-workspace-logo.component.html

@@ -0,0 +1,20 @@
+<div class="field col-12 flex justify-content-center mb-1">
+  <img [src]="logoKeevoCenter" style="width: auto; height: 4rem;" />
+</div>
+
+<div class="col-12 align-items-center z-5">
+  <div class="col-9">
+    Olá, <b>{{ nomeUsuario }}.</b> Bem-vindo(a)!
+  </div>
+
+  @if(!masterSelecionada){
+  <b class="field col-9 flex">
+    Escolha qual workspace você deseja acessar:
+  </b>
+  }
+  @else {
+  <b class="field col-9 flex">
+    Escolha qual empresa você deseja acessar:
+  </b>
+  }
+</div>

package/src/lib/components/kv-workspace/logo/kv-workspace-logo.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { LogoComponent } from './kv-workspace-logo.component';
+
+describe('LogoComponent', () => {
+  let component: LogoComponent;
+  let fixture: ComponentFixture<LogoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LogoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-workspace/logo/kv-workspace-logo.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kv-workspace-logo',
+  templateUrl: './kv-workspace-logo.component.html',
+  styleUrls: ['./kv-workspace-logo.component.scss']
+})
+export class WokspaceLogoComponent implements OnInit {
+
+  @Input() logoKeevoCenter !: string;
+  @Input() nomeUsuario: string = 'Nome do Usuário Logado';
+  @Input() masterSelecionada!: any;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

package/src/lib/components/kv-workspace/master/kv-workspace-master.component.html

@@ -0,0 +1,35 @@
+<div
+  class="grid m-0 border-round-lg gap-2 p-2 {{
+    (this.masters.length > 6 || this.widthScreen() < 992) &&
+      'overflow-y-auto'
+  }} max-h-25rem cards-container"
+>
+  @for(master of this.masters; track $index) {
+  <div
+    class="{{
+      $index % 2 == 0 ? 'sm:col-6 col-12' : 'sm:col col-12'
+    }} p-0 card-option"
+    (click)="selecionarMaster(master)"
+  >
+    <div class="flex flex-column p-3 gap-1">
+      <div class="flex flex-row align-items-center gap-1 font-semibold mb-2">
+        <span class="material-symbols-outlined text-md"> article </span>
+        <span class="text-sm">{{ master.idmaster }}</span>
+      </div>
+
+      <span style="word-break: break-word font-medium" class="text-sm">{{
+        transformRazaoSocial()(master.nome)
+      }}</span>
+
+      <div class="flex flex-row align-items-center gap-1 font-semibold">
+        <span class="text-xs">{{
+          isEmpresa()(master.cpfcnpj) ? "CNPJ:" : "CPF:"
+        }}</span>
+        <span class="text-xs">{{ transformCpfCnpj()(master.cpfcnpj) }}</span>
+      </div>
+    </div>
+  </div>
+  } @if(this.masters.length == 0) {
+  <p>{{ emptyText() }}</p>
+  }
+</div>

package/src/lib/components/kv-workspace/master/kv-workspace-master.component.scss

@@ -0,0 +1,29 @@
+.card-option {
+    // background-color: #F8FAFD;
+  background-color: white;
+  border-radius: 0.5rem;
+  border: 1px solid #eaeaea;
+  height: 7.5rem;
+  overflow: hidden;
+
+  transition: all 0.2s ease-in-out;
+
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid #581999;
+    background-color: rgba(208, 179, 221, 0.3);
+
+    span {
+      color: #581999;
+    }
+  }
+
+  &:active {
+    background-color: rgba(208, 179, 221, 0.6);
+  }
+}
+
+span {
+  color: #64748b;
+}

package/src/lib/components/kv-workspace/master/kv-workspace-master.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { WorkspaceMasterComponent } from './kv-workspace-master.component';
+
+describe('WorkspaceMasterComponent', () => {
+  let component: WorkspaceMasterComponent;
+  let fixture: ComponentFixture<WorkspaceMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkspaceMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkspaceMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-workspace/master/kv-workspace-master.component.ts

@@ -0,0 +1,98 @@
+import {
+  Component,
+  computed,
+  EventEmitter,
+  inject,
+  input,
+  Input,
+  OnInit,
+  Output,
+  signal
+} from '@angular/core';
+
+import { TableConfig } from '../../../api/components/table/table.config';
+import { CpfCnpjPipe } from '../../../api/pipes/cpfcnpj.pipe';
+
+@Component({
+  selector: 'kv-workspace-master',
+  templateUrl: './kv-workspace-master.component.html',
+  styleUrls: ['./kv-workspace-master.component.scss', '../workspace/kv-workspace.component.scss']
+})
+export class WorkspaceMasterComponent implements OnInit {
+  dataSource: any = [];
+  tableConfig!: TableConfig;
+
+  @Input() masters!: any[];
+  @Input() masterSelecionada!: any;
+
+  @Output() onMasterSelecionada = new EventEmitter<any>();
+
+  emptyText = input<string>('Nenhum resultado encontrado');
+  widthScreen = signal<number>(window.innerWidth);
+
+  cpfCnpjPipe = inject(CpfCnpjPipe);
+
+  isEmpresa = computed(() => (cpfCnpj: string) => {
+    return cpfCnpj.length > 11;
+  })
+
+  transformRazaoSocial = computed(() => (razaosocial: string) => {
+    return razaosocial.length > 72 ? `${razaosocial.substring(0, 72)}...` : razaosocial;
+  });
+
+  transformCpfCnpj = computed(() => (cpfCnpj: string) => {
+    return this.cpfCnpjPipe.transform(cpfCnpj);
+  });
+
+  constructor() { }
+
+  ngOnInit() {
+    this.configTable();
+
+    window.addEventListener('resize', () => {
+      this.widthScreen.set(window.innerWidth);
+    });
+  }
+
+  activeItem(e: any) {
+    this.masterSelecionada = e;
+  }
+
+  configTable() {
+    this.dataSource = this.masters;
+    this.tableConfig = {
+      lazy: false,
+      columns: [
+        { position: 0, field: 'idmaster', header: 'Licença', width: '', centralize: false, sortable: false },
+        { position: 1, field: 'nome', header: '', width: '80%', centralize: false, sortable: false, },
+      ],
+      actions: [
+        {
+          label: 'Acessar',
+          icon: 'login',
+          tooltip: 'Acessar Workspace',
+          command: () => {
+            this.selecionarMaster(this.masterSelecionada);
+          },
+          disabled: () => {
+            return false;
+          },
+        },
+      ],
+      actionsLote: [],
+      enableCation: false,
+      enableFilter: false,
+      enableSelect: false,
+    };
+  }
+
+  doubleClick(e: any) {
+    this.masterSelecionada = e.rowData;
+    this.selecionarMaster(this.masterSelecionada);
+  }
+
+  selecionarMaster(master: any) {
+    this.masterSelecionada = master;
+    this.onMasterSelecionada.emit(this.masterSelecionada);
+  }
+}

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

@@ -0,0 +1,63 @@
+@if(visivel) {
+<div class="flex align-items-center justify-content-center">
+  <div
+    class="bg-white h-auto border-round-lg lg:p-4 p-2 flex flex-column gap-2 overflow-hidden"
+    [style.max-width.rem]="'45'"
+    [style.min-width]="minWidthCard()"
+  >
+    <div class="px-2 flex flex-column align-items-center gap-2">
+      <img [src]="logoKeevoCenter()" style="height: 4rem" class="py-2" />
+      <span class="text-sm">
+        Olá, <b>{{ nomeUsuario() }}</b
+        >. Bem vindo(a)! Escolha a
+        <b>{{ !somenteMaster && masterSelecionada ? "Empresa" : "Licença" }}</b>
+        que deseja acessar:
+      </span>
+    </div>
+
+    <div
+      class="col-12 grid formgrid p-fluid m-0 px-2 pt-2 pb-0"
+      [formGroup]="workspaceForm"
+    >
+      <kv-input-text
+        placeholder="Buscar {{
+          !somenteMaster && masterSelecionada ? 'empresa' : 'licença'
+        }}"
+        class="col-12 m-0 p-0"
+        (onInput)="filter()"
+        formControlName="search"
+      ></kv-input-text>
+    </div>
+
+    @if(!masterSelecionada){
+    <kv-workspace-master
+      [masters]="masters()"
+      [masterSelecionada]="masterSelecionada"
+      (onMasterSelecionada)="selecionarMaster($event)"
+    >
+    </kv-workspace-master>
+    } @if(!somenteMaster && masterSelecionada){
+    <kv-workspace-empresa
+      [empresas]="empresas()"
+      [totalEmpresas]="totalEmpresas"
+      (onEmpresaSelecionada)="selecionarEmpresa($event)"
+      (onPaginate)="paginate($event)"
+    >
+    </kv-workspace-empresa>
+    } 
+    @if(showBtnVoltar && masterSelecionada) {
+    <div class="flex text-left mt-2">
+      <kv-button
+        icon="chevron_left"
+        iconPosition="left"
+        label="Voltar"
+        type="text"
+        severity="secondary"
+        class="ml-2"
+        (onClick)="OnBtnVoltarClick()"
+      />
+    </div>
+    }
+  </div>
+</div>
+}