keevo-components 1.8.493 → 1.8.495

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

@@ -0,0 +1,469 @@
+<div class="flex flex-row full-container">
+  @if(showMenu) {
+    <p-sidebar
+      #sidebarRef
+      [visible]="true"
+      [showCloseIcon]="false"
+      [modal]="false"
+      [style]="{ width: expandMenu() ? '17rem' : '3.65rem' }"
+      styleClass="transition-all"
+    >
+      <ng-template pTemplate="headless">
+        <div class="h-full flex flex-column overflow-hidden p-2">
+          
+          <!-- LOGO -->
+          <div class="flex-none flex flex-column gap-1 justify-content-between flex-shrink-0 overflow-hidden">
+            <div
+              class="flex {{
+                expandMenu() ? 'flex-row' : 'flex-column'
+              }} align-items-center {{
+                expandMenu()
+                  ? 'justify-content-between'
+                  : 'justify-content-center'
+              }} py-1"
+            >
+              <!-- Logo para o menu expandido -->
+              @if(expandMenu() && logoMenuExpand){
+                <img
+                  alt="Card"
+                  [src]="logoMenuExpand"
+                  [style.height]="'2.8rem'"
+                  width="auto"
+                  class="cursor-pointer p-0"
+                  (click)="navigateToDefaultRoute()"
+                />
+              }
+
+              <!-- Logo para o menu minimizado-->
+              @if(!expandMenu() && logoMenuHide){
+                <img
+                  alt="Card"
+                  [src]="logoMenuHide"
+                  [style.height]="'2.8rem'"
+                  width="auto"
+                  class=""
+                  (click)="navigateToDefaultRoute()"
+                />
+              }
+
+              <!-- Toggle menu -->
+              @if(showExpandMenu){
+                <kv-icon
+                  icon="menu-2"
+                  [clickable]="true"
+                  [pTooltip]="expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'"
+                  [tooltipPosition]="'right'"
+                  (onClick)="toggleMenu()"
+                />
+              }
+            </div>
+
+            @if(showTrocaEmpresa){
+              <div
+                class="flex flex-row align-items-center justify-content-{{expandMenu()? 'between px-2': 'center'}}"
+                (click)="changeEmpresa($event)"
+              >
+                @if(expandMenu() && selectedEmpresa){
+                  <div
+                    class="flex flex-column "
+                    (click)="changeEmpresa($event)"
+                  >
+                    @if(this.selectedEmpresa.razaosocial){
+                      <span
+                        class="text-sm font-semibold mr-2"
+                        [pTooltip]="this.selectedEmpresa.razaosocial"
+                        [tooltipPosition]="'right'"
+                      >
+                        {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
+                      </span>
+                    }
+                    @if(this.selectedEmpresa.cpfcnpj){
+                      <span class="text-sm mt-1">{{
+                        this.selectedEmpresa.cpfcnpj | cpfCnpj
+                      }}</span>
+                    }
+                  </div>
+                  
+                }
+                <kv-icon
+                  icon="transfer"
+                  [clickable]="true"
+                  [pTooltip]="'Trocar de empresa'"
+                  [tooltipPosition]="'right'"
+                  (onClick)="changeEmpresa($event)"
+                  class=" side-menu-item py-1"
+                />
+              </div>
+            }
+          </div>
+
+          <p-divider type="solid"></p-divider>
+
+          <!-- MENUS -->
+          <div class="flex-1 list-none m-0 overflow-y-auto max-h-full">
+            <!-- menus -->
+            @for (menu of menus(); track $index) {
+              <li>
+                <!-- menu que não tem filho -->
+                  @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){
+                    <div
+                        class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
+                        [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
+                        (click)="callRoute(menu.link)"
+                      >
+                        <kv-icon
+                          [icon]="menu.icone|| 'circle-dotted'"
+                        />
+                        @if(expandMenu()){
+                          <label>{{menu.descricaomenu}}</label>
+                        }
+                    </div>
+                  }
+                <!-- menu com filho -->
+                  @if(menu.indmenupai){
+                    <div>
+                      <div
+                        class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
+                        [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
+                      >
+                        <kv-icon
+                          [icon]="menu.icone|| 'circle-dotted'"
+                          (click)="expandMenu()?'':filho.toggle($event)"
+                        />
+                        @if(expandMenu()){
+                          <label>{{menu.descricaomenu}}</label>
+                          <kv-icon
+                            #chevronIcon
+                            icon="chevron-right"
+                            (click)="filho.toggle($event)"
+                            [clickable]="true"
+                          />
+                        }
+                      </div>
+                      <div #appendMenuDiv class="appendMenuDiv"></div>
+                      
+                      <p-menu #filho [popup]="true" [model]="returnMenuChilds()(menu.idmenu)" [appendTo]="appendMenuDiv">
+                        <ng-template  pTemplate="submenuheader" let-item let-i="index">
+                          <label class="font-medium pl-3 text-xs">
+                            {{item.label}}
+                          </label>
+                            <div [style.height.rem]="0.5"></div>
+                        </ng-template>
+                        <ng-template pTemplate="item" let-item>
+                          <div 
+                            class=" side-menu-item py-2 pl-3 pr-1 text-sm"
+                            (click)="callRoute(item.url)"
+                            >
+                            {{item.label}}
+                          </div>
+                        </ng-template>
+                      </p-menu>
+
+                    </div>
+                  }
+              </li>
+            }
+          </div>
+
+          <p-divider type="solid"></p-divider>
+          
+          <!-- APPS E SAIR -->
+          <div class="flex-none list-none m-0 overflow-y-auto max-h-full">
+            <li>
+              <div
+                class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
+                [pTooltip]="!expandMenu() ? 'Sistemas' : ''"
+                (click)="!expandMenu() && menusistemas.toggle($event)"
+              >
+                <kv-icon
+                  [icon]="'apps'"
+                />
+                @if(expandMenu()){
+                  <label>Sistemas</label>
+                  <kv-icon
+                    #chevronIcon
+                    icon="chevron-right"
+                    (click)="expandMenu() && menusistemas.toggle($event)"
+                    [clickable]="true"
+                  />
+                }
+              </div>
+              <div #sistemasmenughost class="appendMenuDiv"></div>
+              <p-menu #menusistemas [popup]="true" [model]="apps" [appendTo]="sistemasmenughost">
+                <ng-template  pTemplate="submenuheader">
+                  <label class="font-medium pl-3 text-xs">
+                    Sistemas
+                  </label>
+                  <div [style.height.rem]="0.5"></div>
+                </ng-template>
+                <ng-template pTemplate="item" let-item>
+                  <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1"
+                  (click)="callRoute(item.rotapadrao)"
+                  >
+                    <img
+                      [src]="item.urlicone"
+                      class="h-2 w-2 border-round-lg"
+                    />
+                    <div class="text-sm">
+                      {{item.nomeaplicativo}}
+                    </div>
+                  </div>
+                </ng-template>
+              </p-menu>
+            </li>
+            <li>
+              <div
+                class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
+                [pTooltip]="!expandMenu() ? 'Sair' : ''"
+                [style.color]="'red'"
+                [style.opacity]="0.5"
+                (click)="logout($event)"
+              >
+                <kv-icon
+                  [icon]="'logout'"
+                  
+                />
+                @if(expandMenu()){
+                  <label>Sair</label>
+                }
+              </div>
+            </li>
+          </div>
+        </div>
+      </ng-template>
+    </p-sidebar>
+  }
+
+  <!-- SEÇÃO CONTEÚDO  -->
+  <div
+    class="w-auto h-screen page-content overflow-y-hidden flex flex-column"
+    id="page-content"
+    style="width: 100vw !important"
+  >
+    <!-- TOPO -->
+    <div
+      class="flex flex-row flex-wrap align-items-center justify-content-between my-2 mx-2 lg:mx-3 mb-0 gap-1"
+    >
+      @if(!showMenu) {
+      <!-- Logo home -->
+      <div>
+        <img [src]="logoMenuExpand" width="150" />
+      </div>
+      } @else {
+        <!-- Breadcrumbs -->
+        @if(showBreadcrumb) {
+          <div>
+            <p class="text-xl font-semibold system-color breadcrumb-title">
+              {{
+                breadCrumbItems[breadCrumbItems.length - 1] &&
+                breadCrumbItems[breadCrumbItems.length - 1].label
+                  ? breadCrumbItems[breadCrumbItems.length - 1].label
+                  : ""
+              }}
+            </p>
+            <p-breadcrumb
+              *ngIf="widthCard > 400"
+              styleClass="border-none p-0 flex align-items-center h-1rem bg-transparent"
+              [model]="breadCrumbItems"
+              [style]="{ backgroundColor: '#eaeaea' }"
+              (onItemClick)="callRoute($event.item.routerLink, true)"
+            ></p-breadcrumb>
+          </div>
+        }
+        @else {
+          <!-- GHOST DIV PARA OCPUAR ESPAÇO NO SPACE BETWEEN -->
+          <div></div>
+        }
+      } 
+      @if (exibirNomes) { 
+        @if(widthCard >= 517) {
+          <div
+            class="w-auto flex flex-column justify-content-center align-items-center gap-2"
+          >
+            @if (masterName) { <span class="font-semibold system-color">{{ masterName }}</span> }
+            @if (empresaName) {<span class="empresa-name"
+              >Organização: {{ empresaName }}</span
+            >
+            }
+          </div>
+
+          <div
+            class="w-auto flex flex-row justify-content-center align-items-center gap-2"
+          >
+            <!-- Navegação de sistemas e usuários -->
+            @for (topAction of topMenuActions(); track $index) {
+            <ng-container *ngTemplateOutlet="topAction" />
+            }
+            <kv-top-icons
+              [topActions]="topActions()"
+            />
+
+          </div>
+        } 
+        @else {
+          <div
+            class="w-auto flex flex-row justify-content-center align-items-center gap-2"
+          >
+            <!-- Navegação de sistemas e usuários -->
+            @for (topAction of topMenuActions(); track $index) {
+            <ng-container *ngTemplateOutlet="topAction" />
+            }
+            <kv-top-icons
+              [topActions]="topActions()"
+            />
+
+          </div>
+
+          <div
+            class="w-auto flex flex-column justify-content-center align-items-center gap-2"
+          >
+            @if (masterName) { <span class="master-name">{{ masterName }}</span> }
+            @if (empresaName) {<span class="empresa-name">{{ empresaName }}</span> }
+          </div>
+        } 
+      } 
+      @else { 
+        @if(widthPage() > 992){
+          <!-- dropdown para seleção de empresa/licenca -->
+          <dropdown-master
+            *ngIf="showLicencas()"
+            class="max-w-25rem"
+            style="min-width: 20rem;"
+            formControlName="idmaster"
+            [formGroup]="formGroup"
+            [masters]="masters"
+            (onSelectionChange)="changeLicense($event)"
+            (onSelectionValue)="changeLicense($event)"
+          >
+          </dropdown-master>
+        }
+
+        <!-- Navegação de sistemas e usuários -->
+        <div class="w-auto flex flex-row align-items-center gap-2">
+          @for (topAction of topMenuActions(); track $index) {
+          <ng-container *ngTemplateOutlet="topAction" />
+          }
+          <kv-top-icons
+            [topActions]="topActions()"
+          />
+
+        </div>
+
+        @if(widthPage() <= 992){
+          <!-- dropdown para seleção de empresa/licenca -->
+          <dropdown-master
+            *ngIf="showLicencas()"
+            class="w-full"
+            formControlName="idmaster"
+            [formGroup]="formGroup"
+            [masters]="masters"
+            (onSelectionChange)="changeLicense($event)"
+            (onSelectionValue)="changeLicense($event)"
+          >
+          </dropdown-master>
+        } 
+      }
+    </div>
+
+    <!-- Container -->
+    <div class="overflow-hidden flex-1 py-2 px-2 lg:px-3">
+      <p-card
+        styleClass="overflow-y-auto h-full max-h-full {{
+          !showMenu && 'sm:overflow-y-hidden'
+        }} card-container"
+      >
+        <ng-content></ng-content>
+      </p-card>
+    </div>
+  </div>
+
+  <!-- Painel de aplicativos -->
+  <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-3 align-items-center justify-content-center mt-5 mb-3"
+        style="width: 270px; height: 100%"
+      >
+        @for (aplicativo of apps; track $index) { @if(aplicativo.urlicone ==
+        "https://work-assets.keevo.com.br/img/icone-keevocenter.png") {
+        <div
+          class="btn-sistema text-xl md:text-3xl flex align-items-center justify-content-center"
+          (click)="selectApp(aplicativo.idaplicativo)"
+          [pTooltip]="aplicativo?.descricaoaplicativo"
+          [tooltipPosition]="'left'"
+        >
+          {{ aplicativo.descricaoaplicativo.charAt(0).toLocaleUpperCase() }}
+        </div>
+        } @else {
+        <img
+          [src]="aplicativo.urlicone"
+          class="btn-sistema flex align-items-center justify-content-center"
+          [pTooltip]="aplicativo?.descricaoaplicativo"
+          [tooltipPosition]="'left'"
+          (click)="selectApp(aplicativo.idaplicativo)"
+        />
+        } }
+
+        <!-- <button
+          *ngFor="let aplicativo of apps"
+          pButton
+          pRipple
+          class="btn-sistema-2 btn-sistema hover-btn-cor-padrao remove-focus h-4rem w-4rem"
+          [pTooltip]="aplicativo?.descricaoaplicativo"
+          [tooltipPosition]="'left'"
+          (click)="selectApp(aplicativo.idaplicativo)"
+        >
+          {{ aplicativo.nomeaplicativo.charAt(0).toUpperCase() }}
+        </button> -->
+      </div>
+    </ng-template>
+  </p-overlayPanel>
+
+  <!-- Painel do usuário -->
+  <p-overlayPanel
+    #meusDadosPanel
+    [showTransitionOptions]="'350ms ease-out'"
+    [hideTransitionOptions]="'250ms ease-in'"
+  >
+  <ng-template pTemplate="container">
+    <p class="system-color font-medium text-lg px-2 py-3 m-0">
+      Olá, {{ userName ? userName.split(" ")[0] : "Usuário" }}!
+    </p>
+    <!-- <div class="mt-5 mb-3"></div> -->
+  
+    <!-- Contêiner com direção em coluna para empilhar os botões -->
+    <div class="flex flex-column">
+      <!-- Botões adicionais dinâmicos -->
+      @for (action of actions; track $index) {
+        <ng-container>
+          <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 px-2"
+            (click)="action.action()"
+          >
+            <kv-icon
+              [icon]="action.icon"
+            />
+            <span>{{action.label}}</span>
+          </div>
+        </ng-container>
+      }
+
+      <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 px-2"
+        (click)="accessKeePass($event)"
+      >
+          <kv-icon
+            icon="lock"
+          />
+          <span>Acessar KeePass</span>
+      </div>
+  
+    </div>
+  </ng-template>
+  
+  </p-overlayPanel>
+</div>