diff --git a/src/app/Contact.ts b/src/app/Contact.ts new file mode 100644 index 00000000..224d278d --- /dev/null +++ b/src/app/Contact.ts @@ -0,0 +1,6 @@ +export class Contact { + id: number = 0 + firstName: string = '' + lastName: string = '' + phoneNumber: string = '' +} \ No newline at end of file diff --git a/src/app/add-contact/add-contact.component.css b/src/app/add-contact/add-contact.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/add-contact/add-contact.component.html b/src/app/add-contact/add-contact.component.html new file mode 100644 index 00000000..afcd21f7 --- /dev/null +++ b/src/app/add-contact/add-contact.component.html @@ -0,0 +1,40 @@ + +

Add Contact

+ + + First Name: + + + + FirstName is required + + + + + + Last Name: + + + + LastName is required + + + + + + Phone Number: + + + + Phone is required + + + + +
+ Save + Cancel + Back to List +
+   + \ No newline at end of file diff --git a/src/app/add-contact/add-contact.component.spec.ts b/src/app/add-contact/add-contact.component.spec.ts new file mode 100644 index 00000000..716aad06 --- /dev/null +++ b/src/app/add-contact/add-contact.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddContactComponent } from './add-contact.component'; + +describe('AddContactComponent', () => { + let component: AddContactComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddContactComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/add-contact/add-contact.component.ts b/src/app/add-contact/add-contact.component.ts new file mode 100644 index 00000000..1cb6755e --- /dev/null +++ b/src/app/add-contact/add-contact.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { ContactService } from '../contact.service'; + +@Component({ + selector: 'app-add-contact', + templateUrl: './add-contact.component.html', + styleUrls: ['./add-contact.component.css'] +}) +export class AddContactComponent implements OnInit { + + addContactForm: FormGroup + submitted: boolean = false + + constructor(private formBuilder: FormBuilder, private router: Router, private contactService: ContactService) { } + + ngOnInit() { +    this.addContactForm = this.formBuilder.group({ + id: [], + firstName: ['', Validators.required], + lastName: ['', Validators.required], + phoneNumber: ['', Validators.required] + }); + } + + onSubmit() { + this.submitted = true + if (this.addContactForm.invalid) { + return + } + this.contactService.createContact(this.addContactForm.value).subscribe(data => { + this.router.navigate(['list-user']) + }) +  } + +} + diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 00000000..d33c298e --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { AddContactComponent } from './add-contact/add-contact.component'; +import { EditContactComponent } from './edit-contact/edit-contact.component'; +import { HomeComponent } from './home/home.component'; + +const routes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'home', component: HomeComponent }, + { path: 'addContact', component: AddContactComponent }, + { path: 'editContact', component: EditContactComponent }, + { path: '**', component: HomeComponent }, +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/src/app/app.component.css b/src/app/app.component.css new file mode 100644 index 00000000..877a1de8 --- /dev/null +++ b/src/app/app.component.css @@ -0,0 +1,3 @@ +.phoneBook { + background-color: rgb(184, 148, 148); +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 00000000..33e82cd3 --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,16 @@ + + + + + + + + + +lass="col-md-7 col-lg-7 mx-auto p-3 mx-auto phoneBook"> +

+ Phone Book App +

+ + + \ No newline at end of file diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts new file mode 100644 index 00000000..55443b66 --- /dev/null +++ b/src/app/app.component.spec.ts @@ -0,0 +1,35 @@ +import { TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ + RouterTestingModule + ], + declarations: [ + AppComponent + ], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'PhoneBook-Angular'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('PhoneBook-Angular'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('PhoneBook-Angular app is running!'); + }); +}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100644 index 00000000..1c367ae6 --- /dev/null +++ b/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + title = 'PhoneBook-Angular'; +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100644 index 00000000..3bc91182 --- /dev/null +++ b/src/app/app.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { HomeComponent } from './home/home.component'; +import { AddContactComponent } from './add-contact/add-contact.component'; +import { HttpClientModule } from '@angular/common/http'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { EditContactComponent } from './edit-contact/edit-contact.component'; +import { Ng2SearchPipeModule } from 'ng2-search-filter'; + +@NgModule({ + declarations: [ + AppComponent, + HomeComponent, + AddContactComponent, + EditContactComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + HttpClientModule, + FormsModule, + ReactiveFormsModule, + Ng2SearchPipeModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/src/app/contact.service.spec.ts b/src/app/contact.service.spec.ts new file mode 100644 index 00000000..ec9336d7 --- /dev/null +++ b/src/app/contact.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ContactService } from './contact.service'; + +describe('ContactService', () => { + let service: ContactService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ContactService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/contact.service.ts b/src/app/contact.service.ts new file mode 100644 index 00000000..8ad0bfb3 --- /dev/null +++ b/src/app/contact.service.ts @@ -0,0 +1,43 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Contact } from './Contact'; + +@Injectable({ + providedIn: 'root' +}) +export class ContactService { + + constructor(private http: HttpClient) { } + + baseUrl: string = 'http://localhost:3000/contacts' + + // get all contact + getContacts() { + return this.http.get(this.baseUrl) + } + + // get contact by id + getContactById(id: number) { + return this.http.get(this.baseUrl + '/' + id) + } + + // get contact by last name + getContactByLastName(lastName: string) { + return this.http.get(this.baseUrl + '/' + lastName) + } + + // create contact + createContact(contact: Contact) { + return this.http.post(this.baseUrl, contact) + } + + // modify contact + updateContact(contact: Contact) { + return this.http.put(this.baseUrl + '/' + contact.id, contact) + } + + // delete contact + deleteContact(id: number) { + return this.http.delete(this.baseUrl + '/' + id) + } +} diff --git a/src/app/edit-contact/edit-contact.component.css b/src/app/edit-contact/edit-contact.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/edit-contact/edit-contact.component.html b/src/app/edit-contact/edit-contact.component.html new file mode 100644 index 00000000..d80049de --- /dev/null +++ b/src/app/edit-contact/edit-contact.component.html @@ -0,0 +1,39 @@ +
+

Edit Contact

+
+
+ + +
+
+ FirstName is required +
+
+
+ +
+ + +
+
+ LastName is required +
+
+
+ + + Phone Number: + + + + Phone is required +
+ + + +
+ + Cancel +
+ + diff --git a/src/app/edit-contact/edit-contact.component.spec.ts b/src/app/edit-contact/edit-contact.component.spec.ts new file mode 100644 index 00000000..2a7551a9 --- /dev/null +++ b/src/app/edit-contact/edit-contact.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from + '@angular/core/testing'; + +import { EditContactComponent } from +'./edit-contact.component'; + +describe('EditContactComponent', () => { + let component: EditContactComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EditContactComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EditContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/edit-contact/edit-contact.component.ts b/src/app/edit-contact/edit-contact.component.ts new file mode 100644 index 00000000..db83e85c --- /dev/null +++ b/src/app/edit-contact/edit-contact.component.ts @@ -0,0 +1,54 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { Contact } from '../Contact'; +import { ContactService } from '../contact.service'; +import { first } from 'rxjs/operators'; + +@Component({ + selector: 'app-edit-contact', + templateUrl: './edit-contact.component.html', + styleUrls: ['./edit-contact.component.css'] +}) +export class EditContactComponent implements OnInit { + + contact: Contact + editContactForm: FormGroup + submitted: boolean = false + + constructor(private formBuilder: FormBuilder, private router: Router, private contactService: ContactService) { } + + ngOnInit() { + let contactId = localStorage.getItem("editContactId") + if (!contactId) { + alert("Invalid action.") + this.router.navigate(['/']) + return + } + this.editContactForm = this.formBuilder.group({ + id: [], + phoneNumber: ['', Validators.required], + firstName: ['', Validators.required], + lastName: ['', Validators.required] + }) + this.contactService.getContactById(+contactId) + .subscribe(data => { + this.editContactForm.setValue(data) + }) + } + + onSubmit() { + this.submitted = true + if (this.editContactForm.invalid) { + return + } + //returns the first value they receive from the source and closes the observable + this.contactService.updateContact(this.editContactForm.value) + .pipe(first()).subscribe(data => { + this.router.navigate(['/']) + }, error => { + alert(error); + }); + } + +} diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css new file mode 100644 index 00000000..7b730c45 --- /dev/null +++ b/src/app/home/home.component.css @@ -0,0 +1,3 @@ +p { + font-size: 0.85rem; +} \ No newline at end of file diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 00000000..edae7e08 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,40 @@ +
+
+
Contacts
+ + Add Contact + +
+
+
+ + + +
+ + +
+
+
    +
  • +
    +
    + {{contact.firstName | titlecase}} {{contact.lastName | titleCase}} +
    +

    + {{contact.phoneNumber}} +

    +
    +
    + + + + + + +
    +
    • +
+
+
+ diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 00000000..5075be73 --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 00000000..da0b13f4 --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { Contact } from '../Contact'; +import { ContactService } from '../contact.service'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent implements OnInit { + + contactList: Contact[] = []; + + constructor(private router: Router, private contactService: ContactService) { } + + test: string = '' + + ngOnInit() { + this.contactService.getContacts().subscribe(data => { + this.contactList = data.sort((a, b) => { + return a.firstName.toLowerCase() > b.firstName.toLowerCase() ? 1 : -1 + }) + }) + } + + // Add New Contact + addContact(): void { + this.router.navigate(['addContact']) + } + + // Modify Contact + editContact(contact: Contact): void { + localStorage.removeItem("editContactId") + localStorage.setItem("editContactId", contact.id.toString()) + this.router.navigate(['editContact']) + } + + // Delete Contact + deleteContact(contact: Contact): void { + this.contactService.deleteContact(contact.id).subscribe(data => { + this.contactList = this.contactList.filter(c => c!== contact) + }) + } + +} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 00000000..f56ff470 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 00000000..997406ad Binary files /dev/null and b/src/favicon.ico differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 00000000..0248e3f2 --- /dev/null +++ b/src/index.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + PhoneBook + + + + + + + + + + + + + + + + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 00000000..c7b673cf --- /dev/null +++ b/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/src/polyfills.ts b/src/polyfills.ts new file mode 100644 index 00000000..429bb9ef --- /dev/null +++ b/src/polyfills.ts @@ -0,0 +1,53 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes recent versions of Safari, Chrome (including + * Opera), Edge on the desktop, and iOS and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + * because those flags need to be set before `zone.js` being loaded, and webpack + * will put import in the top of bundle, so user need to create a separate file + * in this directory (for example: zone-flags.ts), and put the following flags + * into that file, and then add the following code before importing zone.js. + * import './zone-flags'; + * + * The flags allowed in zone-flags.ts are listed here. + * + * The following flags will work for all browsers. + * + * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + * + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + * + * (window as any).__Zone_enable_cross_context_check = true; + * + */ + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 00000000..90d4ee00 --- /dev/null +++ b/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/src/test.ts b/src/test.ts new file mode 100644 index 00000000..c04c8760 --- /dev/null +++ b/src/test.ts @@ -0,0 +1,26 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + (id: string): T; + keys(): string[]; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), +); + +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().forEach(context);