diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index aa8653b..6f57717 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -3,7 +3,8 @@ import { Routes, RouterModule } from '@angular/router'; import { ContactsListComponent, - ContactFormComponent, + NewContactComponent, + EditContactComponent, FavoritesContactsComponent } from './contacts/components'; import { ProfileComponent } from './profile/profile.component'; @@ -13,7 +14,8 @@ const routes: Routes = [ { path: 'contacts', component: ContactsListComponent }, { path: 'favorites', component: FavoritesContactsComponent }, { path: 'dashboard', component: DashboardComponent }, - { path: 'new-contact', component: ContactFormComponent }, + { path: 'new-contact', component: NewContactComponent }, + { path: 'contacts/:id', component: EditContactComponent }, { path: 'profile', component: ProfileComponent }, { path: '', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6bc25c6..68ba496 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,6 +2,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; +import { FormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; +import { HttpModule } from '@angular/http'; + + + import { AppComponent } from './app.component'; import { HeaderComponent } from './blocks/header/header.component'; @@ -10,11 +16,19 @@ import { ContactsListComponent, ContactCardComponent, ContactFormComponent, - FavoritesContactsComponent + FavoritesContactsComponent, + NewContactComponent, + EditContactComponent } from './contacts/components'; import { ProfileComponent } from './profile/profile.component'; import { DashboardComponent } from './dashboard/dashboard.component'; +import { ContactService } from './services/contact.service'; +import { GithubService } from './services/github.service'; + +import { AdressComponent } from './contacts/components/contact-form/adress/adress.component'; + + @NgModule({ declarations: [ @@ -26,13 +40,22 @@ import { DashboardComponent } from './dashboard/dashboard.component'; ContactFormComponent, ProfileComponent, DashboardComponent, - FavoritesContactsComponent + FavoritesContactsComponent, + AdressComponent, + NewContactComponent, + EditContactComponent ], imports: [ BrowserModule, - AppRoutingModule + FormsModule, + AppRoutingModule, + HttpModule, + HttpClientModule + ], - providers: [], - bootstrap: [AppComponent] + providers: [ ContactService, GithubService ], + bootstrap: [AppComponent] }) export class AppModule { } + + diff --git a/src/app/contacts/components/contact-card/contact-card.component.css b/src/app/contacts/components/contact-card/contact-card.component.css index 328a6c7..7539b00 100644 --- a/src/app/contacts/components/contact-card/contact-card.component.css +++ b/src/app/contacts/components/contact-card/contact-card.component.css @@ -1,3 +1,20 @@ .contact-card { margin-bottom: 5px; } +.image{ + width: 200px; + height: 200px; +} +.card-contact-sizing{ + height: 500px; + margin-bottom: 15px; +} +.adjust-padding-card{ + margin-left: 15px; + +} +.bloc-shadow{ + box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); + padding: 50px; + border-radius: 6px; +} \ No newline at end of file diff --git a/src/app/contacts/components/contact-card/contact-card.component.html b/src/app/contacts/components/contact-card/contact-card.component.html index 7e6f991..8758b65 100644 --- a/src/app/contacts/components/contact-card/contact-card.component.html +++ b/src/app/contacts/components/contact-card/contact-card.component.html @@ -1,23 +1,23 @@ -
+ +
+
+
{{contact.firstName}} {{contact.lastName}}
+

email: {{contact.email}}.

+
+ +

Bio: {{contact.bio}}

-
-
- - MC - -
-
-

Mary Chesnut

-
Job Title
-
-
- - - - - - -
-
+ + + + + + + + +
diff --git a/src/app/contacts/components/contact-card/contact-card.component.ts b/src/app/contacts/components/contact-card/contact-card.component.ts index 2a2bdd8..25e1494 100644 --- a/src/app/contacts/components/contact-card/contact-card.component.ts +++ b/src/app/contacts/components/contact-card/contact-card.component.ts @@ -1,4 +1,7 @@ -import { Component, OnInit } from '@angular/core'; + +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Contact } from '../../../model/contact'; +import {ContactService} from '../../../services/contact.service'; @Component({ selector: 'contact-book-contact-card', @@ -6,10 +9,21 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./contact-card.component.css'] }) export class ContactCardComponent implements OnInit { + @Input() contact: Contact; + @Output() DeleteContactevent: EventEmitter = new EventEmitter(); + @Output() FavoriteContactevent: EventEmitter = new EventEmitter(); - constructor() { } - + constructor( + private contactService: ContactService + ) { } ngOnInit() { } + delete(contact: Contact) { + this.DeleteContactevent.emit(contact); + } + favorite(contact: Contact) { + this.FavoriteContactevent.emit(contact); + } + } diff --git a/src/app/contacts/components/contact-form/adress/adress.component.css b/src/app/contacts/components/contact-form/adress/adress.component.css new file mode 100644 index 0000000..7e3a51b --- /dev/null +++ b/src/app/contacts/components/contact-form/adress/adress.component.css @@ -0,0 +1,19 @@ +.ng-valid[required], +.ng-valid.required { + border-left: 5px solid #42A948; + /* green */ +} + +.ng-invalid:not(form) { + border-left: 5px solid #a94442; + /* red */ +} +.field{ + width: 100%; + height: 100%; + box-shadow: inset 0 0 10px 2px #efefef; + padding: 20px 23px; + border: none; + border-radius:2px !important; + font-family: AkkuratRegular; +} \ No newline at end of file diff --git a/src/app/contacts/components/contact-form/adress/adress.component.html b/src/app/contacts/components/contact-form/adress/adress.component.html new file mode 100644 index 0000000..cbe8ffa --- /dev/null +++ b/src/app/contacts/components/contact-form/adress/adress.component.html @@ -0,0 +1,48 @@ +
+
+
+ + +
+ line1 is required!! +
+
+
+ + +
+ line2 is required!! +
+
+
+ + +
+ City is required!! +
+
+
+
+
+ + +
+ Country is required!! +
+
+
+ + +
+ Country is required!! +
+
+
+ + +
+ Zip Code is required!! +
+
+
+
\ No newline at end of file diff --git a/src/app/contacts/components/contact-form/adress/adress.component.spec.ts b/src/app/contacts/components/contact-form/adress/adress.component.spec.ts new file mode 100644 index 0000000..38413df --- /dev/null +++ b/src/app/contacts/components/contact-form/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/contacts/components/contact-form/adress/adress.component.ts b/src/app/contacts/components/contact-form/adress/adress.component.ts new file mode 100644 index 0000000..07ee83a --- /dev/null +++ b/src/app/contacts/components/contact-form/adress/adress.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Adress } from '../../../../model/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/contacts/components/contact-form/contact-form.component.css b/src/app/contacts/components/contact-form/contact-form.component.css index e69de29..d3177c1 100644 --- a/src/app/contacts/components/contact-form/contact-form.component.css +++ b/src/app/contacts/components/contact-form/contact-form.component.css @@ -0,0 +1,19 @@ +.ng-valid[required], +.ng-valid.required { + border-left: 5px solid #42A948; + /* green */ +} + +.ng-invalid:not(form) { + border-left: 5px solid #a94442; + /* red */ +} +.bloc-separator{ + margin-top: 50px; + margin-bottom: 50px; +} +.bloc-shadow{ + box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); + padding: 50px; + border-radius: 6px; +} \ No newline at end of file diff --git a/src/app/contacts/components/contact-form/contact-form.component.html b/src/app/contacts/components/contact-form/contact-form.component.html index 59bd36f..51bcc12 100644 --- a/src/app/contacts/components/contact-form/contact-form.component.html +++ b/src/app/contacts/components/contact-form/contact-form.component.html @@ -1,22 +1,37 @@ -
-

Add a New Contact

+ +
+ +
+ First name is required!! +
-
-
-
-

- TODO: Create new contact form with save and a cancel button!! -

-
-
+
+ +
+ Last name is required!! +
- -
-
-

- Check out the contact form repository to finish this task. check the api doc -
- API DOC -

-
+
+ +
+
+ +
+ email format is not correct !! +
+
+
+ +
+ phone number is required!! +
+
+
+
+
+ + + diff --git a/src/app/contacts/components/contact-form/contact-form.component.ts b/src/app/contacts/components/contact-form/contact-form.component.ts index 233f630..1f770b5 100644 --- a/src/app/contacts/components/contact-form/contact-form.component.ts +++ b/src/app/contacts/components/contact-form/contact-form.component.ts @@ -1,15 +1,35 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; + +import { Contact } from '../../../model/contact'; +import { ContactService} from '../../../services/contact.service'; +import { containerEnd } from '@angular/core/src/render3/instructions'; @Component({ - selector: 'contact-book-contact-form', + selector: 'contact-book-contact-form', templateUrl: './contact-form.component.html', styleUrls: ['./contact-form.component.css'] }) export class ContactFormComponent implements OnInit { + genders = ['female', 'male']; + @Input() contact: Contact; + submitted = false; - constructor() { } - - ngOnInit() { + constructor( private contactService: ContactService) { } + ngOnInit() { } + + // onSubmit() { + // console.log(this); + // this.contactService.addContact(this.contact) + // .subscribe(() => this.submitted = true); + // } + // get diagnostic() { + // return JSON.stringify(this.contact); + // } + + // newContact() { + // this.contact = new Contact(); + // } + } diff --git a/src/app/contacts/components/contacts-list/contacts-list.component.html b/src/app/contacts/components/contacts-list/contacts-list.component.html index 3a4012a..3713ea1 100644 --- a/src/app/contacts/components/contacts-list/contacts-list.component.html +++ b/src/app/contacts/components/contacts-list/contacts-list.component.html @@ -5,102 +5,10 @@

Your Contacts

-

- TODO: Add Your contacts Here, and implements the delete action with confirmation and edit contact action!! -

-
-
-
- +
+
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
\ No newline at end of file diff --git a/src/app/contacts/components/contacts-list/contacts-list.component.ts b/src/app/contacts/components/contacts-list/contacts-list.component.ts index 2522412..55af997 100644 --- a/src/app/contacts/components/contacts-list/contacts-list.component.ts +++ b/src/app/contacts/components/contacts-list/contacts-list.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { Contact } from '../../../model/contact'; +import { ContactService } from '../../../services/contact.service'; @Component({ selector: 'contact-book-contacts-list', @@ -7,9 +9,33 @@ import { Component, OnInit } from '@angular/core'; }) export class ContactsListComponent implements OnInit { - constructor() { } + contactList: Contact[]; + favoriteContact: Contact[]; + + constructor(private contactService: ContactService) { } ngOnInit() { + this.getContacts(); + } + + getContacts(): void { + this.contactService.getContacts() + .subscribe(response => { + this.contactList = response['contacts']; + console.log(response); + }); + console.log(this.contactList); + } + deleteContact(contact: Contact) { + if (window.confirm('do you realy want to delete this contact ?')) { + this.contactList = this.contactList.filter(obj => obj !== contact); + this.contactService.deleteContact(contact).subscribe(); + } + } + favoriteContacts(contact: Contact) { + console.log("hete"); + console.log(contact.firstName); + this.contactService.addToFavorite(contact); } } diff --git a/src/app/contacts/components/edit-contact/edit-contact.component.css b/src/app/contacts/components/edit-contact/edit-contact.component.css new file mode 100644 index 0000000..530ad03 --- /dev/null +++ b/src/app/contacts/components/edit-contact/edit-contact.component.css @@ -0,0 +1,5 @@ +.bloc-shadow{ + box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); + padding: 50px; + border-radius: 6px; + } \ No newline at end of file diff --git a/src/app/contacts/components/edit-contact/edit-contact.component.html b/src/app/contacts/components/edit-contact/edit-contact.component.html new file mode 100644 index 0000000..6d1fc81 --- /dev/null +++ b/src/app/contacts/components/edit-contact/edit-contact.component.html @@ -0,0 +1,19 @@ +
+
+

Add a New Contact

+
+
+
+ +
+
+ + +
+
+
+ \ No newline at end of file diff --git a/src/app/contacts/components/edit-contact/edit-contact.component.spec.ts b/src/app/contacts/components/edit-contact/edit-contact.component.spec.ts new file mode 100644 index 0000000..9948935 --- /dev/null +++ b/src/app/contacts/components/edit-contact/edit-contact.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditContactComponent } from './edit-contact.component'; + +describe('EditContactComponent', () => { + let component: EditContactComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditContactComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/contacts/components/edit-contact/edit-contact.component.ts b/src/app/contacts/components/edit-contact/edit-contact.component.ts new file mode 100644 index 0000000..ae1e597 --- /dev/null +++ b/src/app/contacts/components/edit-contact/edit-contact.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { Contact } from '../../../model/contact'; +import { ContactService} from '../../../services/contact.service'; +import { Router, ActivatedRoute, ParamMap } from '@angular/router'; +import 'rxjs/add/operator/switchMap'; + +@Component({ + selector: 'app-edit-contact', + templateUrl: './edit-contact.component.html', + styleUrls: ['./edit-contact.component.css'] +}) +export class EditContactComponent implements OnInit { + contact: Contact; + submitted = false; + constructor( + private route: ActivatedRoute, + private router: Router, + private contactService: ContactService + ) { } + + ngOnInit() { + this.contact = new Contact(); + this.route.paramMap + .switchMap((params: ParamMap) => this.contactService.getContact(params.get('id'))) + .subscribe((data) => this.contact = data['contact'] ); + } + + + onSubmit() { + this.contactService.updateContact(this.contact) + .subscribe(() => this.submitted = true); + } + + +} diff --git a/src/app/contacts/components/favorites-contacts/favorites-contacts.component.html b/src/app/contacts/components/favorites-contacts/favorites-contacts.component.html index a5bdb86..b558951 100644 --- a/src/app/contacts/components/favorites-contacts/favorites-contacts.component.html +++ b/src/app/contacts/components/favorites-contacts/favorites-contacts.component.html @@ -1,106 +1,14 @@
-

Your Favorites Contacts

-
-

Contacts database Managements

-
-
-
-

- TODO: Add Your favorite contacts Here, and implements the delete action with confirmation and edit contact action!! -

-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+

Your Contacts

+
+

Contacts database Managements

+
+
+
+
+
+
+
+ +
+
\ No newline at end of file diff --git a/src/app/contacts/components/favorites-contacts/favorites-contacts.component.ts b/src/app/contacts/components/favorites-contacts/favorites-contacts.component.ts index b094e02..b8d4f71 100644 --- a/src/app/contacts/components/favorites-contacts/favorites-contacts.component.ts +++ b/src/app/contacts/components/favorites-contacts/favorites-contacts.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { Contact } from '../../../model/contact'; +import { ContactService } from '../../../services/contact.service'; @Component({ selector: 'contact-book-favorites-contacts', @@ -7,9 +9,28 @@ import { Component, OnInit } from '@angular/core'; }) export class FavoritesContactsComponent implements OnInit { - constructor() { } + contactFavoriteList: Contact[]; + + constructor(private contactService: ContactService) { } ngOnInit() { + this.getFavoritContacts(); + } + + getFavoritContacts(): void { + this.contactService.getfavoriteContacts() + .subscribe(response => { + this.contactFavoriteList = response; + console.log(response); + }); + console.log(this.contactFavoriteList); + } + deleteContact(contact: Contact) { + + if (window.confirm('do you realy want to delete this contact ?')) { + this.contactFavoriteList = this.contactFavoriteList.filter(obj => obj !== contact); + this.contactService.deleteContact(contact).subscribe(); + } } } diff --git a/src/app/contacts/components/index.ts b/src/app/contacts/components/index.ts index f9f8686..6c17e5d 100644 --- a/src/app/contacts/components/index.ts +++ b/src/app/contacts/components/index.ts @@ -2,9 +2,13 @@ import { ContactsListComponent } from './contacts-list/contacts-list.component'; import { ContactCardComponent } from './contact-card/contact-card.component'; import { ContactFormComponent } from './contact-form/contact-form.component'; import { FavoritesContactsComponent } from './favorites-contacts/favorites-contacts.component'; +import { EditContactComponent } from './edit-contact/edit-contact.component'; +import { NewContactComponent } from './new-contact/new-contact.component'; export { ContactsListComponent, ContactCardComponent, ContactFormComponent, - FavoritesContactsComponent -} + FavoritesContactsComponent, + NewContactComponent, + EditContactComponent +}; diff --git a/src/app/contacts/components/new-contact/new-contact.component.css b/src/app/contacts/components/new-contact/new-contact.component.css new file mode 100644 index 0000000..530ad03 --- /dev/null +++ b/src/app/contacts/components/new-contact/new-contact.component.css @@ -0,0 +1,5 @@ +.bloc-shadow{ + box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); + padding: 50px; + border-radius: 6px; + } \ No newline at end of file diff --git a/src/app/contacts/components/new-contact/new-contact.component.html b/src/app/contacts/components/new-contact/new-contact.component.html new file mode 100644 index 0000000..f60857f --- /dev/null +++ b/src/app/contacts/components/new-contact/new-contact.component.html @@ -0,0 +1,20 @@ +
+
+

Add a New Contact

+
+
+
+ + +
+ +
+ + +
+
+
diff --git a/src/app/contacts/components/new-contact/new-contact.component.spec.ts b/src/app/contacts/components/new-contact/new-contact.component.spec.ts new file mode 100644 index 0000000..7ba194d --- /dev/null +++ b/src/app/contacts/components/new-contact/new-contact.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NewContactComponent } from './new-contact.component'; + +describe('NewContactComponent', () => { + let component: NewContactComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NewContactComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NewContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/contacts/components/new-contact/new-contact.component.ts b/src/app/contacts/components/new-contact/new-contact.component.ts new file mode 100644 index 0000000..2e4cd6f --- /dev/null +++ b/src/app/contacts/components/new-contact/new-contact.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { Contact } from '../../../model/contact'; +import { ContactService} from '../../../services/contact.service'; + +@Component({ + selector: 'app-new-contact', + templateUrl: './new-contact.component.html', + styleUrls: ['./new-contact.component.css'] +}) +export class NewContactComponent implements OnInit { + contact: Contact; + submitted = false; + constructor( + private contactService: ContactService + ) { } + + ngOnInit() { + this.contact = new Contact(); + } + + onSubmit() { + console.log(this); + this.contactService.addContact(this.contact) + .subscribe(() => this.submitted = true); + } + get diagnostic() { + return JSON.stringify(this.contact); + } + + newContact() { + this.contact = new Contact(); + } + + +} diff --git a/src/app/model/adress.ts b/src/app/model/adress.ts new file mode 100644 index 0000000..add9cdf --- /dev/null +++ b/src/app/model/adress.ts @@ -0,0 +1,12 @@ +export class Adress { + public lineOne: string; + public lineTwo: string; + public city: string; + public country: string; + public zipCode: number; + public state?: string; + + constructor() { + + } +} diff --git a/src/app/model/contact.ts b/src/app/model/contact.ts new file mode 100644 index 0000000..552b34b --- /dev/null +++ b/src/app/model/contact.ts @@ -0,0 +1,19 @@ +import { Adress } from '../model/adress'; + +export class Contact { + + public firstName: string; + public lastName: string; + public address: Adress; + public email: string; + public phone: string; + public bio?: string; + public gender?: string; + public created_at?: any; + + + constructor() { + this.address = new Adress(); + } + +} diff --git a/src/app/profile/profile.component.css b/src/app/profile/profile.component.css index e69de29..6a2ec59 100644 --- a/src/app/profile/profile.component.css +++ b/src/app/profile/profile.component.css @@ -0,0 +1,70 @@ + + .bloc-shadow{ + box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); + padding: 50px; + border-radius: 6px; + } + .big-title{ + font-family: AkkuratBold; + font-size: 44px; + color: #212121; + } + .small-title{ + font-family: AkkuratBold; + font-size: 32px; + color: #212121; + } + + +.about-me-section-profile{ + margin-top: 5%; + margin-left: 8%; +} +.my-profile-box{ + background-color: white; + position: relative; + margin-top: 4%; + padding: 5% 15%; + width: 100%; + margin-left: auto; + margin-right: auto; + min-width: 728px; +} +.profile-picture{ + width: 181px; + height: 181px; + border-radius:50%; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + /*position: absolute;*/ +} +.edit-profile-summary{ + position: absolute; + top: 95px; + left: 275px; + right: 43px; +} + +.about-me-section-profile{ + margin-top: 5%; + margin-left: 8%; +} +.bloc-title-profile{ + margin-bottom: 35px; +} +.one-info-profile{ + margin-top: 2px; + margin-bottom: 20px; + font-size: 16px; +} +.light-grey-label{ + color: #AEBAC4; +} +.small-bold-label{ + font-family: AkkuratBold; + font-size: 13px; +} +.grey-label{ + color: #9D9D9D; +} \ No newline at end of file diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html index 441e7ad..53703b4 100644 --- a/src/app/profile/profile.component.html +++ b/src/app/profile/profile.component.html @@ -1,14 +1,42 @@
-

Hi

-

Update your profile settings

+

Update your profile settings

-

- TODO: Here you need to integrate in a elegant design your github profile, you can use the github api or try to copy/past - your info here!! -

-
+
+ {{user.name}} +
+
{{user.name}}
+
+
+
+ About me +
+
Location:
+

{{user.location}}

+
+

     + {{user.login}} +

+

     + {{user.email}} +

+

     + {{user.blog}} +

+

     + {{user.repos_url}} +

+

     + {{user.repos_url}} +

+
+
+
+ {{user.created_at | date : 'fullDate'}} +
+
+ diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts index a747936..d61bcc5 100644 --- a/src/app/profile/profile.component.ts +++ b/src/app/profile/profile.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import 'rxjs/add/operator/map'; +import { GithubService } from '../services/github.service'; @Component({ selector: 'app-profile', @@ -6,10 +8,15 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./profile.component.css'] }) export class ProfileComponent implements OnInit { - - constructor() { } + user: any; + repos: any; + constructor(private _githubService: GithubService) { + } ngOnInit() { + this._githubService.getUser().subscribe(user => { + this.user = user; + }); } } 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..76ebc85 --- /dev/null +++ b/src/app/services/contact.service.ts @@ -0,0 +1,103 @@ +import { Injectable } from '@angular/core'; +import { Contact } from '../model/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 { + + contacts: Contact[]; + favoriteContacts: Contact[]; + private contactsUrl = 'https://mini-crm-api.herokuapp.com/api/v1/contacts'; // URL to web api + + constructor( + private http: HttpClient) { + this.contacts = []; + this.favoriteContacts = []; + } + + + getContact(id: string): Observable { + const url = `${this.contactsUrl}/${id}`; + return this.http.get(url).pipe( + tap(data => { + this.contacts = data['contacts']; + this.contacts.filter(c => !this.favoriteContacts.includes(c)); + }), + catchError(this.handleError(`getContact id=${id}`)) + ); + } + + + getfavoriteContacts(): Observable { + return of(this.favoriteContacts); + } + + getContacts(): Observable { + console.log(this.contactsUrl); + return this.http.get(this.contactsUrl).pipe( + catchError(this.handleError('getContacts', [])) + ); + } + + addContact (contact: Contact): Observable { + return this.http.post(this.contactsUrl, contact, httpOptions).pipe( + tap(_ => this.log(` contact name =${contact.firstName}`)), + catchError(this.handleError('create contact')) + ); + } + + updateContact (contact: Contact): Observable { + const url = `${this.contactsUrl}/`; + return this.http.put(url, contact, httpOptions).pipe( + tap(_ => this.log(`updated Contact id=${contact.firstName} ${contact.lastName}`)), + catchError(this.handleError('updateContact')) + ); + } + + deleteContact (contact: Contact): Observable { + const id = contact['_id']; + const url = `${this.contactsUrl}/${id}`; + console.log(url); + return this.http.delete(url, httpOptions).pipe( + tap(_ => this.log(`deleted contact id = ${id}`)), + catchError(this.handleError('deleteContact')) + ); + } + + addToFavorite(contact: Contact) { + this.favoriteContacts.push(contact); + this.log('added to favorites'); + } + + + removeFromFavorite(contact: Contact) { + const i = this.favoriteContacts.indexOf(contact); + this.favoriteContacts.splice(i, 1); + this.log('added to favorites'); + } + + + 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); } +} diff --git a/src/app/services/github.service.spec.ts b/src/app/services/github.service.spec.ts new file mode 100644 index 0000000..2668b92 --- /dev/null +++ b/src/app/services/github.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { GithubService } from './github.service'; + +describe('GithubService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [GithubService] + }); + }); + + it('should be created', inject([GithubService], (service: GithubService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/services/github.service.ts b/src/app/services/github.service.ts new file mode 100644 index 0000000..f385c07 --- /dev/null +++ b/src/app/services/github.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; +import { Http, Headers } from '@angular/http'; +import 'rxjs/add/operator/map'; + +@Injectable() +export class GithubService { + private username: string; + private client_id = '7a2cc1dbb590d7d96d79'; + private client_secret = '3479077532071c6ca40327135806f09266052991'; + constructor(private _http: Http) { + this.username = 'Lazhari'; + } + + getUser() { + return this._http.get(`http://api.github.com/users/${this.username}?client_id=${this.client_id}&client_secret=${this.client_secret}`) + .map(res => res.json()); + } + getRepos() { + return this._http.get(`http://api.github.com/users/${this.username}/repos?client_id=${this.client_id}&client_secret=${this.client_secret}&sort=created`) + .map(res => res.json()); + } + + updateUser(username: string) { + this.username = username; + } + + +}