dharma-ui-template v0.0.15
dharma-ui-template
Motivação:
O dharma UI template tem como objetivo fornecer um layout padrão da Dotz.
O que o Dharma template oferece:
- Painel administrativo
- Landing Page
Sumário:
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-installation
$ npm install dharma-ui-installation
Ainda dentro da pasta do projeto, execute o comando para instalar todas as dependencias
$ dharma-ui-install
Pronto agora você tem um projeto em Angular criado e apto para a instalação do dharma-ui-template.
O primeiro passo é importar o módulo LandingModule
do dharma-ui-template
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-template';
@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 logo="assets/images/logo-dotz.png">
teste
<!-- Aqui deve ser o conteúdo da página -->
<!-- <router-outlet></router-outlet> -->
</landing>
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
O primeiro passo é importar o módulo AdminModule
do dharma-ui-template
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-template';
@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
logo="assets/images/logo-dotz.png"
[sidebarItems]="sidebarItems">
teste
</admin>
import { Component } from '@angular/core';
import { Menu } from 'dharma-ui-template';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
sidebarItems: Menu[] = [];
constructor() {
this.sidebarItems = [{
label: 'teste',
icon: 'nav-icon cui-puzzle',
href: '',
},
{
label: 'teste drop',
icon: 'nav-icon cui-puzzle',
href: '',
isDropdown: true,
children: [{
label: 'teste',
icon: 'nav-icon cui-puzzle',
href: '',
}]
}
];
}
}
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
Nessa sessão vamos criar uma página de FAQ utilizando lazy-load
Arquivos:
landing.component.html
Base do layout da landing pagelanding.component.scss
Estilo do layout baselanding.component.ts
Componente do layout base- landing.routing.ts Nesse arquivo está todas as rotas referente a landing page.
Landing.routing.ts:
import { Route} from '@angular/router';
import { LandingComponent } from './landing.component';
export const landingRoutes: Routes = [{
path: '',
component: LandingComponent,
children: [
{
path: 'home',
loadChildren: '../landing-pages/home/home.module#HomeModule',
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
},
],
}];
Regras para adicionar uma página:
- Utilizar sempre que possível
lazy-load
nas rotas. - Adicionar páginas modularizadas como a
homeModule
do exemplo acima. - Adicionar os módulos sempre na pasta
src/app/landing-pages
Exemplo:
Vamos adicionar uma página de FAQ na landing.routing.ts
Adicionar dentro da propriedade children
{
path: 'faq',
loadChildren: '../landing-pages/faq.module#faqModule',
},
Agora vamos criar o módulo de FAQ no projeto:
Criando módulo:
ng generate module landing-pages/faq
Criando controller:
ng generate controller landing-pages/faq
Prepare o módulo faqModule
criando uma rota no diretório: src/app/landing-pages/faq/faq.routing.ts
Exemplo faq.routing.ts
import { Routes } from '@angular/router';
import { faqComponent } from './faq.component';
export const faqRoutes: Routes = [
{
path: '',
component: faqComponent
},
];
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