set firebase CRUD

Yamamoto0525 · Jun 24, 2020 · 3a23de8 · 3a23de8
1 parent a7ef9df
commit 3a23de8
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 54 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -41,6 +41,20 @@
   font-size: 13px;
 }
 
+.page .card .media-body h4.media-heading .btn { /*追加*/
+  margin: 0 3px;
+}
+
+.page .card .media-body div.edit-buttons { /*追加*/
+  margin-top: 10px;
+  text-align: center;
+}
+
+.page .card .media-body div.edit-buttons .btn { /*追加*/
+  margin: 0 5px;
+  width: 100px;
+}
+
 .page .card .card-block {
   padding: 10px;
 }

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -4,41 +4,51 @@
       NgChat
     </div>
     <div class="card-body">
-      <ng-container *ngFor="let comment of comments">
-      <div class="media">
-        <div class="media-left" *ngIf="comment.user.uid !== currentUser.uid">
-          <a href="#" class="icon-rounded">{{comment.initial}}</a>
+      <ng-container *ngFor="let comment of comments | async"><!-- asyncを追加 -->
+        <div class="media">
+          <div class="media-left" *ngIf="comment.user.uid !== currentUser.uid">
+            <a href="#" class="icon-rounded">{{comment.initial}}</a>
+          </div>
+          <div class="media-body">
+            <h4 class="media-heading">
+              {{comment.user.name}} Date: {{comment.date | chatDate}}
+              <button class="btn btn-primary btn-sm" (click)="toggleEditComment(comment)">編集</button><!-- 追加 -->
+              <button class="btn btn-danger btn-sm" (click)="deleteComment(comment.key)">削除</button><!-- 追加 -->
+            </h4>
+            <!-- editFlagによって編集フィールドを切り替える -->
+            <ng-container *ngIf="!comment.editFlag">
+              {{comment.content}}
+            </ng-container>
+            <ng-container *ngIf="comment.editFlag">
+              <div class="input-group">
+                <input type="text" class="form-control"
+                       [(ngModel)]="comment.content"
+                       name="edit_comment">
+              </div>
+              <div class="edit-buttons">
+                <button class="btn btn-success btn-sm" (click)="saveEditComment(comment)">保存</button>
+                <button class="btn btn-warning btn-sm" (click)="resetEditComment(comment)">リセット</button>
+              </div>
+            </ng-container>
+            <!-- 切り替えここまで -->
+          </div>
+          <div class="media-right" *ngIf="comment.user.uid === currentUser.uid">
+            <a href="#" class="icon-rounded">{{comment.initial}}</a>
+          </div>
         </div>
-        <div class="media-body">
-          <h4 class="media-heading">{{comment.user.name}} Date: {{comment.date | chatDate}}</h4>
-          <div>{{comment.content}}</div>
-        </div>
-        <div class="media-right" *ngIf="comment.user.uid === currentUser.uid">
-          <a href="#" class="icon-rounded">{{comment.initial}}</a>
-        </div>
-      </div>
-      <hr>
+        <hr>
       </ng-container>
-      <!-- Firestoreの反映箇所 -->
-      <div class="media">
-        <div class="media-left">
-          <a href="#" class="icon-rounded">{{(item | async)?.initial}}</a>
-        </div>
-        <div class="media-body">
-          <h4 class="media-heading">{{(item | async)?.user.name}}</h4>
-          <div>{{(item | async)?.content}}</div>
-        </div>
-      </div>
+      <!-- この部分を削除 -->
     </div>
   </section>
 
   <section>
-    <form class="chart-form" (submit)="addComment(content)">
+    <form class="chart-form" (submit)="addComment($event, content)"><!-- $eventを追加 -->
       <div class="input-group">
         <input type="text" class="form-control"
                [(ngModel)]="content"
                name="comment"
-               placeholder="Comment" />
+               placeholder="Comment"/>
         <div class="input-group-append">
           <button class="btn btn-info" type="submit">SEND</button>
         </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,17 +1,14 @@
 import { Component } from '@angular/core';
 import { Comment, User } from './class/chat';
-import { AngularFirestore } from '@angular/fire/firestore'; // 追加
-import { Observable } from 'rxjs'; // 追加
+import { AngularFirestore } from '@angular/fire/firestore';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators'; // 追加
+
 
 const CURRENT_USER: User = new User(1, 'Tanaka Jiro');
 const ANOTHER_USER: User = new User(2, 'Suzuki Taro');
-const COMMENTS: Comment[] = [ // クラスを元にコメントを作成
-  new Comment(ANOTHER_USER, 'Suzukiの１つ目のコメントです。'),
-  new Comment(ANOTHER_USER, 'Suzukiの2つ目のコメントです。'),
-  new Comment(CURRENT_USER, 'Tanakaの１つ目のコメントです。'),
-  new Comment(ANOTHER_USER, 'Suzukiの3つ目のコメントです。'),
-  new Comment(CURRENT_USER, 'Tanakaの2つ目のコメントです。')
-];
+
+// COMMENTSを削除
 
 @Component({
   selector: 'app-root',
@@ -20,23 +17,73 @@ const COMMENTS: Comment[] = [ // クラスを元にコメントを作成
 })
 export class AppComponent {
 
-  item: Observable<Comment>; // 追加
+  // itemを削除
   public content = '';
-  public comments = COMMENTS;
+  public comments: Observable<Comment[]>; // 更新
   public currentUser = CURRENT_USER;
 
   // DI（依存性注入する機能を指定）
-  constructor(db: AngularFirestore) {
-    this.item = db
-      .collection('comments')
-      .doc<Comment>('item')
-      .valueChanges();
+  constructor(private db: AngularFirestore) {
+    this.comments = db // 更新
+      .collection<Comment>('comments', ref => {
+        return ref.orderBy('date', 'asc');
+      })
+      .snapshotChanges()
+      .pipe(
+        map(actions => actions.map(action => {
+          // 日付をセットしたコメントを返す
+          const data = action.payload.doc.data() as Comment;
+          const key = action.payload.doc.id; // 追加
+          const commentData = new Comment(data.user, data.content);
+          commentData.setData(data.date, key); // 更新
+          return commentData;
+        })));
+    console.log(this.comments);
   }
 
   // 新しいコメントを追加
-  addComment(comment: string) {
+  addComment(e: Event, comment: string) { // 更新
     if (comment) {
-      this.comments.push(new Comment(this.currentUser, comment));
+      this.db
+        .collection('comments')
+        .add(new Comment(this.currentUser, comment).deserialize()); // 更新
+      this.content = '';
     }
   }
+
+  // 編集フィールドの切り替え
+  toggleEditComment(comment: Comment) { // 追加
+    comment.editFlag = (!comment.editFlag);
+  }
+
+  // コメントを更新する
+  saveEditComment(comment: Comment) { // 追加
+    this.db
+      .collection('comments')
+      .doc(comment.key)
+      .update({
+        content: comment.content,
+        date: comment.date
+      })
+      .then(() => {
+        alert('コメントを更新しました');
+        comment.editFlag = false;
+      });
+  }
+
+  // コメントをリセットする
+  resetEditComment(comment: Comment) { // 追加
+    comment.content = '';
+  }
+
+  // コメントを削除する
+  deleteComment(key: string) { // 追加
+    this.db
+      .collection('comments')
+      .doc(key)
+      .delete()
+      .then(() => {
+        alert('コメントを削除しました');
+      });
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,10 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { environment } from '../environments/environment'; // 追加
-import { AngularFireModule } from '@angular/fire'; // 追加
-import { AngularFirestoreModule } from '@angular/fire/firestore'; // 追加
-import { AngularFireAuthModule } from '@angular/fire/auth'; // 追加
+import { environment } from '../environments/environment';
+import { AngularFireModule } from '@angular/fire';
+import { AngularFirestoreModule } from '@angular/fire/firestore';
+import { AngularFireAuthModule } from '@angular/fire/auth';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -21,11 +21,12 @@ import { ChatDatePipe } from './pipe/chat-date.pipe';
     AppRoutingModule,
     NgbModule,
     FormsModule,
-    AngularFireModule.initializeApp(environment.firebase), // 追加,
-    AngularFirestoreModule,  // 追加
-    AngularFireAuthModule,  // 追加
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFirestoreModule,
+    AngularFireAuthModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}
diff --git a/src/app/class/chat.ts b/src/app/class/chat.ts
@@ -1,4 +1,4 @@
-import * as moment from 'moment'; // 追加
+import * as moment from 'moment';
 
 export class User {
   uid: number;
@@ -8,18 +8,37 @@ export class User {
     this.uid = uid;
     this.name = name;
   }
+
+  deserialize() { // 追加
+    return Object.assign({}, this);
+  }
 }
 
 export class Comment {
   user: User;
   initial: string;
   content: string;
-  date: number; // 追加
+  date: number;
+  key?: string; // 追加
+  editFlag?: boolean; // 追加
 
   constructor(user: User, content: string) {
     this.user = user;
     this.initial = user.name.slice(0, 1);
     this.content = content;
-    this.date = +moment(); // 追加
+    this.date = +moment();
+  }
+
+  deserialize() { // 追加
+    this.user = this.user.deserialize();
+    return Object.assign({}, this);
+  }
+
+  // 取得した日付を反映し、更新フラグをつける
+  setData(date: number, key: string): Comment { // 更新
+    this.date = date;
+    this.key = key; // 追加
+    this.editFlag = false; // 追加
+    return this;
   }
 }