Skip to content

Commit

Permalink
Create todo module (#10)
Browse files Browse the repository at this point in the history
* fix logout issue by redirecting user to login page

* add todo create component

* finish todo components

* add task create and task list

* don't allow deleting a todo if it has existing tasks

* refresh todo after a delete

* add error interceptor
  • Loading branch information
bhaidar authored Aug 15, 2019
1 parent 7447045 commit 6a9810d
Show file tree
Hide file tree
Showing 36 changed files with 851 additions and 18 deletions.
7 changes: 7 additions & 0 deletions server/src/todo/todo.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,13 @@ export class TodoService {
);
}

if (todo.tasks && todo.tasks.length > 0) {
throw new HttpException(
`Cannot delete this Todo list, it has existing tasks`,
HttpStatus.FORBIDDEN,
);
}

await this.todoRepo.delete({ id }); // delete todo list

return toTodoDto(todo);
Expand Down
35 changes: 35 additions & 0 deletions todo-client/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,41 @@
}
}
}
},
"todo": {
"projectType": "library",
"root": "projects/todo",
"sourceRoot": "projects/todo/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/todo/tsconfig.lib.json",
"project": "projects/todo/ng-package.json"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/todo/src/test.ts",
"tsConfig": "projects/todo/tsconfig.spec.json",
"karmaConfig": "projects/todo/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/todo/tsconfig.lib.json",
"projects/todo/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "todo-client"
Expand Down
4 changes: 4 additions & 0 deletions todo-client/projects/app-common/src/lib/action.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface DoAction {
type: string;
payload: any;
}
17 changes: 15 additions & 2 deletions todo-client/projects/app-common/src/lib/app-common.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,23 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

@NgModule({
declarations: [],
imports: [CommonModule, FormsModule, HttpClientModule, ReactiveFormsModule],
exports: [CommonModule, FormsModule, HttpClientModule, ReactiveFormsModule]
imports: [
CommonModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
RouterModule
],
exports: [
CommonModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
RouterModule
]
})
export class AppCommonModule {}
1 change: 1 addition & 0 deletions todo-client/projects/app-common/src/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@
*/

export * from './lib/app-common.module';
export * from './lib/action';
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<div class="container my-3">
<div class="row text-center mb-5">
<div class="col-md-12">
<div class="col-md-12 bg-light p-3">
<h2>Login</h2>
</div>
</div>

<div class="row">
<div class="col-md-6 offset-md-3">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" autocomplete="off">
<div class="form-group">
<label for="usernam">Username</label>
<input
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export class LoginComponent implements OnInit {

ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
username: ['bhaidar', Validators.required],
password: ['@dF%^hGb03W~', Validators.required]
});

// reset login status
Expand Down
44 changes: 44 additions & 0 deletions todo-client/projects/auth/src/lib/services/error.interceptor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpEvent,
HttpErrorResponse,
HTTP_INTERCEPTORS
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthService } from './auth.service';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {}

intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
catchError((err: HttpErrorResponse) => {
if (err.status === 401 && !window.location.href.includes('/login')) {
// auto logout if 401 response returned from api
this.authService.logout();
location.reload();
}

const error = err.error.error || err.error.message || err.statusText;

alert(error);

return throwError(error);
})
);
}
}

export const errorInterceptorProvider = {
provide: HTTP_INTERCEPTORS,
useClass: ErrorInterceptor,
multi: true
};
24 changes: 24 additions & 0 deletions todo-client/projects/todo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Todo

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.3.

## Code scaffolding

Run `ng generate component component-name --project todo` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project todo`.
> Note: Don't forget to add `--project todo` or else it will be added to the default project in your `angular.json` file.
## Build

Run `ng build todo` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build todo`, go to the dist folder `cd dist/todo` and run `npm publish`.

## Running unit tests

Run `ng test todo` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

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).
32 changes: 32 additions & 0 deletions todo-client/projects/todo/karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage/todo'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
7 changes: 7 additions & 0 deletions todo-client/projects/todo/ng-package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/todo",
"lib": {
"entryFile": "src/public-api.ts"
}
}
8 changes: 8 additions & 0 deletions todo-client/projects/todo/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"name": "todo",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^8.1.3",
"@angular/core": "^8.1.3"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { DoAction } from 'projects/app-common/src/public-api';

@Component({
selector: 'lib-task-create',
template: `
<div class="row my-2 mb-4">
<div class="col-md-8 offset-md-2">
<input
[(ngModel)]="task"
(keyup.enter)="OnEnter()"
class="form-control"
placeholder="Type a Task and hit (Enter)"
/>
</div>
</div>
`
})
export class TaskCreateComponent implements OnInit {
public task = '';

@Output()
public action: EventEmitter<DoAction> = new EventEmitter();

constructor() {}

ngOnInit() {}

public OnEnter() {
this.action.emit({ type: 'add-task', payload: this.task });
this.task = '';
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { DoAction } from 'projects/app-common/src/public-api';
import { Task } from '../../models/task.model';

@Component({
selector: 'lib-task-list',
template: `
<div *ngIf="!tasks?.length; else show"><p>No tasks yet!</p></div>
<ng-template #show>
<div class="list-group">
<div
*ngFor="let task of tasks; let i = index; trackBy: trackByFn"
class="tasks"
>
<div class="action">
<button
(click)="doAction(task)"
class="btn btn-danger btn-lg"
title="Delete {{ task?.name }}"
>
<i class="fa fa-trash"></i>
</button>
</div>
<div class="task">
<div class="list-group-item">({{ i + 1 }}) {{ task?.name }}</div>
</div>
</div>
</div>
</ng-template>
`,
styles: [
`
.tasks {
display: flex;
justify-content: center;
}
.tasks .task {
flex-grow: 1;
flex-shrink: 0;
}
.tasks .action {
margin-right: 5px;
}
`
]
})
export class TaskListComponent implements OnInit {
@Input()
public tasks: Task[];

@Output()
public action: EventEmitter<DoAction> = new EventEmitter();

constructor() {}

ngOnInit() {}

public trackByFn(index: number, item: Task) {
return index;
}

public doAction(task: Task): void {
this.action.emit({ type: 'delete-task', payload: task });
}
}
Loading

0 comments on commit 6a9810d

Please sign in to comment.