feat(board-page.component): delete posts

Add feature for deleting a post if the user is the creator closes #21
andreasonny83 · Jun 4, 2017 · c2ac5d0 · c2ac5d0
1 parent 85056be
commit c2ac5d0
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 35 deletions.
diff --git a/database.rules.json b/database.rules.json
@@ -22,9 +22,16 @@
     	"$board": {
        	".write": "auth != null && auth.email_verified === true && (!data.exists() || !data.child('members').exists() || (data.child('members').val().length === 1 && data.child('members').hasChild(auth.uid)))",
        	"posts": {
-          ".write": "data.parent().child('members').hasChild(auth.uid)",
-          "val": {
-            ".write": "data.parent().child('authorUID').val() === auth.uid"
+          "$post": {
+          	".write": "!data.exists() || data.child('authorUID').val() === auth.uid",
+
+            "val": {
+              ".write": "data.parent().parent().parent().child('members').hasChild(auth.uid)"
+            },
+
+            "col": {
+              ".write": "data.parent().parent().parent().child('members').hasChild(auth.uid)"
+            }
           }
         },
         "members": {

diff --git a/src/app/board-page/board-page.component.html b/src/app/board-page/board-page.component.html
@@ -2,6 +2,7 @@
 
 <div class="block-xxl"
      *ngIf="!pageLoading"
+     (mouseup)="isDraggable = true"
      (dragend)="onDrop($event)">
   <h3 class="board-name">{{ (boardObj | async)?.name }}</h3>
 
@@ -18,12 +19,8 @@ <h3 class="board-name">{{ (boardObj | async)?.name }}</h3>
                [style.background]="column.color"
                [class]="postClass(columnID, i)"
                id="post-{{columnID}}-{{i}}"
-               draggable="true"
+               [draggable]="isDraggable"
                (dragstart)="onDragStart($event, post.key, columnID, i)">
-        <img class="edit-icon"
-             (click)="editEl = columnID + '-' + i"
-             src="../../assets/images/marker.png"
-             alt="edit note">
 
        <md-card-content>
           <span *ngIf="editEl !== columnID + '-' + i">
@@ -55,11 +52,22 @@ <h3 class="board-name">{{ (boardObj | async)?.name }}</h3>
               Discard
             </button>
           </div>
-        </md-card-content>
 
-        <md-card-footer>
           <p class="note-author">- {{post.value.author}}</p>
-        </md-card-footer>
+
+        </md-card-content>
+
+        <md-card-actions (mousedown)="isDraggable = false">
+          <button md-icon-button
+                  (click)="editEl = columnID + '-' + i">
+            <md-icon class="material-icons">edit</md-icon>
+          </button>
+
+          <button md-icon-button
+                  (click)="deletePost(post)">
+            <md-icon class="material-icons">delete</md-icon>
+          </button>
+        </md-card-actions>
       </md-card>
 
       <app-dropping-card *ngIf="dragging"

diff --git a/src/app/board-page/board-page.component.scss b/src/app/board-page/board-page.component.scss
@@ -53,47 +53,51 @@
   font-size: 28px;
 }
 
-.pinned-note .mat-card-footer .note-author {
-  padding-right: 24px;
-  text-align: right;
-  text-transform: capitalize;
-  font-style: italic;
-  font-size: 18px;
-  opacity: 0.6;
-  transition: opacity .2s ease-in-out;
-}
-
 .pinned-note {
   cursor: move;
   cursor: grab;
 }
 
 .pinned-note:active {
+}
+
+.pinned-note.dragging {
   opacity: 0.8;
   border: 2px dashed rgba(0, 0, 0, 0.5);
   cursor: grabbing;
 }
 
-.pinned-note.dragging {
+.pinned-note .mat-card-content {
+  margin-bottom: 0;
+}
+
+.pinned-note .mat-card-actions {
+  cursor: default;
+  padding-top: 0;
+  opacity: 0;
+  transition: opacity .25s ease-in-out;
 }
 
-.pinned-note .mat-card-footer .note-author:hover {
+.pinned-note:hover .mat-card-actions {
   opacity: 1;
-  animation: all;
-  font-weight: bold;
 }
-.pinned-note .edit-icon {
-  opacity: 0;
-  height: 40px;
-  width: 40px;
-  cursor: pointer;
-  position: absolute;
-  right: 3px;
-  top: 3px;
+
+.pinned-note .mat-card-actions .material-icons {
+  font-family: 'Material Icons';
+  font-size: 24px;
+  opacity: 0.6;
 }
 
-.pinned-note:hover .edit-icon {
-  transition: opacity 0.25s ease-in-out;
+.pinned-note .mat-card-actions .material-icons:hover {
+  opacity: 0.85;
+}
+
+.pinned-note .note-author {
+  display: block;
+  text-align: right;
+  text-transform: capitalize;
+  font-style: italic;
+  font-size: 16px;
   opacity: 0.6;
 }
 

diff --git a/src/app/board-page/board-page.component.ts b/src/app/board-page/board-page.component.ts
@@ -21,6 +21,7 @@ export class BoardPageComponent implements OnInit, OnDestroy {
   public pageLoading: boolean;
   public editEl: string;
   public dragging: boolean;
+  public isDraggable: boolean;
 
   private draggingEl: string;
   private routerSubscriber$: Subscription;
@@ -32,6 +33,7 @@ export class BoardPageComponent implements OnInit, OnDestroy {
     private snackBar: MdSnackBar,
   ) {
     this.pageLoading = true;
+    this.isDraggable = true;
     this.cardElevations = {};
   }
 
@@ -121,6 +123,24 @@ export class BoardPageComponent implements OnInit, OnDestroy {
     event.preventDefault();
   }
 
+  public deletePost(post: any): void {
+    let undo;
+    const snackBarRef = this.snackBar.open('Deleting post...', 'Undo', { duration: 5000 });
+
+    snackBarRef.afterDismissed().subscribe(() => {
+      if (undo) {
+        return;
+      }
+
+      this.boardObj.$ref.ref
+        .child(`posts/${post.key}`)
+        .remove()
+        .catch(() => this.snackBar.open('You cannot bin this post. Make sure ou are the author.', null, { duration: 6000 }))
+    });
+
+    snackBarRef.onAction().subscribe(() => undo = true);
+  }
+
   public ngOnDestroy(): void {
     this.routerSubscriber$.unsubscribe();
     this.boardService.currentBoard = <IBoardService>{};