Módulo de Gerenciar Cidades

src/app/admin/admin-routing.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AdminComponent } from './admin.component';
+import { HomeComponent } from './home.component';
+import { AjudaComponent } from './ajuda.component';
+import { EstadosListaComponent } from './estados/estados-lista.component';
+import { CidadesListaComponent } from './cidades/cidades-lista.component';
+import { CidadesFormComponent } from './cidades/cidades-form.component';
+import { EstadoCadastroComponent } from './estados/cadastro.component';
+import { Cidade } from './cidades/Cidade';
+
+const rotas: Routes = [
+    {
+        path: 'admin', component: AdminComponent, children: [
+            { path: 'estados/cadastro', component: EstadoCadastroComponent },
+            { path: 'cidades', component: CidadesListaComponent },
+            { path: 'cidades/cadastro', component: CidadesFormComponent },
+            { path: 'cidades/editar/:idCidade', component: CidadesFormComponent },
+            { path: 'estados', component: EstadosListaComponent },
+            { path: 'ajuda', component: AjudaComponent },
+            { path: '', component: HomeComponent }
+        ]
+    },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(rotas)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class AdminRoutingModule { }

src/app/admin/admin.component.css

@@ -0,0 +1,76 @@
+/*
+ * Base structure
+ */
+
+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px !important;
+}
+
+.navbar {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+}
+
+/*
+ * Typography
+ */
+
+h1 {
+  margin-top: 0px;
+  margin-bottom: 20px;
+  padding-bottom: 9px;
+  border-bottom: 1px solid #eee;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+  position: fixed;
+  top: 36px;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  padding: 20px;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+  border-right: 1px solid #eee;
+}
+
+/* Sidebar navigation */
+.sidebar {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.sidebar .nav {
+  margin-bottom: 20px;
+}
+
+.sidebar .nav-item {
+  width: 100%;
+}
+
+.sidebar .nav-item + .nav-item {
+  margin-left: 0;
+}
+
+.sidebar .nav-link {
+  border-radius: 0;
+}
+
+/*
+ * Dashboard
+ */
+
+ /* Placeholders */
+.placeholders {
+  padding-bottom: 3rem;
+}
+
+.placeholder img {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}

src/app/admin/admin.component.html

@@ -0,0 +1,37 @@
+<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
+    <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
+        aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+    <a class="navbar-brand" routerLink="/admin">Eventos::Admin</a>
+
+    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+        <ul class="navbar-nav mr-auto pull-right">
+            <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
+                <a class="nav-link" routerLink="/admin">Home</a>
+            </li>
+            <li class="nav-item" routerLinkActive="active">
+                <a class="nav-link" routerLink="/admin/ajuda">Help</a>
+            </li>
+        </ul>
+    </div>
+</nav>
+
+<div class="container-fluid">
+    <div class="row">
+        <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
+            <ul class="nav nav-pills flex-column">
+                <li class="nav-item" routerLinkActive="active">
+                    <a class="nav-link" routerLink="/admin/estados">Estados</a>
+                </li>
+                <li class="nav-item" routerLinkActive="active">
+                    <a class="nav-link" routerLink="/admin/cidades">Cidades</a>
+                </li>
+            </ul>
+        </nav>
+
+        <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
+            <router-outlet></router-outlet>
+        </main>
+    </div>
+</div>

src/app/admin/admin.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    templateUrl: 'admin.component.html',
+    styleUrls: [ 'admin.component.css' ],
+    encapsulation: ViewEncapsulation.None
+})
+
+export class AdminComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+}

src/app/admin/admin.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { AdminComponent } from './admin.component';
+import { HomeComponent } from './home.component';
+import { AdminRoutingModule } from './admin-routing.module';
+import { AjudaComponent } from './ajuda.component';
+import { EstadosListaComponent } from './estados/estados-lista.component';
+import { EstadosService } from './estados/estados.service';
+import { CidadesListaComponent } from './cidades/cidades-lista.component';
+import { CidadesFormComponent } from './cidades/cidades-form.component';
+import { CidadesService } from './cidades/cidades.service';
+import { Cidade } from './cidades/Cidade';
+import { EstadoCadastroComponent } from './estados/cadastro.component';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        AdminRoutingModule
+    ],
+    declarations: [
+        AdminComponent,
+        HomeComponent,
+        AjudaComponent,
+        EstadosListaComponent,
+        EstadoCadastroComponent,
+        CidadesListaComponent,
+        CidadesFormComponent
+    ],
+    providers: [
+        EstadosService,
+        CidadesService
+    ],
+})
+export class AdminModule { }

src/app/admin/ajuda.component.html

@@ -0,0 +1,2 @@
+<h1>Ajuda</h1>
+<p>Página de ajuda do módulo de administração de conferências (eventos).</p>

src/app/admin/ajuda.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    templateUrl: 'ajuda.component.html'
+})
+
+export class AjudaComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+}

src/app/admin/cidades/Cidade.ts

@@ -0,0 +1,11 @@
+export class Cidade {
+    public id: number;
+    public nome: string;
+    public estadoId: number;
+
+    constructor(id: number, nome: string, estadoId: number) {
+        this.id = id;
+        this.nome = nome;
+        this.estadoId = estadoId;
+    }
+}

src/app/admin/cidades/cidades-edit.component.html

@@ -0,0 +1,26 @@
+<h1>Cidades</h1>
+
+<form (ngSubmit)="onSubmit()" #formCadastro="ngForm">
+    <div class="form-group">
+        <label for="nome">Nome</label>
+        <input type="text" id="nome" name="nome" class="form-control"
+            [(ngModel)]="cidade.nome" #nome="ngModel"
+            placeholder="Nome da Cidade" required>
+        <div class="alert alert-danger" [hidden]="nome.valid || nome.pristine">Você deve informar o nome da Cidade.</div>
+    </div>
+
+    <div class="form-group">
+        <label for="estadoId">Estado</label>
+        <select id="estadoId" name="estadoId" class="form-control" [(ngModel)]="cidade.estadoId" #estadoId="ngModel" required>
+            <option value="">Selecione um Estado</option>
+            <option *ngFor="let estado of pegaEstados()" [value]="estado.id">
+                {{estado.nome}}
+            </option>
+        </select>
+
+        <div class="alert alert-danger" [hidden]="estadoId.valid || estadoId.pristine">Você deve informar o id do estado.</div>
+    </div>
+
+    <button type="submit" class="btn btn-success" [disabled]="!formCadastro.form.valid">Salvar</button>
+    <button type="button" class="btn btn-default" (click)="preencherNova(); formCadastro.reset()">Novo</button>
+</form>

src/app/admin/cidades/cidades-edit.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { CidadesService } from './cidades.service';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import { Cidade } from './Cidade';
+@Component({
+    templateUrl: 'cidades-edit.component.html'
+})
+export class CidadesEditComponent implements OnInit {
+    cidade: Cidade = new Cidade(0, '', 0);
+    estados: any;
+    errorMessage = "";
+
+    constructor(private cidadesService: CidadesService, private activatedRoute: ActivatedRoute, private router: Router) { }
+
+    ngOnInit() {
+    }
+
+    preencherNova(): void {
+        this.cidade = new Cidade(0, '', 0);
+    }
+
+    salvar() {
+        this.cidadesService.save(this.cidade.nome, this.cidade.estadoId)
+            .subscribe(
+                erro => console.log(erro));
+    }
+
+    onSubmit() : void {
+        this.salvar();
+        this.preencherNova();
+        this.router.navigate(['admin/cidades/']);
+    }
+
+    pegaEstados(){
+        this.cidadesService.estados().subscribe(
+            estados => this.estados = estados,
+            error => this.errorMessage = <any>error);
+
+        return this.estados;
+    }
+}

src/app/admin/cidades/cidades-form.component.html

@@ -0,0 +1,59 @@
+<h1>Cidades</h1>
+<div *ngIf="!idCidade">
+    <h2>Cadastro de Cidades</h2>
+</div>
+
+<div *ngIf="idCidade">
+    <h2>Edição de Cidades</h2>
+</div>
+
+<button class="btn btn-info opcoes" style="margin-bottom: 8px;" (click)="voltar();"><i class="fa fa-arrow-left" aria-hidden="true"></i><b> Voltar</b></button>
+<br/>
+<br/>
+
+<!-- Mensagem de Sucesso -->
+<div class="alert alert-success alert-dismissible fade show" *ngIf="status" role="alert">
+  <button type="button" class="close" data-dismiss="alert" (click)="status=false" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+  <span *ngIf="!idCidade">
+    <strong>Sucesso!</strong> O cadastro do palestrante foi efetuado.
+  </span>
+  <span *ngIf="idCidade">
+    <strong>Sucesso!</strong> A atualização do palestrante foi efetuada.
+  </span>
+
+</div>
+
+<!-- Mensagem de Erro -->
+<div class="alert alert-danger alert-dismissible fade show" *ngIf="msgErro!=''" role="alert">
+  <button type="button" class="close" data-dismiss="alert" (click)="msgErro=''" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+  <strong>Erro!</strong> {{msgErro}}.
+</div>
+
+<form (ngSubmit)="onSubmit()" #formCadastro="ngForm">
+    <div class="form-group">
+        <label for="nome">Nome</label>
+        <input type="text" id="nome" name="nome" class="form-control"
+            [(ngModel)]="cidade.nome" #nome="ngModel"
+            placeholder="Nome da Cidade" required>
+        <div class="alert alert-danger" [hidden]="nome.valid || nome.pristine">Você deve informar o nome da Cidade.</div>
+    </div>
+
+    <div class="form-group">
+        <label for="estadoId">Estado</label>
+        <select id="estadoId" name="estadoId" class="form-control" [(ngModel)]="cidade.estadoId" #estadoId="ngModel" required>
+            <option value="">Selecione um Estado</option>
+            <option *ngFor="let estado of pegaEstados()" [value]="estado.id">
+                {{estado.nome}}
+            </option>
+        </select>
+
+        <div class="alert alert-danger" [hidden]="estadoId.valid || estadoId.pristine">Você deve informar o id do estado.</div>
+    </div>
+
+    <button type="submit" class="btn btn-success" [disabled]="!formCadastro.form.valid">Salvar</button>
+    <button type="button" class="btn btn-default" (click)="preencherNova(); formCadastro.reset()">Novo</button>
+</form>