diff --git a/angular.json b/angular.json index 318297d..24a079d 100644 --- a/angular.json +++ b/angular.json @@ -1,120 +1,122 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "ng-material-test": { - "projectType": "application", - "schematics": {}, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/ng-material-test", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "aot": false, - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - }, - "configurations": { - "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "ng-material-test": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/ng-material-test", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "aot": false, + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css", + "node_modules/bootstrap/dist/css/bootstrap.min.css" + ], + "scripts": [ + "node_modules/jquery/dist/jquery.min.js", + "node_modules/popper.js/dist/umd/popper.min.js", + "node_modules/bootstrap/dist/js/bootstrap.min.js" + ] + }, + "configurations": { + "production": { + "fileReplacements": [{ + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + }], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [{ + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + }] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "ng-material-test:build" + }, + "configurations": { + "production": { + "browserTarget": "ng-material-test:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "ng-material-test:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "tsconfig.app.json", + "tsconfig.spec.json", + "e2e/tsconfig.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + }, + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "ng-material-test:serve" + }, + "configurations": { + "production": { + "devServerTarget": "ng-material-test:serve:production" + } + } } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" - } - ] - } - } - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "ng-material-test:build" - }, - "configurations": { - "production": { - "browserTarget": "ng-material-test:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "ng-material-test:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "ng-material-test:serve" - }, - "configurations": { - "production": { - "devServerTarget": "ng-material-test:serve:production" } - } } - } - }}, - "defaultProject": "ng-material-test" + }, + "defaultProject": "ng-material-test" } \ No newline at end of file diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..5f00c46 --- /dev/null +++ b/debug.log @@ -0,0 +1 @@ +[0717/183035.535:ERROR:crash_report_database_win.cc(469)] failed to stat report diff --git a/img/Captura.PNG b/img/Captura.PNG new file mode 100644 index 0000000..c60f69b Binary files /dev/null and b/img/Captura.PNG differ diff --git a/package-lock.json b/package-lock.json index 9a0b65f..7034821 100644 --- a/package-lock.json +++ b/package-lock.json @@ -140,6 +140,23 @@ "tslib": "^1.9.0" } }, + "@angular/cdk": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.1.1.tgz", + "integrity": "sha512-5hBmhrHf9+WjGVIT8gbhT0Nh37BAjgI2TGRkt1o4qX8cG+1B6gU2MxM+CDJ7PhxSJi9lW93lq2AMuWwnRSllyg==", + "requires": { + "parse5": "^5.0.0", + "tslib": "^1.7.1" + }, + "dependencies": { + "parse5": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz", + "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==", + "optional": true + } + } + }, "@angular/cli": { "version": "8.0.6", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-8.0.6.tgz", @@ -314,6 +331,14 @@ "integrity": "sha512-04XojOo9FJgEQE/rZafnaJQxPEU+//TSzTgpGoIVzCSMx+joCY/ZSSwJZPWxiHlOE57W/zX02ZY+TwcM81oTdw==", "dev": true }, + "@angular/material": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.1.tgz", + "integrity": "sha512-45aaxKuLTrthzhAhG2+OY86wafuRBteZcRjDG7rKZ3Cc3KteUp5QwAi+QbhHzs4O3WXLWTAmuLYJelRqRqqw7g==", + "requires": { + "tslib": "^1.7.1" + } + }, "@angular/platform-browser": { "version": "8.0.3", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.0.3.tgz", @@ -904,6 +929,11 @@ "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", "dev": true }, + "animate.css": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.2.tgz", + "integrity": "sha512-0bE8zYo7C0KvgOYrSVfrzkbYk6IOTVPNqkiHg2cbyF4Pq/PXzilz4BRWA3hwEUBoMp5VBgrC29lQIZyhRWdBTw==" + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -1525,6 +1555,11 @@ "multicast-dns-service-types": "^1.1.0" } }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -4180,6 +4215,11 @@ "integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==", "dev": true }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=" + }, "handle-thing": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz", @@ -5174,6 +5214,11 @@ "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=", "dev": true }, + "jquery": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz", + "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" + }, "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", @@ -6663,6 +6708,11 @@ "find-up": "^3.0.0" } }, + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + }, "portfinder": { "version": "1.0.21", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.21.tgz", diff --git a/package.json b/package.json index c0461c4..2e5af6a 100644 --- a/package.json +++ b/package.json @@ -11,14 +11,21 @@ }, "private": true, "dependencies": { - "@angular/animations": "~8.0.3", + "@angular/animations": "^8.0.3", + "@angular/cdk": "^8.1.1", "@angular/common": "~8.0.3", "@angular/compiler": "~8.0.3", "@angular/core": "~8.0.3", "@angular/forms": "~8.0.3", + "@angular/material": "^8.1.1", "@angular/platform-browser": "~8.0.3", "@angular/platform-browser-dynamic": "~8.0.3", "@angular/router": "~8.0.3", + "animate.css": "^3.7.2", + "bootstrap": "^4.3.1", + "hammerjs": "^2.0.8", + "jquery": "^3.4.1", + "popper.js": "^1.15.0", "rxjs": "~6.4.0", "tslib": "^1.9.0", "zone.js": "~0.9.1" diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..3b15725 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,11 @@ +button { + color: white; +} + +.mat-menu-item { + color: black; +} + +.mat-button { + width: 0%; +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 0f3d9d8..dc88f3c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,21 +1,33 @@ -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- + + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..a24f02b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,13 +4,27 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +//material +import { BrowserAnimationsModule } from '@angular/platform-browser/animations' + +//material component +import { MaterialComponent } from "./material.component"; +import { TaskComponent } from './component/task/task.component'; + +//ngModel +import { FormsModule } from '@angular/forms'; + @NgModule({ declarations: [ - AppComponent + AppComponent, + TaskComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + BrowserAnimationsModule, + MaterialComponent, + FormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/component/task/task.component.css b/src/app/component/task/task.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/task/task.component.html b/src/app/component/task/task.component.html new file mode 100644 index 0000000..fcc4b5e --- /dev/null +++ b/src/app/component/task/task.component.html @@ -0,0 +1,50 @@ +
+
+
+
+
+
+
+ Add an User +
+ +
+ + + +
+
+ + + +
+ +
+ + +
+ +
+
+
+
+
+
+
+ User's List +
+
    +
  • + {{user.id}} {{user.username}} - {{user.country}} +
    • +
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/component/task/task.component.spec.ts b/src/app/component/task/task.component.spec.ts new file mode 100644 index 0000000..024bfb7 --- /dev/null +++ b/src/app/component/task/task.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TaskComponent } from './task.component'; + +describe('TaskComponent', () => { + let component: TaskComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TaskComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TaskComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/task/task.component.ts b/src/app/component/task/task.component.ts new file mode 100644 index 0000000..7bd73f5 --- /dev/null +++ b/src/app/component/task/task.component.ts @@ -0,0 +1,49 @@ +import { Component, OnInit } from '@angular/core'; +import { User } from "../../model/user"; + +@Component({ + selector: 'app-task', + templateUrl: './task.component.html', + styleUrls: ['./task.component.css'] +}) +export class TaskComponent implements OnInit { + selectedUser: User = new User(); + userArray: User[] = [ + { + id: 1, + username: 'Jhooomn', + country: 'Brasil' + }, + { + id: 2, + username: 'Frida', + country: 'Francia' + }, + { + id: 3, + username: 'Rebecca', + country: 'USA' + } + ]; + + constructor() { } + + ngOnInit() { + } + addOrEdit() { + if (this.selectedUser.id == 0) { + this.selectedUser.id = this.userArray.length + 1; + this.userArray.push(this.selectedUser); + } + this.selectedUser = new User(); + } + + edit(user: User) { + this.selectedUser = user; + } + + delete(){ + this.userArray = this.userArray.filter(x => x != this.selectedUser); + } + +} diff --git a/src/app/material.component.ts b/src/app/material.component.ts new file mode 100644 index 0000000..b9f3c0b --- /dev/null +++ b/src/app/material.component.ts @@ -0,0 +1,21 @@ +import { MatButtonModule, MatCheckboxModule } from '@angular/material'; +import { NgModule } from '@angular/core'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +@NgModule({ + imports: [ + MatButtonModule, + MatCheckboxModule, + MatMenuModule, + MatIconModule, + MatInputModule], + exports: [ + MatButtonModule, + MatCheckboxModule, + MatMenuModule, + MatIconModule, + MatInputModule], + +}) +export class MaterialComponent { } \ No newline at end of file diff --git a/src/app/model/user.spec.ts b/src/app/model/user.spec.ts new file mode 100644 index 0000000..ba0576c --- /dev/null +++ b/src/app/model/user.spec.ts @@ -0,0 +1,7 @@ +import { User } from './user'; + +describe('User', () => { + it('should create an instance', () => { + expect(new User()).toBeTruthy(); + }); +}); diff --git a/src/app/model/user.ts b/src/app/model/user.ts new file mode 100644 index 0000000..5b09fd3 --- /dev/null +++ b/src/app/model/user.ts @@ -0,0 +1,5 @@ +export class User { + id: number = 0; + username: string; + country: string; +} diff --git a/src/index.html b/src/index.html index 4e19de2..5802165 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,19 @@ + - - NgMaterialTest - + + NgMaterialTest + - - + + + + + - + - + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index c7b673c..0b0b621 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; +import 'hammerjs'; if (environment.production) { enableProdMode(); diff --git a/src/styles.css b/src/styles.css index 90d4ee0..aa0e029 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,11 @@ /* You can add global styles to this file, and also import other style files */ + +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; +body { + background: #bdc3c7; + /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7); + /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #2c3e50, #bdc3c7); + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ +} \ No newline at end of file