├── src
    ├── assets
    │   ├── .gitkeep
    │   ├── logo.png
    │   ├── logo2.png
    │   └── print.png
    ├── app
    │   ├── app.component.less
    │   ├── app.component.html
    │   ├── header
    │   │   ├── header.component.html
    │   │   ├── header.component.less
    │   │   ├── header.component.ts
    │   │   └── header.component.spec.ts
    │   ├── model
    │   │   └── task.model.ts
    │   ├── app.component.ts
    │   ├── services
    │   │   ├── task.service.spec.ts
    │   │   └── task.service.ts
    │   ├── app.module.ts
    │   ├── list
    │   │   ├── list.component.spec.ts
    │   │   ├── list.component.less
    │   │   ├── list.component.ts
    │   │   └── list.component.html
    │   └── app.component.spec.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── styles.less
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── tslint.json
    ├── browserslist
    ├── main.ts
    ├── test.ts
    ├── karma.conf.js
    ├── index.html
    └── polyfills.ts
├── .vscode
    └── settings.json
├── github-images
    └── todoList.png
├── README.md
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.e2e.json
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.json
├── db.json
├── .gitignore
├── package.json
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.less:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <app-list></app-list>


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Thauan/ng-todo-list/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Thauan/ng-todo-list/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Thauan/ng-todo-list/HEAD/src/assets/logo2.png


--------------------------------------------------------------------------------
/src/assets/print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Thauan/ng-todo-list/HEAD/src/assets/print.png


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "files.watcherExclude": {
3 |         "**/target": true
4 |     }
5 | }


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


--------------------------------------------------------------------------------
/github-images/todoList.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Thauan/ng-todo-list/HEAD/github-images/todoList.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <img src="https://github.com/Thauan/ng-todo-list/blob/main/src/assets/print.png" width="100%"/>
2 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.html:
--------------------------------------------------------------------------------
1 | <header className="header">
2 |   <div>
3 |     <img src="../../assets/logo.png" width="400rem" />
4 |   </div>
5 | </header>
6 | 


--------------------------------------------------------------------------------
/src/app/model/task.model.ts:
--------------------------------------------------------------------------------
1 | export class Task {
2 |     public id: number;
3 |     public titulo: string;
4 |     public descricao: string;
5 |     public done: boolean;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/header/header.component.less:
--------------------------------------------------------------------------------
 1 | header {
 2 | 
 3 |   padding: 1rem;
 4 |   justify-content: center;
 5 |   display: flex;
 6 | 
 7 |   h1 {
 8 |     color: #fff;
 9 |   }
10 | 
11 | }
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/src/styles.less:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 
3 | @import '~bootstrap/dist/css/bootstrap-grid.min.css';
4 | 
5 | body {
6 |   background-color: #673ab7 !important;
7 | }
8 | 
9 | 


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


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


--------------------------------------------------------------------------------
/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.less']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'empty';
10 | }
11 | 


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


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


--------------------------------------------------------------------------------
/src/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 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/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.less']
 7 | })
 8 | export class HeaderComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project 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 empty!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
5 | > 0.5%
6 | last 2 versions
7 | Firefox ESR
8 | not dead
9 | # IE 9-11


--------------------------------------------------------------------------------
/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.log(err));
13 | 


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


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


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tarefas": [
 3 |     {
 4 |       "titulo": "Estudar programação etes\n",
 5 |       "descricao": "Estudar Angular e Java Script",
 6 |       "done": true,
 7 |       "id": 3
 8 |     },
 9 |     {
10 |       "titulo": "Tomar café",
11 |       "descricao": "com ovo e banana",
12 |       "done": true,
13 |       "id": 8
14 |     },
15 |     {
16 |       "titulo": "Estudar angular 9 com Laravel",
17 |       "descricao": "procurar materiais no medium",
18 |       "done": true,
19 |       "id": 9
20 |     }
21 |   ]
22 | }


--------------------------------------------------------------------------------
/.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 | yarn-error.log
34 | testem.log
35 | /typings
36 | 
37 | # System Files
38 | .DS_Store
39 | Thumbs.db
40 | 


--------------------------------------------------------------------------------
/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 |  * In development mode, for easier debugging, you can ignore zone related error
11 |  * stack frames such as `zone.run`/`zoneDelegate.invokeTask` by importing the
12 |  * below file. Don't forget to comment it out in production mode
13 |  * because it will have a performance impact when errors are thrown
14 |  */
15 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
16 | 


--------------------------------------------------------------------------------
/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 | 
 6 | import { AppComponent } from './app.component';
 7 | import { ListComponent } from './list/list.component';
 8 | import { HeaderComponent } from './header/header.component';
 9 | 
10 | @NgModule({
11 |   declarations: [
12 |     AppComponent,
13 |     ListComponent,
14 |     HeaderComponent
15 |   ],
16 |   imports: [
17 |     BrowserModule,
18 |     HttpClientModule,
19 |     FormsModule,
20 |   ],
21 |   providers: [],
22 |   bootstrap: [AppComponent]
23 | })
24 | export class AppModule { }
25 | 


--------------------------------------------------------------------------------
/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: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


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


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


--------------------------------------------------------------------------------
/e2e/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 |     './src/**/*.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: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/src/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'),
20 |       reports: ['html', 'lcovonly'],
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 |   });
31 | };


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | describe('AppComponent', () => {
 4 |   beforeEach(async(() => {
 5 |     TestBed.configureTestingModule({
 6 |       declarations: [
 7 |         AppComponent
 8 |       ],
 9 |     }).compileComponents();
10 |   }));
11 |   it('should create the app', async(() => {
12 |     const fixture = TestBed.createComponent(AppComponent);
13 |     const app = fixture.debugElement.componentInstance;
14 |     expect(app).toBeTruthy();
15 |   }));
16 |   it(`should have as title 'empty'`, async(() => {
17 |     const fixture = TestBed.createComponent(AppComponent);
18 |     const app = fixture.debugElement.componentInstance;
19 |     expect(app.title).toEqual('empty');
20 |   }));
21 |   it('should render title in a h1 tag', async(() => {
22 |     const fixture = TestBed.createComponent(AppComponent);
23 |     fixture.detectChanges();
24 |     const compiled = fixture.debugElement.nativeElement;
25 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to empty!');
26 |   }));
27 | });
28 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>TO DO LIST</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 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11 |   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
12 |   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
13 |   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
14 | </head>
15 | <body>
16 |   <app-root></app-root>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/app/list/list.component.less:
--------------------------------------------------------------------------------
 1 | .task {
 2 |   padding: 10px;
 3 | 
 4 |   .title {
 5 |     float: left;
 6 |     width: 90px;
 7 |   }
 8 |   .remove {
 9 |     padding-left: 95px;
10 |   }
11 | }
12 | .card {
13 |   min-height: 50vh;
14 |   min-width: 80vh;
15 |   display: flex;
16 |   flex-direction: column;
17 |   align-items: center;
18 |   justify-content: space-between;
19 |   border-radius: 1em;
20 |   background: #fff;
21 |   overflow: hidden;
22 |   box-shadow: 0 20px 20px rgba(25, 25, 25, 0.25);
23 | }
24 | 
25 | .card-container {
26 |   display: flex;
27 |   justify-content: center;
28 | }
29 | 
30 | .input-grey {
31 |   background-color: #d5d4d4;
32 |   color: black;
33 |   // width: 70%;
34 | }
35 | 
36 | .full {
37 |   width: 100%;
38 | }
39 | 
40 | .justify-center {
41 |   display: flex;
42 |   justify-content: center;
43 | }
44 | 
45 | .todo-checkbox {
46 |   -ms-transform: scale(2); /* IE */
47 |   -moz-transform: scale(2); /* FF */
48 |   -webkit-transform: scale(2); /* Safari and Chrome */
49 |   -o-transform: scale(2); /* Opera */
50 |   transform: scale(2);
51 |   margin-top: 10px;
52 | }
53 | 
54 | .underline-task {
55 |   text-decoration: line-through !important;
56 | }
57 | 
58 | .center-checkbox {
59 |   display: flex;
60 |   flex-direction: column;
61 |   justify-content: center;
62 |   align-items: center;
63 | }
64 | 
65 | .footer-copyright {
66 |   color: grey;
67 | }
68 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "empty",
 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": "^6.1.0",
15 |     "@angular/common": "^6.1.0",
16 |     "@angular/compiler": "^6.1.0",
17 |     "@angular/core": "^6.1.0",
18 |     "@angular/forms": "^6.1.0",
19 |     "@angular/http": "^6.1.0",
20 |     "@angular/platform-browser": "^6.1.0",
21 |     "@angular/platform-browser-dynamic": "^6.1.0",
22 |     "@angular/router": "^6.1.0",
23 |     "@fortawesome/angular-fontawesome": "^0.8.2",
24 |     "@fortawesome/fontawesome-svg-core": "^1.2.34",
25 |     "@fortawesome/free-solid-svg-icons": "^5.15.2",
26 |     "@nativescript/schematics": "^11.0.0",
27 |     "bootstrap": "^4.6.0",
28 |     "core-js": "^2.5.4",
29 |     "html-entities": "^2.1.0",
30 |     "json-server": "^0.16.3",
31 |     "rxjs": "6.0.0",
32 |     "zone.js": "~0.8.26"
33 |   },
34 |   "devDependencies": {
35 |     "@angular-devkit/build-angular": "~0.7.0",
36 |     "@angular/cli": "~6.1.3",
37 |     "@angular/compiler-cli": "^6.1.0",
38 |     "@angular/language-service": "^6.1.0",
39 |     "@types/jasmine": "~2.8.6",
40 |     "@types/jasminewd2": "~2.0.3",
41 |     "@types/node": "~8.9.4",
42 |     "codelyzer": "~4.2.1",
43 |     "jasmine-core": "~2.99.1",
44 |     "jasmine-spec-reporter": "~4.2.1",
45 |     "karma": "~1.7.1",
46 |     "karma-chrome-launcher": "~2.2.0",
47 |     "karma-coverage-istanbul-reporter": "~2.0.0",
48 |     "karma-jasmine": "~1.1.1",
49 |     "karma-jasmine-html-reporter": "^0.2.2",
50 |     "protractor": "~5.3.0",
51 |     "ts-node": "~5.0.1",
52 |     "tslint": "~5.9.1",
53 |     "typescript": "^2.7.2"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/app/list/list.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from "@angular/core";
 2 | import { Task } from "../model/task.model";
 3 | import { TaskService } from "../services/task.service";
 4 | import { NgForm } from "@angular/forms";
 5 | 
 6 | @Component({
 7 |   selector: "app-list",
 8 |   templateUrl: "./list.component.html",
 9 |   styleUrls: ["./list.component.less"],
10 | })
11 | export class ListComponent implements OnInit {
12 |   public items = [];
13 |   task = {} as Task;
14 |   tasks: Task[];
15 |   isEditEnable : boolean = false;
16 |   EditableIndex : any;
17 | 
18 |   constructor(private taskService: TaskService) {}
19 | 
20 |   ngOnInit() {
21 |     this.getTasks();
22 |   }
23 | 
24 |   getTasks(): void {
25 |     this.taskService.getTasks().subscribe((tasks: Task[]) => {
26 |       this.tasks = tasks;
27 |     });
28 |   }
29 | 
30 |   addTask(form: NgForm) {
31 |       this.taskService.saveTask(this.task).subscribe(() => {
32 |         this.getTasks();
33 |         this.task = {} as Task;
34 |         this.cleanForm(form);
35 |       });
36 |   }
37 | 
38 |   doneTask(task) {
39 |     this.taskService.updateDoneTask(task).subscribe(() => {
40 |       this.getTasks();
41 |       this.task = {} as Task;
42 |     });
43 | }
44 | 
45 |   updateTask(form: NgForm, task) {
46 |       this.taskService.updateTask(task).subscribe(() => {
47 |         this.getTasks();
48 |         this.task = {} as Task;
49 |       });
50 |   }
51 | 
52 |   onEdit(index) {
53 |     this.isEditEnable = !this.isEditEnable;
54 |     this.EditableIndex = index;
55 |   }
56 | 
57 |   onUpdate(task) {
58 |     this.task.id = task.id;
59 |     this.isEditEnable = false;
60 |     this.EditableIndex = {};
61 |     this.updateTask(task, task);
62 |   }
63 | 
64 |   removeTask(task: Task) {
65 |     this.taskService.deleteTask(task).subscribe(() => {
66 |       this.getTasks();
67 |     });
68 |   }
69 | 
70 |   // limpa o formulario
71 |   cleanForm(form: NgForm) {
72 |     this.task.descricao = '';
73 |     this.task.done = false;
74 |     this.task.titulo = '';
75 | 
76 |     this.task = {} as Task;
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/src/app/services/task.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from "@angular/core";
 2 | import {
 3 |   HttpClient,
 4 |   HttpErrorResponse,
 5 |   HttpHeaders,
 6 | } from "@angular/common/http";
 7 | import { Observable, throwError } from "rxjs";
 8 | import { retry, catchError, map } from "rxjs/operators";
 9 | import { Task } from "../model/task.model";
10 | 
11 | @Injectable({
12 |   providedIn: "root",
13 | })
14 | export class TaskService {
15 |   url = "http://localhost:3000/tarefas"; // api rest fake
16 | 
17 |   constructor(private httpClient: HttpClient) {}
18 | 
19 |   // Headers
20 |   httpOptions = {
21 |     headers: new HttpHeaders({ "Content-Type": "application/json" }),
22 |   };
23 | 
24 |   // Obtem todas as tasks
25 |   getTasks(): Observable<Task[]> {
26 |     return this.httpClient
27 |       .get<Task[]>(this.url)
28 |       .pipe(map((response) => response.map((data) => data)));
29 |   }
30 | 
31 |   // deleta uma task
32 |   deleteTask(task: Task) {
33 |     return this.httpClient
34 |       .delete<Task>(this.url + "/" + task.id, this.httpOptions)
35 |       .pipe(retry(1), catchError(this.handleError));
36 |   }
37 | 
38 |   // salva uma task
39 |   saveTask(task: Task): Observable<Task> {
40 |     return this.httpClient.post<Task>(this.url, JSON.stringify(task), this.httpOptions)
41 |       .pipe(
42 |         retry(2),
43 |         catchError(this.handleError)
44 |       )
45 |   }
46 | 
47 |   // atualiza uma task
48 |   updateTask(task: Task): Observable<Task> {
49 |     return this.httpClient.put<Task>(this.url + '/' + task.id, JSON.stringify(task), this.httpOptions)
50 |       .pipe(
51 |         retry(1),
52 |         catchError(this.handleError)
53 |       )
54 |   }
55 | 
56 |     // atualiza o estado de feito/ou não da task
57 |     updateDoneTask(task: Task): Observable<Task> {
58 |       return this.httpClient.put<Task>(this.url + '/' + task.id, JSON.stringify({ titulo: task.titulo, descricao: task.descricao, done: !task.done}), this.httpOptions)
59 |         .pipe(
60 |           retry(1),
61 |           catchError(this.handleError)
62 |         )
63 |     }
64 | 
65 |   // Manipulação de erros
66 |   handleError(error: HttpErrorResponse) {
67 |     let errorMessage = "";
68 |     if (error.error instanceof ErrorEvent) {
69 |       // Erro ocorreu no lado do client
70 |       errorMessage = error.error.message;
71 |     } else {
72 |       // Erro ocorreu no lado do servidor
73 |       errorMessage =
74 |         `Código do erro: ${error.status}, ` + `menssagem: ${error.message}`;
75 |     }
76 |     console.log(errorMessage);
77 |     return throwError(errorMessage);
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/app/list/list.component.html:
--------------------------------------------------------------------------------
 1 |   <div class="container-fluid">
 2 |     <app-header></app-header>
 3 |     <div class="card-container">
 4 |       <div class="card" style="width: 22rem;" >
 5 |         <div class="p-4 full justify-center">
 6 |             <div class="row justify-center full">
 7 |               <div class="col-5">
 8 |                 <h5>Titulo</h5>
 9 |                 <input class="form-control input-grey" [(ngModel)]="task.titulo" type="text">
10 |               </div>
11 |               <div class="col-5">
12 |                 <h5>Descricao</h5>
13 |               <input class="form-control input-grey" [(ngModel)]="task.descricao" type="text">
14 |               </div>
15 |               <div class="col-2 center-checkbox">
16 |                 <h5>Status</h5>
17 |                 <input type="checkbox" [(ngModel)]="task.done" class="todo-checkbox">
18 |               </div>
19 |             </div>
20 |           </div>
21 |           <div class="col-12 ml-5">
22 |             <button class="btn btn-primary btn-lg ml-2" (click)="addTask()">Adicionar</button>
23 |             <button class="btn btn-danger btn-lg ml-2" (click)="cleanForm()">Limpar</button>
24 |           </div>
25 |         <div class="card-body full mt-5">
26 |           <div class="container-fluid justify-center pb-2" *ngFor="let task of tasks; let index = index;">
27 |             <div class="col-12 row pb-3">
28 |               <div class="col-1">
29 |                 <input type="checkbox" [(ngModel)]="task.done" class="todo-checkbox" [checked]="task.done" (change)="task.done = !task.done" (click)="doneTask(task)">
30 |               </div>
31 |               <div class="col-6" (click)="onEdit(index)" *ngIf="EditableIndex  !== index">
32 |                 <h3 [ngClass]="{'underline-task': task.done == true}">{{ task.titulo }}</h3>
33 |                 <p [ngClass]="{'underline-task': task.done == true}">{{ task.descricao }}</p>
34 |               </div>
35 |               <!-- {{ index }} -->
36 |               <div class="col-6" *ngIf="isEditEnable && EditableIndex == index">
37 |                 <textarea class="form-control" [(ngModel)]="task.titulo" type="text"></textarea>
38 | 
39 |                 <input class="form-control" [(ngModel)]="task.descricao" type="text">
40 |               </div>
41 |               <div class="col-5">
42 |                 <button class="btn btn-primary btn-md ml-3" *ngIf="EditableIndex  !== index" (click)="onEdit(index)">Editar</button>
43 |                 <button class="btn btn-success btn-md ml-3" *ngIf="isEditEnable && EditableIndex == index" (click)="onUpdate(task)">Atualizar</button>
44 |                 <button class="btn btn-danger btn-md ml-3" *ngIf="EditableIndex  !== index" (click)="removeTask(task)">Remover</button>
45 |               </div>
46 |             </div>
47 |           </div>
48 |         </div>
49 |         <span class="pb-4 footer-copyright">Desenvolvido por Thauan Almeida</span>
50 |       </div>
51 |     </div>
52 |   </div>
53 | 


--------------------------------------------------------------------------------
/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 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 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-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-shadowed-variable": true,
 69 |     "no-string-literal": false,
 70 |     "no-string-throw": true,
 71 |     "no-switch-case-fall-through": true,
 72 |     "no-trailing-whitespace": true,
 73 |     "no-unnecessary-initializer": true,
 74 |     "no-unused-expression": true,
 75 |     "no-use-before-declare": true,
 76 |     "no-var-keyword": true,
 77 |     "object-literal-sort-keys": false,
 78 |     "one-line": [
 79 |       true,
 80 |       "check-open-brace",
 81 |       "check-catch",
 82 |       "check-else",
 83 |       "check-whitespace"
 84 |     ],
 85 |     "prefer-const": true,
 86 |     "quotemark": [
 87 |       true,
 88 |       "single"
 89 |     ],
 90 |     "radix": true,
 91 |     "semicolon": [
 92 |       true,
 93 |       "always"
 94 |     ],
 95 |     "triple-equals": [
 96 |       true,
 97 |       "allow-null-check"
 98 |     ],
 99 |     "typedef-whitespace": [
100 |       true,
101 |       {
102 |         "call-signature": "nospace",
103 |         "index-signature": "nospace",
104 |         "parameter": "nospace",
105 |         "property-declaration": "nospace",
106 |         "variable-declaration": "nospace"
107 |       }
108 |     ],
109 |     "unified-signatures": true,
110 |     "variable-name": false,
111 |     "whitespace": [
112 |       true,
113 |       "check-branch",
114 |       "check-decl",
115 |       "check-operator",
116 |       "check-separator",
117 |       "check-type"
118 |     ],
119 |     "no-output-on-prefix": true,
120 |     "use-input-property-decorator": true,
121 |     "use-output-property-decorator": true,
122 |     "use-host-property-decorator": true,
123 |     "no-input-rename": true,
124 |     "no-output-rename": true,
125 |     "use-life-cycle-interface": true,
126 |     "use-pipe-transform-interface": true,
127 |     "component-class-suffix": true,
128 |     "directive-class-suffix": true
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/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 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Web Animations `@angular/platform-browser/animations`
51 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
52 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
53 |  **/
54 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
55 | 
56 | /**
57 |  * By default, zone.js will patch all possible macroTask and DomEvents
58 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
59 |  */
60 | 
61 |  // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
62 |  // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
63 |  // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
64 | 
65 |  /*
66 |  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
67 |  * with the following flag, it will bypass `zone.js` patch for IE/Edge
68 |  */
69 | // (window as any).__Zone_enable_cross_context_check = true;
70 | 
71 | /***************************************************************************************************
72 |  * Zone JS is required by default for Angular itself.
73 |  */
74 | import 'zone.js/dist/zone';  // Included with Angular CLI.
75 | 
76 | 
77 | 
78 | /***************************************************************************************************
79 |  * APPLICATION IMPORTS
80 |  */
81 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "empty": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {
 12 |         "@schematics/angular:component": {
 13 |           "styleext": "less"
 14 |         }
 15 |       },
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/empty",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "src/tsconfig.app.json",
 25 |             "assets": [
 26 |               "src/favicon.ico",
 27 |               "src/assets"
 28 |             ],
 29 |             "styles": [
 30 |               "src/styles.less"
 31 |             ],
 32 |             "scripts": []
 33 |           },
 34 |           "configurations": {
 35 |             "production": {
 36 |               "fileReplacements": [
 37 |                 {
 38 |                   "replace": "src/environments/environment.ts",
 39 |                   "with": "src/environments/environment.prod.ts"
 40 |                 }
 41 |               ],
 42 |               "optimization": true,
 43 |               "outputHashing": "all",
 44 |               "sourceMap": false,
 45 |               "extractCss": true,
 46 |               "namedChunks": false,
 47 |               "aot": true,
 48 |               "extractLicenses": true,
 49 |               "vendorChunk": false,
 50 |               "buildOptimizer": true
 51 |             }
 52 |           }
 53 |         },
 54 |         "serve": {
 55 |           "builder": "@angular-devkit/build-angular:dev-server",
 56 |           "options": {
 57 |             "browserTarget": "empty:build"
 58 |           },
 59 |           "configurations": {
 60 |             "production": {
 61 |               "browserTarget": "empty:build:production"
 62 |             }
 63 |           }
 64 |         },
 65 |         "extract-i18n": {
 66 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 67 |           "options": {
 68 |             "browserTarget": "empty:build"
 69 |           }
 70 |         },
 71 |         "test": {
 72 |           "builder": "@angular-devkit/build-angular:karma",
 73 |           "options": {
 74 |             "main": "src/test.ts",
 75 |             "polyfills": "src/polyfills.ts",
 76 |             "tsConfig": "src/tsconfig.spec.json",
 77 |             "karmaConfig": "src/karma.conf.js",
 78 |             "styles": [
 79 |               "src/styles.less"
 80 |             ],
 81 |             "scripts": [],
 82 |             "assets": [
 83 |               "src/favicon.ico",
 84 |               "src/assets"
 85 |             ]
 86 |           }
 87 |         },
 88 |         "lint": {
 89 |           "builder": "@angular-devkit/build-angular:tslint",
 90 |           "options": {
 91 |             "tsConfig": [
 92 |               "src/tsconfig.app.json",
 93 |               "src/tsconfig.spec.json"
 94 |             ],
 95 |             "exclude": [
 96 |               "**/node_modules/**"
 97 |             ]
 98 |           }
 99 |         }
100 |       }
101 |     },
102 |     "empty-e2e": {
103 |       "root": "e2e/",
104 |       "projectType": "application",
105 |       "architect": {
106 |         "e2e": {
107 |           "builder": "@angular-devkit/build-angular:protractor",
108 |           "options": {
109 |             "protractorConfig": "e2e/protractor.conf.js",
110 |             "devServerTarget": "empty:serve"
111 |           },
112 |           "configurations": {
113 |             "production": {
114 |               "devServerTarget": "empty:serve:production"
115 |             }
116 |           }
117 |         },
118 |         "lint": {
119 |           "builder": "@angular-devkit/build-angular:tslint",
120 |           "options": {
121 |             "tsConfig": "e2e/tsconfig.e2e.json",
122 |             "exclude": [
123 |               "**/node_modules/**"
124 |             ]
125 |           }
126 |         }
127 |       }
128 |     }
129 |   },
130 |   "defaultProject": "empty"
131 | }
132 | 


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