npm package: @silverio27/ui
Description: A full generic navigation for angular-material projects
Author: Lucas Silvério
Latest version: 0.1.9

# MatFullNav

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.6.

## Iniciando

Crie um novo projeto angular

```CMD
ng new <project>
```

## Dependencias

[Angular-Material](https://material.angular.io/guide/getting-started)

```CMD
ng add @angular/material
```

[Angular-Flex-Layout](https://github.com/angular/flex-layout)

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

## Instale o mat-full-nav

[MatFullNav](https://www.npmjs.com/package/@silverio27/ui)

```CMD
npm i @silverio27/ui
```

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

```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

```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:

```TS
  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:
````TS
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:

````TS
  profile = {
    avatar:
      "<path>.jpg",
    name: "Lucas Silvério",
    email: "silverio.des.vargas@gmail.com",
    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:
````HTML
<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:
````HTML
<mat-full-toolbar
  ...
  (removeNotification)="removeNotification($event)"
  ...
></mat-full-toolbar>
````
````TS
  removeNotification(notification: any) {
    console.log(notification);
  }
````

### MatFullMenu

Exibe uma lista lateral de rotas do sistema

````HTML
<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:
````TS
  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.

````HTML
<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**.

````HTML
<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

````HTML
<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:
````TS
  constructor(private searchService: SearchService) { }
  
  ngOnInit(): void {
    this.searchService.showSearch.next(false)
  }
  ngOnDestroy(): void {
   this.searchService.showSearch.next(true);
  }
````