Skip to content
This repository was archived by the owner on Aug 16, 2022. It is now read-only.

Commit 18ddf4c

Browse files
ElecTreeFryingElecTreeFrying
committed
add: firestore
1 parent cf07416 commit 18ddf4c

18 files changed

+705
-21
lines changed

‎src/app/firestore/component/create/create.component.html

+49-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,49 @@
1-
<p>
2-
create works!
3-
</p>
1+
<div id="wrapper">
2+
<div>
3+
<h2>Create</h2>
4+
<div class="divider">
5+
<mat-divider></mat-divider>
6+
</div>
7+
8+
<div id="content">
9+
10+
<div>
11+
<form [formGroup]="form">
12+
13+
<mat-form-field color="accent" appearance="outline">
14+
<mat-label>Username</mat-label>
15+
<input matInput autocomplete="off" type="text" formControlName="username">
16+
<mat-error *ngIf="form.get('username')?.errors?.required">This is required.</mat-error>
17+
</mat-form-field>
18+
<br>
19+
<mat-form-field color="accent" appearance="outline">
20+
<mat-label>Password</mat-label>
21+
<input matInput autocomplete="off" type="text" formControlName="password">
22+
<mat-error *ngIf="form.get('password')?.errors?.required">This is required.</mat-error>
23+
</mat-form-field>
24+
<br>
25+
<mat-form-field color="accent" appearance="outline">
26+
<mat-label>Favaorite number</mat-label>
27+
<input matInput autocomplete="off" type="number" formControlName="number">
28+
<mat-error *ngIf="form.get('number')?.errors?.required">This is required.</mat-error>
29+
</mat-form-field>
30+
<br>
31+
<button mat-raised-button color="accent" type="button" (click)="firestore()">PUSH DOCUMENT TO COLLECTION USING ( ADD )</button>
32+
</form>
33+
</div>
34+
35+
<div>
36+
<h4>Cloud firestore database snapshot</h4>
37+
<br><br>
38+
<mat-card *ngFor="let item of list | async">
39+
<mat-card-content>
40+
<p><strong>Username:</strong> {{ item?.username }}</p>
41+
<p><strong>Password:</strong> {{ item?.password }}</p>
42+
<p><strong>Favaorite number:</strong> {{ item?.number }}</p>
43+
</mat-card-content>
44+
</mat-card>
45+
</div>
46+
47+
</div>
48+
</div>
49+
</div>

‎src/app/firestore/component/create/create.component.scss

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
#wrapper {
2+
3+
margin-bottom: 7vh;
4+
margin-top: -10px;
5+
6+
.divider {
7+
width: 80%;
8+
margin-bottom: 3vh;
9+
}
10+
11+
.mat-raised-button,
12+
.mat-form-field {
13+
width: 350px;
14+
}
15+
16+
> div:last-child {
17+
18+
#content {
19+
display: flex;
20+
21+
> div:First-child {
22+
flex: 1 1 30%;
23+
}
24+
25+
> div:last-child {
26+
flex: 1 1 70%;
27+
padding-left: 2vw;
28+
29+
.mat-card {
30+
width: 350px;
31+
margin-bottom: 2vh;
32+
}
33+
}
34+
}
35+
}
36+
37+
}

‎src/app/firestore/component/create/create.component.ts

+29-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, Inject } from '@angular/core';
2+
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3+
import { Observable } from 'rxjs/Observable';
4+
5+
import { CreateService } from './create.service';
26

37
@Component({
48
selector: 'app-create',
@@ -7,9 +11,32 @@ import { Component, OnInit } from '@angular/core';
711
})
812
export class CreateComponent implements OnInit {
913

10-
constructor() { }
14+
form: FormGroup;
15+
16+
list: Observable<any[]>;
17+
18+
constructor(
19+
@Inject(FormBuilder) public fb: FormBuilder,
20+
private create: CreateService,
21+
) {
22+
this.form = fb.group({
23+
'username': [ '', [ Validators.required ] ],
24+
'password': [ '', [ Validators.required ] ],
25+
'number': [ '', [ Validators.required ] ],
26+
});
27+
}
1128

1229
ngOnInit() {
30+
this.list = this.create.refValueChanges;
31+
}
32+
33+
firestore() {
34+
if (this.form.invalid) return;
35+
36+
const form = this.form.value;
37+
38+
this.create.addDocument = form;
39+
1340
}
1441

1542
}

‎src/app/firestore/component/create/create.service.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Injectable } from '@angular/core';
2+
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
3+
import { map } from 'rxjs/operators'
4+
5+
@Injectable({
6+
providedIn: 'root'
7+
})
8+
export class CreateService {
9+
10+
private ref: AngularFirestoreCollection<any>;
11+
12+
constructor(private db: AngularFirestore) {
13+
this.ref = db.collection<any>('firestore-create');
14+
}
15+
16+
set addDocument(doc: any) {
17+
18+
this.ref.add(doc);
19+
20+
}
21+
22+
23+
24+
25+
/*
26+
HELPER FUNCTIONS
27+
*/
28+
get refValueChanges() { return this.ref.valueChanges(); }
29+
30+
}

‎src/app/firestore/component/delete/delete.component.html

+53-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,53 @@
1-
<p>
2-
delete works!
3-
</p>
1+
<div id="wrapper">
2+
<div>
3+
<h2>Delete</h2>
4+
<div class="divider">
5+
<mat-divider></mat-divider>
6+
</div>
7+
8+
<div id="content">
9+
10+
<div>
11+
<form [formGroup]="form">
12+
13+
<mat-form-field color="accent" appearance="outline">
14+
<mat-label>Username</mat-label>
15+
<input matInput autocomplete="off" type="text" formControlName="username">
16+
<mat-error *ngIf="form.get('username')?.errors?.required">This is required.</mat-error>
17+
</mat-form-field>
18+
<br>
19+
<mat-form-field color="accent" appearance="outline">
20+
<mat-label>Password</mat-label>
21+
<input matInput autocomplete="off" type="text" formControlName="password">
22+
<mat-error *ngIf="form.get('password')?.errors?.required">This is required.</mat-error>
23+
</mat-form-field>
24+
<br>
25+
<mat-form-field color="accent" appearance="outline">
26+
<mat-label>Favaorite number</mat-label>
27+
<input matInput autocomplete="off" type="number" formControlName="number">
28+
<mat-error *ngIf="form.get('number')?.errors?.required">This is required.</mat-error>
29+
</mat-form-field>
30+
31+
<br>
32+
<button mat-raised-button color="accent" type="button" (click)="deleteList(true)">DELETE DOCUMENT</button>
33+
<br><br>
34+
<button mat-raised-button color="accent" type="button" (click)="deleteList(false)">DELETE ENTIRE COLLECTION</button>
35+
</form>
36+
</div>
37+
38+
<div>
39+
<h4>Cloud firestore database snapshot</h4>
40+
<br><br>
41+
<mat-card *ngFor="let item of list | async">
42+
<mat-card-content>
43+
<mat-checkbox (click)="onCardSelect(item.pushID, item)" [checked]="item.pushID === pushID"></mat-checkbox>
44+
<p><strong>Username:</strong> {{ item?.username }}</p>
45+
<p><strong>Password:</strong> {{ item?.password }}</p>
46+
<p><strong>Favaorite number:</strong> {{ item?.number }}</p>
47+
</mat-card-content>
48+
</mat-card>
49+
</div>
50+
51+
</div>
52+
</div>
53+
</div>

‎src/app/firestore/component/delete/delete.component.scss

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#wrapper {
2+
3+
margin-bottom: 7vh;
4+
margin-top: -10px;
5+
6+
.divider {
7+
width: 80%;
8+
margin-bottom: 3vh;
9+
}
10+
11+
.mat-raised-button,
12+
.mat-form-field {
13+
width: 350px;
14+
}
15+
16+
> div:last-child {
17+
18+
#content {
19+
display: flex;
20+
21+
> div:First-child {
22+
flex: 1 1 30%;
23+
}
24+
25+
> div:last-child {
26+
flex: 1 1 70%;
27+
padding-left: 2vw;
28+
29+
.mat-card {
30+
width: 350px;
31+
margin-bottom: 2vh;
32+
33+
.mat-checkbox {
34+
float: right;
35+
}
36+
}
37+
}
38+
}
39+
}
40+
41+
}

‎src/app/firestore/component/delete/delete.component.ts

+45-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, Inject } from '@angular/core';
2+
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3+
import { Observable } from 'rxjs/Observable';
4+
5+
import { DeleteService } from './delete.service';
26

37
@Component({
48
selector: 'app-delete',
@@ -7,9 +11,48 @@ import { Component, OnInit } from '@angular/core';
711
})
812
export class DeleteComponent implements OnInit {
913

10-
constructor() { }
14+
form: FormGroup;
15+
16+
list: Observable<any[]>;
17+
18+
pushID: string = '';
19+
20+
constructor(
21+
@Inject(FormBuilder) public fb: FormBuilder,
22+
private _delete: DeleteService,
23+
) {
24+
this.form = fb.group({
25+
'username': [ '', [ Validators.required ] ],
26+
'password': [ '', [ Validators.required ] ],
27+
'number': [ '', [ Validators.required ] ],
28+
});
29+
30+
this.form.disable();
31+
}
1132

1233
ngOnInit() {
34+
this._delete.setInit();
35+
this.list = this._delete.refSnapshotChanges;
36+
}
37+
38+
onCardSelect(pushID: string, item: any) {
39+
this.pushID = pushID;
40+
41+
this.form.patchValue({
42+
'username': item.username,
43+
'password': item.password,
44+
'number': item.number,
45+
});
46+
}
47+
48+
deleteList(option: boolean) {
49+
if (this.form.invalid) return;
50+
51+
option
52+
? this._delete.removeDocument = this.pushID
53+
: this._delete.removeEntireCollection();
54+
55+
this.form.reset();
1356
}
1457

1558
}

‎src/app/firestore/component/delete/delete.service.ts

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Injectable } from '@angular/core';
2+
import { AngularFirestore, AngularFirestoreCollection, DocumentChangeAction } from 'angularfire2/firestore';
3+
import { map } from 'rxjs/operators'
4+
5+
@Injectable({
6+
providedIn: 'root'
7+
})
8+
export class DeleteService {
9+
10+
private ref: AngularFirestoreCollection<any>;
11+
12+
counter: number = 0;
13+
14+
constructor(private db: AngularFirestore) {
15+
this.ref = db.collection<any>('firestore-delete');
16+
}
17+
18+
removeEntireCollection() {
19+
20+
this.counter = 0;
21+
const ref = this.ref.snapshotChanges().pipe(
22+
23+
map((values: DocumentChangeAction<any>[]) => {
24+
if (this.counter !== 0) ref.unsubscribe();
25+
this.counter++;
26+
27+
return values.map((value: DocumentChangeAction<any>) => {
28+
29+
const doc = value.payload.doc;
30+
31+
doc.ref.delete();
32+
33+
return doc.data();
34+
});
35+
})
36+
).subscribe(() => { });
37+
38+
}
39+
40+
set removeDocument(key: string) {
41+
42+
this.counter = 0;
43+
const ref = this.ref.snapshotChanges().pipe(
44+
45+
map((values: DocumentChangeAction<any>[]) => {
46+
if (this.counter !== 0) ref.unsubscribe();
47+
48+
return values.map((value: DocumentChangeAction<any>) => {
49+
const doc = value.payload.doc;
50+
51+
if (doc.id === key) {
52+
doc.ref.delete();
53+
this.counter++;
54+
}
55+
56+
return doc.data();
57+
});
58+
})
59+
).subscribe(() => { });
60+
61+
}
62+
63+
64+
65+
66+
/*
67+
HELPER FUNCTIONS
68+
*/
69+
get refSnapshotChanges() { return this.ref.snapshotChanges().pipe( map((values: any[]) => { return values.map((value) => { const doc = value.payload.doc; return { pushID: doc.id, ...doc.data() }; }); }) ) } setInit() { this.counter = 0; const ref = this.ref.snapshotChanges().pipe( map((values: DocumentChangeAction<any>[]) => { if (this.counter !== 0) ref.unsubscribe(); this.counter++; return values.map((value: DocumentChangeAction<any>) => { const doc = value.payload.doc; doc.ref.delete(); return doc.data(); }); }) ).subscribe(() => { }); setTimeout(() => { this.ref.add({ username: 'Madara', password: 77777, number: 60 }); this.ref.add({ username: 'Obito', password: 88888, number: 20 }); this.ref.add({ username: 'ChibakuTensei', password: 99999, number: 99 }); }, 1500); }
70+
71+
}

0 commit comments

Comments
 (0)