keevo-components 2.0.54 → 2.0.56

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

@@ -0,0 +1,538 @@
+<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">
+        <div
+          class="flex-none flex flex-column gap-3 justify-content-between flex-shrink-0 overflow-hidden"
+        >
+          <!-- LOGO -->
+          <div
+            class="flex {{
+              expandMenu() ? 'flex-row' : 'flex-column'
+            }} align-items-center {{
+              expandMenu()
+                ? 'justify-content-between'
+                : 'justify-content-center'
+            }} p-2"
+          >
+            <!-- Logo para o menu expandido -->
+            @if(expandMenu() && logoMenuExpand){
+            <img
+              alt="Card"
+              [src]="logoMenuExpand"
+              [style.height]="'2.4rem'"
+              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.4rem'"
+              width="auto"
+              class="cursor-pointer p-1"
+              (click)="navigateToDefaultRoute()"
+            />
+            }
+
+            <!-- Toggle menu -->
+            @if(showExpandMenu){
+            <!-- <span class="material-symbols-outlined side-menu-item" (click)="expandMenu.set(!expandMenu())">menu</span> -->
+            }
+          </div>
+
+          @if(showTrocaEmpresa){
+            <div
+              class="flex flex-row align-items-center justify-content-{{
+                expandMenu() ? 'between' : 'center'
+              }} gap-2 troca-empresa-container mb-3 py-2 {{
+                !isDisableSelectionEmpresa && 'selectable-troca-empresa'
+              }}"
+              [pTooltip]="isDisableSelectionEmpresa ? '' : 'Trocar de empresa'"
+              [tooltipPosition]="'right'"
+              (click)="!isDisableSelectionEmpresa && changeEmpresa($event)"
+            >
+              @if(expandMenu() && selectedEmpresa){
+              <div class="flex flex-column w-full">
+                @if(this.selectedEmpresa.razaosocial){
+                <span class="text-xs font-semibold mr-2 color-system">
+                  {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
+                </span>
+                } @if(this.selectedEmpresa.cpfcnpj){
+                <span class="text-xs mt-1 color-system">{{
+                  this.selectedEmpresa.cpfcnpj | cpfCnpj
+                }}</span>
+                }
+              </div>
+
+              } @if(!isDisableSelectionEmpresa) {
+              <span class="material-symbols-outlined">swap_horiz</span>
+              }
+            </div>
+          }
+
+        </div>
+        <!-- MENUS -->
+        <div
+          class="flex-1 list-none m-0 overflow-y-auto max-h-full menus-container"
+        >
+          <!-- menus -->
+          @for (menu of menus(); track $index) {
+          @if(!idsAplicativosMenuHide.includes(menu.idaplicativo)){
+          <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"
+              style="padding-top: 0.75rem; padding-bottom: 0.75rem"
+              (click)="callRoute(menu.link)"
+            >
+              <span class="material-symbols-outlined">{{
+                menu.icone || "lens_blur"
+              }}</span>
+              @if(expandMenu()){
+              <label>{{ menu.descricaomenu }}</label>
+              }
+            </div>
+            }
+            <!-- menu com filho -->
+            @if(menu.indmenupai){
+            <div
+              class="menu-parent"
+              id="menu-parent-{{ $index }}"
+              (mouseenter)="exibirMenuChild($event, $index)"
+              (mouseleave)="menuVisivel.set(undefined)"
+            >
+              <div
+                class=" flex flex-row align-items-center justify-content-{{
+                  expandMenu() ? 'between' : 'center'
+                }} gap-2 side-menu-item"
+                style="padding-top: 0.75rem; padding-bottom: 0.75rem"
+              >
+                <span class="material-symbols-outlined">{{
+                  menu.icone || "lens_blur"
+                }}</span>
+                @if(expandMenu()){
+                <label>{{ menu.descricaomenu }}</label>
+                <span class="material-symbols-outlined">chevron_right</span>
+                }
+              </div>
+
+              <div
+                class="menu-childs"
+                id="menu-child-{{ $index }}"
+                [style.opacity]="menuVisivel() === $index ? '1' : '0'"
+                [style.pointerEvents]="
+                  menuVisivel() === $index ? 'auto' : 'none'
+                "
+              >
+                <div class="flex align-items-center">
+                  <p class="p-0 m-0 font-bold pt-2 px-2 text-xs">
+                    {{ menu.descricaomenu }}
+                  </p>
+                </div>
+                <p-divider
+                  class="p-0 m-0"
+                  [style.opacity]="1"
+                  type="solid"
+                ></p-divider>
+                <div class="menu-childs-content p-0 m-0">
+                  @for (item of returnMenuChild(menu.idmenu); track $index) {
+
+                  <div
+                    class="side-menu-item py-2 px-2 text-sm"
+                    (click)="callRoute(item.link)"
+                  >
+                    {{ item.descricaomenu }}
+                  </div>
+                  }
+                </div>
+              </div>
+            </div>
+            }
+          </li>
+          } }
+        </div>
+
+        @if(useSelectionApps) {
+        <!-- APPS E SAIR -->
+        <p-divider class="px-2" [style.opacity]="1" type="solid"></p-divider>
+
+        <div class="flex-none list-none m-0 overflow-y-auto max-h-full">
+          <li>
+            <div
+              class="menu-parent"
+              id="menu-sistemas-parent"
+              (mouseenter)="exibirMenuChild($event, -1)"
+              (mouseleave)="menuVisivel.set(undefined)"
+            >
+              <!-- <div
+                class="flex flex-row align-items-center justify-content-{{
+                  expandMenu() ? 'between' : 'center'
+                }} gap-2 side-menu-item"
+                style="padding-top: 0.75rem; padding-bottom: 0.75rem"
+                [pTooltip]="!expandMenu() ? 'Sistemas' : ''"
+              >
+                <span class="material-symbols-outlined">grid_view</span>
+                
+                @if(expandMenu()){
+                <label>Sistemas</label>
+                <span class="material-symbols-outlined">chevron_right</span>
+                }
+              </div> -->
+
+              <div
+                class="flex flex-row align-items-center justify-content-{{
+                  expandMenu() ? 'between' : 'center'
+                }} gap-2 side-menu-item-system troca-sistema-container py-2"
+              >
+                <!-- <p-avatar
+                  icon="pi pi-th-large"
+                  styleClass="mr-2"
+                  size="normal"
+                  [style]="{
+                    'background-color': 'rgb(var(--kv-color-system), 1)',
+                    color: 'white'
+                  }"
+                /> -->
+                <div
+                  [style]="{
+                    'background-color': 'rgb(var(--kv-color-system), .2)',
+                    color: 'rgb(var(--kv-color-system), 1)',
+                    'border-radius': '.5rem',
+                    padding: '.25rem'
+                  }"
+                  class="flex align-items-center justify-content-center"
+                >
+                  <span class="material-symbols-outlined">
+                    dashboard_customize
+                  </span>
+                </div>
+
+                @if(expandMenu()) {
+                <div class="flex flex-column w-full">
+                  <span class="text-sm font-semibold mr-2 color-system">
+                    Meus Sistemas
+                  </span>
+                </div>
+
+                <span
+                  class="material-symbols-outlined"
+                  [style.color]="'rgb(var(--kv-color-system), 1)'"
+                  >unfold_more</span
+                >
+                }
+              </div>
+
+              <div
+                class="menu-childs"
+                id="menu-sistemas-child"
+                [style.opacity]="menuVisivel() === -1 ? '1' : '0'"
+                [style.pointerEvents]="menuVisivel() === -1 ? 'auto' : 'none'"
+              >
+                <p class="p-0 m-0 font-bold pt-2 pl-3 text-xs">Sistemas</p>
+                @for (item of apps; track $index) {
+                <div
+                  class="flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1"
+                  (click)="
+                    callRoute(item.rotapadrao); selectApp(item.idaplicativo)
+                  "
+                >
+                  <img
+                    [src]="item.urlicone"
+                    class="h-2rem w-2rem border-round-lg"
+                  />
+                  <div class="text-sm">
+                    {{ item.nomeaplicativo }}
+                  </div>
+                </div>
+                }
+              </div>
+            </div>
+          </li>
+          <!-- <li>
+            <div
+              class="flex flex-row align-items-center justify-content-{{
+                expandMenu() ? 'between' : 'center'
+              }} gap-2 side-menu-item"
+              style="padding-top: 0.75rem; padding-bottom: 0.75rem"
+              [pTooltip]="!expandMenu() ? 'Sair' : ''"
+              [style.color]="'rgba(252, 3, 3, 0.6)'"
+              (click)="logout($event)"
+            >
+              <span class="material-symbols-outlined">exit_to_app</span>
+              @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-3 mb-0"
+    >
+      @if(!showMenu) {
+      <!-- Logo home -->
+      <div>
+        <img [src]="logoMenuExpand" width="150" />
+      </div>
+      } @else {
+      <!-- Breadcrumbs -->
+      @if(showBreadcrumb) {
+      <div class="h-full">
+        <p-breadcrumb
+          *ngIf="widthCard > 400"
+          styleClass="border-none p-0 flex align-items-center h-2rem bg-transparent"
+          [model]="breadCrumbItems"
+          (onItemClick)="callRoute($event.item.routerLink, true)"
+        >
+          <ng-template pTemplate="item" let-item let-i="index">
+            @if(breadCrumbItems.indexOf(item) < breadCrumbItems.length - 1){
+            <span class="font-normal">{{ item.label }}</span>
+            } @else {
+            <span class="font-bold">{{ item.label }}</span>
+            }
+          </ng-template>
+        </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]="topMenuOptions" />
+      </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]="topMenuOptions" />
+      </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 flex-1"
+        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">
+        <kv-top-icons [topActions]="topMenuOptions" />
+      </div>
+      }
+    </div>
+
+    @if(widthPage() <= 992){
+    <!-- dropdown para seleção de empresa/licenca -->
+    <div class="h-2rem mx-3">
+      <dropdown-master
+        *ngIf="showLicencas()"
+        formControlName="idmaster"
+        [formGroup]="formGroup"
+        [masters]="masters"
+        (onSelectionChange)="changeLicense($event)"
+        (onSelectionValue)="changeLicense($event)"
+      />
+    </div>
+
+    }
+
+    <!-- Container -->
+    <div class="overflow-hidden flex-1 p-0 m-0 mb-2 h-full">
+      <div
+        class="overflow-y-auto h-full max-h-full {{
+          !showMenu && 'sm:overflow-y-hidden'
+        }} card-container
+        
+        {{ useCard ? 'use-card' : '' }}
+        "
+      >
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </div>
+
+  <!-- Painel do usuário -->
+  <p-overlayPanel
+    #meusDadosPanel
+    [showTransitionOptions]="'350ms ease-out'"
+    [hideTransitionOptions]="'250ms ease-in'"
+  >
+    <ng-template pTemplate="container">
+      <div class="p-3 flex flex-column gap-2">
+        <div
+          class="flex flex-row align-items-center {{
+            showTrilhaConhecimento && 'justify-content-between'
+          }} gap-2"
+        >
+          <p-avatar
+            icon="pi pi-user"
+            class="mr-2"
+            size="xlarge"
+            shape="circle"
+            [style]="{ width: '4.5rem', height: '4.5rem' }"
+          />
+
+          <div
+            class="flex flex-column {{
+              showTrilhaConhecimento ? 'w-18rem' : 'w-12rem'
+            }} justify-content-between"
+            [style]="{ height: '4.5rem' }"
+          >
+            <span
+              class="text-medium text-md overflow-hidden white-space-nowrap text-overflow-ellipsis"
+              >Olá, {{ userName.split(" ")[0] }}!</span
+            >
+            <span
+              class="text-medium text-xs text-gray-500 overflow-hidden white-space-nowrap text-overflow-ellipsis"
+              >{{ userEmail }}</span
+            >
+            <kv-button
+              severity="secondary"
+              size="small"
+              label="Gerenciar KeePass"
+              (onClick)="accessKeePass($event)"
+              class="w-12rem"
+            ></kv-button>
+          </div>
+        </div>
+
+        @if(actions.length > 0) {
+        <p-divider></p-divider>
+
+        <div class="flex flex-column text-sm">
+          @for (action of actions; track $index) {
+          <ng-container>
+            <div
+              class="flex flex-row align-items-center gap-2 side-menu-item p-2"
+              (click)="action.action()"
+            >
+              <span class="material-symbols-outlined">{{ action.icon }}</span>
+              <span>{{ action.label }}</span>
+            </div>
+          </ng-container>
+          }
+        </div>
+        } @if(showTrilhaConhecimento) {
+        <p-divider></p-divider>
+
+        <div class="flex flex-column gap-3">
+          <span class="text-sm font-semibold text-gray-500"
+            >Trilha do Conhecimento</span
+          >
+          @for(trilha of trilhaConhecimento; track $index) {
+
+          <div class="flex flex-row gap-2 max-w-25rem">
+            <div
+              class="flex align-items-center justify-content-center border-round-md trilha-icon"
+            >
+              <span class="material-symbols-outlined text-2xl">{{
+                trilha.icon
+              }}</span>
+            </div>
+            <div class="flex flex-column justify-content-between w-20rem">
+              <span
+                class="text-sm font-medium overflow-hidden white-space-nowrap text-overflow-ellipsis text-gray-500"
+                >{{ trilha.title }}</span
+              >
+              <span
+                class="text-xs text-gray-400 overflow-hidden white-space-nowrap text-overflow-ellipsis"
+                [pTooltip]="trilha.subtitle"
+                [tooltipPosition]="'left'"
+                >{{ trilha.subtitle }}</span
+              >
+              <div class="flex flex-row gap-2">
+                <span
+                  class="material-symbols-outlined button-icon"
+                  [pTooltip]="'Baixar Documento'"
+                  (click)="downloadDoc(trilha)"
+                  >download</span
+                >
+                <span
+                  class="material-symbols-outlined button-icon"
+                  [pTooltip]="'Assistir Vídeo'"
+                  (click)="showVideoDoc(trilha)"
+                  >videocam</span
+                >
+              </div>
+            </div>
+          </div>
+          }
+        </div>
+        }
+
+        <p-divider></p-divider>
+
+        <div
+          class="flex flex-row align-items-center justify-content-between gap-2 side-menu-item p-2"
+          [style.color]="'rgba(252, 3, 3, 0.6)'"
+          (click)="logout($event)"
+        >
+          <span class="material-symbols-outlined">exit_to_app</span>
+          <label>Sair</label>
+        </div>
+      </div>
+    </ng-template>
+  </p-overlayPanel>
+</div>