From c07259a391dfc10d285b6f66a5365ddc162d23a4 Mon Sep 17 00:00:00 2001 From: simodachich Date: Tue, 16 Jan 2018 19:35:20 +0000 Subject: [PATCH 1/4] first exercice --- package-lock.json | 132 ++++++++++-------- src/app/adress.ts | 14 ++ src/app/app.component.ts | 1 + src/app/app.module.ts | 7 +- .../components/adress/adress.component.css | 10 ++ .../components/adress/adress.component.html | 39 ++++++ .../adress/adress.component.spec.ts | 25 ++++ src/app/components/adress/adress.component.ts | 18 +++ .../contact-form/contact-form.component.html | 6 +- .../contact-form/contact-form.component.ts | 5 +- src/app/contact.ts | 28 +++- src/app/services/contact.service.spec.ts | 15 ++ src/app/services/contact.service.ts | 47 +++++++ 13 files changed, 277 insertions(+), 70 deletions(-) create mode 100644 src/app/adress.ts create mode 100644 src/app/components/adress/adress.component.css create mode 100644 src/app/components/adress/adress.component.html create mode 100644 src/app/components/adress/adress.component.spec.ts create mode 100644 src/app/components/adress/adress.component.ts create mode 100644 src/app/services/contact.service.spec.ts create mode 100644 src/app/services/contact.service.ts diff --git a/package-lock.json b/package-lock.json index 70f487b..b4d61da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@angular-devkit/build-optimizer": { - "version": "0.0.36", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.36.tgz", - "integrity": "sha512-EFFF7hBbVoTOzYfXuSlGhcDr8neafmwuBAIkzAekEjzik7OaTLq7LPG7As+ebed9ll+3DAGypnrpdIE1Tp/H/A==", + "version": "0.0.38", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.38.tgz", + "integrity": "sha512-P3jcXLIHlxfX5TNDr/tZ1tARB7tZ7jLNtjRb66O4EMspnO0n6ke8SGwB7wcNIdr+VRH9jDQUyGAj9nUjlqn00A==", "dev": true, "requires": { "loader-utils": "1.1.0", @@ -25,23 +25,25 @@ } }, "@angular-devkit/core": { - "version": "0.0.22", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.0.22.tgz", - "integrity": "sha512-zxrNtTiv60liye/GGeRMnnGgLgAWoqlMTfPLMW0D1qJ4bbrPHtme010mpxS3QL4edcDtQseyXSFCnEkuo2MrRw==", + "version": "0.0.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.0.25.tgz", + "integrity": "sha512-2JPlfs23nl01aZ/VBwjfWGZ/gug1crx93im4p6+WKwL8B/9Ec9Yv619beWYRRWpe3CpaWHTJMNlBfyduYMEb1g==", "dev": true, "requires": { + "ajv": "5.5.2", + "chokidar": "1.7.0", "source-map": "0.5.7" } }, "@angular-devkit/schematics": { - "version": "0.0.42", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.0.42.tgz", - "integrity": "sha512-elTiNL0Nx9oin2pfZTvMBU/d9sgutXaZe8n3xm2p7jfqQZry5MYYFES4hq+WIJjtV/X9gAniafncEpxuF7ikYw==", + "version": "0.0.48", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.0.48.tgz", + "integrity": "sha512-bV8OdJRotOJqz/MHDGnBodpo6LjHpmcqKFTi+bdi30Y1cEnPQFghj9BXJWNITvBkbwKdia2qK3rFTG7uNuCv8A==", "dev": true, "requires": { - "@angular-devkit/core": "0.0.22", + "@angular-devkit/core": "0.0.25", "@ngtools/json-schema": "1.1.0", - "@schematics/schematics": "0.0.11", + "@schematics/schematics": "0.0.13", "minimist": "1.2.0", "rxjs": "5.5.6" } @@ -60,14 +62,14 @@ "integrity": "sha512-Qc6AD37ASJjhbYkDgWQOniEl+XDLWDydqPOZ0kPQhbrJk49PoM1HNZfCD1FmIZFTT/eFEVsaexc/rKw0KckvSA==", "dev": true, "requires": { - "@angular-devkit/build-optimizer": "0.0.36", - "@angular-devkit/schematics": "0.0.42", + "@angular-devkit/build-optimizer": "0.0.38", + "@angular-devkit/schematics": "0.0.48", "@ngtools/json-schema": "1.1.0", "@ngtools/webpack": "1.9.2", - "@schematics/angular": "0.1.11", + "@schematics/angular": "0.1.13", "autoprefixer": "6.7.7", "chalk": "2.2.2", - "circular-dependency-plugin": "4.3.0", + "circular-dependency-plugin": "4.4.0", "common-tags": "1.7.2", "copy-webpack-plugin": "4.3.1", "core-object": "3.1.5", @@ -224,18 +226,18 @@ } }, "@schematics/angular": { - "version": "0.1.11", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.1.11.tgz", - "integrity": "sha512-jYTantZjdYeDjxh9ZLYvGbDI0VeUxgSrcBjHvnHqMNe+YGJenY988ifWCwzjmOowj57maLrQQGrdoO7oUeNdyw==", + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.1.13.tgz", + "integrity": "sha512-2+cU/u/shDwJhRXr+guXw3GKnnqZtjv7qhQVwZgmgrlS5IV1aC+NxvYNkh2S8yrg2+gtJwuPOw7jIV9p2W6Abg==", "dev": true, "requires": { - "@angular-devkit/core": "0.0.22" + "@angular-devkit/core": "0.0.25" } }, "@schematics/schematics": { - "version": "0.0.11", - "resolved": "https://registry.npmjs.org/@schematics/schematics/-/schematics-0.0.11.tgz", - "integrity": "sha512-HAXgAIuuAGjiIKohGlRUkmUTWYtNmclR12KHlQQxT9pHFdEb2OrpHjUp2YoV32jiU6jIZm4pf3ODwlPA0VbwnA==", + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/@schematics/schematics/-/schematics-0.0.13.tgz", + "integrity": "sha512-2svx/ttST8NKtJlzTSDrBjxt+EWfKv6eggBcnsMArPy7FctvbTXWaJu9igTko1jra24cbY3ps1e+02euhkbaIw==", "dev": true }, "@types/jasmine": { @@ -602,7 +604,7 @@ "dev": true, "requires": { "browserslist": "1.7.7", - "caniuse-db": "1.0.30000790", + "caniuse-db": "1.0.30000792", "normalize-range": "0.1.2", "num2fraction": "1.2.2", "postcss": "5.2.18", @@ -1012,7 +1014,7 @@ "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", "dev": true, "requires": { - "caniuse-db": "1.0.30000790", + "caniuse-db": "1.0.30000792", "electron-to-chromium": "1.3.30" } }, @@ -1117,15 +1119,15 @@ "dev": true, "requires": { "browserslist": "1.7.7", - "caniuse-db": "1.0.30000790", + "caniuse-db": "1.0.30000792", "lodash.memoize": "4.1.2", "lodash.uniq": "4.5.0" } }, "caniuse-db": { - "version": "1.0.30000790", - "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000790.tgz", - "integrity": "sha1-qAI+brn+nA7z1gtEJ84QTqh9OBw=", + "version": "1.0.30000792", + "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000792.tgz", + "integrity": "sha1-p9rG3J9RgbZ1/Wnlywb++1IxV/g=", "dev": true }, "caseless": { @@ -1214,9 +1216,9 @@ } }, "circular-dependency-plugin": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-4.3.0.tgz", - "integrity": "sha512-L3W9L1S0wC64rq+QSaZzmWnJW7cVBgimxI2lNEFEX5biwlRG8EHRM68JFi+CX5ZkCGUWJHIpnhdVs181Zlq3wA==", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-4.4.0.tgz", + "integrity": "sha512-yEFtUNUYT4jBykEX5ZOHw+5goA3glGZr9wAXIQqoyakjz5H5TeUmScnWRc52douAhb9eYzK3s7V6bXfNnjFdzg==", "dev": true }, "clap": { @@ -1881,7 +1883,7 @@ "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=", "dev": true, "requires": { - "es5-ext": "0.10.37" + "es5-ext": "0.10.38" } }, "dashdash": { @@ -2085,9 +2087,9 @@ "dev": true }, "dns-packet": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.0.tgz", - "integrity": "sha512-uyOFFZ3elFVDZ7mq8bfl2PkgIbFr7+29RDyarF1maUuPNHNvBrlgcNkJaEYQh3KouqAyKzVLYvWRT3CWLSbNMA==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz", + "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==", "dev": true, "requires": { "ip": "1.1.5", @@ -2437,9 +2439,9 @@ } }, "es5-ext": { - "version": "0.10.37", - "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.37.tgz", - "integrity": "sha1-DudB0Ui4AGm6J9AgOTdWryV978M=", + "version": "0.10.38", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.38.tgz", + "integrity": "sha512-jCMyePo7AXbUESwbl8Qi01VSH2piY9s/a3rSU/5w/MlTIx8HPL1xn2InGN8ejt/xulcJgnTO7vqNtOAxzYd2Kg==", "dev": true, "requires": { "es6-iterator": "2.0.3", @@ -2453,7 +2455,7 @@ "dev": true, "requires": { "d": "1.0.0", - "es5-ext": "0.10.37", + "es5-ext": "0.10.38", "es6-symbol": "3.1.1" } }, @@ -2464,7 +2466,7 @@ "dev": true, "requires": { "d": "1.0.0", - "es5-ext": "0.10.37", + "es5-ext": "0.10.38", "es6-iterator": "2.0.3", "es6-set": "0.1.5", "es6-symbol": "3.1.1", @@ -2478,7 +2480,7 @@ "dev": true, "requires": { "d": "1.0.0", - "es5-ext": "0.10.37", + "es5-ext": "0.10.38", "es6-iterator": "2.0.3", "es6-symbol": "3.1.1", "event-emitter": "0.3.5" @@ -2491,7 +2493,7 @@ "dev": true, "requires": { "d": "1.0.0", - "es5-ext": "0.10.37" + "es5-ext": "0.10.38" } }, "es6-weak-map": { @@ -2501,7 +2503,7 @@ "dev": true, "requires": { "d": "1.0.0", - "es5-ext": "0.10.37", + "es5-ext": "0.10.38", "es6-iterator": "2.0.3", "es6-symbol": "3.1.1" } @@ -2571,7 +2573,7 @@ "dev": true, "requires": { "d": "1.0.0", - "es5-ext": "0.10.37" + "es5-ext": "0.10.38" } }, "eventemitter3": { @@ -4410,7 +4412,7 @@ "ncname": "1.0.0", "param-case": "2.1.1", "relateurl": "0.2.7", - "uglify-js": "3.3.5" + "uglify-js": "3.3.7" } }, "html-webpack-plugin": { @@ -6013,7 +6015,7 @@ "integrity": "sha512-uV3/ckdsffHx9IrGQrx613mturMdMqQ06WTq+C09NsStJ9iNG6RcUWgPKs1Rfjy+idZT6tfQoXEusGNnEZhT3w==", "dev": true, "requires": { - "dns-packet": "1.3.0", + "dns-packet": "1.3.1", "thunky": "0.1.0" } }, @@ -6123,7 +6125,7 @@ "querystring-es3": "0.2.1", "readable-stream": "2.3.3", "stream-browserify": "2.0.1", - "stream-http": "2.7.2", + "stream-http": "2.8.0", "string_decoder": "1.0.3", "timers-browserify": "2.0.4", "tty-browserify": "0.0.0", @@ -8982,9 +8984,9 @@ } }, "stream-http": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.2.tgz", - "integrity": "sha512-c0yTD2rbQzXtSsFSVhtpvY/vS6u066PcXOX9kBB3mSO76RiUQzL340uJkGBWnlBg4/HZzqiUXtaVA7wcRcJgEw==", + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.0.tgz", + "integrity": "sha512-sZOFxI/5xw058XIRHl4dU3dZ+TTOIGJR78Dvo0oEAejIt4ou27k+3ne1zYmCV+v7UucbxIFQuOgnkTVHh8YPnw==", "dev": true, "requires": { "builtin-status-codes": "3.0.0", @@ -9431,15 +9433,21 @@ "dev": true }, "uglify-js": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.5.tgz", - "integrity": "sha512-ZebM2kgBL/UI9rKeAbsS2J0UPPv7SBy5hJNZml/YxB1zC6JK8IztcPs+cxilE4pu0li6vadVSFqiO7xFTKuSrg==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.7.tgz", + "integrity": "sha512-esJIpNQIC44EFSrbeFPhiXHy2HJ+dTcnn0Zdkn+5meuLsvoV0mFJffKlyezNIIHNfhF0NpgbifygCfEyAogIhQ==", "dev": true, "requires": { - "commander": "2.12.2", + "commander": "2.13.0", "source-map": "0.6.1" }, "dependencies": { + "commander": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz", + "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==", + "dev": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -9466,11 +9474,17 @@ "schema-utils": "0.4.3", "serialize-javascript": "1.4.0", "source-map": "0.6.1", - "uglify-es": "3.3.5", + "uglify-es": "3.3.7", "webpack-sources": "1.1.0", "worker-farm": "1.5.2" }, "dependencies": { + "commander": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz", + "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==", + "dev": true + }, "schema-utils": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.3.tgz", @@ -9488,12 +9502,12 @@ "dev": true }, "uglify-es": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.5.tgz", - "integrity": "sha512-7IvaFuYtfbcXm0fGb13mmRYVQdzQDXETAtvYHbCDPt2V88Y8l2HaULOyW6ueoYA0JhGIcLK7dtHkDcBWySqnBw==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.7.tgz", + "integrity": "sha512-fGMnE6SsDRsCjxm78C+lv7MuXsse/dtF7QuTUT43BYf4jlxPjd+XTnGB8YjaCQJ3sv2LT4zk0mwpp9+QJocU6g==", "dev": true, "requires": { - "commander": "2.12.2", + "commander": "2.13.0", "source-map": "0.6.1" } } diff --git a/src/app/adress.ts b/src/app/adress.ts new file mode 100644 index 0000000..d128a0c --- /dev/null +++ b/src/app/adress.ts @@ -0,0 +1,14 @@ +export class Adress { + public lineOne: string; + public lineTwo: string; + public city: string; + public country: string; + public zipCode?: number; + constructor() { + this.lineOne = ''; + this.lineTwo = ''; + this.city = ''; + this.country = ''; + this.zipCode = 0; + } +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b0f672..26cc54f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { ContactService } from './services/contact.service'; @Component({ selector: 'app-root', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9a9dc69..e160eaa 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,8 @@ import { ContactFormComponent } from './components/contact-form/contact-form.com import { HeaderComponent } from './components/blocks/header/header.component'; import { ToDosComponent } from './components/blocks/to-dos/to-dos.component'; import { DocComponent } from './components/blocks/doc/doc.component'; +import { AdressComponent } from './components/adress/adress.component'; +import { ContactService } from './services/contact.service'; @NgModule({ @@ -15,13 +17,14 @@ import { DocComponent } from './components/blocks/doc/doc.component'; ContactFormComponent, HeaderComponent, ToDosComponent, - DocComponent + DocComponent, + AdressComponent, ], imports: [ BrowserModule, FormsModule ], - providers: [], + providers: [ ContactService ], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/components/adress/adress.component.css b/src/app/components/adress/adress.component.css new file mode 100644 index 0000000..4735c1f --- /dev/null +++ b/src/app/components/adress/adress.component.css @@ -0,0 +1,10 @@ +.ng-valid[required], +.ng-valid.required { + border-left: 5px solid #42A948; + /* green */ +} + +.ng-invalid:not(form) { + border-left: 5px solid #a94442; + /* red */ +} diff --git a/src/app/components/adress/adress.component.html b/src/app/components/adress/adress.component.html new file mode 100644 index 0000000..549be9b --- /dev/null +++ b/src/app/components/adress/adress.component.html @@ -0,0 +1,39 @@ +
+
+
+ + +
+ line1 is required!! +
+
+
+ + +
+ line2 is required!! +
+
+
+ + +
+ City is required!! +
+
+
+ + +
+ Country is required!! +
+
+
+ + +
+ Zip Code is required!! +
+
+
+
\ No newline at end of file diff --git a/src/app/components/adress/adress.component.spec.ts b/src/app/components/adress/adress.component.spec.ts new file mode 100644 index 0000000..38413df --- /dev/null +++ b/src/app/components/adress/adress.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AdressComponent } from './adress.component'; + +describe('AdressComponent', () => { + let component: AdressComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AdressComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AdressComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/adress/adress.component.ts b/src/app/components/adress/adress.component.ts new file mode 100644 index 0000000..25c888b --- /dev/null +++ b/src/app/components/adress/adress.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Adress } from '../../adress'; + +@Component({ + selector: 'app-adress', + templateUrl: './adress.component.html', + styleUrls: ['./adress.component.css'] +}) +export class AdressComponent implements OnInit { + @Input() adress: Adress; + + constructor() { } + + ngOnInit() { + + } + +} diff --git a/src/app/components/contact-form/contact-form.component.html b/src/app/components/contact-form/contact-form.component.html index 1fde111..409ee66 100644 --- a/src/app/components/contact-form/contact-form.component.html +++ b/src/app/components/contact-form/contact-form.component.html @@ -31,7 +31,9 @@

- + + +
@@ -40,6 +42,8 @@

+ + diff --git a/src/app/components/contact-form/contact-form.component.ts b/src/app/components/contact-form/contact-form.component.ts index b0c47dd..fe5a016 100644 --- a/src/app/components/contact-form/contact-form.component.ts +++ b/src/app/components/contact-form/contact-form.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Contact } from '../../contact'; +import { Adress } from '../../adress'; @Component({ selector: 'app-contact-form', @@ -10,7 +11,7 @@ import { Contact } from '../../contact'; export class ContactFormComponent implements OnInit { roles = ['Internal User', 'Admin', 'Customer']; - model = new Contact('Mohammed', '', 'Internal User'); + model = new Contact('Mohammed', '', 'Internal User', new Adress()); submitted: boolean = false; @@ -28,7 +29,7 @@ export class ContactFormComponent implements OnInit { } newContact() { - this.model = new Contact('', '', ''); + this.model = new Contact('', '', '', new Adress()); } } diff --git a/src/app/contact.ts b/src/app/contact.ts index 0c642c9..5588702 100644 --- a/src/app/contact.ts +++ b/src/app/contact.ts @@ -1,8 +1,24 @@ +import { Adress } from './adress'; + export class Contact { - constructor( - public firstName: string, - public lastName: string, - public role: string, - public middleName?: string - ) { } + public adress: Adress; + public jobPosition: string; + public company: string; + public phoneNumber: number; + public fax: string; + public email: string; + public firstName: string; + public lastName: string; + public role: string; + constructor(firstName: string, lastName: string, role: string, adress: Adress) { + this.adress = new Adress(); + this.jobPosition = ''; + this.company = ''; + this.email = ''; + this.fax = ''; + this.phoneNumber = 0; + this.firstName = firstName; + this.lastName = lastName; + this.role = role; + } } diff --git a/src/app/services/contact.service.spec.ts b/src/app/services/contact.service.spec.ts new file mode 100644 index 0000000..584e8a2 --- /dev/null +++ b/src/app/services/contact.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { ContactService } from './contact.service'; + +describe('ContactService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ContactService] + }); + }); + + it('should be created', inject([ContactService], (service: ContactService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/services/contact.service.ts b/src/app/services/contact.service.ts new file mode 100644 index 0000000..c70c216 --- /dev/null +++ b/src/app/services/contact.service.ts @@ -0,0 +1,47 @@ +import { Injectable } from '@angular/core'; +import { Contact } from '../contact'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { of } from 'rxjs/observable/of'; +import { catchError, map, tap } from 'rxjs/operators'; + +const httpOptions = { + headers: new HttpHeaders({ 'Content-Type': 'application/json' }) +}; + + +@Injectable() +export class ContactService { + private contactsUrl = 'https://mini-crm-api.herokuapp.com/api/v1/contacts'; // URL to web api + + constructor( + private http: HttpClient) { } + + getContacts (): Observable { + return this.http.get(this.contactsUrl).pipe( + catchError(this.handleError('getContacts', [])) + ); + } + + AddContact (contact: Contact): Observable { + return this.http.put(this.contactsUrl, contact, httpOptions).pipe( + tap(_ => this.log(` contact id=${contact.firstName}`)), + catchError(this.handleError('updateHero')) + ); + } + private handleError (operation = 'operation', result?: T) { + return (error: any): Observable => { + // TODO: send the error to remote logging infrastructure + console.error(error); // log to console instead + // TODO: better job of transforming error for user consumption + // Let the app keep running by returning an empty result. + return of(result as T); + }; + } + + private log(message: string) { + console.log(message); + } + // getContacts(): Observable { + // return this.http.get(this.contactsUrl); } +} From c05f8fb3905e64e7d75d2e9fbafd536e3b03d3fc Mon Sep 17 00:00:00 2001 From: simodachich Date: Wed, 17 Jan 2018 13:16:08 +0000 Subject: [PATCH 2/4] submited contact --- src/app/app.module.ts | 5 ++++- .../components/contact-form/contact-form.component.ts | 7 +++++-- src/app/services/contact.service.ts | 9 +++++---- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e160eaa..6a0cf32 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { ContactFormComponent } from './components/contact-form/contact-form.component'; @@ -8,6 +9,7 @@ import { HeaderComponent } from './components/blocks/header/header.component'; import { ToDosComponent } from './components/blocks/to-dos/to-dos.component'; import { DocComponent } from './components/blocks/doc/doc.component'; import { AdressComponent } from './components/adress/adress.component'; + import { ContactService } from './services/contact.service'; @@ -22,7 +24,8 @@ import { ContactService } from './services/contact.service'; ], imports: [ BrowserModule, - FormsModule + FormsModule, + HttpClientModule ], providers: [ ContactService ], bootstrap: [AppComponent] diff --git a/src/app/components/contact-form/contact-form.component.ts b/src/app/components/contact-form/contact-form.component.ts index fe5a016..99a37ae 100644 --- a/src/app/components/contact-form/contact-form.component.ts +++ b/src/app/components/contact-form/contact-form.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Contact } from '../../contact'; import { Adress } from '../../adress'; +import { ContactService} from '../../services/contact.service'; @Component({ selector: 'app-contact-form', @@ -12,16 +13,18 @@ export class ContactFormComponent implements OnInit { roles = ['Internal User', 'Admin', 'Customer']; model = new Contact('Mohammed', '', 'Internal User', new Adress()); - submitted: boolean = false; - constructor() { } + constructor(private contactService: ContactService) { + } ngOnInit() { } onSubmit() { this.submitted = true; + this.contactService.addContact(this.model) + .subscribe(() => this.submitted = true); } get diagnostic() { diff --git a/src/app/services/contact.service.ts b/src/app/services/contact.service.ts index c70c216..6ff4210 100644 --- a/src/app/services/contact.service.ts +++ b/src/app/services/contact.service.ts @@ -23,12 +23,13 @@ export class ContactService { ); } - AddContact (contact: Contact): Observable { - return this.http.put(this.contactsUrl, contact, httpOptions).pipe( - tap(_ => this.log(` contact id=${contact.firstName}`)), - catchError(this.handleError('updateHero')) + addContact (contact: Contact): Observable { + return this.http.post(this.contactsUrl, contact, httpOptions).pipe( + tap(_ => this.log(` contact =${contact.firstName}`)), + catchError(this.handleError('create contact')) ); } + private handleError (operation = 'operation', result?: T) { return (error: any): Observable => { // TODO: send the error to remote logging infrastructure From bf89bd73e0c75aaf9c8774f8fbfc6c9446d89efe Mon Sep 17 00:00:00 2001 From: simodachich Date: Wed, 17 Jan 2018 16:00:11 +0000 Subject: [PATCH 3/4] adding the api --- package-lock.json | 5 ++ package.json | 1 + src/app/app.module.ts | 11 ++++- .../components/adress/adress.component.html | 30 ++++++------ .../contact-form/contact-form.component.css | 4 ++ .../contact-form/contact-form.component.html | 48 +++++++++++++++---- src/app/contact.ts | 8 ++-- src/app/in-memory-data.service.ts | 26 ++++++++++ src/app/services/contact.service.ts | 2 +- 9 files changed, 106 insertions(+), 29 deletions(-) create mode 100644 src/app/in-memory-data.service.ts diff --git a/package-lock.json b/package-lock.json index b4d61da..bbe0fa4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -383,6 +383,11 @@ "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", "dev": true }, + "angular-in-memory-web-api": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.5.2.tgz", + "integrity": "sha1-/y6mZqv9BN19FslT7JcuExigmCQ=" + }, "ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", diff --git a/package.json b/package.json index bff13a0..049fcce 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", + "angular-in-memory-web-api": "^0.5.2", "core-js": "^2.4.1", "rxjs": "^5.5.2", "zone.js": "^0.8.14" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6a0cf32..92893fd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,6 +2,8 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; +import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; +import { InMemoryDataService } from './in-memory-data.service'; import { AppComponent } from './app.component'; import { ContactFormComponent } from './components/contact-form/contact-form.component'; @@ -25,7 +27,14 @@ import { ContactService } from './services/contact.service'; imports: [ BrowserModule, FormsModule, - HttpClientModule + HttpClientModule, + + // The HttpClientInMemoryWebApiModule module intercepts HTTP requests + // and returns simulated server responses. + // Remove it when a real server is ready to receive requests. + HttpClientInMemoryWebApiModule.forRoot( + InMemoryDataService, { dataEncapsulation: false } + ) ], providers: [ ContactService ], bootstrap: [AppComponent] diff --git a/src/app/components/adress/adress.component.html b/src/app/components/adress/adress.component.html index 549be9b..6011b88 100644 --- a/src/app/components/adress/adress.component.html +++ b/src/app/components/adress/adress.component.html @@ -1,5 +1,5 @@ -
-
+
+
@@ -21,19 +21,21 @@ City is required!!
+
+
- - -
- Country is required!! + + +
+ Country is required!! +
+
+ + +
+ Zip Code is required!! +
+
-
- - -
- Zip Code is required!! -
-
-
\ No newline at end of file diff --git a/src/app/components/contact-form/contact-form.component.css b/src/app/components/contact-form/contact-form.component.css index 4735c1f..7a9b6bb 100644 --- a/src/app/components/contact-form/contact-form.component.css +++ b/src/app/components/contact-form/contact-form.component.css @@ -8,3 +8,7 @@ border-left: 5px solid #a94442; /* red */ } +.bloc-separator{ + margin-top: 50px; + margin-bottom: 50px; +} \ No newline at end of file diff --git a/src/app/components/contact-form/contact-form.component.html b/src/app/components/contact-form/contact-form.component.html index 409ee66..89496e4 100644 --- a/src/app/components/contact-form/contact-form.component.html +++ b/src/app/components/contact-form/contact-form.component.html @@ -31,19 +31,47 @@

- +
+ - - -
- - +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ + +
+
+ + +
+
+
+ +
+ + +
- - diff --git a/src/app/contact.ts b/src/app/contact.ts index 5588702..b541204 100644 --- a/src/app/contact.ts +++ b/src/app/contact.ts @@ -1,15 +1,17 @@ import { Adress } from './adress'; export class Contact { - public adress: Adress; + public id: number; + public firstName: string; + public lastName: string; public jobPosition: string; public company: string; public phoneNumber: number; public fax: string; public email: string; - public firstName: string; - public lastName: string; public role: string; + public adress: Adress; + constructor(firstName: string, lastName: string, role: string, adress: Adress) { this.adress = new Adress(); this.jobPosition = ''; diff --git a/src/app/in-memory-data.service.ts b/src/app/in-memory-data.service.ts new file mode 100644 index 0000000..aa11e96 --- /dev/null +++ b/src/app/in-memory-data.service.ts @@ -0,0 +1,26 @@ +import { InMemoryDbService } from 'angular-in-memory-web-api'; + +export class InMemoryDataService implements InMemoryDbService { + createDb() { + const contacts = [ + { 'id': 11, + 'firstName': 'Debora', + 'lastName': 'Dunnald', + 'jobPosition': 'developer', + 'company': 'lslkjl', + 'phoneNumber': '+212 (807) 553-2272', + 'fax': 'sdjks', + 'email': 'deboradunn@navir.com', + 'role': 'interne', + 'address': { + 'lineOne': 'Frank Court', + 'lineTwo': 'Batchelder Street, 361', + 'city': 'Kenmar', + 'country': 'Bangladesh', + 'zipCode': '1821' + } + } +]; + return {contacts}; + } +} diff --git a/src/app/services/contact.service.ts b/src/app/services/contact.service.ts index 6ff4210..715d98a 100644 --- a/src/app/services/contact.service.ts +++ b/src/app/services/contact.service.ts @@ -12,7 +12,7 @@ const httpOptions = { @Injectable() export class ContactService { - private contactsUrl = 'https://mini-crm-api.herokuapp.com/api/v1/contacts'; // URL to web api + private contactsUrl = 'api/contacts'; // URL to web api constructor( private http: HttpClient) { } From a617943a88ba24758b6b235f532a47119e89ad60 Mon Sep 17 00:00:00 2001 From: simodachich Date: Wed, 17 Jan 2018 16:46:06 +0000 Subject: [PATCH 4/4] form validation --- .../components/contact-form/contact-form.component.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/components/contact-form/contact-form.component.html b/src/app/components/contact-form/contact-form.component.html index 89496e4..e335fbe 100644 --- a/src/app/components/contact-form/contact-form.component.html +++ b/src/app/components/contact-form/contact-form.component.html @@ -41,7 +41,7 @@

-
+
@@ -60,7 +60,10 @@

- + +
+ email format is not correct +