keevo-components 1.8.540 → 1.8.541

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

@@ -0,0 +1,507 @@
+<div class="flex flex-row overflow-y-hidden w- full-container">
+  <div
+    [ngClass]="{ 'overlay-background': expandMenu() && widthPage() < 800 }"
+  ></div>
+  @if (showMenu) {
+  <div
+    [style]="{
+      minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'
+    }"
+  ></div>
+  } @if(showMenu) {
+  <p-sidebar
+    #sidebarRef
+    [visible]="true"
+    [showCloseIcon]="false"
+    [modal]="false"
+    [style]="{ width: expandMenu() ? '17rem' : '3.65rem' }"
+    class="sidebar-animation"
+    styleClass="transition-all"
+  >
+    <ng-template pTemplate="headless">
+      <div class="flex flex-column overflow-hidden">
+        <div
+          class="flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden"
+        >
+          <div
+            class="flex {{
+              expandMenu() ? 'flex-row' : 'flex-column'
+            }} align-items-center {{
+              expandMenu()
+                ? 'justify-content-between'
+                : 'justify-content-center'
+            }} py-3"
+          >
+            <!-- Logo para o menu expandido -->
+            <img
+              *ngIf="expandMenu() && logoMenuExpand"
+              alt="Card"
+              [src]="logoMenuExpand"
+              [style.height]="'3rem'"
+              width="auto"
+              class="cursor-pointer p-1"
+              (click)="navigateToDefaultRoute()"
+            />
+
+            <!-- Logo para o menu minimizado-->
+            <img
+              *ngIf="!expandMenu() && logoMenuHide"
+              alt="Card"
+              [src]="logoMenuHide"
+              [style.height]="'3rem'"
+              width="auto"
+              class="mb-2 p-1"
+              (click)="navigateToDefaultRoute()"
+            />
+
+            <!-- Toggle menu -->
+            <span
+              *ngIf="showExpandMenu"
+              class="material-symbols-outlined top-layout-icons p-1"
+              [pTooltip]="expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'"
+              [tooltipPosition]="'right'"
+              (click)="toggleMenu()"
+            >
+              menu
+            </span>
+          </div>
+
+          @if(showTrocaEmpresa){
+          <div
+            class="flex flex-row align-items-center {{
+              expandMenu()
+                ? 'justify-content-between'
+                : 'justify-content-center'
+            }}"
+          >
+            <div
+              class="flex flex-column cursor-pointer"
+              *ngIf="expandMenu() && selectedEmpresa"
+              (click)="changeEmpresa($event)"
+            >
+              <span
+                class="text-sm font-semibold mr-2"
+                [pTooltip]="this.selectedEmpresa.razaosocial"
+                [tooltipPosition]="'right'"
+              >
+                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
+              </span>
+              <span class="text-sm mt-1">{{
+                this.selectedEmpresa.cpfcnpj | 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)="changeEmpresa($event)"
+              [pTooltip]="'Trocar de empresa'"
+              [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 overflow-y-auto max-h-full">
+          <!-- menus -->
+          <li
+            *ngFor="let menu of menus; let i = index"
+            [class]="expandMenu() ? 'px-2' : 'px-1'"
+          >
+            <!-- menu que não tem filho -->
+            <a
+              (click)="callRoute(menu.link)"
+              *ngIf="
+                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)
+              "
+              pRipple
+              [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
+              [tooltipPosition]="'right'"
+              class="menu-option"
+              [style.background-color]="menu.bgColor"
+              [class.justify-content-center]="!expandMenu()"
+            >
+              <i
+                class="content-option-menu material-symbols-outlined icon-menu {{
+                  expandMenu() ? 'ml-1 mr-2' : ''
+                }}  icon-hover-color {{ menu.textColor }}"
+                *ngIf="menu.icone"
+              >
+                {{ menu.icone }}
+              </i>
+              <span
+                class="content-option-menu text-base text-blue-900 font-semibold {{
+                  menu.textColor
+                }}"
+                *ngIf="expandMenu()"
+                >{{ menu.descricaomenu }}</span
+              >
+            </a>
+            <!-- menu com filho -->
+            <div *ngIf="menu.indmenupai">
+              <a
+                pRipple
+                pStyleClass="@next"
+                enterClass="hidden"
+                enterActiveClass="slidedown"
+                leaveToClass="hidden"
+                leaveActiveClass="slideup"
+                [style.background-color]="
+                  isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'
+                "
+                class="menu-option {{
+                  !expandMenu()
+                    ? 'justify-content-center'
+                    : 'justify-content-between'
+                }} "
+                [tooltipPosition]="'right'"
+                [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
+                (click)="
+                  expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())
+                "
+              >
+                <div class="flex flex-row align-items-center">
+                  <i
+                    class="content-option-menu material-symbols-outlined icon-menu {{
+                      expandMenu() ? 'ml-1 mr-2' : ''
+                    }} icon-hover-color"
+                    *ngIf="menu.icone"
+                    [class.text-white]="isSelectedMenuPai(menu)"
+                  >
+                    {{ menu.icone }}
+                  </i>
+                  <span
+                    class="text-base text-blue-900 font-semibold content-option-menu"
+                    *ngIf="expandMenu()"
+                    >{{ menu.descricaomenu }}</span
+                  >
+                </div>
+                <span
+                  class="pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu"
+                  *ngIf="expandMenu()"
+                ></span>
+              </a>
+
+              <!-- filhos -->
+              <div
+                class="list-none py-0 pl-3 pr-0 m-0 {{
+                  !(
+                    menuSelecionado()?.idmenupai == menu.idmenu &&
+                    this.expandMenu()
+                  ) && 'hidden'
+                }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out"
+              >
+                <li
+                  *ngFor="
+                    let filho of returnMenuChild(menu.idmenu);
+                    let iFilho = index
+                  "
+                >
+                  <a
+                    *ngIf="expandMenu()"
+                    (click)="callRoute(filho.link)"
+                    pRipple
+                    class="menu-option"
+                    [style.background-color]="filho.bgColor"
+                  >
+                    <i
+                      class="content-option-menu material-symbols-outlined icon-menu {{
+                        expandMenu() ? 'ml-1 mr-2' : ''
+                      }} icon-hover-color"
+                      *ngIf="filho.icone"
+                    >
+                      {{ filho.icone }}
+                    </i>
+                    <span
+                      class="content-option-menu text-medium text-blue-900 ml-4 {{
+                        filho.textColor
+                      }}"
+                      *ngIf="expandMenu()"
+                      >{{ filho.descricaomenu }}</span
+                    >
+                  </a>
+                </li>
+              </div>
+            </div>
+          </li>
+        </div>
+      </div>
+    </ng-template>
+  </p-sidebar>
+  }
+
+  <!-- Topbar -->
+  <div
+    class="w-auto h-screen page-content overflow-y-hidden flex flex-column"
+    id="page-content"
+    style="width: 100vw !important"
+  >
+    <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 -->
+      <div>
+        <p class="text-xl font-semibold text-blue-900 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-2rem !important;"
+          [model]="breadCrumbItems"
+          [style]="{ backgroundColor: '#eaeaea' }"
+          (onItemClick)="callRoute($event.item.routerLink, true)"
+        ></p-breadcrumb>
+      </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="master-name">{{ 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" />
+        }
+
+        <span
+          *ngIf="showButtonApps"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Sistemas'"
+          [tooltipPosition]="'left'"
+          (click)="sistemasPanel.toggle($event)"
+        >
+          apps
+        </span>
+
+        <span
+          *ngIf="showButtonUser"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Menu do Usuário'"
+          [tooltipPosition]="'left'"
+          (click)="meusDadosPanel.toggle($event)"
+        >
+          person
+        </span>
+      </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" />
+        }
+
+        <span
+          *ngIf="showButtonApps"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Sistemas'"
+          [tooltipPosition]="'left'"
+          (click)="sistemasPanel.toggle($event)"
+        >
+          apps
+        </span>
+
+        <span
+          *ngIf="showButtonUser"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Menu do Usuário'"
+          [tooltipPosition]="'left'"
+          (click)="meusDadosPanel.toggle($event)"
+        >
+          person
+        </span>
+      </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" />
+        }
+
+        <span
+          *ngIf="showButtonApps"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Sistemas'"
+          [tooltipPosition]="'left'"
+          (click)="sistemasPanel.toggle($event)"
+        >
+          apps
+        </span>
+
+        <span
+          *ngIf="showButtonUser"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Menu do Usuário'"
+          [tooltipPosition]="'left'"
+          (click)="meusDadosPanel.toggle($event)"
+        >
+          person
+        </span>
+      </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="title-style mt-3">
+      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 -->
+      <ng-container *ngFor="let action of actions">
+        <p-button
+          [icon]="action.icon"
+          [label]="action.label"
+          (onClick)="action.action()"
+          styleClass="border-noround w-full text-blue-900 text-sm"
+          [text]="true"
+        ></p-button>
+      </ng-container>
+      
+      <!-- Botões padrão -->
+      <p-button
+        icon="pi pi-lock"
+        label="Acessar KeePass"
+        (onClick)="accessKeePass($event)"
+        styleClass="border-noround w-full text-blue-900 text-sm"
+        [text]="true"
+      ></p-button>
+  
+      <p-button
+        icon="pi pi-sign-out"
+        label="Sair"
+        (onClick)="logout($event)"
+        styleClass="border-noround w-full text-blue-900 text-sm"
+        [text]="true"
+      ></p-button>
+  
+    </div>
+  </ng-template>
+  
+  </p-overlayPanel>
+</div>