diff --git a/ng-client/package.json b/ng-client/package.json index 443ce32..8277995 100644 --- a/ng-client/package.json +++ b/ng-client/package.json @@ -28,7 +28,7 @@ "hammerjs": "2.0.8", "moment": "2.17.1", "rxjs": "5.1.0", - "zone.js": "0.8.4" + "zone.js": "0.8.5" }, "devDependencies": { "@angular/cli": "1.0.0", diff --git a/ng-client/src/app/app-routing.module.ts b/ng-client/src/app/app-routing.module.ts index 854e43f..2bb2106 100644 --- a/ng-client/src/app/app-routing.module.ts +++ b/ng-client/src/app/app-routing.module.ts @@ -7,10 +7,18 @@ import { import { PageNotFoundComponent } from './core/not-found.component'; const appRoutes: Routes = [ + { + path: 'employees', + loadChildren: './employee/employee.module#EmployeeModule', + }, + { + path: 'projects', + loadChildren: './project/project.module#ProjectModule', + }, { path: '', redirectTo: '/projects', - pathMatch: 'full' + pathMatch: 'full', }, { path: '**', component: PageNotFoundComponent }, ]; @@ -18,6 +26,7 @@ const appRoutes: Routes = [ imports: [ RouterModule.forRoot(appRoutes) ], + declarations: [ PageNotFoundComponent ], exports: [ RouterModule ] diff --git a/ng-client/src/app/app.component.html b/ng-client/src/app/app.component.html index a85d660..c75c123 100644 --- a/ng-client/src/app/app.component.html +++ b/ng-client/src/app/app.component.html @@ -1,2 +1 @@ - diff --git a/ng-client/src/app/app.module.ts b/ng-client/src/app/app.module.ts index 6137e0c..acd8124 100644 --- a/ng-client/src/app/app.module.ts +++ b/ng-client/src/app/app.module.ts @@ -1,29 +1,19 @@ import { BrowserModule } from '@angular/platform-browser'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { HttpModule } from '@angular/http'; -import { FormsModule } from '@angular/forms'; +import { NgModule } from '@angular/core'; +import { MaterialModule } from '@angular/material'; import { Router } from '@angular/router'; -// import { routing } from './app.routes'; - import { AppComponent } from './app.component'; -import { ProjectModule } from './project'; -import { EmployeeModule } from './employee/'; import { CoreModule } from './core'; -import 'hammerjs'; - -import { MaterialModule } from '@angular/material'; - import { ExtHttpConfig } from './core/ExtHttpConfig'; import { AppRoutingModule } from './app-routing.module'; import { LoginComponent } from './core/login.component'; import { LoginRoutingModule } from './core/login-routing.module'; -import { PageNotFoundComponent } from './core/not-found.component'; import { NavigationComponent } from './core/navigation.component'; import { TimesheetModule } from './timesheet/timesheet.module'; @@ -41,24 +31,18 @@ const extHttpConfig = { @NgModule({ imports: [ BrowserModule, - MaterialModule, - HttpModule, - FormsModule, CoreModule.forRoot(extHttpConfig), - EmployeeModule, - ProjectModule, TimesheetModule, LoginRoutingModule, AppRoutingModule, + MaterialModule.forRoot(), ], declarations: [ AppComponent, LoginComponent, - PageNotFoundComponent, NavigationComponent, ], bootstrap: [ AppComponent ], - schemas: [ CUSTOM_ELEMENTS_SCHEMA ], }) export class AppModule { // Diagnostic only: inspect router configuration diff --git a/ng-client/src/app/core/auth-guard.service.ts b/ng-client/src/app/core/auth-guard.service.ts new file mode 100644 index 0000000..470e2cf --- /dev/null +++ b/ng-client/src/app/core/auth-guard.service.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import { + CanActivate, + Router +} from '@angular/router'; + +import { IdentityService } from './identity.service'; + +@Injectable() +export class AuthGuard implements CanActivate { + constructor(private identityService: IdentityService, private router: Router) { } + + canActivate() { + const isAuthenticated = this.identityService.user.authenticated; + + if (isAuthenticated) { + return true; + } else { + // The original URL that the user intends to access is not stored by this approach. + this.router.navigate(['/login']); + return false; + } + } +} diff --git a/ng-client/src/app/core/core.module.ts b/ng-client/src/app/core/core.module.ts index f6a12db..0f92529 100644 --- a/ng-client/src/app/core/core.module.ts +++ b/ng-client/src/app/core/core.module.ts @@ -2,23 +2,34 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; +import { HttpModule } from '@angular/http'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { MaterialModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import 'hammerjs'; + import { IdentityService } from './identity.service'; import { LocalStorage } from './localStorage'; import { LoginService } from './login.service'; import { ResponseHandler } from './responseHandler.service'; import { ExtHttp } from './extHttp.service'; import { ExtHttpConfig } from './ExtHttpConfig'; +import { AuthGuard } from './auth-guard.service'; +import { ProjectService } from '../project/project.service'; @NgModule({ imports: [ CommonModule, FormsModule, BrowserAnimationsModule, + HttpModule, + ], + exports: [ + CommonModule, + FormsModule, + BrowserAnimationsModule, + HttpModule, ], providers: [ ExtHttp, @@ -26,6 +37,8 @@ import { ExtHttpConfig } from './ExtHttpConfig'; LocalStorage, LoginService, ResponseHandler, + AuthGuard, + ProjectService, ] }) export class CoreModule { diff --git a/ng-client/src/app/core/login.component.ts b/ng-client/src/app/core/login.component.ts index 6aed561..e6649dd 100644 --- a/ng-client/src/app/core/login.component.ts +++ b/ng-client/src/app/core/login.component.ts @@ -13,9 +13,8 @@ import { } from '../core'; @Component({ - selector: 'at-login', templateUrl: './login.component.html', - styleUrls: ['./login.component.scss'] + styleUrls: ['./login.component.scss'], }) export class LoginComponent implements OnInit { error: boolean; diff --git a/ng-client/src/app/core/navigation.component.html b/ng-client/src/app/core/navigation.component.html index 475344e..8696e9b 100644 --- a/ng-client/src/app/core/navigation.component.html +++ b/ng-client/src/app/core/navigation.component.html @@ -1,21 +1,43 @@ -
- - Angular Timesheets +
+
+ + + Angular Timesheets - + + + {{user?.name.first}} {{user?.name.last}} + + + + + + +
+ + + + - {{user.name.first}} {{user.name.last}} - - - - - -
-
- +
+ +
+
diff --git a/ng-client/src/app/core/navigation.component.scss b/ng-client/src/app/core/navigation.component.scss index 131fcfb..43f2ecb 100644 --- a/ng-client/src/app/core/navigation.component.scss +++ b/ng-client/src/app/core/navigation.component.scss @@ -3,3 +3,33 @@ flex: 1 1 auto; } } + +.side-nav-content { + box-shadow: 3px 0 6px rgba(0,0,0,.24); + width: 200px; +} + +.side-nav-items { + margin: 0; + padding: 0; +} +.side-nav-item { + border-bottom-width: 1px; + border-bottom-style: solid; + border-color: rgba(0,0,0,.06); +} + +.side-nav-item:last-child { + border-color: transparent; +} + +.side-nav-item > a { + color: rgba(0,0,0,.54); + display: block; + padding: 1.5em; + text-decoration: none; + + &:hover { + background-color: #fafafa; + } +} diff --git a/ng-client/src/app/employee/employee-list/employee-list.component.ts b/ng-client/src/app/employee/employee-list/employee-list.component.ts index 12fd709..0043d7f 100644 --- a/ng-client/src/app/employee/employee-list/employee-list.component.ts +++ b/ng-client/src/app/employee/employee-list/employee-list.component.ts @@ -7,7 +7,6 @@ import { Employee } from '../Employee'; import { EmployeeService } from '../employee.service'; @Component({ - selector: 'at-employee-list', templateUrl: './employee-list.component.html', styleUrls: ['./employee-list.component.scss'], }) diff --git a/ng-client/src/app/employee/employee-new/employee-new.component.ts b/ng-client/src/app/employee/employee-new/employee-new.component.ts index 130210b..59ca96f 100644 --- a/ng-client/src/app/employee/employee-new/employee-new.component.ts +++ b/ng-client/src/app/employee/employee-new/employee-new.component.ts @@ -5,7 +5,6 @@ import { EmployeeService } from '../employee.service'; import { Employee } from '../Employee'; @Component({ - selector: 'at-employee-new', templateUrl: './employee-new.component.html', styleUrls: ['./employee-new.component.scss'] }) diff --git a/ng-client/src/app/employee/employee-root/employee-root.component.html b/ng-client/src/app/employee/employee-root/employee-root.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/ng-client/src/app/employee/employee-root/employee-root.component.html @@ -0,0 +1 @@ + diff --git a/ng-client/src/app/employee/employee-root/employee-root.component.ts b/ng-client/src/app/employee/employee-root/employee-root.component.ts new file mode 100644 index 0000000..a4483ba --- /dev/null +++ b/ng-client/src/app/employee/employee-root/employee-root.component.ts @@ -0,0 +1,12 @@ +import { + Component, + OnInit +} from '@angular/core'; + +@Component({ + templateUrl: './employee-root.component.html' +}) +export class EmployeeRootComponent implements OnInit { + constructor() {} + ngOnInit() {} +} diff --git a/ng-client/src/app/employee/employee-routing.module.ts b/ng-client/src/app/employee/employee-routing.module.ts index c8eb6c9..0d9462d 100644 --- a/ng-client/src/app/employee/employee-routing.module.ts +++ b/ng-client/src/app/employee/employee-routing.module.ts @@ -4,18 +4,34 @@ import { RouterModule, } from '@angular/router'; +import { AuthGuard } from '../core/auth-guard.service'; + +import { EmployeeRootComponent } from './employee-root/employee-root.component'; import { EmployeeListComponent } from './employee-list/employee-list.component'; import { EmployeeNewComponent } from './employee-new/employee-new.component'; const employeeRoutes: Routes = [ - { path: 'employees', component: EmployeeListComponent }, - { path: 'employees/new', component: EmployeeNewComponent }, + { + path: '', + component: EmployeeRootComponent, + canActivate: [ AuthGuard ], + children: [ + { + path: '', + children: [ + { path: '', component: EmployeeListComponent }, + { path: 'new', component: EmployeeNewComponent }, + ] + } + ] + }, ]; @NgModule({ imports: [ RouterModule.forChild(employeeRoutes) ], + declarations: [ EmployeeRootComponent ], exports: [ RouterModule ] diff --git a/ng-client/src/app/employee/employee.module.ts b/ng-client/src/app/employee/employee.module.ts index 3a97aa2..f400d14 100644 --- a/ng-client/src/app/employee/employee.module.ts +++ b/ng-client/src/app/employee/employee.module.ts @@ -1,9 +1,18 @@ -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { NgModule } from '@angular/core'; + +import { + MdListModule, + MdIconModule, + MdInputModule, + MdOptionModule, + MdButtonModule, + MdCardModule, +} from '@angular/material'; + import { EmployeeNewComponent } from './employee-new'; import { EmployeeListComponent, EmployeeDirective } from './employee-list'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; -import { MaterialModule } from '@angular/material'; import { EmployeeService } from './employee.service'; import { EmployeeRoutingModule } from './employee-routing.module'; @@ -16,13 +25,15 @@ import { EmployeeRoutingModule } from './employee-routing.module'; imports: [ CommonModule, FormsModule, - MaterialModule.forRoot(), EmployeeRoutingModule, + MdIconModule, + MdButtonModule, + MdCardModule, + MdInputModule, ], exports: [], providers: [ EmployeeService ], - schemas: [ CUSTOM_ELEMENTS_SCHEMA ], }) export class EmployeeModule { } diff --git a/ng-client/src/app/project/project-list/project-list.component.ts b/ng-client/src/app/project/project-list/project-list.component.ts index 7198a56..68d4834 100644 --- a/ng-client/src/app/project/project-list/project-list.component.ts +++ b/ng-client/src/app/project/project-list/project-list.component.ts @@ -4,7 +4,6 @@ import { ProjectService } from '../project.service'; import { Project } from '../Project'; @Component({ - selector: 'at-project-list', templateUrl: './project-list.component.html', styleUrls: ['./project-list.component.scss'] }) diff --git a/ng-client/src/app/project/project-new/project-new.component.ts b/ng-client/src/app/project/project-new/project-new.component.ts index 6835e78..4f5736a 100644 --- a/ng-client/src/app/project/project-new/project-new.component.ts +++ b/ng-client/src/app/project/project-new/project-new.component.ts @@ -5,7 +5,6 @@ import { ProjectService } from '../project.service'; import { Project } from '../Project'; @Component({ - selector: 'at-project-new', templateUrl: './project-new.component.html', styleUrls: ['./project-new.component.scss'] }) diff --git a/ng-client/src/app/project/project-root/project-root.component.html b/ng-client/src/app/project/project-root/project-root.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/ng-client/src/app/project/project-root/project-root.component.html @@ -0,0 +1 @@ + diff --git a/ng-client/src/app/project/project-root/project-root.component.ts b/ng-client/src/app/project/project-root/project-root.component.ts new file mode 100644 index 0000000..ddeef91 --- /dev/null +++ b/ng-client/src/app/project/project-root/project-root.component.ts @@ -0,0 +1,12 @@ +import { + Component, + OnInit, +} from '@angular/core'; + +@Component({ + templateUrl: './project-root.component.html' +}) +export class ProjectRootComponent implements OnInit { + constructor() { } + ngOnInit() { } +} diff --git a/ng-client/src/app/project/project-routing.module.ts b/ng-client/src/app/project/project-routing.module.ts index 562f139..57e867b 100644 --- a/ng-client/src/app/project/project-routing.module.ts +++ b/ng-client/src/app/project/project-routing.module.ts @@ -4,18 +4,35 @@ import { RouterModule, } from '@angular/router'; +import { ProjectRootComponent } from './project-root/project-root.component'; import { ProjectListComponent } from './project-list/project-list.component'; import { ProjectNewComponent } from './project-new/project-new.component'; +import { AuthGuard } from '../core/auth-guard.service'; const employeeRoutes: Routes = [ - { path: 'projects', component: ProjectListComponent }, - { path: 'projects/new', component: ProjectNewComponent }, + { + path: '', + component: ProjectRootComponent, + canActivate: [ AuthGuard ], + children: [ + { + path: '', + children: [ + { path: '', component: ProjectListComponent }, + { path: 'new', component: ProjectNewComponent }, + ] + } + ] + } ]; @NgModule({ imports: [ RouterModule.forChild(employeeRoutes) ], + declarations: [ + ProjectRootComponent + ], exports: [ RouterModule ] diff --git a/ng-client/src/app/project/project.module.ts b/ng-client/src/app/project/project.module.ts index b863052..623d3dc 100644 --- a/ng-client/src/app/project/project.module.ts +++ b/ng-client/src/app/project/project.module.ts @@ -1,24 +1,37 @@ import { NgModule } from '@angular/core'; + +import { + MdListModule, + MdIconModule, + MdInputModule, + MdButtonModule, + MdCardModule, +} from '@angular/material'; + import { ProjectNewComponent } from './project-new'; import { ProjectListComponent } from './project-list'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; -import { MaterialModule } from '@angular/material'; import { ProjectService } from './project.service'; import { ProjectRoutingModule } from './project-routing.module'; @NgModule({ declarations: [ - ProjectNewComponent, ProjectListComponent + ProjectListComponent, + ProjectNewComponent, ], imports: [ CommonModule, FormsModule, - MaterialModule.forRoot(), ProjectRoutingModule, + MdIconModule, + MdInputModule, + MdListModule, + MdButtonModule, + MdCardModule, ], exports: [], - providers: [ ProjectService ] + providers: [] }) export class ProjectModule { } diff --git a/ng-client/src/app/time-units/time-units.module.ts b/ng-client/src/app/time-units/time-units.module.ts index 56a13b8..a04ee90 100644 --- a/ng-client/src/app/time-units/time-units.module.ts +++ b/ng-client/src/app/time-units/time-units.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import {CommonModule} from '@angular/common'; +import { CommonModule } from '@angular/common'; import { MdCardModule, MdListModule } from '@angular/material'; import {TimeUnitsComponent} from './time-units.component'; diff --git a/ng-client/src/app/timesheet/timesheet-root/timesheet-root.component.html b/ng-client/src/app/timesheet/timesheet-root/timesheet-root.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/ng-client/src/app/timesheet/timesheet-root/timesheet-root.component.html @@ -0,0 +1 @@ + diff --git a/ng-client/src/app/timesheet/timesheet-root/timesheet-root.component.ts b/ng-client/src/app/timesheet/timesheet-root/timesheet-root.component.ts new file mode 100644 index 0000000..07a892a --- /dev/null +++ b/ng-client/src/app/timesheet/timesheet-root/timesheet-root.component.ts @@ -0,0 +1,12 @@ +import { + Component, + OnInit, +} from '@angular/core'; + +@Component({ + templateUrl: './timesheet-root.component.html' +}) +export class TimesheetRootComponent implements OnInit { + constructor() { } + ngOnInit() { } +} diff --git a/ng-client/src/app/timesheet/timesheet-routing.module.ts b/ng-client/src/app/timesheet/timesheet-routing.module.ts index 4fcfdc7..9573ddb 100644 --- a/ng-client/src/app/timesheet/timesheet-routing.module.ts +++ b/ng-client/src/app/timesheet/timesheet-routing.module.ts @@ -4,22 +4,38 @@ import { RouterModule, } from '@angular/router'; +import { AuthGuard } from '../core/auth-guard.service'; + +import { TimesheetRootComponent } from './timesheet-root/timesheet-root.component'; import { TimesheetListComponent } from './timesheet-list/timesheet-list.component'; import { TimesheetNewComponent } from './timesheet-new/timesheet-new.component'; import { TimesheetComponent } from './timesheet.component'; import { TimesheetEntryComponent } from './timesheet-entry/timesheet-entry.component'; -const employeeRoutes: Routes = [ - { path: 'timesheets', component: TimesheetListComponent}, - { path: 'timesheets/new', component: TimesheetNewComponent }, - { path: 'timesheets/:id', component: TimesheetComponent }, - { path: 'timesheets/:id/entry', component: TimesheetEntryComponent } +const timesheetRoutes: Routes = [ + { + path: 'timesheets', + component: TimesheetRootComponent, + canActivate: [ AuthGuard ], + children: [ + { + path: '', + children: [ + { path: '', component: TimesheetListComponent }, + { path: 'new', component: TimesheetNewComponent }, + { path: ':id', component: TimesheetComponent }, + { path: ':id/entry', component: TimesheetEntryComponent }, + ] + } + ] + }, ]; @NgModule({ imports: [ - RouterModule.forChild(employeeRoutes) + RouterModule.forChild(timesheetRoutes) ], + declarations: [ TimesheetRootComponent ], exports: [ RouterModule ] diff --git a/ng-client/src/app/timesheet/timesheet.component.html b/ng-client/src/app/timesheet/timesheet.component.html index 016b986..40ea5e4 100644 --- a/ng-client/src/app/timesheet/timesheet.component.html +++ b/ng-client/src/app/timesheet/timesheet.component.html @@ -1,5 +1,5 @@
- +
diff --git a/ng-client/src/app/timesheet/timesheet.module.ts b/ng-client/src/app/timesheet/timesheet.module.ts index 3e0fa8e..5929e69 100644 --- a/ng-client/src/app/timesheet/timesheet.module.ts +++ b/ng-client/src/app/timesheet/timesheet.module.ts @@ -1,10 +1,17 @@ import { - CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; -import { MaterialModule } from '@angular/material'; +import { + MdListModule, + MdIconModule, + MdInputModule, + MdOptionModule, + MdButtonModule, + MdCardModule, + MdProgressSpinnerModule, +} from '@angular/material'; import { TimeUnitsModule } from '../time-units'; import { IdentityService } from '../core'; @@ -31,17 +38,21 @@ import { TimesheetRoutingModule } from './timesheet-routing.module'; ], imports: [ CommonModule, - MaterialModule.forRoot(), + MdListModule, + MdInputModule, + MdOptionModule, + MdIconModule, + MdButtonModule, + MdCardModule, + MdProgressSpinnerModule, ReactiveFormsModule, TimeUnitsModule, TimeUnitsModule, TimesheetRoutingModule, ], providers: [ - IdentityService, TimesheetService, TimeUnitService, ], - schemas: [ CUSTOM_ELEMENTS_SCHEMA ], }) export class TimesheetModule {} diff --git a/ng-client/src/styles.scss b/ng-client/src/styles.scss index bb81db4..a90816a 100644 --- a/ng-client/src/styles.scss +++ b/ng-client/src/styles.scss @@ -8,9 +8,6 @@ body { } .main-container { - margin-left: auto; - margin-right: auto; - max-width: 1024px; position: relative; } diff --git a/ng-client/yarn.lock b/ng-client/yarn.lock index f5362b1..2c36b76 100644 --- a/ng-client/yarn.lock +++ b/ng-client/yarn.lock @@ -5241,9 +5241,9 @@ yn@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/yn/-/yn-1.2.0.tgz#d237a4c533f279b2b89d3acac2db4b8c795e4a63" -zone.js@0.8.4: - version "0.8.4" - resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.4.tgz#cc40ae5a1c879601c5ebba2096b5c80f0c4c3602" +zone.js@0.8.5: + version "0.8.5" + resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.5.tgz#7906e017482cbff4c3f079c5c34305ce941f5ba2" zone.js@^0.7.2: version "0.7.7"