keevo-components 1.5.189 → 1.5.191

package/src/lib/tree-table/kv-treetable.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TreeTableComponent } from './kv-treetable.component';
+import { PrimeNgModule } from '../api/modules/primeng.module';
+import { FormsModule } from '@angular/forms';
+import { KvButtonsModule } from '../buttons/kvbutton.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+    KvButtonsModule
+  ],
+  declarations: [TreeTableComponent],
+  exports: [TreeTableComponent]
+})
+export class KVTreeTableModule { }

package/src/lib/tree-view/kvtree-view.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TreeViewComponent } from './tree-view.component';
+import { PrimeNgModule } from '../api/modules/primeng.module';
+
+
+@NgModule({
+  declarations: [
+    TreeViewComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule
+  ],
+  exports: [
+    TreeViewComponent
+  ],
+})
+export class KvtreeViewModule { }

package/src/lib/tree-view/tree-view.component.html

@@ -0,0 +1,9 @@
+<div class="card flex flex-column align-items-center justify-content-center">
+    <p-tree
+        [value]="treeViewData"
+        [selectionMode]="selectionMode"
+        class="w-full"
+        [(selection)]="selectedFiles"
+        (selectionChange)="onSelectionChange()"
+    ></p-tree>
+</div>

package/src/lib/tree-view/tree-view.component.spec.ts

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

package/src/lib/tree-view/tree-view.component.ts

@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+  selector: 'kv-tree-view',
+  templateUrl: './tree-view.component.html',
+  styleUrls: ['./tree-view.component.scss']
+})
+
+
+export class TreeViewComponent implements OnInit {
+
+  @Input() selectedFiles!: TreeNode[] | undefined;
+
+  @Input() selectionMode: string = 'checkbox';
+  @Input() treeViewData!: TreeNode[];
+
+  @Output() selectedItems: EventEmitter<any> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  onSelectionChange() {
+    this.selectedItems.emit(this.selectedFiles)
+  }
+
+}

package/src/lib/workspace/kvworkspace.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { WorkspaceComponent } from './workspace.component';
+import { KvButtonsModule } from "../buttons/kvbutton.module";
+import { PrimeNgModule } from '../api/modules/primeng.module';
+
+
+
+@NgModule({
+    declarations: [
+        WorkspaceComponent
+    ],
+    exports: [
+        WorkspaceComponent
+    ],
+    imports: [
+        CommonModule,
+        PrimeNgModule,
+        ReactiveFormsModule,
+        ProgressSpinnerModule,
+        AutoCompleteModule,
+        FormsModule,
+        KvButtonsModule
+    ]
+})
+export class KvWorkspaceModule { }

package/src/lib/workspace/workspace.component.html

@@ -0,0 +1,108 @@
+<div *ngIf="visivel" [style]="styleBackground" class="h-screen flex justify-content-center align-items-center login-container flex-column">
+  <div id="card-container"
+    class="flex flex-column justify-content-around card-login formgrid p-fluid col-12 w-10 lg:w-7">
+    <div class="field col-12 flex justify-content-center mb-4">
+      <h1 class="text-6xl text-blue-900" id="logo">{{nomeSistema}}</h1>
+    </div>
+
+
+    <!-- INÍCIO DO WORKSPACE DE CONTABILIDADE (MASTERS) -->
+    <div *ngIf="!masterSelecionada" class="col-12 z-5">
+      <div class="formgrid p-fluid field col-12 flex flex-column align-items-center z-5">
+        <div class="field col-6 text-lg">
+          Olá <span class="font-bold">{{nomeUsuario}},</span> bem vindo (a).
+        </div>
+        <div class="field col-6 text-lg">
+          Escolha qual <span class="font-bold">Workspace</span> você deseja
+          <span class="font-bold">acessar</span>:
+        </div>
+      </div>
+
+      <div class="formgrid p-fluid field col-12 flex flex-column align-items-center z-5">
+        <div id="master-container"
+          class="field col-7 flex gap-2 justify-content-center flex-wrap max-h-21rem overflow-x-auto z-5" >
+
+          <div [pTooltip]="master.razaosocial" id="master-card" *ngFor="let master of masters"
+
+            class="text-overflow-ellipsis overflow-hidden w-10rem h-10rem flex flex-column align-items-center justify-content-between text-center p-3 gap-2 border-card">
+            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="23" viewBox="0 0 25 23" fill="#0E4F82">
+              <path
+                d="M20 15.3333H17.5V17.8889H20M20 10.2222H17.5V12.7778H20M22.5 20.4444H12.5V17.8889H15V15.3333H12.5V12.7778H15V10.2222H12.5V7.66667H22.5M10 5.11111H7.5V2.55556H10M10 10.2222H7.5V7.66667H10M10 15.3333H7.5V12.7778H10M10 20.4444H7.5V17.8889H10M5 5.11111H2.5V2.55556H5M5 10.2222H2.5V7.66667H5M5 15.3333H2.5V12.7778H5M5 20.4444H2.5V17.8889H5M12.5 5.11111V0H0V23H25V5.11111H12.5Z"
+                fill="#0E4F82" />
+            </svg>
+
+            <div class="text-lg text-blue-800 text-overflow-ellipsis overflow-hidden h-3rem w-full text-center font-semibold">
+              {{  master.razaosocial.split(' ')[0] + ' ' + master.razaosocial.split(' ')[1] || master.razaosocial  }}
+            </div>
+
+            <kv-button-personalize color="bg-blue-900" label="Acessar" (onClick)="selecionarMaster(master)" ></kv-button-personalize>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- FIM DO WORKSPACE DE CONTABILIDADE (MASTERS) -->
+
+    <!-- INÍCIO DO WORKSPACE EMPRESA -->
+    <div *ngIf="masterSelecionada && !empresaSelecionada" class="col-12 z-5">
+      <div class="formgrid p-fluid field col-12 flex flex-column align-items-center z-5">
+
+        <div class="col-8 flex xl:flex-row flex-column p-0 border-card border-round-2xl justify-content-between z-5">
+
+          <div class="flex flex-column xl:flex-row w-full xl:w-9">
+            <div class="flex border-round-left-2xl bg-white1 p-3 flex align-items-center font-semibold m-0 xl:w-4 w-full z-5">
+              Workspace
+            </div>
+
+            <div class="gap-2 p-3 flex align-items-center m-0 xl:w-7 sm:w-full"
+              [pTooltip]="masterSelecionada.razaosocial">
+              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="23" viewBox="0 0 25 23" fill="#0E4F82">
+                <path
+                  d="M20 15.3333H17.5V17.8889H20M20 10.2222H17.5V12.7778H20M22.5 20.4444H12.5V17.8889H15V15.3333H12.5V12.7778H15V10.2222H12.5V7.66667H22.5M10 5.11111H7.5V2.55556H10M10 10.2222H7.5V7.66667H10M10 15.3333H7.5V12.7778H10M10 20.4444H7.5V17.8889H10M5 5.11111H2.5V2.55556H5M5 10.2222H2.5V7.66667H5M5 15.3333H2.5V12.7778H5M5 20.4444H2.5V17.8889H5M12.5 5.11111V0H0V23H25V5.11111H12.5Z"
+                  fill="#0E4F82" />
+              </svg>
+
+              <span class="w-full white-space-nowrap overflow-hidden text-overflow-ellipsis">{{masterSelecionada.razaosocial}}</span>
+            </div>
+          </div>
+
+          <div class="bg-white2 border-round-right-2xl p-3 flex align-items-center cursor-pointer m-0 xl:w-1 w-full"(click)="voltar()">
+            <i class="pi pi-arrow-left"></i>
+          </div>
+        </div>
+
+
+        <div class="formgrid p-fluid field col-12 flex flex-column align-items-center">
+
+          <div class="grid formgrid col-10 md:col-7 md:col-6 p-fluid flex align-items-center">
+            <span class="field p-0 col-12 xl:col-6 font-semibold ">Selecione a empresa</span>
+            <div class="field p-0 col-12 xl:col-6">
+              <span class="p-input-icon-left">
+                <i class="pi pi-search"></i>
+                <input type="text" pInputText (ngModelChange)="filtrarEmpresa($event)" [(ngModel)]="txtPesquisa" />
+              </span>
+            </div>
+          </div>
+
+          <div id="master-container" class="field  mt-3 relative z-5 col-10 md:col-7  flex gap-2 justify-content-center flex-wrap max-h-15rem overflow-x-auto" >
+
+            <div  class="grid formgrid col-12 p-fluid border-bottom-1 border-300" *ngFor="let empresa of empresas" >
+              <span [pTooltip]="empresa.nomeempresa || empresa.nomefantasia" class="field md:col-10 col-12  flex gap-1">
+                <span class="text-base white-space-nowrap overflow-hidden text-overflow-ellipsis">{{empresa.nomeempresa || empresa.nomefantasia }}</span>
+              </span>
+
+              <div class="field md:col-2  col-12 bg-blue-900 flex align-items-center justify-content-center py-2 px-2 col border-round-md cursor-pointer" (click)="selecionarEmpresa(empresa)">
+                <i class="pi pi-angle-right text-xl text-white"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- FIM DO WORKSPACE EMPRESA -->
+
+    <div class=" lg:block hidden w-full col-12 grid formgrid pointer-events-none	">
+      <div class="field col-12  flex justify-content-end" id="personagens-imagem"><img [src]="imgPersonagens" class="field w-full col-12" alt=""></div>
+    </div>
+  </div>
+  <img [src]="imgLogoKeevo" class="w-9rem mt-6" />
+</div>

package/src/lib/workspace/workspace.component.scss

@@ -0,0 +1,83 @@
+* {
+  margin: 0;
+}
+
+::ng-deep body {
+  margin: 0px !important;
+}
+
+.login-container {
+  background-repeat: no-repeat;
+  background-size:cover;
+}
+
+#card-container{
+  background: #fff;
+  border-radius:14px;
+  -webkit-border-radius:14px;
+  -moz-border-radius:14px;
+  -ms-border-radius:14px;
+  -o-border-radius:14px;
+  -webkit-border-radius: 14px;
+}
+
+#logo{
+  background: linear-gradient(97deg, #002542 5.7%, #115A94 102.3%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.border-card{
+  border-radius: 12px;
+  border: 1px dashed #2770E8;
+}
+
+#master-card h1{
+  color: #26406B;
+}
+
+.bg-white1{
+  background-color: #f1f1f1;
+}
+
+.bg-white2{
+  background-color: #f2f3f5;
+}
+
+#personagens-imagem{
+  width: 60% !important;
+  position: absolute;
+  transform: translate(-2%, -91%);
+}
+
+#master-container {
+  --sb-track-color: #f1f1f1;
+  --sb-thumb-color: #183462;
+  --sb-size: 5px;
+
+  scrollbar-color: var(--sb-thumb-color)
+                   var(--sb-track-color);
+}
+
+#master-container::-webkit-scrollbar {
+  width: var(--sb-size)
+}
+
+#master-container::-webkit-scrollbar-track {
+  background: var(--sb-track-color);
+  border-radius: 40px;
+}
+
+#master-container::-webkit-scrollbar-thumb {
+  background: var(--sb-thumb-color);
+  border-radius: 40px;
+}
+
+
+
+span,
+.login-container {
+  font-size: 15px !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+}

package/src/lib/workspace/workspace.component.ts

@@ -0,0 +1,75 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ImagensService } from '../api/services/imagens.service';
+
+@Component({
+  selector: 'kv-workspace',
+  templateUrl: './workspace.component.html',
+  styleUrls: ['./workspace.component.scss'],
+})
+export class WorkspaceComponent implements OnInit {
+  
+
+  @Input() nomeSistema: string = 'Nome do Sistema';
+  @Input() nomeUsuario: string = 'Nome do Usuário Logado';
+  @Input() masters!: any[]; // Lista das contabilidades e suas respectivas empresas
+  @Input() somenteMaster: boolean = false; // Se for apenas seleção de contabilidade
+
+  @Output() onGetMasterSelecionada = new EventEmitter<any>();
+  @Output() onGetEmpresaSelecionada = new EventEmitter<any>();
+    
+  empresas!: any[];
+  masterSelecionada!: any;
+  empresaSelecionada!: any;
+
+  visivel = true;
+  txtPesquisa = '';
+  imgPersonagens = '';
+  imgLogoKeevo = '';
+  styleBackground = '';
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.imgPersonagens = ImagensService.getPersonagensWorkSpace();
+    this.imgLogoKeevo = ImagensService.getLogoKeevo();
+    this.styleBackground = "background-image: url(" + ImagensService.getBackgroundWorkSpace() + ");";
+    this.verificaMasterUnica();
+  }
+
+  verificaMasterUnica(){
+    if(this.masters.length == 1) this.selecionarMaster(this.masters[0]);
+  }
+
+  selecionarMaster(master: any) {
+    this.onGetMasterSelecionada.emit(master);
+    this.masterSelecionada = master;
+
+    if (this.somenteMaster) 
+      this.visivel = false;
+    else {
+      this.empresas = master.empresas;
+      this.verificaEmpresaUnica();
+    }
+  }
+
+  verificaEmpresaUnica(){
+    if(this.empresas && this.empresas.length == 1) this.selecionarEmpresa(this.empresas[0]);
+  }
+
+  selecionarEmpresa(empresa: any) {
+    this.onGetEmpresaSelecionada.emit(empresa);
+    this.empresaSelecionada = empresa;
+    this.visivel = false;
+  }
+
+  voltar() {
+    this.empresaSelecionada = undefined;
+    this.masterSelecionada = undefined;
+  }
+
+  filtrarEmpresa(event: any) {
+    this.empresas = this.masterSelecionada.empresas.filter((e: any) =>
+      e.nomeempresa.toLowerCase().includes(event.toLowerCase())
+    );
+  }
+}