html primeng：menu y marco de trabajo

Posted 2021-05-11

 <!--
aqui se nota el uso de la grilla de prime, ademas del componente que se ha creado
"statistic"
  -->
  
<p-panel header="El Tablero" xmlns="http://www.w3.org/1999/html">
  <div class="ui-g">
    <at-statistic icon="fa-address-card" colour="black" label="tarjetero" value="50" class="ui-g-12 ui-md-6 ui-lg-3"></at-statistic>
    <at-statistic label="Stories" value="35" icon="fa-users" colour="#2F8EE5" class="ui-g-12 ui-md-6 ui-lg-3"></at-statistic>
    <at-statistic label="Stories" value="35" icon="fa-users" colour="#2F8EE5" class="ui-g-12 ui-md-6 ui-lg-3"></at-statistic>
    <at-statistic label="Stories" value="35" icon="fa-users" colour="#2F8EE5" class="ui-g-12 ui-md-6 ui-lg-3"></at-statistic>
  </div>
  <br>
</p-panel>

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

<div class="statistic ui-g" [style.background-color]="colour">
  <div class="icon ui-g-5">
    <i class="fa {{ icon }}" *ngIf="icon"></i>
  </div>

  <div class="data ui-g-7">

    <div class="value">
      {{ value }}
    </div>

    <div class="label" *ngIf="label">
      {{ label }}
    </div>

  </div>

</div>

.statistic {
  margin: 1em;
  min-width: 200px;
  color: white;
  text-align: center;
  font-family: "Roboto";
}

.icon {
  font-size: 80px;
  margin: 0px;
  padding: 5px;
}

.data {
  padding: 1em;
  vertical-align: middle;
}

.value {
  font-size: 40px;
}

.label {
  text-transform: uppercase;
}

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'at-statistic',
  templateUrl: './statistic.component.html',
  styleUrls: ['./statistic.component.css']
})
export class StatisticComponent implements OnInit {
  @Input() icon: string;
  @Input() label: string;
  @Input() value: string;
  @Input() colour: string;

  constructor() { }

  ngOnInit() {
  }

}

/* todo este ejemplo consiste de un menú que tiene vrias opciones pero que solo dos funcionan 
la de dashboard y la de setting, pero ademas hace uso de un componente: statitics */


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import {ConfirmationService, ConfirmDialogModule} from 'primeng/primeng';
import {PanelModule} from 'primeng/primeng';
import {MenuModule, ButtonModule} from 'primeng/primeng';

import { StatisticComponent } from './statistic/statistic.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SettingsComponent } from './settings/settings.component';

const appRoutes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  /*{ path: "alltimes", component: AlltimesComponent },
  { path: "timesheet", component: TimesheetComponent},
  { path: "projects", component: ProjectsComponent},
  { path: "profile", component: ProfileComponent},*/
  { path: 'settings', component: SettingsComponent},
];



@NgModule({
  declarations: [
    AppComponent,
    SettingsComponent,
    StatisticComponent,
    DashboardComponent,
  ],
  imports: [
    BrowserModule,
    PanelModule,
    HttpModule,
    BrowserAnimationsModule,
    MenuModule,
    ConfirmDialogModule,
    RouterModule.forRoot(appRoutes),
    ButtonModule,
  ],
  providers: [ConfirmationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

/* app.component.ts
es importante no olivdar de incluir MenuModule, aunque aparezca que no se le da uso
*/

import {Component, OnInit, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

import {MenuModule, MenuItem} from 'primeng/primeng';
import {Menu} from 'primeng/components/menu/menu';

declare var jQuery: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit  {
  menuItems: MenuItem[];
  miniMenuItems: MenuItem[];

  @ViewChild('bigMenu') bigMenu: Menu;
  @ViewChild('smallMenu') smallMenu: Menu;

  constructor(private router: Router) {

  }

  ngOnInit() {

    let handleSelected = function(event) {
      let allMenus = jQuery(event.originalEvent.target).closest('ul');
      let allLinks = allMenus.find('.menu-selected');

      allLinks.removeClass('menu-selected');
      let selected = jQuery(event.originalEvent.target).closest('a');
      selected.addClass('menu-selected');
    }

    this.menuItems = [
      {label: 'Dashboard', icon: 'fa-home', routerLink: ['/dashboard'], command: (event) => handleSelected(event)},
      {label: 'All Times', icon: 'fa-calendar', routerLink: ['/alltimes'], command: (event) => handleSelected(event)},
      {label: 'My Timesheet', icon: 'fa-clock-o', routerLink: ['/timesheet'], command: (event) => handleSelected(event)},
      {label: 'Add Project', icon: 'fa-tasks', routerLink: ['/projects'], command: (event) => handleSelected(event)},
      {label: 'My Profile', icon: 'fa-users', routerLink: ['/profile'], command: (event) => handleSelected(event)},
      {label: 'Settings', icon: 'fa-sliders', routerLink: ['/settings'], command: (event) => handleSelected(event)},
    ]

    this.miniMenuItems = [];
    this.menuItems.forEach( (item: MenuItem) => {
      let miniItem = { icon: item.icon, routerLink: item.routerLink }
      this.miniMenuItems.push(miniItem);
    });
  }

  selectInitialMenuItemBasedOnUrl() {
    let path = document.location.pathname;
    let menuItem = this.menuItems.find( (item) => { return item.routerLink[0] == path; } );
    if (menuItem) {
      let selectedIcon = this.bigMenu.container.querySelector(`.${menuItem.icon}`);
      jQuery(selectedIcon).closest('li').addClass('menu-selected');
    }
  }

  ngAfterViewInit() {
    this.selectInitialMenuItemBasedOnUrl();
  }
}

/* STYLE.CSS principal de toda la app
   ES MUY IMPORTANTE que se incluya para que la app realmente sea responsive
}*/


/*.ui-panel-titlebar {
  background-color: #2F8EE5 !important;
  color: white !important;
}*/

.ui-menu {
  width: auto !important;
  margin: 0px !important;
  border: none !important;
  background-color: darkcyan !important;
}

.ui-menuitem-text {
  color: white !important;
}

.ui-menuitem-icon {
  color: white !important;
  font-size: large !important;
  margin-right: 1em;
}

/*.menu-selected {
  background-color: #F15B2A !important;
  color: #ffffff;
}*/

 <!--  APP.COMPONENT.HTML
primero creo el esqueleto html para la distribucion de la pantalla
  -->
  
<div class="ui-g ui-g-nopad" id="header">

  <div class="ui-g-10">
    espacio para el  logo
  </div>
  <div class="ui-g-2" id="notifications">
notificaciones
  </div>
</div>


<div class="ui-g ui-g-nopad">

  <div class="ui-md-2 ui-g-nopad " id="sidegutter">

    <div id="sidenav">

      <p-menu #bigMenu [model]="menuItems"></p-menu>


    </div>

  </div>

  <div class="ui-md-2 ui-g-nopad" id="minigutter">

    <div id="sidenav-mini">

      <p-menu #smallMenu [model]="miniMenuItems"></p-menu>


    </div>

  </div>


  <div id="content-body" class="ui-md-10 ui-g-nopad">

    <router-outlet></router-outlet>

  </div>
</div>