Refactoring da estrutura do app.

Author: gnllucena

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/app/app.module.ts

@@ -5,35 +5,32 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 
-import { CoreModule } from './core/core.module';
-import { UIModule } from './ui/ui.module';
+import { CoreModule } from './modules/core/.core.module';
+import { UIModule } from './modules/ui/.ui.module';
 
 import { AuthenticationService } from './services/authentication.service';
 import { LoadingService } from './services/loading.service';
+import { NotFoundComponent } from './modules/ui/not-found.component';
+import { HomePageComponent } from './routes/home/home-page.component';
 
 export const appRoutes: Routes = [
   {
-    path: '',
-    loadChildren: './routes/index/index.module#IndexModule'
+    path: 'identity',
+    loadChildren: './routes/identity/identity.module#IdentityModule'
   },
   {
-    path: 'login',
-    loadChildren: './routes/login/login.module#LoginModule'
-  },
-  {
-    path: 'users',
-    loadChildren: './routes/users/users.module#UsersModule'
-  },
-  {
-    path: 'not-found',
-    loadChildren: './routes/not-found/not-found.module#NotFoundModule'
+    path: 'dot',
+    loadChildren: './routes/dot/dot.module#DotModule'
   },
+  { path: '', component: HomePageComponent },
+  { path: 'not-found', component: NotFoundComponent },
   { path: '**', redirectTo: 'not-found' }
 ];
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomePageComponent
   ],
   imports: [
     BrowserModule,

src/app/core/core.module.ts renamed to src/app/modules/core/.core.module.ts

@@ -1,10 +1,11 @@
 import { NgModule, LOCALE_ID, Optional, SkipSelf, ModuleWithProviders } from '@angular/core';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
-import { AuthenticationGuardComponent } from './authentication-guard.component';
-import { HttpBackendInterceptorComponent } from './http-backend-interceptor.component';
-import { HttpBearerInterceptorComponent } from './http-bearer-interceptor.component';
-import { HttpLoaderInterceptorComponent } from './http-loader-interceptor.component';
+import { HttpBackendInterceptor } from './http-backend.interceptor';
+import { HttpBearerInterceptor } from './http-bearer.interceptor';
+import { HttpLoaderInterceptor } from './http-loader.interceptor';
+
+import { AuthenticationGuard } from './authentication.guard';
 
 @NgModule({})
 export class CoreModule {
@@ -21,10 +22,10 @@ export class CoreModule {
       // O SISTEMA VAI CARREGAR ISSO TUDO. EM TODOS OS MODULOS.
       providers: [
         { provide: LOCALE_ID, useValue: 'pt-BR' },
-        { provide: HTTP_INTERCEPTORS, useClass: HttpLoaderInterceptorComponent, multi: true },
-        { provide: HTTP_INTERCEPTORS, useClass: HttpBearerInterceptorComponent, multi: true },
-        { provide: HTTP_INTERCEPTORS, useClass: HttpBackendInterceptorComponent, multi: true },
-        AuthenticationGuardComponent,
+        { provide: HTTP_INTERCEPTORS, useClass: HttpLoaderInterceptor, multi: true },
+        { provide: HTTP_INTERCEPTORS, useClass: HttpBearerInterceptor, multi: true },
+        { provide: HTTP_INTERCEPTORS, useClass: HttpBackendInterceptor, multi: true },
+        AuthenticationGuard
       ]
     }
   }

src/app/core/authentication-guard.component.ts renamed to src/app/modules/core/authentication.guard.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { AuthenticationService } from '../services/authentication.service';
+import { AuthenticationService } from '../../services/authentication.service';
 
 @Injectable()
-export class AuthenticationGuardComponent implements CanActivate {
+export class AuthenticationGuard implements CanActivate {
 
   constructor(
     private router: Router, 
@@ -21,7 +21,7 @@ export class AuthenticationGuardComponent implements CanActivate {
       }
     }
 
-    this.router.navigate(['/login'], {
+    this.router.navigate(['/identity'], {
       queryParams: {
         returnUrl: state.url
       }

src/app/core/error-handling.component.ts renamed to src/app/modules/core/error.handling.ts

@@ -2,19 +2,19 @@ import { Injectable } from '@angular/core';
 import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
 import { Observable, of, throwError } from 'rxjs';
 import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
-import { Jwt } from '../domain/Jwt';
+import { Jwt } from '../../domain/jwt';
 
 @Injectable()
-export class HttpBackendInterceptorComponent implements HttpInterceptor {
+export class HttpBackendInterceptor implements HttpInterceptor {
   constructor() { }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    if (req.url.endsWith('/login') || 
+    if (req.url.endsWith('/identity') || 
         req.url.endsWith('/users') || 
         req.url.endsWith('/error')) {
 
       return of(null).pipe(mergeMap(() => {
-        if (req.url.endsWith('/login') && req.method === 'POST') {
+        if (req.url.endsWith('/identity') && req.method === 'POST') {
           var data = new Date();
           data.setDate(data.getDate() + 1);
 
@@ -68,7 +68,7 @@ export class HttpBackendInterceptorComponent implements HttpInterceptor {
         return next.handle(req);      
       }))
       .pipe(materialize())
-      .pipe(delay(5000))
+      .pipe(delay(500))
       .pipe(dematerialize());
     }
   }

src/app/core/http-backend-interceptor.component.ts renamed to src/app/modules/core/http-backend.interceptor.ts

@@ -3,7 +3,7 @@ import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/c
 import { Observable } from 'rxjs';
 
 @Injectable()
-export class HttpBearerInterceptorComponent implements HttpInterceptor {
+export class HttpBearerInterceptor implements HttpInterceptor {
   constructor() {}
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

src/app/core/http-bearer-interceptor.component.ts renamed to src/app/modules/core/http-bearer.interceptor.ts

@@ -2,10 +2,10 @@ import { Injectable } from '@angular/core';
 import { HttpRequest, HttpHandler, HttpInterceptor, HttpResponse } from '@angular/common/http';
 import { tap, catchError } from 'rxjs/operators';
 
-import { LoadingService } from '../services/loading.service';
+import { LoadingService } from '../../services/loading.service';
 
 @Injectable()
-export class HttpLoaderInterceptorComponent implements HttpInterceptor {
+export class HttpLoaderInterceptor implements HttpInterceptor {
   private requests = 0;
 
   constructor(private loadingService: LoadingService) { }

src/app/core/http-loader-interceptor.component.ts renamed to src/app/modules/core/http-loader.interceptor.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { LayoutComponent } from './layout.component';
+import { HeaderComponent } from './header.component';
+import { FooterComponent } from './footer.component';
+import { BreadcrumbComponent } from './breadcrumb.component';
+import { NotFoundComponent } from './not-found.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule
+  ],
+  declarations: [
+    LayoutComponent, 
+    HeaderComponent, 
+    FooterComponent,
+    BreadcrumbComponent,
+    NotFoundComponent
+  ],
+  exports: [
+    LayoutComponent,
+    HeaderComponent,
+    FooterComponent,
+    BreadcrumbComponent,
+    NotFoundComponent
+  ]
+})
+export class UIModule { }

src/app/modules/ui/.ui.module.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-breadcrumb',
+  template: `
+    <div class="row">
+      <div class="col-12">
+        <div class="page-title-box">
+          <div class="page-title-right">
+            <ol class="breadcrumb m-0">
+              <li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
+              <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
+              <li class="breadcrumb-item active">Form Elements</li>
+            </ol>
+          </div>
+          <h4 class="page-title">Form Elements</h4>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class BreadcrumbComponent {
+
+  constructor() { }
+}

src/app/modules/ui/breadcrumb.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  template: `
+    <nav class="navbar navbar-dark bg-dark mt-5 fixed-bottom">
+      <div class="navbar-expand m-auto navbar-text">
+        <a href="mailto:[email protected]">[email protected]</a>
+      </div>
+    </nav>
+  `,
+  styles: []
+})
+export class FooterComponent {
+
+  constructor() { }
+}

src/app/modules/ui/footer.component.ts

@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthenticationService } from '../../services/authentication.service';
+import { Jwt } from '../../domain/jwt';
+
+@Component({
+  selector: 'app-header',
+  template: `
+    
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
+      <a class="navbar-brand" routerLink="/">Application Bootstrap</a>
+
+      <div id="navbarNavDropdown" class="navbar-collapse collapse">
+        <ul class="navbar-nav mr-auto">
+          <ng-container *ngIf="!logged">
+            <a class="nav-item nav-link" routerLink="/identity" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Log In</a>
+          </ng-container>
+          <ng-container *ngIf="logged">
+            <a class="nav-item nav-link" routerLink="/dot/{{ username }}" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">~/{{ username }}</a>
+          </ng-container>
+        </ul>
+        <ul class="navbar-nav">
+          <ng-container *ngIf="logged">
+            <a class="nav-item nav-link" (click)="logout()" href="javascript:void(0)">Log Off</a>
+          </ng-container>
+        </ul>
+      </div>
+    </nav>    
+  `,
+  styles: []
+})
+export class HeaderComponent {  
+  public logged: Boolean = false;
+  public username: String = '';
+
+  constructor(
+    private router: Router,
+    private authenticationService: AuthenticationService) { 
+
+      this.authenticationService.jwt
+        .subscribe((jwt: Jwt) => {
+          if (jwt) {
+            this.logged = true;
+            this.username = jwt.Username;
+          } else {
+            this.logged = false;
+            this.username = '';
+          }
+        });
+  }
+
+  logout(): void {
+    this.authenticationService.revoke();
+
+    this.router.navigate(['/']);
+  }
+}

src/app/modules/ui/header.component.ts

@@ -3,8 +3,14 @@ import { LoadingService } from '../../services/loading.service';
 
 @Component({
   selector: 'app-layout',
-  templateUrl: './layout.component.html',
-  styleUrls: ['./layout.component.css']
+  template: `
+    <ng-container *ngIf="loadingService.loading | async;">  
+      <div class="loading">Loading&#8230;</div>
+    </ng-container>
+
+    <ng-content></ng-content>
+  `,
+  styles: []
 })
 export class LayoutComponent {
   constructor(public loadingService: LoadingService) { }

src/app/ui/layout/layout.component.ts renamed to src/app/modules/ui/layout.component.ts

@@ -0,0 +1,19 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'not-found-page',
+  template: `
+    <app-header></app-header>
+      <div class="container">
+        These are not the droids you are looking for...
+      </div>
+    <app-footer></app-footer>
+  `,
+  styles: []
+})
+
+export class NotFoundComponent  {
+  title = 'Not found';
+
+  constructor() { }
+}

src/app/modules/ui/not-found.component.ts

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { UIModule } from '../../modules/ui/.ui.module';
 
 export const appRoutes: Routes = [
   {
     path: '',
-    loadChildren: './index/users-index.module#UsersIndexModule'
+    loadChildren: './mine/dot-mine.module#DotMineModule'
   },
   {
     path: ':username',
-    loadChildren: './myself/users-myself.module#UsersMyselfModule'
+    loadChildren: './myself/dot-myself.module#DotMyselfModule'
   },
 ];
 
@@ -24,7 +25,8 @@ export const appRoutes: Routes = [
 
 @NgModule({
   imports: [
+    UIModule,
     RouterModule.forChild(appRoutes)
   ]
 })
-export class UsersModule { }
+export class DotModule { }

src/app/routes/users/users.module.ts renamed to src/app/routes/dot/dot.module.ts

@@ -0,0 +1,35 @@
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { UIModule } from '../../../modules/ui/.ui.module';
+
+import { AuthenticationGuard } from '../../../modules/core/authentication.guard';
+
+import { DotMinePageComponent } from './mine-page/dot-mine-page.component';
+import { DotMineListComponent } from './mine-list/dot-mine-list.component';
+import { DotMineFormComponent } from './mine-form/dot-mine-form.component';
+import { DotMineFilterComponent } from './mine-filter/dot-mine-filter.component';
+import { DotMineEditComponent } from './mine-edit/dot-mine-edit.component';
+import { DotMineAddComponent } from './mine-add/dot-mine-add.component';
+
+
+const appRoutes: Routes = [
+  { path: '', component: DotMinePageComponent, canActivate: [AuthenticationGuard] },
+];
+
+@NgModule({ 
+  declarations: [
+    DotMinePageComponent,
+    DotMineListComponent,
+    DotMineFormComponent,
+    DotMineFilterComponent,
+    DotMineEditComponent,
+    DotMineAddComponent
+  ],
+  imports: [
+    UIModule,
+    RouterModule.forChild(appRoutes)
+  ]
+})
+export class DotMineModule { }