8000 Features Completed · msgadi/angularfirebase@d45a483 · GitHub
[go: up one dir, main page]
Skip to content

Commit d45a483

Browse files
author
mohammed.gadi
committed
Features Completed
1 parent eac9306 commit d45a483

14 files changed

+462
-12
lines changed

‎src/app/app.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { AppComponent } from './app.component';
99
import { AvatarDialogComponent } from './avatar-dialog/avatar-dialog.component';
1010
import { EditUserComponent } from './edit-user/edit-user.component';
1111
import { NewUserComponent } from './new-user/new-user.component';
12-
import { HomeComponent } from './home/home.component';
12+
import { HomeComponent } from './home/home.component';
1313
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
1414
import {
1515
MatButtonModule,
@@ -27,6 +27,7 @@ import { AppRoutingModule } from './app-routing.module';
2727
NewUserComponent,
2828
HomeComponent
2929
],
30+
entryComponents: [AvatarDialogComponent],
3031
imports: [
3132
BrowserModule,
3233
FormsModule,

‎src/app/avatar-dialog/avatar-dialog.component.css

Whitespace-only changes.

‎src/app/avatar-dialog/avatar-dialog.component.html

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
1-
<p>avatar-dialog works!</p>
1+
<div>
2+
<div class="row">
3+
<div class="col-md-12">
4+
<h5>Select Avatar</h5>
5+
</div>
6+
</div>
7+
<div class="d-flex align-content-center flex-wrap">
8+
<div *ngFor="let avatar of avatars">
9+
<img class="img-thumbnail" [src]="avatar.link" (click)="close(avatar)" />
10+
</div>
11+
</div>
12+
</div>

‎src/app/avatar-dialog/avatar-dialog.component.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.img-thumbnail {
2+
width: 100px;
3+
height: 100px;
4+
margin: 4px;
5+
}

‎src/app/avatar-dialog/avatar-dialog.component.ts

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,34 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { MatDialogRef } from '@angular/material';
3+
import { FirebaseService } from '../services/firebase.service';
24

35
@Component({
46
selector: 'app-avatar-dialog',
57
templateUrl: './avatar-dialog.component.html',
6-
styleUrls: ['./avatar-dialog.component.css']
8+
styleUrls: ['./avatar-dialog.component.scss']
79
})
810
export class AvatarDialogComponent implements OnInit {
911

10-
constructor() { }
12+
avatars: Array<any> = new Array<any>();
13+
14+
constructor(
15+
public dialogRef: MatDialogRef<AvatarDialogComponent>,
16+
public firebaseService: FirebaseService
17+
) { }
18+
1119

1220
ngOnInit() {
21+
this.getData();
22+
}
23+
24+
getData() {
25+
this.firebaseService.getAvatars()
26+
.subscribe(data => this.avatars = data);
27+
}
28+
29+
30+
close(avatar) {
31+
this.dialogRef.close(avatar);
1332
}
1433

1534
}

‎src/app/edit-user/edit-user.component.css

Whitespace-only changes.

‎src/app/edit-user/edit-user.component.html

Lines changed: 123 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,123 @@
1-
<p>edit-user works!</p>
1+
<div class="edit-page">
2+
<nav aria-label="breadcrumb">
3+
<ol class="breadcrumb">
4+
<li class="breadcrumb-item active" aria-current="page">Edit User</li>
5+
</ol>
6+
</nav>
7+
<div class="page-content">
8+
<div class="row">
9+
<div class="col col-md-4">
10+
<img class="img-avatar" [src]="item.avatar" />
11+
<button
12+
mat-stroked-button
13+
class="change-img-button"
14+
color="primary"
15+
(click)="openDialog()"
16+
>
17+
Change Avatar
18+
</button>
19+
</div>
20+
<div class="col col-md-8">
21+
<form
22+
class="edit-form"
23+
[formGroup]="exampleForm"
24+
novalidate
25+
(ngSubmit)="onSubmit(exampleForm.value)"
26+
>
27+
<div class="form-group">
28+
<mat-form-field class="input-style">
29+
<input
30+
matInput
31+
placeholder="Name"
32+
class="form-control"
33+
formControlName="name"
34+
/>
35+
</mat-form-field>
36+
<ng-container *ngFor="let validation of validation_messages.name">
37+
<mat-error
38+
*ngIf="
39+
exampleForm.get('name').hasError(validation.type) &&
40+
(exampleForm.get('name').dirty ||
41+
exampleForm.get('name').touched)
42+
"
43+
>{{ validation.message }}</mat-error
44+
>
45+
</ng-container>
46+
</div>
47+
48+
<div class="form-group">
49+
<mat-form-field class="input-style">
50+
<input
51+
matInput
52+
placeholder="Surname"
53+
class="form-control"
54+
formControlName="surname"
55+
/>
56+
</mat-form-field>
57+
<ng-container
58+
*ngFor="let validation of validation_messages.surname"
59+
>
60+
<mat-error
61+
*ngIf="
62+
exampleForm.get('surname').hasError(validation.type) &&
63+
(exampleForm.get('surname').dirty ||
64+
exampleForm.get('surname').touched)
65+
"
66+
>{{ validation.message }}</mat-error
67+
>
68+
</ng-container>
69+
</div>
70+
71+
<div class="form-group">
72+
<mat-form-field class="input-style">
73+
<input
74+
matInput
75+
type="number"
76+
min="0"
77+
max="100"
78+
placeholder="Age"
79+
class="form-control"
80+
formControlName="age"
81+
/>
82+
</mat-form-field>
83+
<ng-container *ngFor="let validation of validation_messages.age">
84+
<mat-error
85+
*ngIf="
86+
exampleForm.get('age').hasError(validation.type) &&
87+
(exampleForm.get('age').dirty ||
88+
exampleForm.get('age').touched)
89+
"
90+
>{{ validation.message }}</mat-error
91+
>
92+
</ng-container>
93+
</div>
94+
95+
<div class="row submit-button-container">
96+
<div class="col-md-4">
97+
<button
98+
mat-raised-button
99+
class="submit-button"
100+
color="primary"
101+
type="submit"
102+
[disabled]="!exampleForm.valid"
103+
>
104+
Save
105+
</button>
106+
</div>
107+
<div class="col-md-4">
108+
<button
109+
mat-raised-button
110+
class="delete-button"
111+
color="warn"
112+
type="button"
113+
(click)="delete()"
114+
>
115+
Delete
116+
</button>
117+
</div>
118+
</div>
119+
</form>
120+
</div>
121+
</div>
122+
</div>
123+
</div>

‎src/app/edit-user/edit-user.component.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.edit-page {
2+
3+
padding: 20px 60px;
4+
5+
.page-content {
6+
background-color: #FFF;
7+
8+
.img-avatar {
9+
border-radius: 50%;
10+
width: 150px;
11+
display: block;
12+
margin: 20px auto;
13+
}
14+
15+
.change-img-button {
16+
display: block;
17+
margin: 0px auto;
18+
}
19+
20+
.edit-form {
21+
padding: 20px;
22+
23+
24+
.submit-button-container {
25+
justify-content: flex-end;
26+
27+
.submit-button{
28+
width: 100%;
29+
}
30+
31+
.delete-button{
10000 32+
width: 100%;
33+
}
34+
}
35+
36+
.input-style{
37+
width: 100%;
38+
}
39+
40+
.mat-error {
41+
font-size: 12px;
42+
}
43+
}
44+
}
45+
}

‎src/app/edit-user/edit-user.component.ts

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,96 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { FirebaseService } from '../services/firebase.service';
3+
import { ActivatedRoute, Router } from '@angular/router';
4+
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
5+
import { MatDialog } from '@angular/material/dialog';
6+
import { AvatarDialogComponent } from '../avatar-dialog/avatar-dialog.component';
27

38
@Component({
49
selector: 'app-edit-user',
510
templateUrl: './edit-user.component.html',
6-
styleUrls: ['./edit-user.component.css']
11+
styleUrls: ['./edit-user.component.scss']
712
})
813
export class EditUserComponent implements OnInit {
914

10-
constructor() { }
15+
exampleForm: FormGroup;
16+
item: any;
17+
18+
validation_messages = {
19+
name: [
20+
{ type: 'required', message: 'Name is required.' }
21+
],
22+
surname: [
23+
{ type: 'required', message: 'Surname is required.' }
24+
],
25+
age: [
2 10000 6+
{ type: 'required', message: 'Age is required.' },
27+
]
28+
};
29+
30+
constructor(
31+
public firebaseService: FirebaseService,
32+
private route: ActivatedRoute,
33+
private fb: FormBuilder,
34+
private router: Router,
35+
public dialog: MatDialog
36+
) { }
1137

1238
ngOnInit() {
39+
this.route.data.subscribe(routeData => {
40+
const data = routeData.data;
41+
if (data) {
42+
this.item = data.payload.data();
43+
this.item.id = data.payload.id;
44+
this.createForm();
45+
}
46+
});
47+
}
48+
49+
createForm() {
50+
this.exampleForm = this.fb.group({
51+
name: [this.item.name, Validators.required],
52+
surname: [this.item.surname, Validators.required],
53+
age: [this.item.age, Validators.required]
54+
});
55+
}
56+
57+
openDialog() {
58+
const dialogRef = this.dialog.open(AvatarDialogComponent, {
59+
height: '400px',
60+
width: '400px'
61+
});
62+
63+
dialogRef.afterClosed().subscribe(result => {
64+
if (result) {
65+
this.item.avatar = result.link;
66+
}
67+
});
68+
}
69+
70+
onSubmit(value) {
71+
value.avatar = this.item.avatar;
72+
value.age = Number(value.age);
73+
this.firebaseService.updateUser(this.item.id, value)
74+
.then(
75+
res => {
76+
this.router.navigate(['/home']);
77+
}
78+
);
1379
}
1480

81+
delete() {
82+
this.firebaseService.deleteUser(this.item.id)
83+
.then(
84+
res => {
85+
this.router.navigate(['/home']);
86+
},
87+
err => {
88+
console.log(err);
89+
}
90+
);
91+
}
92+
93+
cancel() {
94+
this.router.navigate(['/home']);
95+
}
1596
}

‎src/app/home/home.component.css

Whitespace-only changes.

0 commit comments

Comments
 (0)
0