├── ui ├── src │ ├── assets │ │ └── .gitkeep │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── dashboard │ │ │ ├── dashboard.component.css │ │ │ ├── tasks │ │ │ │ ├── tasks.component.css │ │ │ │ ├── tasks.component.spec.ts │ │ │ │ ├── tasks.component.ts │ │ │ │ └── tasks.component.html │ │ │ ├── dashboard-routing.module.ts │ │ │ ├── dashboard.module.ts │ │ │ ├── dashboard.component.spec.ts │ │ │ ├── dashboard.component.html │ │ │ └── dashboard.component.ts │ │ ├── footer │ │ │ ├── footer.component.html │ │ │ ├── footer.component.css │ │ │ ├── footer.component.ts │ │ │ └── footer.component.spec.ts │ │ ├── header │ │ │ ├── header.component.html │ │ │ ├── header.component.css │ │ │ ├── header.component.ts │ │ │ └── header.component.spec.ts │ │ ├── app-state │ │ │ ├── entity │ │ │ │ ├── index.ts │ │ │ │ ├── user.entity.ts │ │ │ │ └── task.entity.ts │ │ │ ├── effects │ │ │ │ ├── index.ts │ │ │ │ ├── user.effects.ts │ │ │ │ └── todo.effects.ts │ │ │ ├── actions │ │ │ │ ├── index.ts │ │ │ │ ├── login.actions.ts │ │ │ │ ├── signup.actions.ts │ │ │ │ └── todo.actions.ts │ │ │ ├── state │ │ │ │ └── storage.ts │ │ │ ├── reducers │ │ │ │ ├── user.reducer.ts │ │ │ │ └── todo.reducer.ts │ │ │ └── index.ts │ │ ├── _services │ │ │ ├── index.ts │ │ │ ├── app.service.spec.ts │ │ │ ├── todo.service.spec.ts │ │ │ ├── todo.service.ts │ │ │ └── app.service.ts │ │ ├── shared │ │ │ ├── leftnav │ │ │ │ ├── leftnav.component.html │ │ │ │ ├── leftnav.component.css │ │ │ │ ├── leftnav.component.ts │ │ │ │ └── leftnav.component.spec.ts │ │ │ ├── header │ │ │ │ ├── header.component.css │ │ │ │ ├── header.component.html │ │ │ │ ├── header.component.spec.ts │ │ │ │ └── header.component.ts │ │ │ └── shared.module.ts │ │ ├── app.component.ts │ │ ├── login │ │ │ ├── signup.component.css │ │ │ ├── login.component.css │ │ │ ├── login-routing.module.ts │ │ │ ├── login.component.spec.ts │ │ │ ├── signup.component.spec.ts │ │ │ ├── login.module.ts │ │ │ ├── login.component.html │ │ │ ├── login.component.ts │ │ │ ├── signup.component.ts │ │ │ └── signup.component.html │ │ ├── app-routing.module.ts │ │ ├── app.component.spec.ts │ │ └── app.module.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── styles.css │ ├── index.html │ ├── main.ts │ ├── test.ts │ └── polyfills.ts ├── proxy.conf.json ├── e2e │ ├── tsconfig.json │ ├── src │ │ ├── app.po.ts │ │ └── app.e2e-spec.ts │ └── protractor.conf.js ├── tsconfig.app.json ├── .editorconfig ├── tsconfig.spec.json ├── browserslist ├── tsconfig.json ├── .gitignore ├── README.md ├── karma.conf.js ├── package.json ├── tslint.json └── angular.json ├── api ├── package.json └── server.js └── README.md /ui/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ui/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ui/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /ui/src/app/dashboard/dashboard.component.css: -------------------------------------------------------------------------------- 1 | .mrgtop5 { 2 | margin-top: 5%; 3 | } 4 | -------------------------------------------------------------------------------- /ui/src/app/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{footerString}} 3 |
4 | -------------------------------------------------------------------------------- /ui/src/app/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{title}} 3 |
4 | 5 | 6 | -------------------------------------------------------------------------------- /ui/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /ui/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bbachi/angular-ngrx-example/HEAD/ui/src/favicon.ico -------------------------------------------------------------------------------- /ui/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /ui/src/app/app-state/entity/index.ts: -------------------------------------------------------------------------------- 1 | export { User } from './user.entity'; 2 | export { Task } from './task.entity'; 3 | -------------------------------------------------------------------------------- /ui/src/app/_services/index.ts: -------------------------------------------------------------------------------- 1 | export { TodoService } from './todo.service'; 2 | export { AppService } from './app.service'; 3 | -------------------------------------------------------------------------------- /ui/src/app/shared/leftnav/leftnav.component.html: -------------------------------------------------------------------------------- 1 |
2 | 5 |
6 | -------------------------------------------------------------------------------- /ui/src/app/app-state/effects/index.ts: -------------------------------------------------------------------------------- 1 | export { UserEffects } from './user.effects'; 2 | export { TodoEffects } from './todo.effects'; 3 | -------------------------------------------------------------------------------- /ui/src/app/shared/header/header.component.css: -------------------------------------------------------------------------------- 1 | .header { 2 | background-color: lightgreen; 3 | width: 100%; 4 | padding: 2% 3%; 5 | } 6 | -------------------------------------------------------------------------------- /ui/src/app/dashboard/tasks/tasks.component.css: -------------------------------------------------------------------------------- 1 | .right { 2 | text-align: right; 3 | } 4 | 5 | .btncenter { 6 | text-align: center; 7 | } 8 | -------------------------------------------------------------------------------- /ui/src/app/app-state/entity/user.entity.ts: -------------------------------------------------------------------------------- 1 | export class User { 2 | email?: string; 3 | password?: string; 4 | firstName?: string; 5 | lastName?: string; 6 | } 7 | -------------------------------------------------------------------------------- /ui/src/app/app-state/entity/task.entity.ts: -------------------------------------------------------------------------------- 1 | export class Task { 2 | id?: any; 3 | createdBy?: string; 4 | task?: any; 5 | assignee?: string; 6 | status?: string; 7 | } 8 | -------------------------------------------------------------------------------- /ui/src/app/header/header.component.css: -------------------------------------------------------------------------------- 1 | .header { 2 | width: 100%; 3 | padding: 3%; 4 | text-align: center; 5 | color: white; 6 | font-size: 30px; 7 | background-color: goldenrod; 8 | } 9 | -------------------------------------------------------------------------------- /ui/src/app/footer/footer.component.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | padding: 3%; 4 | text-align: center; 5 | color: white; 6 | font-size: 30px; 7 | background-color: rgb(8, 77, 224); 8 | } 9 | -------------------------------------------------------------------------------- /ui/proxy.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api/*": { 3 | "target": "http://localhost:3080", 4 | "secure": false, 5 | "logLevel": "debug", 6 | "pathRewrite": { 7 | "^/api": "/api" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ui/src/app/shared/leftnav/leftnav.component.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | height: 1000px; 3 | background-color: rgb(9, 107, 236); 4 | padding: 3%; 5 | } 6 | 7 | .list-group li { 8 | margin-bottom: 10px; 9 | margin-left: 40px; 10 | cursor: pointer; 11 | } 12 | -------------------------------------------------------------------------------- /ui/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'ui'; 10 | } 11 | -------------------------------------------------------------------------------- /ui/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /ui/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /ui/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /ui/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ui 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /ui/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /ui/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /ui/src/app/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.css'] 7 | }) 8 | export class HeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | title: string = 'Angular NGRX Example' 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /ui/src/app/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.css'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | footerString: number = new Date().getFullYear(); 13 | 14 | ngOnInit() { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /ui/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /ui/src/app/_services/app.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { AppService } from './app.service'; 4 | 5 | describe('AppService', () => { 6 | let service: AppService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(AppService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /ui/src/app/_services/todo.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { TodoService } from './todo.service'; 4 | 5 | describe('TodoService', () => { 6 | let service: TodoService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(TodoService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /ui/src/app/login/signup.component.css: -------------------------------------------------------------------------------- 1 | .loginbox { 2 | width: 30%; 3 | height: auto; 4 | margin: 20px 0px; 5 | } 6 | 7 | .loginhead { 8 | text-align: center; 9 | color: rgb(12, 79, 138); 10 | margin-bottom: 50px; 11 | } 12 | 13 | button { 14 | width: 100px; 15 | } 16 | 17 | .btnholder { 18 | text-align: center; 19 | } 20 | 21 | .btnholder a { 22 | color: rgb(255, 0, 191); 23 | } 24 | 25 | label { 26 | color: rgb(34, 12, 131); 27 | } 28 | -------------------------------------------------------------------------------- /ui/src/app/dashboard/dashboard-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | 6 | const routes: Routes = [ 7 | { path: '', component: DashboardComponent }, 8 | ]; 9 | 10 | @NgModule({ 11 | imports: [RouterModule.forChild(routes)], 12 | exports: [RouterModule] 13 | }) 14 | export class DashboardRoutingModule { } 15 | -------------------------------------------------------------------------------- /ui/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "api", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node server.bundle.js", 8 | "build": "webpack", 9 | "dev": "nodemon ./server.js localhost 3080" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "express": "^4.17.1", 16 | "random-id": "^1.0.4" 17 | }, 18 | "devDependencies": { 19 | "nodemon": "^2.0.4" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /ui/src/app/shared/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

ToDo Appliation

5 |
6 |
7 |

{{user.firstName}} {{user.lastName}}

8 |

{{user.email}}

9 |
Logout
10 |
11 |
12 |
13 | -------------------------------------------------------------------------------- /ui/src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { HeaderComponent } from './header/header.component'; 4 | import { LeftnavComponent } from './leftnav/leftnav.component'; 5 | 6 | 7 | 8 | @NgModule({ 9 | declarations: [HeaderComponent, LeftnavComponent], 10 | imports: [ 11 | CommonModule 12 | ], 13 | exports: [ 14 | HeaderComponent, 15 | LeftnavComponent 16 | ] 17 | }) 18 | export class SharedModule { } 19 | -------------------------------------------------------------------------------- /ui/src/app/login/login.component.css: -------------------------------------------------------------------------------- 1 | .loginbox { 2 | width: 30%; 3 | height: 500px; 4 | background-image: radial-gradient(circle, rgb(152, 212, 12) 0%, rgb(100, 145, 58) 100%); 5 | margin: 20px 0px; 6 | } 7 | 8 | .loginhead { 9 | text-align: center; 10 | color: aliceblue; 11 | margin-bottom: 50px; 12 | } 13 | 14 | button { 15 | width: 100px; 16 | } 17 | 18 | .btnholder { 19 | text-align: center; 20 | } 21 | 22 | .btnholder a { 23 | color: rgb(255, 0, 191); 24 | } 25 | 26 | label { 27 | color: whitesmoke; 28 | } 29 | -------------------------------------------------------------------------------- /ui/src/app/login/login-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { LoginComponent } from './login.component'; 4 | import { SignupComponent } from './signup.component'; 5 | 6 | const routes: Routes = [ 7 | { path: '', component: LoginComponent }, 8 | { path: 'signup', component: SignupComponent } 9 | ]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class LoginRoutingModule { } 16 | -------------------------------------------------------------------------------- /ui/src/app/app-state/actions/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export { login, USER_LOGIN, loginSuccess, loginFailure } from './login.actions'; 3 | export { signup, USER_SIGNUP, signupSuccess, signupFailure } from './signup.actions'; 4 | export { 5 | getTasks, 6 | GET_TASKS, 7 | getTasksSuccess, 8 | getTasksFailure, 9 | createTask, 10 | CREATE_TASK, 11 | createTaskSuccess, 12 | createTaskFailure, 13 | deleteTask, 14 | DELETE_TASK, 15 | deleteTaskSuccess, 16 | deleteTaskFailure, 17 | editTask, 18 | EDIT_TASK, 19 | editTaskSuccess, 20 | editTaskFailure } from './todo.actions'; 21 | -------------------------------------------------------------------------------- /ui/src/app/app-state/actions/login.actions.ts: -------------------------------------------------------------------------------- 1 | import { createAction, props } from '@ngrx/store'; 2 | import { User } from '../entity'; 3 | 4 | export const USER_LOGIN = '[Login Page] Login'; 5 | export const USER_LOGIN_SUCCESS = '[Login Page] Login Success'; 6 | export const USER_LOGIN_FAILURE = '[Login Page] Login Failure'; 7 | 8 | export const login = createAction( 9 | USER_LOGIN, 10 | props<{user: User}>() 11 | ); 12 | 13 | export const loginSuccess = createAction( 14 | USER_LOGIN_SUCCESS, 15 | props() 16 | ) 17 | 18 | export const loginFailure = createAction( 19 | USER_LOGIN_FAILURE, 20 | props<{message: string}>() 21 | ) 22 | -------------------------------------------------------------------------------- /ui/src/app/app-state/actions/signup.actions.ts: -------------------------------------------------------------------------------- 1 | import { createAction, props } from '@ngrx/store'; 2 | import { User } from '../entity'; 3 | 4 | export const USER_SIGNUP = '[SignUp Page] Signup'; 5 | export const USER_SIGNUP_SUCCESS = '[SignUp Page] Signup Success'; 6 | export const USER_SIGNUP_FAILURE = '[SignUp Page] Signup Failure'; 7 | 8 | export const signup = createAction( 9 | USER_SIGNUP, 10 | props<{user: User}>() 11 | ); 12 | 13 | export const signupSuccess = createAction( 14 | USER_SIGNUP_SUCCESS, 15 | props() 16 | ) 17 | 18 | export const signupFailure = createAction( 19 | USER_SIGNUP_FAILURE, 20 | props<{message: string}>() 21 | ) 22 | -------------------------------------------------------------------------------- /ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | }, 22 | "angularCompilerOptions": { 23 | "fullTemplateTypeCheck": true, 24 | "strictInjectionParameters": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /ui/src/app/shared/leftnav/leftnav.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { environment } from '../../../environments/environment' 3 | 4 | @Component({ 5 | selector: 'app-leftnav', 6 | templateUrl: './leftnav.component.html', 7 | styleUrls: ['./leftnav.component.css'] 8 | }) 9 | export class LeftnavComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | gotoModule(moduleName: string) { 17 | if (moduleName === 'todos') { 18 | window.location.href = `${environment}/todos` 19 | } else if (moduleName === 'tasks') { 20 | window.location.href = `${environment}/tasks` 21 | } 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /ui/src/app/dashboard/dashboard.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { DashboardRoutingModule } from './dashboard-routing.module'; 6 | import { DashboardComponent } from './dashboard.component'; 7 | import { SharedModule } from '../shared/shared.module'; 8 | import { TasksComponent } from './tasks/tasks.component'; 9 | 10 | 11 | @NgModule({ 12 | declarations: [DashboardComponent, TasksComponent], 13 | imports: [ 14 | CommonModule, 15 | FormsModule, 16 | ReactiveFormsModule, 17 | SharedModule, 18 | DashboardRoutingModule 19 | ] 20 | }) 21 | export class DashboardModule { } 22 | -------------------------------------------------------------------------------- /ui/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('ui app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /ui/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /ui/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { LoginComponent } from './login/login.component'; 4 | 5 | 6 | const routes: Routes = [ 7 | { path: '', component: LoginComponent }, 8 | { 9 | path: 'login', 10 | loadChildren: () => import('./login/login.module').then(m => m.LoginModule) 11 | }, 12 | { 13 | path: 'dashboard', 14 | loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) 15 | } 16 | // { path: 'dashboard', component: DashboardComponent } 17 | ]; 18 | 19 | @NgModule({ 20 | imports: [RouterModule.forRoot(routes)], 21 | exports: [RouterModule] 22 | }) 23 | export class AppRoutingModule { } 24 | -------------------------------------------------------------------------------- /ui/src/app/login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginComponent } from './login.component'; 4 | 5 | describe('LoginComponent', () => { 6 | let component: LoginComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LoginComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LoginComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ui/src/app/_services/todo.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class TodoService { 8 | 9 | constructor(private http: HttpClient) { } 10 | 11 | rootURL = '/api'; 12 | 13 | getTasks() { 14 | return this.http.get(this.rootURL + '/tasks'); 15 | } 16 | 17 | addTask(task: any) { 18 | return this.http.post(this.rootURL + '/task', {task}); 19 | } 20 | 21 | editTask(task: any) { 22 | return this.http.put(this.rootURL + '/task', {task}); 23 | } 24 | 25 | deleteTask(taskId: any) { 26 | console.log('deleting task:::', taskId); 27 | return this.http.delete(`${this.rootURL}/task/${taskId}`); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /ui/src/app/dashboard/tasks/tasks.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TasksComponent } from './tasks.component'; 4 | 5 | describe('TasksComponent', () => { 6 | let component: TasksComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ TasksComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(TasksComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ui/src/app/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ FooterComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ui/src/app/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ui/src/app/login/signup.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SignupComponent } from './signup.component'; 4 | 5 | describe('SignupComponent', () => { 6 | let component: SignupComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SignupComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SignupComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ui/src/app/shared/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ui/src/app/login/login.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { LoginRoutingModule } from './login-routing.module'; 6 | import { SignupComponent } from './signup.component'; 7 | import { HeaderComponent } from '../header/header.component'; 8 | import { LoginComponent } from './login.component'; 9 | import { FooterComponent } from '../footer/footer.component'; 10 | 11 | 12 | @NgModule({ 13 | declarations: [ 14 | SignupComponent, 15 | HeaderComponent, 16 | FooterComponent, 17 | LoginComponent 18 | ], 19 | imports: [ 20 | CommonModule, 21 | FormsModule, 22 | LoginRoutingModule 23 | ] 24 | }) 25 | export class LoginModule { } 26 | -------------------------------------------------------------------------------- /ui/src/app/shared/leftnav/leftnav.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LeftnavComponent } from './leftnav.component'; 4 | 5 | describe('LeftnavComponent', () => { 6 | let component: LeftnavComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LeftnavComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LeftnavComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ui/src/app/dashboard/dashboard.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | describe('DashboardComponent', () => { 6 | let component: DashboardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ DashboardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(DashboardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ui/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /ui/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /ui/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /ui/README.md: -------------------------------------------------------------------------------- 1 | # Ui 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.4. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AngularNgrxExample 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.24. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /ui/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/ui'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /ui/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'ui'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.componentInstance; 26 | expect(app.title).toEqual('ui'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.nativeElement; 33 | expect(compiled.querySelector('.content span').textContent).toContain('ui app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /ui/src/app/app-state/effects/user.effects.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Actions, createEffect, ofType } from '@ngrx/effects'; 3 | import { map, exhaustMap, catchError } from 'rxjs/operators'; 4 | import { of } from 'rxjs'; 5 | import { AppService } from '../../_services/app.service'; 6 | import * as userActions from '../actions'; 7 | 8 | @Injectable() 9 | export class UserEffects { 10 | 11 | constructor( 12 | private actions$: Actions, 13 | private appService: AppService 14 | ) {} 15 | 16 | userLogin$ = createEffect(() => 17 | this.actions$.pipe( 18 | ofType(userActions.login), 19 | exhaustMap(action => 20 | this.appService.login(action.user).pipe( 21 | map(response => userActions.loginSuccess(response)), 22 | catchError((error: any) => of(userActions.loginFailure(error)))) 23 | ) 24 | ) 25 | ); 26 | 27 | userSignup$ = createEffect(() => 28 | this.actions$.pipe( 29 | ofType(userActions.signup), 30 | exhaustMap(action => 31 | this.appService.signup(action.user).pipe( 32 | map(response => userActions.signupSuccess(response)), 33 | catchError((error: any) => of(userActions.signupFailure(error)))) 34 | ) 35 | ) 36 | ); 37 | 38 | } 39 | -------------------------------------------------------------------------------- /ui/src/app/shared/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from '@angular/core'; 2 | import { Store } from '@ngrx/store'; 3 | import * as userActions from '../../app-state/actions'; 4 | import * as fromRoot from '../../app-state'; 5 | import { Subject } from 'rxjs'; 6 | import { takeUntil } from 'rxjs/operators'; 7 | import { Router } from '@angular/router'; 8 | import * as storage from '../../app-state/state/storage'; 9 | 10 | @Component({ 11 | selector: 'app-shared-header', 12 | templateUrl: './header.component.html', 13 | styleUrls: ['./header.component.css'] 14 | }) 15 | export class HeaderComponent implements OnInit, OnDestroy { 16 | 17 | destroy$: Subject = new Subject(); 18 | user: any; 19 | 20 | constructor(private readonly store: Store, private router: Router) { 21 | this.store.select(fromRoot.getLoggedInUser).pipe( 22 | takeUntil(this.destroy$) 23 | ).subscribe(data => { 24 | console.log('in the header:::', data) 25 | this.user = data.user; 26 | }); 27 | } 28 | 29 | logout() { 30 | storage.clearStorage(); 31 | this.router.navigate(['/']); 32 | } 33 | 34 | ngOnInit(): void { 35 | } 36 | 37 | ngOnDestroy(){ 38 | this.destroy$.next(true); 39 | this.destroy$.unsubscribe(); 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /ui/src/app/app-state/state/storage.ts: -------------------------------------------------------------------------------- 1 | export const getThisState = (stateName) => { 2 | try{ 3 | const serializedState = localStorage.getItem(stateName); 4 | if(serializedState === null){ return undefined } 5 | return JSON.parse(serializedState); 6 | }catch(err){ 7 | return undefined 8 | } 9 | } 10 | 11 | export const getItem = (itemName) => { 12 | const items = getThisState(itemName) 13 | if (items === undefined) { 14 | return {todos : []} 15 | } else { 16 | return items 17 | } 18 | } 19 | 20 | export const saveItem = (key,data) => { 21 | const serializedState = JSON.stringify(data); 22 | localStorage.setItem(key,serializedState); 23 | } 24 | 25 | export const getItemByKey = (key) => { 26 | try{ 27 | const serializedState = localStorage.getItem(key); 28 | if(serializedState === null){ return undefined } 29 | return JSON.parse(serializedState); 30 | }catch(err){ 31 | return undefined 32 | } 33 | } 34 | 35 | export const deleteItemByKey = (key) => localStorage.setItem(key,null) 36 | 37 | export const emptyLocalStorage = (reducerkeys) => { 38 | 39 | try{ 40 | if(undefined != reducerkeys && reducerkeys.length > 0){ 41 | reducerkeys.forEach(key => { 42 | localStorage.setItem(key,null); 43 | }) 44 | } 45 | }catch(err){ 46 | //console.log("ERROR===emptyLocalStorage==>>>") 47 | } 48 | } 49 | 50 | export const clearStorage = () => localStorage.clear(); 51 | -------------------------------------------------------------------------------- /ui/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpClientModule } from '@angular/common/http'; 5 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 6 | 7 | 8 | import { AppRoutingModule } from './app-routing.module'; 9 | import { DashboardModule } from './dashboard/dashboard.module'; 10 | import { SharedModule } from './shared/shared.module'; 11 | import { LoginModule } from './login/login.module'; 12 | import { ModalModule } from 'ngx-bootstrap/modal'; 13 | import { AppComponent } from './app.component'; 14 | 15 | // ngrx related imports 16 | import { StoreModule } from '@ngrx/store'; 17 | import { reducers, metaReducers } from './app-state'; 18 | import { UserEffects, TodoEffects } from './app-state/effects'; 19 | import { EffectsModule } from '@ngrx/effects'; 20 | 21 | @NgModule({ 22 | declarations: [ 23 | AppComponent 24 | ], 25 | imports: [ 26 | BrowserModule, 27 | AppRoutingModule, 28 | FormsModule, 29 | BrowserAnimationsModule, 30 | HttpClientModule, 31 | DashboardModule, 32 | SharedModule, 33 | LoginModule, 34 | ModalModule.forRoot(), 35 | // ngrx related imports 36 | StoreModule.forRoot(reducers, { 37 | metaReducers 38 | }), 39 | EffectsModule.forRoot([UserEffects, TodoEffects]) 40 | ], 41 | providers: [], 42 | bootstrap: [AppComponent] 43 | }) 44 | export class AppModule { } 45 | -------------------------------------------------------------------------------- /ui/src/app/_services/app.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Subject, Observable, of } from 'rxjs'; 3 | import { HttpClient, HttpHeaders } from '@angular/common/http'; 4 | import { map, catchError } from 'rxjs/operators'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class AppService { 10 | 11 | private userLoggedIn = new Subject(); 12 | loginUrl = '/api/login'; 13 | signupUrl = '/api/signup'; 14 | 15 | constructor(private http: HttpClient) { 16 | this.userLoggedIn.next(false); 17 | } 18 | 19 | setUserLoggedIn(userLoggedIn: boolean) { 20 | this.userLoggedIn.next(userLoggedIn); 21 | } 22 | 23 | getUserLoggedIn(): Observable { 24 | return this.userLoggedIn.asObservable(); 25 | } 26 | 27 | login(user: any) { 28 | const headers = new HttpHeaders({'Content-Type' : 'application/json'}); 29 | const options = {headers}; 30 | return this.http.post(this.loginUrl, {user}, options).pipe( 31 | map((response: Response) => response), 32 | catchError(err => { 33 | console.log(err); 34 | return of([]); 35 | }) 36 | ); 37 | } 38 | 39 | signup(user: any) { 40 | const headers = new HttpHeaders({'Content-Type' : 'application/json'}); 41 | const options = {headers}; 42 | return this.http.post(this.signupUrl, {user}, options).pipe( 43 | map((response: Response) => response), 44 | catchError(err => { 45 | console.log(err); 46 | return of([]); 47 | }) 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /ui/src/app/login/login.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |

Login

7 |
8 |
10 | Please Fill the form 11 |
12 | 13 | 14 | We'll never share your details. 15 |
16 |
17 | 18 | 19 |
20 |
21 |

No Account? Sign Up Here!

22 | 23 |
24 |
25 |
26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /ui/src/app/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { NgForm } from '@angular/forms'; 4 | import { Store } from '@ngrx/store'; 5 | import * as userActions from '../app-state/actions'; 6 | import * as fromRoot from '../app-state'; 7 | import { Subject } from 'rxjs'; 8 | import { takeUntil } from 'rxjs/operators'; 9 | 10 | @Component({ 11 | selector: 'app-login', 12 | templateUrl: './login.component.html', 13 | styleUrls: ['./login.component.css'] 14 | }) 15 | export class LoginComponent implements OnInit, OnDestroy { 16 | 17 | constructor(private router: Router, private readonly store: Store) { 18 | this.store.select(fromRoot.userLogin).pipe( 19 | takeUntil(this.destroy$) 20 | ).subscribe(data => { 21 | console.log('data::::', data); 22 | if (data.isLoadingSuccess && data.result.status) { 23 | this.router.navigate(['/dashboard']); 24 | } 25 | }); 26 | } 27 | 28 | model: User = new User(); 29 | destroy$: Subject = new Subject(); 30 | 31 | ngOnInit() { 32 | } 33 | 34 | onSubmit(loginForm: NgForm) { 35 | console.log(this.model) 36 | this.store.dispatch(userActions.login({user: { email: this.model.email, password: this.model.password }})); 37 | } 38 | 39 | ngOnDestroy(){ 40 | this.destroy$.next(true); 41 | this.destroy$.unsubscribe(); 42 | } 43 | 44 | } 45 | 46 | export class User { 47 | 48 | constructor( 49 | 50 | ) { } 51 | 52 | public email: string; 53 | public password: string; 54 | 55 | } 56 | -------------------------------------------------------------------------------- /ui/src/app/dashboard/tasks/tasks.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core'; 2 | import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; 3 | import { FormGroup, FormControl, Validators } from '@angular/forms'; 4 | 5 | @Component({ 6 | selector: 'app-tasks', 7 | templateUrl: './tasks.component.html', 8 | styleUrls: ['./tasks.component.css'] 9 | }) 10 | export class TasksComponent implements OnInit { 11 | 12 | modalRef: BsModalRef; 13 | constructor(private modalService: BsModalService) { } 14 | 15 | @Input() tasks: any[]; 16 | @Output() deleteTask = new EventEmitter(); 17 | @Output() editTask = new EventEmitter(); 18 | 19 | editingId: any; 20 | 21 | editForm = new FormGroup({ 22 | id: new FormControl('', Validators.nullValidator && Validators.required), 23 | task: new FormControl('', Validators.nullValidator && Validators.required), 24 | assignee: new FormControl('', Validators.nullValidator && Validators.required), 25 | status: new FormControl('', Validators.nullValidator && Validators.required) 26 | }); 27 | 28 | ngOnInit(): void { 29 | } 30 | 31 | onSubmit() { 32 | console.log(this.editForm.value); 33 | this.modalService.hide(1); 34 | this.editTask.emit(this.editForm.value); 35 | } 36 | 37 | delTask(task) { 38 | this.deleteTask.emit(task); 39 | } 40 | 41 | openModal(template: TemplateRef, task) { 42 | this.editingId = task.id; 43 | this.editForm.setValue({id: task.id, task: task.task, assignee: task.assignee, status: task.status}); 44 | this.modalRef = this.modalService.show(template); 45 | } 46 | 47 | } 48 | -------------------------------------------------------------------------------- /ui/src/app/login/signup.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { NgForm } from '@angular/forms'; 4 | import { AppService } from '../_services'; 5 | import { Store } from '@ngrx/store'; 6 | import * as userActions from '../app-state/actions'; 7 | import * as fromRoot from '../app-state'; 8 | import { Subject } from 'rxjs'; 9 | import { takeUntil } from 'rxjs/operators'; 10 | 11 | @Component({ 12 | selector: 'app-signup', 13 | templateUrl: './signup.component.html', 14 | styleUrls: ['./signup.component.css'] 15 | }) 16 | export class SignupComponent implements OnInit { 17 | 18 | constructor(private router: Router, private appService: AppService, private readonly store: Store) { 19 | this.store.select(fromRoot.userLogin).pipe( 20 | takeUntil(this.destroy$) 21 | ).subscribe(data => { 22 | console.log('data::::', data); 23 | if (data.isLoadingSuccess && data.result.status) { 24 | this.router.navigate(['/dashboard']); 25 | } 26 | }); 27 | } 28 | 29 | model: User = new User(); 30 | destroy$: Subject = new Subject(); 31 | 32 | ngOnInit() { 33 | } 34 | 35 | onSubmit(loginForm: NgForm) { 36 | console.log(this.model) 37 | this.store.dispatch(userActions.signup({user: this.model})); 38 | } 39 | 40 | ngOnDestroy(){ 41 | this.destroy$.next(true); 42 | this.destroy$.unsubscribe(); 43 | } 44 | 45 | } 46 | 47 | export class User { 48 | 49 | constructor( 50 | 51 | ) { } 52 | 53 | public password: string; 54 | public firstName: string; 55 | public lastName: string; 56 | public email: string; 57 | 58 | } 59 | -------------------------------------------------------------------------------- /ui/src/app/app-state/reducers/user.reducer.ts: -------------------------------------------------------------------------------- 1 | import { Action, createReducer, on } from '@ngrx/store'; 2 | import { User } from '../entity'; 3 | import * as userActions from '../actions'; 4 | import * as storage from '../state/storage'; 5 | 6 | export interface State { 7 | user: User; 8 | result: any; 9 | isLoading: boolean; 10 | isLoadingSuccess: boolean; 11 | isLoadingFailure: boolean; 12 | } 13 | 14 | export const initialState: State = { 15 | user: storage.getItem('user').user, 16 | result: '', 17 | isLoading: false, 18 | isLoadingSuccess: false, 19 | isLoadingFailure: false 20 | }; 21 | 22 | const loginReducer = createReducer( 23 | initialState, 24 | on(userActions.login, (state, {user}) => ({user, isLoading: true})), 25 | on(userActions.loginSuccess, (state, result) => ({user: result.user, result, isLoading: false, isLoadingSuccess: true})), 26 | on(userActions.signup, (state, {user}) => ({user, isLoading: true})), 27 | on(userActions.signupSuccess, (state, result) => ({user: state.user, result, isLoading: false, isLoadingSuccess: true})) 28 | ); 29 | 30 | export function reducer(state: State | undefined, action: Action): any { 31 | return loginReducer(state, action); 32 | } 33 | 34 | export const getLoggedInUser = (state: State) => { 35 | return { 36 | user: state.user, 37 | isLoadingSuccess: state.isLoadingSuccess 38 | } 39 | }; 40 | 41 | export const userLogin = (state: State) => { 42 | return { 43 | user: state.user, 44 | result: state.result, 45 | isLoading: state.isLoading, 46 | isLoadingSuccess: state.isLoadingSuccess 47 | } 48 | }; 49 | 50 | export const userSignup = (state: State) => { 51 | return { 52 | user: state.user, 53 | result: state.result, 54 | isLoading: state.isLoading, 55 | isLoadingSuccess: state.isLoadingSuccess 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~9.0.3", 15 | "@angular/common": "~9.0.3", 16 | "@angular/compiler": "~9.0.3", 17 | "@angular/core": "~9.0.3", 18 | "@angular/forms": "~9.0.3", 19 | "@angular/platform-browser": "~9.0.3", 20 | "@angular/platform-browser-dynamic": "~9.0.3", 21 | "@angular/router": "~9.0.3", 22 | "@ngrx/effects": "^9.2.0", 23 | "@ngrx/entity": "^9.2.0", 24 | "@ngrx/router-store": "^9.2.0", 25 | "@ngrx/store": "^9.2.0", 26 | "@ngrx/store-devtools": "^9.2.0", 27 | "bootstrap": "4.1.1", 28 | "install": "^0.13.0", 29 | "lodash": "^4.17.15", 30 | "ngrx-store-localstorage": "^9.0.0", 31 | "ngx-bootstrap": "^5.6.1", 32 | "npm": "^6.14.5", 33 | "rxjs": "~6.5.4", 34 | "tslib": "^1.10.0", 35 | "zone.js": "~0.10.2" 36 | }, 37 | "devDependencies": { 38 | "@angular-devkit/build-angular": "~0.900.4", 39 | "@angular/cli": "~9.0.4", 40 | "@angular/compiler-cli": "~9.0.3", 41 | "@angular/language-service": "~9.0.3", 42 | "@types/node": "^12.11.1", 43 | "@types/jasmine": "~3.5.0", 44 | "@types/jasminewd2": "~2.0.3", 45 | "codelyzer": "^5.1.2", 46 | "jasmine-core": "~3.5.0", 47 | "jasmine-spec-reporter": "~4.2.1", 48 | "karma": "~4.3.0", 49 | "karma-chrome-launcher": "~3.1.0", 50 | "karma-coverage-istanbul-reporter": "~2.1.0", 51 | "karma-jasmine": "~2.0.1", 52 | "karma-jasmine-html-reporter": "^1.4.2", 53 | "protractor": "~5.4.3", 54 | "ts-node": "~8.3.0", 55 | "tslint": "~5.18.0", 56 | "typescript": "~3.7.5" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /ui/src/app/app-state/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ActionReducer, 3 | ActionReducerMap, 4 | createFeatureSelector, 5 | createSelector, 6 | MetaReducer 7 | } from '@ngrx/store'; 8 | import { localStorageSync } from 'ngrx-store-localstorage'; 9 | import { environment } from '../../environments/environment'; 10 | import * as fromUser from './reducers/user.reducer'; 11 | import * as fromTodo from './reducers/todo.reducer'; 12 | 13 | export interface State { 14 | user: fromUser.State; 15 | todo: fromTodo.State; 16 | } 17 | 18 | export const reducers: ActionReducerMap = { 19 | user: fromUser.reducer, 20 | todo: fromTodo.reducer, 21 | }; 22 | 23 | const reducerKeys = ['user', 'todo']; 24 | export function localStorageSyncReducer(reducer: ActionReducer): ActionReducer { 25 | return localStorageSync({keys: reducerKeys})(reducer); 26 | } 27 | 28 | // console.log all actions 29 | export function debug(reducer: ActionReducer): ActionReducer { 30 | return function(state, action) { 31 | console.log('state', state); 32 | console.log('action', action); 33 | 34 | return reducer(state, action); 35 | }; 36 | } 37 | 38 | 39 | export const metaReducers: MetaReducer[] = !environment.production ? [debug, localStorageSyncReducer] : [localStorageSyncReducer]; 40 | 41 | export const getLoginState = createFeatureSelector('user'); 42 | 43 | export const getLoggedInUser = createSelector( 44 | getLoginState, 45 | fromUser.getLoggedInUser 46 | ); 47 | 48 | export const userLogin = createSelector( 49 | getLoginState, 50 | fromUser.userLogin 51 | ); 52 | 53 | export const userSignup = createSelector( 54 | getLoginState, 55 | fromUser.userSignup 56 | ); 57 | 58 | 59 | // Todo reducers Begin 60 | 61 | export const geTodoState = createFeatureSelector('todo'); 62 | 63 | export const getTasks = createSelector( 64 | geTodoState, 65 | fromTodo.getTasks 66 | ); 67 | -------------------------------------------------------------------------------- /ui/src/app/login/signup.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |

Login

7 |
9 | Please Fill the form 10 |
11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 |

Already have an account? Lgoin Here!

29 | 30 |
31 |
32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /ui/src/app/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 |
10 |

ToDo List

11 |
12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 |
23 |
24 | 25 | 30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 | 38 |
39 | 45 | 46 |
47 |
48 |
49 | 50 | -------------------------------------------------------------------------------- /ui/src/app/app-state/actions/todo.actions.ts: -------------------------------------------------------------------------------- 1 | import { createAction, props } from '@ngrx/store'; 2 | import { Task } from '../entity'; 3 | 4 | export const GET_TASKS = '[Task] Get Tasks'; 5 | export const GET_TASKS_SUCCESS = '[Task] Get Tasks Success'; 6 | export const GET_TASKS_FAILURE = '[Task] Get Tasks Failure'; 7 | 8 | export const CREATE_TASK = '[Task] Create Task'; 9 | export const CREATE_TASK_SUCCESS = '[Task] Create Task Success'; 10 | export const CREATE_TASK_FAILURE = '[Task] Create Task Failure'; 11 | 12 | export const DELETE_TASK = '[Task] Delete Task'; 13 | export const DELETE_TASK_SUCCESS = '[Task] Delete Task Success'; 14 | export const DELETE_TASK_FAILURE = '[Task] Delete Task Failure'; 15 | 16 | export const EDIT_TASK = '[Task] Edit Task'; 17 | export const EDIT_TASK_SUCCESS = '[Task] Edit Task Success'; 18 | export const EDIT_TASK_FAILURE = '[Task] Edit Task Failure'; 19 | 20 | 21 | export const getTasks = createAction( 22 | GET_TASKS 23 | ); 24 | 25 | export const getTasksSuccess = createAction( 26 | GET_TASKS_SUCCESS, 27 | props() 28 | ); 29 | 30 | export const getTasksFailure = createAction( 31 | GET_TASKS_FAILURE, 32 | props<{any}>() 33 | ); 34 | 35 | export const createTask = createAction( 36 | CREATE_TASK, 37 | props<{task: any}>() 38 | ); 39 | 40 | export const createTaskSuccess = createAction( 41 | CREATE_TASK_SUCCESS, 42 | props() 43 | ); 44 | 45 | export const createTaskFailure = createAction( 46 | CREATE_TASK_FAILURE, 47 | props<{any}>() 48 | ); 49 | 50 | export const deleteTask = createAction( 51 | DELETE_TASK, 52 | props<{taskid}>() 53 | ); 54 | 55 | export const deleteTaskSuccess = createAction( 56 | DELETE_TASK_SUCCESS, 57 | props() 58 | ); 59 | 60 | export const deleteTaskFailure = createAction( 61 | DELETE_TASK_FAILURE, 62 | props<{any}>() 63 | ); 64 | 65 | export const editTask = createAction( 66 | EDIT_TASK, 67 | props<{task: any}>() 68 | ); 69 | 70 | export const editTaskSuccess = createAction( 71 | EDIT_TASK_SUCCESS, 72 | props() 73 | ); 74 | 75 | export const editTaskFailure = createAction( 76 | EDIT_TASK_FAILURE, 77 | props<{any}>() 78 | ); 79 | -------------------------------------------------------------------------------- /ui/src/app/app-state/effects/todo.effects.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Actions, createEffect, ofType } from '@ngrx/effects'; 3 | import { of } from 'rxjs'; 4 | import { map, exhaustMap, catchError } from 'rxjs/operators'; 5 | import { TodoService } from '../../_services'; 6 | import * as todoActions from '../actions'; 7 | 8 | @Injectable() 9 | export class TodoEffects { 10 | 11 | constructor( 12 | private actions$: Actions, 13 | private todoService: TodoService 14 | ) {} 15 | 16 | getTasks$ = createEffect(() => 17 | this.actions$.pipe( 18 | ofType(todoActions.getTasks), 19 | exhaustMap(action => 20 | this.todoService.getTasks().pipe( 21 | map(response => { 22 | console.log("response:::", response) 23 | return todoActions.getTasksSuccess({response}) 24 | }), 25 | catchError((error: any) => of(todoActions.getTasksFailure(error)))) 26 | ) 27 | ) 28 | ); 29 | 30 | createTask$ = createEffect(() => 31 | this.actions$.pipe( 32 | ofType(todoActions.createTask), 33 | exhaustMap(action => 34 | this.todoService.addTask(action.task).pipe( 35 | map(response => todoActions.createTaskSuccess(response)), 36 | catchError((error: any) => of(todoActions.createTaskFailure(error)))) 37 | ) 38 | ) 39 | ); 40 | 41 | 42 | deleteTask$ = createEffect(() => 43 | this.actions$.pipe( 44 | ofType(todoActions.deleteTask), 45 | exhaustMap(action => this.todoService.deleteTask(action.taskid).pipe( 46 | map(response => todoActions.deleteTaskSuccess(response)), 47 | catchError((error: any) => of(todoActions.deleteTaskFailure(error)))) 48 | ) 49 | ) 50 | ); 51 | 52 | editTask$ = createEffect(() => 53 | this.actions$.pipe( 54 | ofType(todoActions.editTask), 55 | exhaustMap(action => 56 | this.todoService.editTask(action.task).pipe( 57 | map(response => todoActions.editTaskSuccess(response)), 58 | catchError((error: any) => of(todoActions.editTaskFailure(error)))) 59 | ) 60 | ) 61 | ); 62 | 63 | } 64 | -------------------------------------------------------------------------------- /ui/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-var-requires": false, 64 | "object-literal-key-quotes": [ 65 | true, 66 | "as-needed" 67 | ], 68 | "object-literal-sort-keys": false, 69 | "ordered-imports": false, 70 | "quotemark": [ 71 | true, 72 | "single" 73 | ], 74 | "trailing-comma": false, 75 | "no-conflicting-lifecycle": true, 76 | "no-host-metadata-property": true, 77 | "no-input-rename": true, 78 | "no-inputs-metadata-property": true, 79 | "no-output-native": true, 80 | "no-output-on-prefix": true, 81 | "no-output-rename": true, 82 | "no-outputs-metadata-property": true, 83 | "template-banana-in-box": true, 84 | "template-no-negated-async": true, 85 | "use-lifecycle-interface": true, 86 | "use-pipe-transform-interface": true 87 | }, 88 | "rulesDirectory": [ 89 | "codelyzer" 90 | ] 91 | } -------------------------------------------------------------------------------- /ui/src/app/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormGroup, FormControl, Validators } from '@angular/forms'; 3 | import { TodoService } from '../_services'; 4 | import { Router } from '@angular/router'; 5 | import { takeUntil } from 'rxjs/operators'; 6 | import { Subject } from 'rxjs'; 7 | import { Store } from '@ngrx/store'; 8 | import * as todoActions from '../app-state/actions'; 9 | import * as fromRoot from '../app-state'; 10 | 11 | @Component({ 12 | selector: 'app-dashboard', 13 | templateUrl: './dashboard.component.html', 14 | styleUrls: ['./dashboard.component.css'] 15 | }) 16 | export class DashboardComponent implements OnInit { 17 | 18 | user: any; 19 | tasks: any[] = []; 20 | 21 | constructor(private router: Router, private readonly store: Store) { 22 | this.store.select(fromRoot.getLoggedInUser).pipe( 23 | takeUntil(this.destroy$) 24 | ).subscribe(data => this.user = data.user); 25 | 26 | this.store.select(fromRoot.getTasks).pipe( 27 | takeUntil(this.destroy$) 28 | ).subscribe(data => this.tasks = data.tasks); 29 | } 30 | 31 | todoForm = new FormGroup({ 32 | task: new FormControl('', Validators.nullValidator && Validators.required), 33 | assignee: new FormControl('', Validators.nullValidator && Validators.required), 34 | status: new FormControl('', Validators.nullValidator && Validators.required) 35 | }); 36 | 37 | destroy$: Subject = new Subject(); 38 | 39 | onSubmit() { 40 | console.log(this.todoForm.value); 41 | const task = { 42 | createdBy: this.user.email, 43 | task: this.todoForm.value.task, 44 | assignee: this.todoForm.value.assignee, 45 | status: this.todoForm.value.status 46 | }; 47 | this.store.dispatch(todoActions.createTask({task})); 48 | this.todoForm.reset(); 49 | } 50 | 51 | deleteTask(taskid: any) { 52 | console.log('deleting this task:::', taskid); 53 | this.store.dispatch(todoActions.deleteTask({taskid})); 54 | } 55 | 56 | editTask(task: any) { 57 | console.log('editing this task:::', task); 58 | this.store.dispatch(todoActions.editTask({task})); 59 | } 60 | 61 | ngOnDestroy() { 62 | this.destroy$.next(true); 63 | this.destroy$.unsubscribe(); 64 | } 65 | 66 | ngOnInit(): void { 67 | 68 | } 69 | 70 | } 71 | -------------------------------------------------------------------------------- /api/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const app = express(), 4 | randomId = require('random-id') 5 | bodyParser = require("body-parser"); 6 | port = 3080; 7 | 8 | const idlen = 10; 9 | // place holder for the data 10 | const users = []; 11 | let tasks = []; 12 | 13 | app.use(bodyParser.json()); 14 | app.use(express.static(path.join(__dirname, '../ui/build'))); 15 | 16 | app.get('/api/users', (req, res) => { 17 | console.log('api/users called!') 18 | res.json(users); 19 | }); 20 | 21 | app.post('/api/user', (req, res) => { 22 | const user = req.body.user; 23 | console.log('Adding user:::::', user); 24 | users.push(user); 25 | res.json("user addedd"); 26 | }); 27 | 28 | app.post('/api/login', (req, res) => { 29 | const user = req.body.user; 30 | console.log('Adding user:::::', user); 31 | const usersFound = users.filter(usr => usr.email === user.email && usr.password === user.password); 32 | if (usersFound.length > 0) { 33 | res.json({status: true, message: 'user found'}); 34 | } else { 35 | res.json({status: false, message: 'user not found'}); 36 | } 37 | }); 38 | 39 | app.post('/api/signup', (req, res) => { 40 | const user = req.body.user; 41 | console.log('Adding user:::::', user); 42 | users.push(user); 43 | res.json({status: true, numberOfUsers: users.length}); 44 | }); 45 | 46 | app.get('/api/tasks', (req, res) => { 47 | res.json(tasks); 48 | }); 49 | 50 | app.post('/api/task', (req, res) => { 51 | const task = req.body.task; 52 | const id = randomId(idlen); 53 | task.id = id; 54 | tasks.push(task); 55 | res.json({status:true, message: `task ${task.id} addedd`}); 56 | }); 57 | 58 | app.delete('/api/task/:id', (req, res) => { 59 | console.log('deleting task:::', req.params.id); 60 | const id = req.params.id; 61 | tasks = tasks.filter(tsk => tsk.id !== id) 62 | res.json({status:true, message: `task ${id} deleted`}); 63 | }); 64 | 65 | app.put('/api/task', (req, res) => { 66 | const task = req.body.task; 67 | tasks = tasks.map(tsk => { 68 | if(tsk.id === task.id) tsk = task; 69 | return tsk; 70 | }); 71 | res.json({status:true, message: `task ${task.id} edited`}); 72 | }); 73 | 74 | app.get('/', (req,res) => { 75 | res.sendFile(path.join(__dirname, '../ui/build/index.html')); 76 | }); 77 | 78 | app.listen(port, () => { 79 | console.log(`Server listening on the port::${port}`); 80 | }); -------------------------------------------------------------------------------- /ui/src/app/dashboard/tasks/tasks.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Tasks

3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 20 | 23 | 36 | 37 | 38 |
Task IdTask NameAssigneeStatus
15 | {{task.id}} 16 | 18 | {{task.task}} 19 | 21 | {{task.assignee}} 22 | 24 |
25 |
26 | {{task.status}} 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 |
39 |
40 | 41 | 42 |
43 |

Task Edit

44 | 47 |
48 |
49 |
50 |
51 |
52 | 53 | {{editingId}} 54 |
55 |
56 |
57 |
58 | 59 | 60 |
61 |
62 |
63 |
64 | 65 | 66 |
67 |
68 |
69 |
70 | 71 | 76 |
77 |
78 |
79 | 80 |
81 |
82 |
83 | 84 | -------------------------------------------------------------------------------- /ui/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /ui/src/app/app-state/reducers/todo.reducer.ts: -------------------------------------------------------------------------------- 1 | import { Action, createReducer, on } from '@ngrx/store'; 2 | import { Task } from '../entity'; 3 | import * as todoActions from '../actions'; 4 | import * as _ from 'lodash' 5 | import * as storage from '../state/storage'; 6 | 7 | export interface State { 8 | tasks?: Task[]; 9 | currentTask?: Task; 10 | deleteTaskId?: any; 11 | result?: any; 12 | isLoading?: boolean; 13 | isLoadingSuccess?: boolean; 14 | isLoadingFailure?: boolean; 15 | } 16 | 17 | export const initialState: State = { 18 | tasks: storage.getItem('todo').tasks, 19 | currentTask: {}, 20 | deleteTaskId: '', 21 | result: '', 22 | isLoading: false, 23 | isLoadingSuccess: false, 24 | isLoadingFailure: false 25 | }; 26 | 27 | const todoReducer = createReducer( 28 | initialState, 29 | 30 | // GeTasks 31 | on(todoActions.getTasks, (state) => ({...state, isLoading: true})), 32 | on(todoActions.getTasksSuccess, (state, result) => ({tasks: result.response, isLoading: false, isLoadingSuccess: true})), 33 | 34 | // Create Task Reducers 35 | on(todoActions.createTask, (state, {task}) => ({...state, isLoading: true, currentTask: task})), 36 | on(todoActions.createTaskSuccess, (state, result) => { 37 | const tasks = undefined !== state.tasks ? _.cloneDeep(state.tasks) : []; 38 | const currentTask = undefined !== state.currentTask ? _.cloneDeep(state.currentTask) : {}; 39 | currentTask.id = result.taskId; 40 | tasks.push(currentTask); 41 | return { 42 | tasks, 43 | isLoading: false, 44 | isLoadingSuccess: true 45 | }; 46 | }), 47 | 48 | // Delete Task Reducers 49 | on(todoActions.deleteTask, (state, {taskid}) => ({...state, isLoading: true, deleteTaskId: taskid})), 50 | on(todoActions.deleteTaskSuccess, (state, result) => { 51 | let tasks = undefined !== state.tasks ? _.cloneDeep(state.tasks) : []; 52 | if (result.status) { 53 | tasks = tasks.filter(task => task.id !== state.deleteTaskId); 54 | } 55 | return { 56 | tasks, 57 | isLoading: false, 58 | isLoadingSuccess: true 59 | }; 60 | }), 61 | 62 | // Edit Task Reducers 63 | on(todoActions.editTask, (state, {task}) => ({...state, isLoading: true, currentTask: task})), 64 | on(todoActions.editTaskSuccess, (state, result) => { 65 | let tasks = undefined !== state.tasks ? _.cloneDeep(state.tasks) : []; 66 | const currentTask = undefined !== state.currentTask ? _.cloneDeep(state.currentTask) : {}; 67 | tasks = tasks.map(tsk => { 68 | if (tsk.id === currentTask.id) { 69 | tsk = currentTask; 70 | } 71 | return tsk; 72 | }); 73 | return { 74 | tasks, 75 | isLoading: false, 76 | isLoadingSuccess: true 77 | }; 78 | }) 79 | ); 80 | 81 | export function reducer(state: State | undefined, action: Action): any { 82 | return todoReducer(state, action); 83 | } 84 | 85 | export const getTasks = (state: State) => { 86 | return { 87 | tasks: state.tasks, 88 | isLoading: state.isLoading, 89 | isLoadingSuccess: state.isLoadingSuccess 90 | }; 91 | }; 92 | -------------------------------------------------------------------------------- /ui/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ui": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/ui", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "tsconfig.app.json", 21 | "aot": true, 22 | "assets": [ 23 | "src/favicon.ico", 24 | "src/assets" 25 | ], 26 | "styles": [ 27 | "./node_modules/bootstrap/dist/css/bootstrap.min.css", 28 | "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", 29 | "src/styles.css" 30 | ], 31 | "scripts": [] 32 | }, 33 | "configurations": { 34 | "production": { 35 | "fileReplacements": [ 36 | { 37 | "replace": "src/environments/environment.ts", 38 | "with": "src/environments/environment.prod.ts" 39 | } 40 | ], 41 | "optimization": true, 42 | "outputHashing": "all", 43 | "sourceMap": false, 44 | "extractCss": true, 45 | "namedChunks": false, 46 | "extractLicenses": true, 47 | "vendorChunk": false, 48 | "buildOptimizer": true, 49 | "budgets": [ 50 | { 51 | "type": "initial", 52 | "maximumWarning": "2mb", 53 | "maximumError": "5mb" 54 | }, 55 | { 56 | "type": "anyComponentStyle", 57 | "maximumWarning": "6kb", 58 | "maximumError": "10kb" 59 | } 60 | ] 61 | } 62 | } 63 | }, 64 | "serve": { 65 | "builder": "@angular-devkit/build-angular:dev-server", 66 | "options": { 67 | "browserTarget": "ui:build", 68 | "proxyConfig": "proxy.conf.json" 69 | }, 70 | "configurations": { 71 | "production": { 72 | "browserTarget": "ui:build:production" 73 | } 74 | } 75 | }, 76 | "extract-i18n": { 77 | "builder": "@angular-devkit/build-angular:extract-i18n", 78 | "options": { 79 | "browserTarget": "ui:build" 80 | } 81 | }, 82 | "test": { 83 | "builder": "@angular-devkit/build-angular:karma", 84 | "options": { 85 | "main": "src/test.ts", 86 | "polyfills": "src/polyfills.ts", 87 | "tsConfig": "tsconfig.spec.json", 88 | "karmaConfig": "karma.conf.js", 89 | "assets": [ 90 | "src/favicon.ico", 91 | "src/assets" 92 | ], 93 | "styles": [ 94 | "./node_modules/bootstrap/dist/css/bootstrap.min.css", 95 | "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", 96 | "src/styles.css" 97 | ], 98 | "scripts": [] 99 | } 100 | }, 101 | "lint": { 102 | "builder": "@angular-devkit/build-angular:tslint", 103 | "options": { 104 | "tsConfig": [ 105 | "tsconfig.app.json", 106 | "tsconfig.spec.json", 107 | "e2e/tsconfig.json" 108 | ], 109 | "exclude": [ 110 | "**/node_modules/**" 111 | ] 112 | } 113 | }, 114 | "e2e": { 115 | "builder": "@angular-devkit/build-angular:protractor", 116 | "options": { 117 | "protractorConfig": "e2e/protractor.conf.js", 118 | "devServerTarget": "ui:serve" 119 | }, 120 | "configurations": { 121 | "production": { 122 | "devServerTarget": "ui:serve:production" 123 | } 124 | } 125 | } 126 | } 127 | } 128 | }, 129 | "defaultProject": "ui", 130 | "cli": { 131 | "analytics": false 132 | } 133 | } 134 | --------------------------------------------------------------------------------