MatFullNav

This project was generated with Angular CLI version 11.0.6.

Iniciando

Crie um novo projeto angular

ng new <project>

Dependencias

Angular-Material

ng add @angular/material

Angular-Flex-Layout

npm i -s @angular/flex-layout @angular/cdk

Instale o mat-full-nav

MatFullNav

npm i @silverio27/ui

Importe o mat-full-nav em app.module.ts

...
import { MatFullNavModule} from '@silverio27/ui';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    MatFullNavModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Configure a tela incial

Adicione em app.component.html

<mat-full-toolbar
  logo="<path>/<your-logo>.png"
  [apps]="apps"
  [notifications]="notifications"
  [profile]="profile"
  (menuClick)="menu.opened=!menu.opened"
  (removeNotification)="removeNotification($event)"
></mat-full-toolbar>
<mat-full-menu #menu [items]="items">
  <router-outlet></router-outlet>
</mat-full-menu>

MatFullToolBar

• @Input(): logo: string

Imagem quer irá aparecer ao lado do botão de menu, use uma imagem em png de 109 x 40 px

• @Input(): apps: Apps[]

utilize a interface Apps para criar uma lista de aplicativos, com ícones e rotas de navegação. Exemplo:

  apps: Apps[] = [
    { icon: "dashboard", route: "", name: "BI" },
    { icon: "account_circle", route: "", name: "Conta" },
    { icon: "integration_instructions", route: "", name: "Integração" },
    { icon: "shopping_cart", route: "", name: "Compras" },
    { icon: "fact_check", route: "", name: "Lista da vez" },
    { icon: "admin_panel_settings", route: "", name: "Administrativo" },
    { icon: "wb_incandescent", route: "", name: "Planejamento" },
    { icon: "photo", route: "", name: "Produtos" },
  ];

• @Input(): notifications : MatFullNotification[]

utilize a interface MatFullNotification para criar uma lista de notificações, com mensagem, tarefa, hora do acontecimento e status. Utilize a enumeração MatFullNotificationStatus

Exemplo:

notifications: MatFullNotification[] = [
    {
      id: '05bc47ed-c726-4160-9eb7-ad885fbb2506',
      message: "tarefa falhou",
      status: MatFullNotificationStatus.ERROR,
      task: "ligar vm",
      time: new Date("2021-04-01 08:00"),
    },
    {
      id: 'b9c8fe09-bbc3-409c-870d-7be7431be321',
      message: "tarefa concluída",
      status: MatFullNotificationStatus.OK,
      task: "desligar vm",
      time: new Date("01/04/2021 08:00"),
    },
    {
      id: 'c6f9e1bb-66e7-4f54-ab91-0a4b8060128d',
      message: "tarefa em andamento",
      status: MatFullNotificationStatus.WAIT,
      task: "imagem exluir",
      time: new Date("2021-04-01 08:00"),
    }]

• @Input(): profile : Profile

Para exibir dados do usuário utilize a interface Profile

Exemplo:

  profile = {
    avatar:
      "<path>.jpg",
    name: "Lucas Silvério",
    email: "[email protected]",
    developmentBy: "https://github.com/silverio27",
  } as Profile;

• @Output(): menuClick()

Dispara um evento ao clicar sobre o botão de menu Utilize esse comando para controlar se o menu será exibido ou ocultado

Exemplo:

<mat-full-toolbar
   ...
  (menuClick)="menu.opened=!menu.opened"
   ...
></mat-full-toolbar>
<mat-full-menu #menu >
  ...
</mat-full-menu>

• @Output(): removeNotification()

Utilize esse evento para fazer algo depois de remover uma notficação. O evento envia como parâmetro a notificação.

Exemplo:

<mat-full-toolbar
  ...
  (removeNotification)="removeNotification($event)"
  ...
></mat-full-toolbar>

  removeNotification(notification: any) {
    console.log(notification);
  }

MatFullMenu

Exibe uma lista lateral de rotas do sistema

<mat-full-menu #menu [items]="items">
  <router-outlet></router-outlet>
</mat-full-menu>

• @Input(): opened: boolean

Utilizado para controlar a exibição do menu

-@Input(): items: MenuItem[]

utilize a interface MenuItem para criar uma lista de rotas

Exemplo:

  items: MenuItem[] = [
    {
      icon: "photo_camera",
      name: "Fotos",
      route: "/foto",
      tooltip: "upload de fotos",
    },
    { icon: "dashboard", name: "Dashboard", route: "/dashboard" },
    {
      icon: "integration_instructions",
      route: "/integracao",
      name: "Integração",
    },
    { icon: "sync", route: "/webhook", name: "webhooks" },
  ];

MatFullPage

Utilize esse componente para criar as páginas do sistema. Esse componente possui serviços de integração com a toolbar para manipular a barra de busca e o menu lateral. Por padrão foi definido que todos os filtros ficam melhor indicados ao lado da barra de busca, despoluindo a tela principal. Ao adicionar filtros, parametros de busca, é carregado automaticamente na parte superior da tela quais são esses parametros, podendo removelos rapidamente através de um botão de exclusão. O botão novo também foi padrozinado para sempre aparecer acima do menu.

<mat-full-page-default #page (newItem)="novo()" [showNewButton]="true">
  <div body>
    <p>page dashboard works!</p>
  </div>
  <ng-template>
    <app-filter-example
      [productFilter]="page.filter"
      (apply)="page.applyFilter($event)"
    ></app-filter-example>
  </ng-template>
</mat-full-page-default>

• @Input(): showNewButton: boolean

Utilize esse parâmetro para ocultar ou exibir o botão novo.

• @Input(): load: boolean

Utilize esse parâmetro para adicionar uma tela de espera sobreposicionada.

-@Output(): newItem()

Utilize esse evento quando clicar no botão novo.

• body: content

Escreva o código da sua página dentro da div marcado com a anotação body.

<mat-full-page-default ...>
  <div body>
    <p>page dashboard works!</p>
  </div>
  ...
</mat-full-page-default>

• filter: template Escreva o formulário do seus filtros dentro de ng-template

<mat-full-page-default #page ...>
   ...
  <ng-template>
    <app-filter-example
      [productFilter]="page.filter"
      (apply)="page.applyFilter($event)"
    ></app-filter-example>
  </ng-template>
</mat-full-page-default>

Faça a ligação do seu objeto de filtro com o objeto filter de MatFullPageDefault.

Quando aplicar o seu filtro invoque também o evento applyFilter($event) para que ele exiba quais parâmetros filtros foram solicitados.

SearchService

Caso queira ocultar a barra de pesquisa utilize o serviço.

Exemplo:

  constructor(private searchService: SearchService) { }
  
  ngOnInit(): void {
    this.searchService.showSearch.next(false)
  }
  ngOnDestroy(): void {
   this.searchService.showSearch.next(true);
  }