dharma-ui-common v8.1.7

dharma-ui-common

Subida na esteira

Clique aqui para subir seu projeto

Motivação:

O dharma UI common tem como objetivo fornecer as funcionalidades essenciais para qualquer projeto Angular.

O que o Dharma Common oferece:

• Painel administrativo
• Landing Page
• Script de instalação

Versões recomendadas para o Dharma UI Versão ^8.0.0

{
  "rxjs": "~6.5.3",
  "@angular/animations": "~8.2.3",
  "@angular/cdk": "~8.2.3",
  "@angular/common": "~8.2.3",
  "@angular/compiler": "~8.2.3",
  "@angular/core": "~8.2.3",
  "@angular/forms": "~8.2.3",
  "@angular/material": "~8.2.3",
  "@angular/platform-browser": "~8.2.3",
  "@angular/platform-browser-dynamic": "~8.2.3",
  "@angular/router": "~8.2.3",
}

Utilizar versão do angular de acordo com a versão do módulo.

Sumário:

• Estrutura básica Angular
└── src
    └── app
        └── pages
            ├── module-folder-1 <- página que irá ser apresentada no admin/landing
            │   ├── module-folder-1.component.html
            │   ├── module-folder-1.component.scss
            │   ├── module-folder-1.component.ts
            │   ├── module-folder-1.module.ts
            │   └── module-folder-1.routing.ts
            ├── module-folder-2 <- página que irá ser apresentada no admin/landing
            │   ├── module-folder-2.component.html
            │   ├── module-folder-2.component.scss
            │   ├── module-folder-2.component.ts
            │   ├── module-folder-2.module.ts
            │   └── module-folder-2.routing.ts
            ├── pages.component.html <- Página global que irá definir se é um admin ou uma landing page
            ├── pages.component.scss 
            ├── pages.component.ts 
            ├── pages.module.ts
            └── pages.routing.ts <- Página de rotas

Vamos iniciar um projeto em Angular do zero.

Crie um projeto novo: $ ng new <nome-do-seu-projeto>

Entre na pasta em que o projeto foi criado $ cd <nome-do-seu-projeto>

Instale o módulo dharma-ui-common $ npm install dharma-ui-common

Após instalar o dharma-ui-common, execute o seguinte comando:

$ npm link dharma-ui-common o comando npm link torna o comando dharma-ui-install global para todo sistema

Ainda dentro da pasta do projeto, execute o comando para instalar todas as dependências $ dharma-ui-install

Pronto agora você tem um projeto em Angular criado e apto para a instalação do dharma-ui-common.

O primeiro passo é importar o módulo LandingModule do dharma-ui-common no módulo que você for usar o componente.

Em nosso exemplo, iremos importar na app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingModule } from 'dharma-ui-common';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        LandingModule,
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Após importar o módulo, a tag <landing-page></landing-page> estará disponível no HTML para ser utilizado.

Veja no exemplo:

<landing
    [hasFooter]="true"
    [isButtonEnable]="true"
    [isLoggedIn]="isLoggedIn"
    [username]="nameUser"
    [defaultRoute]="defaultRoute"
    logo="assets/images/logo-dotz-cortado.jpg">
    <!-- Aqui deve ser o conteúdo da página -->
    <div class="text-center">
        <router-outlet></router-outlet>
    </div>
</landing>

No component:

import { Component } from '@angular/core';
import { INavData } from 'dharma-ui-common';
import { AuthService, TokenStorage } from 'dharma-ui-security';
import { LoaderService } from 'dharma-ui-components';

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html'
})
export class DefaultLayoutComponent {
  title = 'Rewards';
  nameUser: string = 'Usuário de Sistema';
  nameUserPerfil: string = 'Administrador';
  defaultRoute = '/home/landing';

  constructor(
    private authService: AuthService,
    private tokenStorage: TokenStorage,
    private loaderService: LoaderService) {
  }

  ngOnInit() {
    const user = this.tokenStorage.getUser();
    this.nameUser = this.tokenStorage.getUserName();
  }

  logout() {
    this.loaderService.show()
    this.authService.startLogout();
  }

}

Parâmetros @Input:

Observações:

• Para utilizar o router-outlet, deve ser importado as rotas no módulo (o que não fizemos nesse exemplo)
• Utilizar sempre lazy load nas rotas do projeto

Importe os seguintes itens na angular.json

"styles": 
[
  "src/styles.scss",
  "node_modules/font-awesome/css/font-awesome.css",
  "node_modules/simple-line-icons/css/simple-line-icons.css"
],
"scripts": 
[
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "src/env.js"
]

Depois adicione o style do core-ui no arquivo style.scss

// If you want to override variables do it here
@import "./scss/variables";

// Import styles
@import "~dharma-ui-common/scss/bootstrap/coreui";

// If you want to add something do it here
@import "./scss/custom";

depois basta importar o módulo AdminModule do dharma-ui-common no módulo que você for usar o componente.

Em nosso exemplo, iremos importar na app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminModule } from 'dharma-ui-common';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        AdminModule,
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Após importar o módulo, a tag <admin></admin> estará disponível no HTML para ser utilizado.

Veja no exemplo:

<admin 
    [navbarBrandRouterLink]="['/dashboard']" 
    [fixed]="true" 
    [navbarBrandFull]="{src: 'assets/images/logo-dotz.png', alt: 'Dotz Logo', class: 'img-fluid'}" 
    [navbarBrandMinimized]="{src: 'assets/dotz-images/logo-dotz.png', alt: 'Dotz Logo', class: 'img-fluid'}"
    [sidebarToggler]="'xl'" 
    [projectName]="title" 
    [nameUser]="nameUser"
    [sidebarItems]="sidebarItems"
    [nameUserPerfil]="nameUserPerfil"
    (logout)="logout()">
    <!-- Aqui deve ser o conteúdo da página -->
    <div class="container-fluid">
        <router-outlet></router-outlet>
    </div>
</admin>

import { Component } from '@angular/core';
import { INavData } from 'dharma-ui-common';
import { AuthService, TokenStorage } from 'dharma-ui-security';
import { LoaderService } from 'dharma-ui-components';
import { sidebarNavItems } from './_nav';

@Component({
  selector: 'app-dashboard',
  templateUrl: './default-layout.component.html'
})
export class DefaultLayoutComponent {
  sidebarItems: INavData[] = sidebarNavItems;
  title = 'Rewards';
  nameUser: string = 'Usuário de Sistema';
  nameUserPerfil: string = 'Administrador';

  constructor(private authService: AuthService,
    private tokenStorage: TokenStorage,
    private loaderService: LoaderService) {
  }

  ngOnInit() {
    const user = this.tokenStorage.getUser();
    this.nameUser = this.tokenStorage.getUserName();
  }

  logout() {
    this.loaderService.show()
    this.authService.startLogout();
  }

}

./_nav -> sidebarNavItems.ts Exemplo de menu:

import { INavData } from 'dharma-ui-common';

export const sidebarNavItems: INavData[] = [
  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer',
  },
  {
    name: 'Cadastro de tags',
    url: '#',
    icon: 'cui-tags icons',
    children:[
      {
        name: 'Manutenção',
        url: '/tag'
        //icon: 'cui-tags icons'
      },
      {
        name: 'Associação',
        url: '/association'
        //icon: 'cui-tags icons'
      },
      {
        name: 'Ordenação',
        url: '/ordenation'
        //icon: 'cui-tags icons'
      }
    ]
  },
];

Adicione na app.module o método getBasePath

import { getBasePath } from 'dharma-ui-common';

const basePath = getBasePath();

providers: [
    { provide: APP_BASE_HREF, useValue: basePath },
]

Todos os desenvolvedores são bem vindos em contribuir com a comunidade Dotz, basta abrir um pull request para os nossos arquitetos avaliarem e juntos encontrarem a melhor maneira de implementar sua ideia.

• Commits atômicos, que resolvem no máximo uma tarefa do board.
• Mensagem do commit deve seguir o que é sugerido no README.md do Dharma.Common: https://github.com/stone-payments/stoneco-best-practices/blob/master/gitStyleGuide/README.md#commits.
• Em cada PR, devemos escrever nos comentários o motivo de cada arquivo alterado (ex: TransfersController recebe novo filtro no método Get()).
• Só integrar PRs que tenham sido aprovadas no mínimo por 2 outros devs que não sejam o autor do PR, e preferencialmente todos nós devemos aprovar o PR para termos sempre certeza que todos estão cientes das mudanças e tenham feito ressalvas caso algum impacto tenha sido gerado.
• Vamos manter a organização das branches no modelo parecido com gitflow (Master; Bugfix-Numero bug; Dev-nome Release;), sempre sincronizadas com a master para caso precisarmos entregar na esteira.

• Roger Louzada - roger.cano@dotz.com
• Diego Sanches - diego.sanches@dotz.com
• Samuel Fabel - samuel.fabel@dotz.com