Este projeto foi desenvolvido com o desafio de contruir um CRUD básico utilizando portinari-ui.
Link da Apresentação
Bash
npm install -g @angular/cli@8.0.0
Bash
ng new crud-portinari --skipInstall --routing --style=css
cd crud-portinari
"dependencies": {
"@angular/animations": "~8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/platform-server": "~8.0.0",
"@angular/router": "~8.0.0",
"rxjs": "~6.4.0",
"zone.js": "~0.9.1"
...
}
Bash
npm install
Bash
ng add @portinari/portinari-ui
npm i @portinari/portinari-templates
Bash
ng g m shared
TS
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { PoModule } from '@portinari/portinari-ui';
import { PoTemplatesModule } from '@portinari/portinari-templates';
@NgModule({
imports: [
CommonModule,
FormsModule,
PoModule,
PoTemplatesModule
],
exports: [
CommonModule,
FormsModule,
PoModule,
PoTemplatesModule
]
})
export class SharedModule { }
TS
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
RouterModule.forRoot([])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Bash
ng g m people --routing
Bash
ng g c people/people-list
Bash
ng g c people/people-view
Bash
ng g c people/people-form
TS
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PeopleRoutingModule } from './people-routing.module';
import { PeopleListComponent } from './people-list/people-list.component';
import { PeopleViewComponent } from './people-view/people-view.component';
import { PeopleFormComponent } from './people-form/people-form.component';
import { SharedModule } from '../shared/shared.module';
@NgModule({
declarations: [PeopleListComponent, PeopleViewComponent, PeopleFormComponent],
imports: [
CommonModule,
SharedModule,
PeopleRoutingModule
]
})
export class PeopleModule { }
TS
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PeopleListComponent } from './people-list/people-list.component';
import { PeopleViewComponent } from './people-view/people-view.component';
import { PeopleFormComponent } from './people-form/people-form.component';
const routes: Routes = [
{ path: '', component: PeopleListComponent },
{ path: 'view/:id', component: PeopleViewComponent },
{ path: 'edit/:id', component: PeopleFormComponent },
{ path: 'new', component: PeopleFormComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PeopleRoutingModule { }
TS
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'people',
loadChildren: () => import('../app/people/people.module').then(m => m.PeopleModule)
},
{ path: '', redirectTo: '/people', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
HTML
<div class="po-wrapper">
<po-toolbar p-title="Workshop Portinari"></po-toolbar>
<po-menu [p-menus]="menus"></po-menu>
<router-outlet></router-outlet>
</div>
TS
import { Component } from '@angular/core';
import { PoMenuItem } from '@portinari/portinari-ui';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
readonly menus: Array<PoMenuItem> = [
{ label: 'Pessoas', link: '/people' }
];
}
HTML
<po-page-dynamic-table
p-title="Pessoas"
p-service-api="https://thf.totvs.com.br/sample/api/people"
[p-actions]="actions"
[p-fields]="fields">
</po-page-dynamic-table>
TS
import { Component } from '@angular/core';
import { PoPageDynamicTableActions, PoPageDynamicTableField } from '@portinari/portinari-templates';
@Component({
selector: 'app-people-list',
templateUrl: './people-list.component.html',
styleUrls: ['./people-list.component.css']
})
export class PeopleListComponent {
readonly actions: PoPageDynamicTableActions = {
detail: 'people/view/:id',
edit: 'people/edit/:id',
new: 'people/new',
remove: true
};
readonly fields: Array<PoPageDynamicTableField> = [
{ property: 'id', key: true },
{ property: 'name', label: 'Nome' },
{ property: 'birthdate', label: 'Data de nascimento', type: 'date' }
];
}
HTML
<po-page-dynamic-detail
p-service-api="https://thf.totvs.com.br/sample/api/people"
[p-title]="title"
[p-actions]="actions"
[p-fields]="fields">
</po-page-dynamic-detail>
TS
import { Component, OnInit } from '@angular/core';
import { PoPageDynamicDetailActions, PoPageDynamicDetailField } from '@portinari/portinari-templates';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-people-view',
templateUrl: './people-view.component.html',
styleUrls: ['./people-view.component.css']
})
export class PeopleViewComponent implements OnInit {
title = 'Visualizando';
readonly actions: PoPageDynamicDetailActions = {
back: '/',
edit: 'people/edit/:id',
remove: '/'
};
readonly fields: Array<PoPageDynamicDetailField> = [
{ property: 'id', gridColumns: 2, key: true, divider: 'Dados pessoais' },
{ property: 'name', label: 'Nome', gridXlColumns: 4, gridLgColumns: 4 },
{ property: 'birthdate', type: 'date', label: 'Data de aniversário', gridXlColumns: 4, gridLgColumns: 4 },
{ property: 'genre', tag: true, label: 'Gênero', gridColumns: 2, gridSmColumns: 6 },
{ property: 'street', divider: 'Endereço', label: 'Rua' },
{ property: 'city', label: 'Cidade' },
{ property: 'country', label: 'País' }
];
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
this.title = params.id ? `Vizualizando Pessoa ${params.id}` : 'Visualizando';
});
}
}
HTML
<po-page-dynamic-edit
p-service-api="https://thf.totvs.com.br/sample/api/people"
[p-title]="title"
[p-actions]="actions"
[p-fields]="fields">
</po-page-dynamic-edit>
TS
import { Component, OnInit } from '@angular/core';
import { PoPageDynamicEditActions, PoPageDynamicEditField } from '@portinari/portinari-templates';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-people-form',
templateUrl: './people-form.component.html',
styleUrls: ['./people-form.component.css']
})
export class PeopleFormComponent implements OnInit {
title = 'Nova pessoa';
public readonly actions: PoPageDynamicEditActions = {
cancel: '/',
save: '/'
};
public readonly fields: Array<PoPageDynamicEditField> = [
{ property: 'id', key: true, visible: false },
{ label: 'Nome', property: 'name', divider: 'Dados pessoais' },
{ label: 'Data de nascimento', property: 'birthdate', type: 'date' },
{ label: 'Gênero', property: 'genre', gridXlColumns: 4, options: [
{ value: 'feminino', label: 'Feminino' },
{ value: 'masculino', label: 'Masculino' }
]},
{ label: 'Rua', property: 'street', divider: 'Endereço' },
{ label: 'Cidade', property: 'city' },
{ label: 'País', property: 'country' }
];
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
this.title = params.id ? 'Editando' : 'Nova pessoa';
});
}
}
Bash
ng server --0