Site/src/app/dashboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { MenuItem } from '../models/dashboardModel';
import { Router } from '@angular/router';
import { FuncoesGlobais } from 'src/environments/environment';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  BotoesMenuLateral: MenuItem[];
  UserName: string = localStorage.getItem("UserName") || "";

  constructor(
    private router: Router,
    private FuncoesGlobais: FuncoesGlobais,
  ) { }

  ngOnInit() {
    if (localStorage.getItem("Role") == "1") {
      this.PreencherMenuItensAdmin();
    }
    else if (localStorage.getItem("Role") == "2") {
      this.PreencherMenuItensCliente();
    }
    else {
      this.router.navigate(['/login']);
    }

  }

  PreencherMenuItensAdmin() {
    this.BotoesMenuLateral = [
      { 
        index: 0, 
        texto: "Página inicial", 
        link: "dashboard/admin/home", 
        havesub: false,
        dropicon: "arrow_drop_down",
        icon: "home",
        issub: false,
        sub: null,
      },
      { 
        index: 1, 
        texto: "Usuários", 
        link: "",
        havesub: true,
        dropicon: "arrow_drop_down",
        icon: "person",
        issub: false,
        sub: [
          { 
            index: 0,
            texto: "Cadastrar", 
            link: "usuarios/cadastro",
            icon: "person_add",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
          { 
            index: 1,
            texto: "Visualizar", 
            link: "usuarios/visualizar",
            icon: "pageview",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
        ],
      },
      { 
        index: 2, 
        texto: "Sistemas", 
        link: "",
        havesub: true,
        dropicon: "arrow_drop_down",
        icon: "extension",
        issub: false,
        sub: [
          { 
            index: 0,
            texto: "Cadastro", 
            link: "sistemas/cadastro",
            icon: "add_to_queue",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
          { 
            index: 1,
            texto: "Visualizar", 
            link: "sistemas/visualizar",
            icon: "pageview",
            havesub: null,
            dropicon: "",
            issub: true,
            sub: null,
          },
        ],
      },
      { 
        index: 3, 
        texto: "Ambiente cliente", 
        link: "/dashboard/cliente", 
        havesub: false,
        dropicon: "arrow_drop_down",
        icon: "home",
        issub: false,
        sub: null,
      },
      { 
        index: 4, 
        texto: "Bingo", 
        link: "",
        havesub: true,
        dropicon: "arrow_drop_down",
        icon: "extension",
        issub: false,
        sub: [
          { 
            index: 0,
            texto: "Dashboard", 
            link: "/bingo/dashboard",
            icon: "add_to_queue",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
          { 
            index: 1,
            texto: "Sorteio", 
            link: "/bingo/sorteio",
            icon: "pageview",
            havesub: null,
            dropicon: "",
            issub: true,
            sub: null,
          },
        ],
      },
      { 
        index: 5, 
        texto: "OrionTard Pro", 
        link: "",
        havesub: true,
        dropicon: "arrow_drop_down",
        icon: "home",
        issub: false,
        sub: [
          { 
            index: 0,
            texto: "Logs", 
            link: "/orion-dashboard",
            icon: "update",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
          { 
            index: 1,
            texto: "Ordens de Serviço", 
            link: "/orion-ordens-servico",
            icon: "update",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
          { 
            index: 2,
            texto: "Equipamentos", 
            link: "/orion-equipamentos",
            icon: "update",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
        ],
      },
      { 
        index: 6, 
        texto: "AgroBase", 
        link: "",
        havesub: true,
        dropicon: "arrow_drop_down",
        icon: "agriculture",
        issub: false,
        sub: [
          { 
            index: 0,
            texto: "Versionamento", 
            link: "/agrobase/versionamento",
            icon: "update",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
        ],
      },
    ];
    this.CriaEventoClickSubItens();
  }

  PreencherMenuItensCliente() {
    this.BotoesMenuLateral = [
      /*{ 
        index: 0, 
        texto: "Página inicial", 
        link: "/home", 
        havesub: false,
        dropicon: "arrow_drop_down",
        icon: "home",
        issub: false,
        sub: null,
      },
      { 
        index: 1, 
        texto: "Meus Sistemas", 
        link: "/dashboard/cliente",
        havesub: false,
        dropicon: "arrow_drop_down",
        icon: "extension",
        issub: false,
        sub: [
          { 
            index: 0,
            texto: "Machining Price Simulator", 
            link: "sistemas/MPS",
            icon: "assessment",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
          { 
            index: 1,
            texto: "Casco-Tubo", 
            link: "sistemas/Casco-Tubo",
            icon: "assessment",
            havesub: false,
            dropicon: "",
            issub: true,
            sub: null,
          },
        ],
      },*/
    ];
    this.CriaEventoClickSubItens();
  }

  CriaEventoClickSubItens() {
    setTimeout(() => {
      var dropdown = document.getElementsByClassName("dropdown-btn");
      for (let i = 0; i < dropdown.length; i++) {
        if (this.BotoesMenuLateral[i].havesub) {
          dropdown[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var dropdownContent = this.nextElementSibling;
            if (dropdownContent.style.display === "block") {
              dropdownContent.style.display = "none";
            } else {
              dropdownContent.style.display = "block";
            }
          });
        }
      }
    }, 100);
  }

  DropMenuItem(indexBtnMenu) {
    if (this.BotoesMenuLateral[indexBtnMenu].havesub) {
      if (this.BotoesMenuLateral[indexBtnMenu].dropicon == "arrow_drop_down")
        this.BotoesMenuLateral[indexBtnMenu].dropicon = "arrow_drop_up";
      else
        this.BotoesMenuLateral[indexBtnMenu].dropicon = "arrow_drop_down";
    }
    else {
      this.router.navigate([this.BotoesMenuLateral[indexBtnMenu].link]);
    }
  }

  Sair() {
    localStorage.removeItem("Session");
    localStorage.removeItem("UserName");
    localStorage.removeItem("UserID");
    localStorage.removeItem("Role");
    localStorage.removeItem("LastRouteBeforeLogin");

    this.router.navigate(['/home']);
  }

}