├── .angular-cli.json
├── .editorconfig
├── .gitignore
├── README.md
├── e2e
    ├── app.e2e-spec.ts
    ├── app.po.ts
    └── tsconfig.e2e.json
├── karma.conf.js
├── npm-shrinkwrap.json
├── package.json
├── protractor.conf.js
├── src
    ├── app
    │   ├── app.component.html
    │   ├── app.component.scss
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── components
    │   │   └── todo
    │   │   │   ├── todo-details
    │   │   │       ├── todo-details.component.html
    │   │   │       ├── todo-details.component.scss
    │   │   │       ├── todo-details.component.spec.ts
    │   │   │       └── todo-details.component.ts
    │   │   │   ├── todo-list-item
    │   │   │       ├── todo-list-item.component.html
    │   │   │       ├── todo-list-item.component.scss
    │   │   │       ├── todo-list-item.component.spec.ts
    │   │   │       └── todo-list-item.component.ts
    │   │   │   └── todo-list
    │   │   │       ├── todo-list.component.html
    │   │   │       ├── todo-list.component.scss
    │   │   │       ├── todo-list.component.spec.ts
    │   │   │       └── todo-list.component.ts
    │   ├── models
    │   │   └── todo.model.ts
    │   ├── services
    │   │   ├── todo.service.spec.ts
    │   │   └── todo.service.ts
    │   └── store
    │   │   └── todo
    │   │       ├── todo.action.ts
    │   │       ├── todo.effects.ts
    │   │       ├── todo.reducer.ts
    │   │       └── todo.state.ts
    ├── assets
    │   └── .gitkeep
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.scss
    ├── test.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    └── typings.d.ts
├── tsconfig.json
├── tslint.json
└── yarn.lock


/.angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "project": {
 4 |     "name": "todoapp-angular"
 5 |   },
 6 |   "apps": [
 7 |     {
 8 |       "root": "src",
 9 |       "outDir": "dist",
10 |       "assets": [
11 |         "assets",
12 |         "favicon.ico"
13 |       ],
14 |       "index": "index.html",
15 |       "main": "main.ts",
16 |       "polyfills": "polyfills.ts",
17 |       "test": "test.ts",
18 |       "tsconfig": "tsconfig.app.json",
19 |       "testTsconfig": "tsconfig.spec.json",
20 |       "prefix": "app",
21 |       "styles": [
22 |         "styles.scss"
23 |       ],
24 |       "scripts": [],
25 |       "environmentSource": "environments/environment.ts",
26 |       "environments": {
27 |         "dev": "environments/environment.ts",
28 |         "prod": "environments/environment.prod.ts"
29 |       }
30 |     }
31 |   ],
32 |   "e2e": {
33 |     "protractor": {
34 |       "config": "./protractor.conf.js"
35 |     }
36 |   },
37 |   "lint": [
38 |     {
39 |       "project": "src/tsconfig.app.json",
40 |       "exclude": "**/node_modules/**"
41 |     },
42 |     {
43 |       "project": "src/tsconfig.spec.json",
44 |       "exclude": "**/node_modules/**"
45 |     },
46 |     {
47 |       "project": "e2e/tsconfig.e2e.json",
48 |       "exclude": "**/node_modules/**"
49 |     }
50 |   ],
51 |   "test": {
52 |     "karma": {
53 |       "config": "./karma.conf.js"
54 |     }
55 |   },
56 |   "defaults": {
57 |     "styleExt": "scss",
58 |     "component": {}
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://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 | 


--------------------------------------------------------------------------------
/.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 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | yarn-error.log
36 | 
37 | # e2e
38 | /e2e/*.js
39 | /e2e/*.map
40 | 
41 | # System Files
42 | .DS_Store
43 | Thumbs.db
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #Todo Ngrx App
2 | 
3 | This app is made with NgRx. This is a demo app made for educational purpose to test out the popular State management library of Angular.


--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('todoapp-angular App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/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/cli'],
 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/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 |     angularCli: {
23 |       environment: 'dev'
24 |     },
25 |     reporters: ['progress', 'kjhtml'],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ['Chrome'],
31 |     singleRun: false
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "todoapp-angular-ngrx",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "ng": "ng",
 7 |     "start": "ng serve --port 4302 --open",
 8 |     "build": "ng build",
 9 |     "test": "ng test",
10 |     "lint": "ng lint",
11 |     "e2e": "ng e2e"
12 |   },
13 |   "private": true,
14 |   "dependencies": {
15 |     "@angular/animations": "^4.2.4",
16 |     "@angular/common": "^4.2.4",
17 |     "@angular/compiler": "^4.2.4",
18 |     "@angular/core": "^4.2.4",
19 |     "@angular/forms": "^4.2.4",
20 |     "@angular/http": "^4.2.4",
21 |     "@angular/platform-browser": "^4.2.4",
22 |     "@angular/platform-browser-dynamic": "^4.2.4",
23 |     "@angular/router": "^4.2.4",
24 |     "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.4",
25 |     "@ngrx/effects": "^4.0.5",
26 |     "@ngrx/router-store": "^4.0.4",
27 |     "@ngrx/store": "^4.0.3",
28 |     "bootstrap": "^4.0.0-beta",
29 |     "core-js": "^2.4.1",
30 |     "font-awesome": "^4.7.0",
31 |     "rxjs": "^5.4.2",
32 |     "zone.js": "^0.8.14"
33 |   },
34 |   "devDependencies": {
35 |     "@angular/cli": "1.3.2",
36 |     "@angular/compiler-cli": "^4.2.4",
37 |     "@angular/language-service": "^4.2.4",
38 |     "@types/jasmine": "~2.5.53",
39 |     "@types/jasminewd2": "~2.0.2",
40 |     "@types/node": "~6.0.60",
41 |     "codelyzer": "~3.1.1",
42 |     "jasmine-core": "~2.6.2",
43 |     "jasmine-spec-reporter": "~4.1.0",
44 |     "karma": "~1.7.0",
45 |     "karma-chrome-launcher": "~2.1.1",
46 |     "karma-cli": "~1.0.1",
47 |     "karma-coverage-istanbul-reporter": "^1.2.1",
48 |     "karma-jasmine": "~1.1.0",
49 |     "karma-jasmine-html-reporter": "^0.2.2",
50 |     "protractor": "~5.1.2",
51 |     "ts-node": "~3.2.0",
52 |     "tslint": "~5.3.2",
53 |     "typescript": "~2.3.3"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <app-todo-list></app-todo-list>
 4 | 
 5 | <!-- <div class="row">
 6 |   <div class="col-md-2"></div>
 7 |   <div class="col-md-8">
 8 | 
 9 |     <div class="todos" *ngIf="todosList">
10 |       <table class="table">
11 |         <thead class="h">
12 |           <tr class="h">
13 |             <th class="h">Title</th>
14 |             <th class="h">Description</th>
15 |             <th class="h">Date</th>
16 |             <th class="h">Status</th>
17 |             <th class="h">Options</th>
18 |           </tr>
19 |         </thead>
20 |         <tbody>
21 |           <tr class="todo" (dblclick)="editTodo(todo)" *ngFor="let todo of todosList">
22 | 
23 |             <ng-container *ngIf="!editTodos.includes(todo); else editTD">
24 |               <td>{{todo.title}}</td>
25 |               <td>{{todo.description}}</td>
26 |               <td>{{todo.date | date}}</td>
27 |               <td>{{todo.status}}</td>
28 |             </ng-container>
29 | 
30 |             <ng-template #editTD>
31 |                 <td><input type="text" name="title" id="title" (keypress)="submitTodo($event, todo)" [(ngModel)]="todo.title" placeholder="Title" class="form-control"></td>
32 |                 <td><input type="text" name="description" id="description" (keypress)="submitTodo($event, todo)" [(ngModel)]="todo.description" placeholder="Description"
33 |                     class="form-control"></td>
34 |                 <td>{{todo.date | date}}</td>
35 |                 <td>
36 |                   <input type="text" name="status" id="status" (keypress)="submitTodo($event, todo)" [(ngModel)]="todo.status" placeholder="Status" class="form-control">
37 |                 </td>
38 |             </ng-template>
39 | 
40 |             <td class="o">
41 |               <button class="btn btn-success" (click)="doneTodo(todo)">
42 |                 <i  class="fa fa-check"></i>
43 |               </button>
44 |               <button class="btn btn-primary" (click)="editTodo(todo)">
45 |                   <i  class="fa fa-pencil"></i>
46 |                 </button>
47 |               <button class="btn btn-danger" (click)="deleteTodo(todo)">
48 |                   <i  class="fa fa-trash"></i>
49 |                 </button>
50 |             </td>
51 | 
52 |           </tr>
53 |         </tbody>
54 |       </table>
55 |     </div>
56 | 
57 | 
58 |     <form>
59 |       <div class="form-row">
60 | 
61 |         <div class="col-md-5">
62 |           <input type="text" name="title" id="title" [(ngModel)]="newTodo.title" placeholder="Title" class="form-control">
63 |         </div>
64 |         <div class="col-md-5">
65 |           <input name="description" id="description" [(ngModel)]="newTodo.description" placeholder="Description" class="form-control"
66 |             id="description">
67 |         </div>
68 |         <div class="col-md-2">
69 |           <button type="submit" class="btn btn-primary" (click)="create()">Add</button>
70 |         </div>
71 |       </div>
72 |     </form>
73 |   </div>
74 |   <div class="col-md-2">
75 |     
76 |   </div>
77 | </div> -->
78 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | .btn{
2 |     cursor: pointer;
3 | }
4 | 
5 | td{
6 |     white-space: nowrap;
7 |     overflow: hidden;
8 | }


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 2 | import { HttpClientModule } from '@angular/common/http';
 3 | import { BrowserModule } from '@angular/platform-browser';
 4 | import { TodoService } from './services/todo.service';
 5 | import { TestBed, async } from '@angular/core/testing';
 6 | 
 7 | import { AppComponent } from './app.component';
 8 | 
 9 | describe('AppComponent', () => {
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [
13 |         AppComponent
14 |       ],
15 |       imports: [
16 |         BrowserModule,
17 |         HttpClientModule,
18 |         NgbModule.forRoot()
19 |       ],
20 |       providers: [
21 |         TodoService
22 |       ]
23 |     }).compileComponents();
24 |   }));
25 | 
26 |   it('should create the app', async(() => {
27 |     const fixture = TestBed.createComponent(AppComponent);
28 |     const app = fixture.debugElement.componentInstance;
29 |     expect(app).toBeTruthy();
30 |   }));
31 | 
32 |   it(`should have as title 'app'`, async(() => {
33 |     const fixture = TestBed.createComponent(AppComponent);
34 |     const app = fixture.debugElement.componentInstance;
35 |     expect(app.title).toEqual('app');
36 |   }));
37 | 
38 |   it('should render a form control of todo title', async(() => {
39 |     const fixture = TestBed.createComponent(AppComponent);
40 |     fixture.detectChanges();
41 |     const compiled = fixture.debugElement.nativeElement;
42 |     expect(compiled.querySelector('input[name="title"]')).toBeTruthy();
43 |   }));
44 | });
45 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Response } from '@angular/http';
 2 | import { TodoService } from './services/todo.service';
 3 | import Todo from './models/todo.model';
 4 | import { Component, OnInit } from '@angular/core';
 5 | 
 6 | @Component({
 7 |   selector: 'app-root',
 8 |   templateUrl: './app.component.html',
 9 |   styleUrls: ['./app.component.scss']
10 | })
11 | export class AppComponent implements OnInit {
12 | 
13 |   constructor(
14 |     private todoService: TodoService
15 |   ) { }
16 | 
17 |   public newTodo: Todo = new Todo()
18 | 
19 |   todosList: Todo[];
20 |   editTodos: Todo[] = [];
21 | 
22 |   ngOnInit(): void {
23 |     // this.todoService.getToDos()
24 |     //   .subscribe(todos => {
25 |     //     this.todosList = todos
26 |     //     console.log(todos)
27 |     //   })
28 |   }
29 | 
30 | 
31 |   create() {
32 |     this.todoService.createTodo(this.newTodo)
33 |       .subscribe((res) => {
34 |         this.todosList.push(res.data)
35 |         this.newTodo = new Todo()
36 |       })
37 |   }
38 | 
39 |   editTodo(todo: Todo) {
40 |     console.log(todo)
41 |     if(this.todosList.includes(todo)){
42 |       if(!this.editTodos.includes(todo)){
43 |         this.editTodos.push(todo)
44 |       }else{
45 |         this.editTodos.splice(this.editTodos.indexOf(todo), 1)
46 |         this.todoService.editTodo(todo).subscribe(res => {
47 |           console.log('Update Succesful')
48 |         }, err => {
49 |           this.editTodo(todo)
50 |           console.error('Update Unsuccesful')
51 |         })
52 |       }
53 |     }
54 |   }
55 | 
56 |   doneTodo(todo:Todo){
57 |     todo.status = 'Done'
58 |     this.todoService.editTodo(todo).subscribe(res => {
59 |       console.log('Update Succesful')
60 |     }, err => {
61 |       this.editTodo(todo)
62 |       console.error('Update Unsuccesful')
63 |     })
64 |   }
65 | 
66 |   submitTodo(event, todo:Todo){
67 |     if(event.keyCode ==13){
68 |       this.editTodo(todo)
69 |     }
70 |   }
71 | 
72 |   deleteTodo(todo: Todo) {
73 |     this.todoService.deleteTodo(todo._id).subscribe(res => {
74 |       this.todosList.splice(this.todosList.indexOf(todo), 1);
75 |     })
76 |   }
77 | 
78 | 
79 |   title = 'app';
80 | 
81 | 
82 | }
83 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { TodoEffects } from './store/todo/todo.effects';
 2 | import { StoreModule } from '@ngrx/store';
 3 | import { FormsModule } from '@angular/forms';
 4 | import { HttpClient, HttpClientModule } from '@angular/common/http';
 5 | import { TodoService } from './services/todo.service';
 6 | import { BrowserModule } from '@angular/platform-browser';
 7 | import { NgModule } from '@angular/core';
 8 | 
 9 | import { AppComponent } from './app.component';
10 | 
11 | import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
12 | import { TodoListComponent } from './components/todo/todo-list/todo-list.component';
13 | import { TodoDetailsComponent } from './components/todo/todo-details/todo-details.component';
14 | import { EffectsModule } from '@ngrx/effects';
15 | import { TodoListItemComponent } from './components/todo/todo-list-item/todo-list-item.component';
16 | 
17 | import * as TodoReducer from './store/todo/todo.reducer'
18 | 
19 | @NgModule({
20 |   declarations: [
21 |     AppComponent,
22 |     TodoListComponent,
23 |     TodoDetailsComponent,
24 |     TodoListItemComponent
25 |   ],
26 |   imports: [
27 |     BrowserModule,
28 |     HttpClientModule,
29 |     FormsModule,
30 |     NgbModule.forRoot(),
31 |     StoreModule.forRoot({todos: TodoReducer.TodoReducer}),
32 |     EffectsModule.forRoot([TodoEffects])
33 |   ],
34 |   providers: [
35 |     TodoService,
36 |   ],
37 |   bootstrap: [AppComponent]
38 | })
39 | export class AppModule { }
40 | 


--------------------------------------------------------------------------------
/src/app/components/todo/todo-details/todo-details.component.html:
--------------------------------------------------------------------------------
1 | <p>
2 |   todo-details works!
3 | </p>
4 | 


--------------------------------------------------------------------------------
/src/app/components/todo/todo-details/todo-details.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomanHasan/todoapp-angular-ngrx/ed3e69dd6fcc72a7740ec487229c743b95b1ebb8/src/app/components/todo/todo-details/todo-details.component.scss


--------------------------------------------------------------------------------
/src/app/components/todo/todo-details/todo-details.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { TodoDetailsComponent } from './todo-details.component';
 4 | 
 5 | describe('TodoDetailsComponent', () => {
 6 |   let component: TodoDetailsComponent;
 7 |   let fixture: ComponentFixture<TodoDetailsComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ TodoDetailsComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(TodoDetailsComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should be created', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/todo/todo-details/todo-details.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-todo-details',
 5 |   templateUrl: './todo-details.component.html',
 6 |   styleUrls: ['./todo-details.component.scss']
 7 | })
 8 | export class TodoDetailsComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/components/todo/todo-list-item/todo-list-item.component.html:
--------------------------------------------------------------------------------
 1 | <div class="card">
 2 |   <div class="card-body" 
 3 |   *ngIf="todo"
 4 |   [class.done]="todo.status == 'done'"
 5 |   [class.selected]="todo.selected"
 6 |   [class.loading]="todo.loading"
 7 |   [class.editing] = "todo.editing"
 8 |   [class.edited] = "todo.edited"
 9 |   [class.error] = "todo.error"
10 |   >
11 | 
12 |   <div class="row">
13 |     <ng-container *ngIf="!todo.create && !todo.editing">
14 | 
15 |             <div class="col-md-3">
16 |       
17 |               <p>{{todo.title}}</p>
18 |             </div>
19 |       
20 |             <div class="col-md-2">
21 |       
22 |               <p>{{todo.description}}</p>
23 |             </div>
24 |       
25 |             <div class="col-md-2">
26 |               <p>{{todo.date | date}}</p>
27 |             </div>
28 |       
29 |             <div class="col-md-2">
30 |               <p>{{todo.status }}</p>
31 |             </div>
32 |             
33 |     </ng-container>
34 | 
35 |     <ng-container *ngIf="todo.create || todo.editing">
36 |             <div class="col-md-3">
37 |               <input type="text" name="title" id="title" [(ngModel)]="todo.title">
38 |             </div>
39 |       
40 |             <div class="col-md-4">
41 |       
42 |               <input type="text" style="width: 100%;" name="description" id="description" [(ngModel)]="todo.description">
43 |             </div>
44 |       
45 |       
46 |             <div class="col-md-2">
47 |               <p>{{todo.status }}</p>
48 |             </div>
49 |     </ng-container>
50 | 
51 | 
52 |       <div class="col-md-3 options" >
53 |         <ng-container *ngIf="!todo.create && !todo.editing">
54 |             <button class="btn btn-success" *ngIf="todo.status != 'done'" (click)="completeTodo(todo)">
55 |                 <i  class="fa fa-check"></i>
56 |               </button>
57 |           <button class="btn btn-primary" (click)="editTodo(todo)">
58 |                   <i  class="fa fa-pencil"></i>
59 |                 </button>
60 |           <button class="btn btn-danger" (click)="this.deleted.emit(todo);">
61 |                   <i  class="fa fa-trash"></i>
62 |                 </button>
63 |         </ng-container>
64 |         <ng-container *ngIf="todo.create">
65 |             <button class="btn btn-success" (click)="createTodo(todo)">
66 |                 Create
67 |               </button>
68 |         </ng-container>
69 | 
70 |         <ng-container *ngIf="todo.editing">
71 | 
72 |           <button class="btn btn-primary" (click)="editTodoSubmit(todo)">
73 |                   Submit
74 |                 </button>
75 |         </ng-container>
76 |       </div>
77 |     </div>
78 |   </div>
79 | </div>


--------------------------------------------------------------------------------
/src/app/components/todo/todo-list-item/todo-list-item.component.scss:
--------------------------------------------------------------------------------
 1 | .options{
 2 |     display: flex;
 3 |     flex-direction: row;
 4 | 
 5 |     button{
 6 |         flex:1;
 7 |         margin: 5px;
 8 |     }
 9 | }
10 | 
11 | :host{
12 |     margin: 10px;
13 | }
14 | .done{
15 |     background: #79D879;
16 | }
17 | .selected{
18 |     background: #004700;
19 | }
20 | .loading{
21 |     background: #A0A0A0;
22 | }
23 | .edited{
24 |     background: #D570FD;
25 | }
26 | .error{
27 |     background: #FD7070;
28 | }
29 | 
30 | div{
31 |     p{
32 |         text-overflow: ellipsis;
33 |         white-space: nowrap;
34 |         overflow: hidden;
35 |     }
36 | }


--------------------------------------------------------------------------------
/src/app/components/todo/todo-list-item/todo-list-item.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { TodoListItemComponent } from './todo-list-item.component';
 4 | 
 5 | describe('TodoListItemComponent', () => {
 6 |   let component: TodoListItemComponent;
 7 |   let fixture: ComponentFixture<TodoListItemComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ TodoListItemComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(TodoListItemComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should be created', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/todo/todo-list-item/todo-list-item.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, EventEmitter, Input, OnInit, Output, ChangeDetectionStrategy } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-todo-list-item',
 5 |   templateUrl: './todo-list-item.component.html',
 6 |   styleUrls: ['./todo-list-item.component.scss'],
 7 |   changeDetection: ChangeDetectionStrategy.OnPush
 8 | })
 9 | export class TodoListItemComponent implements OnInit {
10 | 
11 |   
12 |   @Input() todo;
13 | 
14 |   @Output() created = new EventEmitter<any>();
15 |   @Output() deleted = new EventEmitter<any>();
16 |   @Output() edited = new EventEmitter<any>();
17 |   @Output() completed = new EventEmitter<any>();
18 | 
19 |   constructor() { }
20 | 
21 |   ngOnInit() {
22 |     console.log(this.todo)
23 |   }
24 | 
25 |   createTodo(todo){
26 |     console.log(todo)
27 |     this.created.emit(todo)
28 |   }
29 | 
30 | 
31 |   editTodo(todo){
32 |     this.todo.editing = !this.todo.editing;
33 |   }
34 | 
35 |   completeTodo(todo){
36 |     this.completed.emit(todo)
37 |   }
38 | 
39 | 
40 |   editTodoSubmit(todo){
41 |     this.edited.emit(todo)
42 |   }
43 | 
44 | }
45 | 


--------------------------------------------------------------------------------
/src/app/components/todo/todo-list/todo-list.component.html:
--------------------------------------------------------------------------------
 1 | <div class="row">
 2 |   <div class="col-md-2"></div>
 3 |   <div class="col-md-8">
 4 | <div class="todos" *ngIf="todoListState$ | async as todoListState">
 5 |   <ng-container *ngIf="todoListState.loading;else todoList" >
 6 |     <div class="loader"></div>
 7 |   </ng-container>
 8 |   <ng-template #todoList >
 9 | 
10 |     <ng-container *ngFor="let todo of todoListState.todos">
11 |         <app-todo-list-item [todo]="todo" (created)="onCreate($event)" (deleted)="onDelete($event)" (completed)="completeTodo($event)" (edited)="onEdit($event)" > </app-todo-list-item>
12 |     </ng-container>
13 |   </ng-template>
14 | </div>
15 | 
16 | </div>
17 | 
18 | <div class="col-md-2"></div>
19 | </div>


--------------------------------------------------------------------------------
/src/app/components/todo/todo-list/todo-list.component.scss:
--------------------------------------------------------------------------------
 1 | .loader {
 2 |     border: 16px solid #f3f3f3; /* Light grey */
 3 |     border-top: 16px solid #3498db; /* Blue */
 4 |     border-radius: 50%;
 5 |     width: 120px;
 6 |     height: 120px;
 7 |     animation: spin 2s linear infinite;
 8 | }
 9 | 
10 | @keyframes spin {
11 |     0% { transform: rotate(0deg); }
12 |     100% { transform: rotate(360deg); }
13 | }


--------------------------------------------------------------------------------
/src/app/components/todo/todo-list/todo-list.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { TodoListComponent } from './todo-list.component';
 4 | 
 5 | describe('TodoListComponent', () => {
 6 |   let component: TodoListComponent;
 7 |   let fixture: ComponentFixture<TodoListComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ TodoListComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(TodoListComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should be created', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/todo/todo-list/todo-list.component.ts:
--------------------------------------------------------------------------------
 1 | import { TodoListState, TodoState } from '../../../store/todo/todo.state';
 2 | 
 3 | import { Store } from '@ngrx/store';
 4 | 
 5 | import { Observable } from 'rxjs/Rx';
 6 | 
 7 | import Todo from '../../../models/todo.model';
 8 | 
 9 | import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
10 | 
11 | 
12 | import * as TodoAction from '../../../store/todo/todo.action';
13 | 
14 | 
15 | 
16 | export interface AppState {
17 | 
18 |   todos: TodoListState;
19 | 
20 | }
21 | 
22 | @Component({
23 | 
24 |   selector: 'app-todo-list',
25 |   templateUrl: './todo-list.component.html',
26 |   styleUrls: ['./todo-list.component.scss']
27 | })
28 | export class TodoListComponent implements OnInit {
29 | 
30 | 
31 |   constructor(
32 |     private store: Store<TodoListState>
33 |   ) {
34 |  }
35 | 
36 | 
37 |   todoListState$: Observable<TodoState[]>;
38 | 
39 | 
40 | 
41 |   ngOnInit() {
42 | 
43 |     this.todoListState$ = this.store.select(state => state.todos);
44 | 
45 |     this.store.dispatch(new TodoAction.GetTodos());
46 | 
47 |     console.log(this.todoListState$, this.store);
48 | 
49 | 
50 |   }
51 | 
52 |   onCreate(todo) {
53 | 
54 |     console.log(todo)
55 |     this.store.dispatch(new TodoAction.CreateTodo(todo));
56 | 
57 |   }
58 | 
59 | 
60 |   onDelete(todo) {
61 | 
62 |     this.store.dispatch(new TodoAction.DeleteTodo(todo));
63 | 
64 |   }
65 | 
66 |   onEdit(todo) {
67 | 
68 |     this.store.dispatch(new TodoAction.UpdateTodo(todo));
69 | 
70 |   }
71 | 
72 |   completeTodo(todo) {
73 | 
74 |     this.store.dispatch(new TodoAction.CompleteTodo(todo));
75 | 
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/app/models/todo.model.ts:
--------------------------------------------------------------------------------
 1 | export default class Todo {
 2 |     _id:string;
 3 |     title: string;
 4 |     description: string;
 5 |     date: Date;
 6 |     status: string;
 7 | 
 8 |     constructor(
 9 |     ){
10 |         this.title = ""
11 |         this.description = ""
12 |         this.date = new Date()
13 |         this.status = ""
14 |     }
15 | 
16 |     static generateMockTodo() : Todo {
17 |         return {
18 |             _id: "new",
19 |             title: "",
20 |             description: "",
21 |             date: new Date(),
22 |             status: ""
23 |         }
24 |     }
25 | }


--------------------------------------------------------------------------------
/src/app/services/todo.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClientModule } from '@angular/common/http';
 2 | import { TestBed, inject } from '@angular/core/testing';
 3 | 
 4 | import { TodoService } from './todo.service';
 5 | 
 6 | describe('TodoService', () => {
 7 |   beforeEach(() => {
 8 |     TestBed.configureTestingModule({
 9 |       imports: [
10 | 
11 |         HttpClientModule
12 |       ],
13 |       providers: [TodoService]
14 |     });
15 |   });
16 | 
17 |   it('should be created', inject([TodoService], (service: TodoService) => {
18 |     expect(service).toBeTruthy();
19 |   }));
20 | });
21 | 


--------------------------------------------------------------------------------
/src/app/services/todo.service.ts:
--------------------------------------------------------------------------------
 1 | import ToDo from '../models/todo.model';
 2 | import { Observable } from 'rxjs/Rx';
 3 | import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 4 | import {Response} from '@angular/http';
 5 | import { Injectable } from '@angular/core';
 6 | 
 7 | 
 8 | import 'rxjs/add/operator/map';
 9 | 
10 | @Injectable()
11 | export class TodoService {
12 | 
13 |   api_url = 'http://localhost:3000';
14 |   todoUrl = `${this.api_url}/api/todos`;
15 | 
16 |   constructor(
17 |     private http: HttpClient
18 |   ) { }
19 | 
20 | 
21 |   createTodo(todo: ToDo): Observable<any>{
22 |     return this.http.post(`${this.todoUrl}`, todo);
23 |   }
24 | 
25 |   getToDos(): Observable<ToDo[]>{
26 |     return this.http.get(this.todoUrl)
27 |     .map(res  => {
28 |       return res["data"].docs as ToDo[];
29 |     })
30 |   }
31 | 
32 |   editTodo(todo:ToDo){
33 |     let editUrl = `${this.todoUrl}`
34 |     return this.http.put(editUrl, todo);
35 |   }
36 | 
37 |   deleteTodo(id:string):any{
38 |     let deleteUrl = `${this.todoUrl}/${id}`
39 |     return this.http.delete(deleteUrl)
40 |     .map(res  => {
41 |       return res;
42 |     })
43 |   }
44 | 
45 |   private handleError(error: any): Promise<any> {
46 |     console.error('An error occurred', error); // for demo purposes only
47 |     return Promise.reject(error.message || error);
48 |   }
49 | 
50 | }
51 | 


--------------------------------------------------------------------------------
/src/app/store/todo/todo.action.ts:
--------------------------------------------------------------------------------
  1 | import { TodoState }  from './todo.state' 
  2 | import Todo from '../../models/todo.model' 
  3 | 
  4 | import {Action} from '@ngrx/store' 
  5 | 
  6 | export const CREATE_TODO = '[Todo] CREATE_TODO' 
  7 | export const CREATE_TODO_SUCCESS = '[Todo] CREATE_TODO_SUCCESS' 
  8 | export const CREATE_TODO_ERROR = '[Todo] CREATE_TODO_ERROR' 
  9 | 
 10 | export const GET_TODO = '[Todo] GET_TODO' 
 11 | export const GET_TODO_SUCCESS = "[Todo] GET_TODO_SUCCESS" 
 12 | export const GET_TODO_ERROR = "[Todo] GET_TODO_ERROR" 
 13 | 
 14 | export const UPDATE_TODO = '[Todo] UPDATE_TODO' 
 15 | export const UPDATE_TODO_SUCCESS = '[Todo] UPDATE_TODO_SUCCESS' 
 16 | export const UPDATE_TODO_ERROR = '[Todo] UPDATE_TODO_ERROR' 
 17 | 
 18 | export const GET_TODOS = '[Todo] GET_TODOS' 
 19 | export const GET_TODOS_SUCCESS = '[Todo] GET_TODOS_SUCCESS' 
 20 | export const GET_TODOS_ERROR = '[Todo] GET_TODOS_ERROR' 
 21 | 
 22 | export const DELETE_TODO = '[Todo] DELETE_TODO' 
 23 | export const DELETE_TODO_SUCCESS = '[Todo] DELETE_TODO_SUCCESS' 
 24 | export const DELETE_TODO_ERROR = '[Todo] DELETE_TODO_ERROR' 
 25 | 
 26 | export const COMPLETE_TODO = 'COMPLETE_TODO'
 27 | //Actions for Getting  Todos
 28 | export class GetTodos implements Action {
 29 |     readonly type = GET_TODOS 
 30 | } 
 31 | 
 32 | export class GetTodosSuccess implements Action {
 33 |     readonly type = GET_TODOS_SUCCESS 
 34 | 
 35 |     constructor(public payload: TodoState[]){} 
 36 |  
 37 | } 
 38 | export class GetTodosError implements Action {
 39 |     readonly type = GET_TODOS_ERROR 
 40 | } 
 41 | // Action for Creating TOdos
 42 | export class CreateTodo implements Action {
 43 |     readonly type = CREATE_TODO 
 44 | 
 45 |     constructor(public payload: Todo){} 
 46 | } 
 47 | export class CreateTodoSuccess implements Action {
 48 |     readonly type = CREATE_TODO_SUCCESS 
 49 | 
 50 |     constructor(public payload: TodoState){} 
 51 | } 
 52 | export class CreateTodoError implements Action {
 53 |     readonly type = CREATE_TODO_ERROR 
 54 | } 
 55 | export class GetTodo implements Action {
 56 |     readonly type = GET_TODO 
 57 | 
 58 |     constructor(payload: string){} 
 59 | } 
 60 | 
 61 | export class GetTodoSuccess implements Action {
 62 |     readonly type = GET_TODO_SUCCESS 
 63 | 
 64 |     constructor(public payload: Todo){} 
 65 |  
 66 | } 
 67 | 
 68 | export class GetTodoError implements Action {
 69 |     readonly type = GET_TODO_ERROR 
 70 | } 
 71 | export class CompleteTodo implements Action {
 72 |     readonly type = COMPLETE_TODO 
 73 | 
 74 |     constructor(public payload: TodoState){} 
 75 |  
 76 | } 
 77 | 
 78 | export class UpdateTodo implements Action {
 79 |     readonly type = UPDATE_TODO 
 80 | 
 81 |     constructor(public payload: TodoState){} 
 82 |  
 83 | } 
 84 |  
 85 | export class UpdateTodoSuccess implements Action {
 86 |     readonly type = UPDATE_TODO_SUCCESS 
 87 | 
 88 |     constructor(public payload: TodoState){
 89 |         console.log(this.payload)
 90 |     } 
 91 |  
 92 | } 
 93 |  
 94 | export class UpdateTodoError implements Action {
 95 |     readonly type = UPDATE_TODO_ERROR 
 96 | 
 97 |     constructor(public payload: TodoState){} 
 98 |  
 99 | } 
100 |  
101 | export class DeleteTodo implements Action {
102 |     readonly type = DELETE_TODO 
103 | 
104 |     constructor(public payload: TodoState){} 
105 | } 
106 | export class DeleteTodoSuccess implements Action {
107 |     readonly type = DELETE_TODO_SUCCESS 
108 | 
109 |     constructor(public payload: TodoState){} 
110 | } 
111 | export class DeleteTodoError implements Action {
112 |     readonly type = DELETE_TODO_ERROR 
113 | 
114 |     constructor(public payload: TodoState){} 
115 | } 
116 | 
117 | export type All = GetTodo | GetTodoSuccess | GetTodoError |
118 | UpdateTodo | UpdateTodoSuccess | UpdateTodoError |
119 | GetTodos | GetTodosSuccess | GetTodosError | 
120 | CreateTodo | CreateTodoSuccess | CreateTodoError |
121 | DeleteTodo | DeleteTodoSuccess | DeleteTodoError |
122 | CompleteTodo 


--------------------------------------------------------------------------------
/src/app/store/todo/todo.effects.ts:
--------------------------------------------------------------------------------
 1 | import { TodoState } from './todo.state';
 2 | import { environment } from '../../../environments/environment';
 3 | import 'rxjs/add/operator/map';
 4 | import 'rxjs/add/operator/mergeMap';
 5 | import 'rxjs/add/operator/catch';
 6 | import { Injectable } from '@angular/core';
 7 | import { Http } from '@angular/http';
 8 | import { Observable } from 'rxjs/Observable';
 9 | import { Action } from '@ngrx/store';
10 | import { Actions, Effect } from '@ngrx/effects';
11 | import { of } from 'rxjs/observable/of';
12 | 
13 | import * as TodoActions from './todo.action';
14 | 
15 | import { HttpClient } from '@angular/common/http';
16 | 
17 | @Injectable()
18 | export class TodoEffects {
19 | 
20 |   constructor(
21 |     private http: HttpClient,
22 |     private actions$: Actions
23 |   ) { }
24 | 
25 | 
26 |   @Effect()
27 |   GetTodos$: Observable<Action> = this.actions$.
28 |     ofType<TodoActions.GetTodos>(TodoActions.GET_TODOS)
29 |     .mergeMap(action =>
30 |       this.http.get(environment.client.base_url + '/api/todos')
31 |         .map((data: Response) => {
32 | 
33 |           console.log(data);
34 |           return new TodoActions.GetTodosSuccess(data["data"]["docs"] as TodoState[]);
35 |         })
36 |         .catch(() => of(new TodoActions.GetTodoError()))
37 |     );
38 | 
39 |   @Effect()
40 |   createTodo$: Observable<Action> = this.actions$.
41 |     ofType<TodoActions.CreateTodo>(TodoActions.CREATE_TODO)
42 |     .mergeMap(action =>
43 |       this.http.post(environment.client.base_url + '/api/todos', action.payload)
44 |         .map((data: Response) => {
45 | 
46 | 
47 |           return new TodoActions.CreateTodoSuccess({
48 |             ...data["data"], loading: false
49 |           });
50 |         })
51 |         .catch(() => of(new TodoActions.CreateTodoError()))
52 |     );
53 | 
54 |   @Effect()
55 |   deleteTodo$: Observable<Action> = this.actions$.
56 |     ofType<TodoActions.DeleteTodo>(TodoActions.DELETE_TODO)
57 |     .mergeMap(action =>
58 |       this.http.delete(environment.client.base_url + '/api/todos/' + action.payload._id)
59 |         .map((data: Response) => {
60 | 
61 |           return new TodoActions.DeleteTodoSuccess({
62 |             ...action.payload, loading: false
63 |           });
64 |         })
65 |         .catch(() => of(new TodoActions.DeleteTodoError(action.payload)))
66 |     );
67 | 
68 |   @Effect()
69 |   updateTodo$: Observable<Action> = this.actions$.
70 |     ofType<TodoActions.UpdateTodo>(TodoActions.UPDATE_TODO)
71 |     .mergeMap(action =>
72 |       this.http.put(environment.client.base_url + '/api/todos/', action.payload)
73 |         .map((data: Response) => {
74 | 
75 |           return new TodoActions.UpdateTodoSuccess({
76 |             ...action.payload, loading: false, editing: false
77 |           });
78 |         })
79 |         .catch(() => of(new TodoActions.DeleteTodoError(action.payload)))
80 |     );
81 | 
82 | }


--------------------------------------------------------------------------------
/src/app/store/todo/todo.reducer.ts:
--------------------------------------------------------------------------------
  1 | import Todo from '../../models/todo.model';
  2 | import { initializeTodoState, TodoListState, TodoState } from './todo.state';
  3 | import * as TodoActions from './todo.action';
  4 | 
  5 | export type Action = TodoActions.All;
  6 | 
  7 | const defaultTodoStates: TodoState[] = [
  8 |     {
  9 |         ...Todo.generateMockTodo(),
 10 |         ...initializeTodoState()
 11 |     }
 12 | ]
 13 | 
 14 | 
 15 | const defaultState: TodoListState = {
 16 |     todos: defaultTodoStates,
 17 |     loading: false,
 18 |     pending: 0
 19 | }
 20 | 
 21 | export function TodoReducer(state = defaultState, action: Action) {
 22 |     console.log(state, action);
 23 | 
 24 |     switch (action.type) {
 25 | 
 26 | 
 27 |         case TodoActions.CREATE_TODO: {
 28 | 
 29 |             return {
 30 |                 ...state,
 31 |                 todos: state.todos.map(t => {
 32 |                     if (t._id == action.payload._id) {
 33 |                         t.loading = true;
 34 |                     }
 35 | 
 36 |                     return t
 37 |                 })
 38 |             }
 39 |         }
 40 | 
 41 | 
 42 |         case TodoActions.CREATE_TODO_SUCCESS: {
 43 | 
 44 |             return {
 45 |                 ...state,
 46 |                 todos: [
 47 |                     ...state.todos.filter(t => {
 48 | 
 49 |                         return t._id != "new"
 50 |                     }), {
 51 |                         ...action.payload,
 52 |                         edited: true
 53 |                     }, {
 54 |                         ...Todo.generateMockTodo(),
 55 |                         ...initializeTodoState()
 56 |                     }]
 57 |             }
 58 |         }
 59 | 
 60 | 
 61 |         case TodoActions.GET_TODOS: {
 62 | 
 63 |             return { ...state, loaded: false, loading: true };
 64 |         }
 65 | 
 66 | 
 67 |         case TodoActions.GET_TODOS_SUCCESS: {
 68 | 
 69 |             return {
 70 |                 ...state,
 71 |                 todos: [
 72 |                     ...action.payload,
 73 |                     defaultTodoStates[0]
 74 |                 ],
 75 |                 loading: false
 76 |             };
 77 |         }
 78 | 
 79 | 
 80 | 
 81 |         case TodoActions.DELETE_TODO: {
 82 | 
 83 |             return { ...state, ...state.todos.splice(state.todos.indexOf(action.payload), 1) };
 84 | 
 85 |         }
 86 | 
 87 | 
 88 |         case TodoActions.DELETE_TODO_SUCCESS: {
 89 | 
 90 |             return state
 91 |         }
 92 | 
 93 | 
 94 |         case TodoActions.DELETE_TODO_ERROR: {
 95 | 
 96 |             return {
 97 |                 ...state,
 98 |                 todos: [
 99 |                     ...state.todos,
100 |                     action.payload
101 |                 ]
102 |             }
103 |         }
104 | 
105 | 
106 | 
107 |         case TodoActions.UPDATE_TODO: {
108 | 
109 |             return {
110 |                 ...state,
111 |                 todos: state.todos.map(t => {
112 |                     if (t._id == action.payload._id) {
113 |                         t.loading = true;
114 |                     }
115 | 
116 |                     return t
117 |                 })
118 |             };
119 |         }
120 | 
121 | 
122 | 
123 |         case TodoActions.UPDATE_TODO_SUCCESS: {
124 | 
125 |             return modifyTodoState(state, action.payload, {})
126 |         }
127 | 
128 | 
129 | 
130 |         case TodoActions.UPDATE_TODO_ERROR: {
131 | 
132 | 
133 |             return {
134 |                 ...state,
135 |                 todos: state.todos.map(t => {
136 |                     if (t._id == action.payload._id) {
137 |                         t.error = true;
138 |                     }
139 | 
140 |                     return t
141 |                 })
142 |             };
143 | 
144 |         }
145 | 
146 | 
147 |         case TodoActions.COMPLETE_TODO: {
148 | 
149 | 
150 |             return {
151 |                 ...state,
152 |                 todos: state.todos.map(t => {
153 |                     if (t._id == action.payload._id) {
154 |                         t.status = "done";
155 |                     }
156 | 
157 |                     return t
158 |                 })
159 |             };
160 | 
161 |         }
162 | 
163 | 
164 | 
165 |         default: {
166 | 
167 |             return state;
168 |         }
169 |     }
170 | }
171 | 
172 | function modifyTodoState(state, todo: TodoState, modifications): TodoListState {
173 | 
174 |     return {
175 |         ...state,
176 |         todos: state.todos.map(t => {
177 |             if (t._id == todo._id) {
178 | 
179 |                 return { ...t, ...todo, ...modifications }
180 |             } else {
181 | 
182 |                 return t;
183 |             }
184 |         })
185 |     }
186 | }
187 | 
188 | 
189 | 


--------------------------------------------------------------------------------
/src/app/store/todo/todo.state.ts:
--------------------------------------------------------------------------------
 1 | import Todo from '../../models/todo.model';
 2 | 
 3 | export interface TodoState extends Todo{
 4 |     loading:boolean;
 5 | 
 6 |     editable: boolean;
 7 |     edited: boolean;
 8 |     editing:boolean;
 9 | 
10 |     selected: boolean;
11 |     refreshing:boolean;
12 | 
13 |     create: boolean;
14 | 
15 |     error: boolean;
16 | }
17 | 
18 | export  const initializeTodoState  = function() {
19 |     return {
20 |         loading: false,
21 |     
22 |         editable: true,
23 |         edited: false,
24 |         editing:false,
25 |     
26 |         selected: false,
27 |         refreshing:false,
28 | 
29 |         create: true,
30 |         
31 |         error: false,
32 |     }
33 | }
34 | 
35 | export interface TodoListState{
36 |     todos: TodoState[];
37 |     loading: boolean;
38 |     pending: number;
39 | }
40 | 
41 | export const  intializeTodoListState = function(){
42 |     return {
43 |         loading: false,
44 |         pedning: 0,
45 |     }
46 | }


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomanHasan/todoapp-angular-ngrx/ed3e69dd6fcc72a7740ec487229c743b95b1ebb8/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // The file contents for the current environment will overwrite these during build.
 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
 4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
 5 | 
 6 | export const environment = {
 7 |   production: false,
 8 |   client: {
 9 |     base_url: "http://localhost:3000"
10 |   }
11 | };
12 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomanHasan/todoapp-angular-ngrx/ed3e69dd6fcc72a7740ec487229c743b95b1ebb8/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>TodoappAngular</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** Evergreen browsers require these. **/
41 | import 'core-js/es6/reflect';
42 | import 'core-js/es7/reflect';
43 | 
44 | 
45 | /**
46 |  * Required to support Web Animations `@angular/animation`.
47 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
48 |  **/
49 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
50 | 
51 | 
52 | 
53 | /***************************************************************************************************
54 |  * Zone JS is required by Angular itself.
55 |  */
56 | import 'zone.js/dist/zone';  // Included with Angular CLI.
57 | 
58 | 
59 | 
60 | /***************************************************************************************************
61 |  * APPLICATION IMPORTS
62 |  */
63 | 
64 | /**
65 |  * Date, currency, decimal and percent pipes.
66 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 |  */
68 | // import 'intl';  // Run `npm install --save intl`.
69 | /**
70 |  * Need to import at least one locale-data with intl.
71 |  */
72 | // import 'intl/locale-data/jsonp/en';
73 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'node_modules/bootstrap/scss/bootstrap.scss';
2 | @import '../node_modules/font-awesome/css/font-awesome.css';


--------------------------------------------------------------------------------
/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/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts"
15 |   ],
16 |   "include": [
17 |     "**/*.spec.ts",
18 |     "**/*.d.ts"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "eofline": true,
 15 |     "forin": true,
 16 |     "import-blacklist": [
 17 |       true,
 18 |       "rxjs"
 19 |     ],
 20 |     "import-spacing": true,
 21 |     "indent": [
 22 |       true,
 23 |       "spaces"
 24 |     ],
 25 |     "interface-over-type-literal": true,
 26 |     "label-position": true,
 27 |     "max-line-length": [
 28 |       true,
 29 |       140
 30 |     ],
 31 |     "member-access": false,
 32 |     "member-ordering": [
 33 |       true,
 34 |       {
 35 |         "order": [
 36 |           "static-field",
 37 |           "instance-field",
 38 |           "static-method",
 39 |           "instance-method"
 40 |         ]
 41 |       }
 42 |     ],
 43 |     "no-arg": true,
 44 |     "no-bitwise": true,
 45 |     "no-console": [
 46 |       true,
 47 |       "debug",
 48 |       "info",
 49 |       "time",
 50 |       "timeEnd",
 51 |       "trace"
 52 |     ],
 53 |     "no-construct": true,
 54 |     "no-debugger": true,
 55 |     "no-duplicate-super": true,
 56 |     "no-empty": false,
 57 |     "no-empty-interface": true,
 58 |     "no-eval": true,
 59 |     "no-inferrable-types": [
 60 |       true,
 61 |       "ignore-params"
 62 |     ],
 63 |     "no-misused-new": true,
 64 |     "no-non-null-assertion": true,
 65 |     "no-shadowed-variable": true,
 66 |     "no-string-literal": false,
 67 |     "no-string-throw": true,
 68 |     "no-switch-case-fall-through": true,
 69 |     "no-trailing-whitespace": true,
 70 |     "no-unnecessary-initializer": true,
 71 |     "no-unused-expression": true,
 72 |     "no-use-before-declare": true,
 73 |     "no-var-keyword": true,
 74 |     "object-literal-sort-keys": false,
 75 |     "one-line": [
 76 |       true,
 77 |       "check-open-brace",
 78 |       "check-catch",
 79 |       "check-else",
 80 |       "check-whitespace"
 81 |     ],
 82 |     "prefer-const": true,
 83 |     "quotemark": [
 84 |       true,
 85 |       "single"
 86 |     ],
 87 |     "radix": true,
 88 |     "semicolon": [
 89 |       true,
 90 |       "always"
 91 |     ],
 92 |     "triple-equals": [
 93 |       true,
 94 |       "allow-null-check"
 95 |     ],
 96 |     "typedef-whitespace": [
 97 |       true,
 98 |       {
 99 |         "call-signature": "nospace",
100 |         "index-signature": "nospace",
101 |         "parameter": "nospace",
102 |         "property-declaration": "nospace",
103 |         "variable-declaration": "nospace"
104 |       }
105 |     ],
106 |     "typeof-compare": true,
107 |     "unified-signatures": true,
108 |     "variable-name": false,
109 |     "whitespace": [
110 |       true,
111 |       "check-branch",
112 |       "check-decl",
113 |       "check-operator",
114 |       "check-separator",
115 |       "check-type"
116 |     ],
117 |     "directive-selector": [
118 |       true,
119 |       "attribute",
120 |       "app",
121 |       "camelCase"
122 |     ],
123 |     "component-selector": [
124 |       true,
125 |       "element",
126 |       "app",
127 |       "kebab-case"
128 |     ],
129 |     "use-input-property-decorator": true,
130 |     "use-output-property-decorator": true,
131 |     "use-host-property-decorator": true,
132 |     "no-input-rename": true,
133 |     "no-output-rename": true,
134 |     "use-life-cycle-interface": true,
135 |     "use-pipe-transform-interface": true,
136 |     "component-class-suffix": true,
137 |     "directive-class-suffix": true,
138 |     "no-access-missing-member": true,
139 |     "templates-use-public": true,
140 |     "invoke-injectable": true
141 |   }
142 | }
143 | 


--------------------------------------------------------------------------------