diff --git a/angular.json b/angular.json index 92af65d..6a2124e 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": { - "testing-ng-s-crud": { - "projectType": "application", - "schematics": {}, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/testing-ng-s-crud", - "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": { + "testing-ng-s-crud": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/testing-ng-s-crud", + "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": "testing-ng-s-crud:build" + }, + "configurations": { + "production": { + "browserTarget": "testing-ng-s-crud:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "testing-ng-s-crud: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": "testing-ng-s-crud:serve" + }, + "configurations": { + "production": { + "devServerTarget": "testing-ng-s-crud: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": "testing-ng-s-crud:build" - }, - "configurations": { - "production": { - "browserTarget": "testing-ng-s-crud:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "testing-ng-s-crud: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": "testing-ng-s-crud:serve" - }, - "configurations": { - "production": { - "devServerTarget": "testing-ng-s-crud:serve:production" } - } } - } - }}, - "defaultProject": "testing-ng-s-crud" + }, + "defaultProject": "testing-ng-s-crud" } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ddd6c62..c24ada0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1525,6 +1525,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", @@ -5174,6 +5179,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 +6673,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 cb71df1..4d64713 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,9 @@ "@angular/platform-browser": "~8.0.3", "@angular/platform-browser-dynamic": "~8.0.3", "@angular/router": "~8.0.3", + "bootstrap": "^4.3.1", + "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/screen/Captura.PNG b/screen/Captura.PNG new file mode 100644 index 0000000..ad9264b Binary files /dev/null and b/screen/Captura.PNG differ diff --git a/src/app/app.component.html b/src/app/app.component.html index 0f3d9d8..5ab44e3 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,21 +1,40 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- + +
+
+
+
    +
  • + {{u.id}} {{u.username}} - {{u.country}} +
    • +
- +
+
+
+ Add an User +
+
+ +
+
+ +
+ + +
+
+ +
+
+ Angular Logo +
+
+
\ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index fce5d49..7623649 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,44 @@ import { Component } from '@angular/core'; - +import { User } from './models/user' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'testing-ng-s-crud'; + selectedUser: User = new User(); + userArray: User[] = [ + { + id: 1, + username: 'Jhooomn', + country: 'Colombia' + }, + { + id: 2, + username: 'Raul', + country: 'Brasil' + }, + { + id: 3, + username: 'Maverick', + country: 'Rusia' + } + ]; + addOrEdit() { + if (this.selectedUser.id == 0) { + this.selectedUser.id = this.userArray.length + 1; + this.userArray.push(this.selectedUser); + } + this.selectedUser = new User(); + } + toEdit(user: User) { + this.selectedUser = user; + } + delete() { + if (confirm('Are you sure you want to delete this guy?')) { + this.userArray = this.userArray.filter(x => x != this.selectedUser); + this.selectedUser = new User(); + } + } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..6cf562a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; - +import {FormsModule} from '@angular/forms' import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -10,6 +10,7 @@ import { AppComponent } from './app.component'; ], imports: [ BrowserModule, + FormsModule, AppRoutingModule ], providers: [], diff --git a/src/app/models/user.spec.ts b/src/app/models/user.spec.ts new file mode 100644 index 0000000..ba0576c --- /dev/null +++ b/src/app/models/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/models/user.ts b/src/app/models/user.ts new file mode 100644 index 0000000..7b30179 --- /dev/null +++ b/src/app/models/user.ts @@ -0,0 +1,7 @@ +export class User { + + id: number = 0; + username: string; + country: string; + +} diff --git a/src/styles.css b/src/styles.css index 90d4ee0..62dbf96 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,10 @@ /* You can add global styles to this file, and also import other style files */ + +body { + background: #373B44; + /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #4286f4, #373B44); + /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #4286f4, #373B44); + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ +} \ No newline at end of file