- - -
- - - Rocket Ship - - - - - - - - - - {{ title }} app is running! - - - Rocket Ship Smoke - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - Learn Angular - - - - - CLI Documentation - - - - - - Angular Material - - - - - - Angular Blog - - - - - - Angular DevTools - - - + + Phone Book + +
+ + +
+
+ + + +
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
- - - - - - - - - - - -
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build
-
- - -
- - - Meetup Logo - - - - - - - Discord Logo - - - - -
- - - - - - Gray Clouds Background - - -
- - - - - - - - - diff --git a/src/app/app.component.less b/src/app/app.component.less index e69de29..55d09ed 100644 --- a/src/app/app.component.less +++ b/src/app/app.component.less @@ -0,0 +1,39 @@ +mat-toolbar { + margin-bottom: 20px; + } + + mat-toolbar > span { + margin-left: 10px; + } + + .content-wrapper { + max-width: 1400px; + margin: auto; + } + + .container-wrapper { + display: flex; + justify-content: space-around; + } + + .container { + width: 100%; + margin: 0 25px 25px 0; + } + + .list { + border: solid 1px #ccc; + min-height: 60px; + border-radius: 4px; + } + + .new-record { + margin-bottom: 30px; + } + + .empty-label { + font-size: 2em; + padding-top: 10px; + text-align: center; + opacity: 0.2; + } \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ed7f3b5..f69757a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,7 @@ import { Component } from '@angular/core'; +import { Record } from './record/record'; +import { MatDialog } from '@angular/material/dialog'; +import { RecordDialogComponent, RecordDialogResult } from './record-dialog/record-dialog.component'; @Component({ selector: 'app-root', @@ -7,4 +10,57 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'PhoneBook'; + phoneBook: Record[] = [ + { + name: 'Erdélyi Áron', + phoneNumber: '+36707746229' + }, + { + name: 'Erdélyi Zsombor', + phoneNumber: '+36707746230' + } + ]; + + constructor(private dialog: MatDialog) {} + + newRecord() : void { + const dialogRef = this.dialog.open(RecordDialogComponent, { + width: '270px', + data: { + record: {}, + }, + }); + dialogRef + .afterClosed() + .subscribe((result: RecordDialogResult|undefined) => { + if (!result) { + return; + } + this.phoneBook.push(result.record); + }); + } + + editRecord(record: Record): void { + const dialogRef = this.dialog.open(RecordDialogComponent, { + width: '270px', + data: { + record: { + name: record.name, + phoneNumber: record.phoneNumber + } + }, + }); + dialogRef.afterClosed().subscribe((result: RecordDialogResult|undefined) => { + if (!result) { + return; + } + const index = this.phoneBook.indexOf(record); + this.phoneBook[index] = result.record; + }); + } + + deleteRecord(record: Record): void { + const index = this.phoneBook.indexOf(record); + this.phoneBook.splice(index, 1); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b1c6c96..170ed4a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,14 +3,37 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { MatToolbarModule } from '@angular/material/toolbar'; +import { RecordComponent } from './record/record.component'; +import { MatCardModule } from '@angular/material/card'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDialogModule } from '@angular/material/dialog'; +import { RecordDialogComponent } from './record-dialog/record-dialog.component'; +import { MatInputModule } from '@angular/material/input'; +import { FormsModule } from '@angular/forms'; +import { MatIconModule } from '@angular/material/icon'; +import { MatGridListModule } from '@angular/material/grid-list'; @NgModule({ declarations: [ - AppComponent + AppComponent, + RecordComponent, + RecordDialogComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + BrowserAnimationsModule, + MatToolbarModule, + MatCardModule, + MatButtonModule, + MatDialogModule, + MatInputModule, + FormsModule, + MatIconModule, + MatGridListModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/record-dialog/record-dialog.component.html b/src/app/record-dialog/record-dialog.component.html new file mode 100644 index 0000000..80625e3 --- /dev/null +++ b/src/app/record-dialog/record-dialog.component.html @@ -0,0 +1,14 @@ + + Name + + + + + Phone number + + + +
+ + +
diff --git a/src/app/record-dialog/record-dialog.component.less b/src/app/record-dialog/record-dialog.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/record-dialog/record-dialog.component.spec.ts b/src/app/record-dialog/record-dialog.component.spec.ts new file mode 100644 index 0000000..617210b --- /dev/null +++ b/src/app/record-dialog/record-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecordDialogComponent } from './record-dialog.component'; + +describe('RecordDialogComponent', () => { + let component: RecordDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RecordDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RecordDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/record-dialog/record-dialog.component.ts b/src/app/record-dialog/record-dialog.component.ts new file mode 100644 index 0000000..20e8966 --- /dev/null +++ b/src/app/record-dialog/record-dialog.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { Record } from '../record/record'; + +@Component({ + selector: 'app-record-dialog', + templateUrl: './record-dialog.component.html', + styleUrls: ['./record-dialog.component.less'] +}) +export class RecordDialogComponent implements OnInit { + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: RecordDialogData + ) {} + + ngOnInit(): void { + } + +} + +export interface RecordDialogData { + record: Partial; +} + +export interface RecordDialogResult { + record: Record; +} diff --git a/src/app/record/record.component.html b/src/app/record/record.component.html new file mode 100644 index 0000000..608f6d0 --- /dev/null +++ b/src/app/record/record.component.html @@ -0,0 +1,23 @@ + + + +

{{ record.name }}

+ + + + + + + + +

+ {{ record.phoneNumber }} +

+ + + + diff --git a/src/app/record/record.component.less b/src/app/record/record.component.less new file mode 100644 index 0000000..46ca5cb --- /dev/null +++ b/src/app/record/record.component.less @@ -0,0 +1,7 @@ +:host { + display: block; + } + + .item { + margin-bottom: 10px; + } \ No newline at end of file diff --git a/src/app/record/record.component.spec.ts b/src/app/record/record.component.spec.ts new file mode 100644 index 0000000..7953d49 --- /dev/null +++ b/src/app/record/record.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecordComponent } from './record.component'; + +describe('RecordComponent', () => { + let component: RecordComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RecordComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RecordComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/record/record.component.ts b/src/app/record/record.component.ts new file mode 100644 index 0000000..5bd0aa7 --- /dev/null +++ b/src/app/record/record.component.ts @@ -0,0 +1,19 @@ +import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; +import { Record } from './record'; + +@Component({ + selector: 'app-record', + templateUrl: './record.component.html', + styleUrls: ['./record.component.less'] +}) +export class RecordComponent implements OnInit { + @Input() record: Record | null = null; + @Output() edit = new EventEmitter(); + @Output() delete = new EventEmitter(); + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/record/record.ts b/src/app/record/record.ts new file mode 100644 index 0000000..ddae73f --- /dev/null +++ b/src/app/record/record.ts @@ -0,0 +1,5 @@ +export interface Record { + id?: string; + name: string; + phoneNumber: string; + } \ No newline at end of file diff --git a/src/index.html b/src/index.html index a3eb31d..0544220 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,11 @@ + + + - + diff --git a/src/styles.less b/src/styles.less index 90d4ee0..7e7239a 100644 --- a/src/styles.less +++ b/src/styles.less @@ -1 +1,4 @@ /* You can add global styles to this file, and also import other style files */ + +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }