Create Post in List modal

frontend/src/app/components/add-post-modal/add-post.component.ts

@@ -110,7 +110,7 @@ export class AddPostComponent {
   }
 
   async addBucketPost() {
-    const boardID: string = this.data.bucket!.bucketID;
+    const bucketID: string = this.data.bucket!.bucketID;
     const post: Post = {
       postID: generateUniqueID(),
       userID: this.user.userID,
@@ -123,14 +123,32 @@ export class AddPostComponent {
       displayAttributes: null,
     };
 
-    return await this.canvasService.createBucketPost(boardID, post);
+    return await this.canvasService.createBucketPost(bucketID, post);
+  }
+
+  async addListPost() {
+    const post: Post = {
+      postID: generateUniqueID(),
+      userID: this.user.userID,
+      boardID: this.board.boardID,
+      author: this.user.username,
+      type: PostType.LIST,
+      title: this.title,
+      desc: this.message,
+      tags: this.tags,
+      displayAttributes: null,
+    };
+
+    return await this.canvasService.createListPost(post);
   }
 
   async handleDialogSubmit() {
     let post: Post;
 
     if (this.data.type == PostType.BUCKET && this.data.bucket) {
       post = await this.addBucketPost();
+    } else if (this.data.type == PostType.LIST) {
+      post = await this.addListPost();
     } else {
       post = await this.addPost();
     }

frontend/src/app/components/canvas/canvas.component.ts

@@ -189,8 +189,10 @@ export class CanvasComponent implements OnInit, OnDestroy {
   }
 
   handlePostCreateEvent = (post: Post) => {
-    const fabricPost = new FabricPostComponent(post);
-    this.canvas.add(fabricPost);
+    if (post.type === PostType.BOARD) {
+      const fabricPost = new FabricPostComponent(post);
+      this.canvas.add(fabricPost);
+    }
   };
 
   handlePostUpdateEvent = (post: Post) => {

frontend/src/app/components/list-modal/list-modal.component.html

@@ -1,5 +1,15 @@
 <h1 mat-dialog-title>
-  <span>CK List</span>
+  <div style="display: flex;">
+    <span>CK List</span>
+    <button
+      mat-icon-button
+      matTooltip="Create Post"
+      (click)="openAddPostDialog()"
+      style="margin:0; padding:0;line-height: inherit;height: inherit;"
+    >
+      <mat-icon class="material-icons-outlined">note_add</mat-icon>
+    </button>
+  </div>
   <button mat-icon-button [mat-dialog-close] aria-label="Close">
     <mat-icon>close</mat-icon>
   </button>

frontend/src/app/components/list-modal/list-modal.component.ts

@@ -1,7 +1,10 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA,
+} from '@angular/material/dialog';
 import { Board } from 'src/app/models/board';
-import User from 'src/app/models/user';
 import Post, { PostType, DisplayAttributes } from 'src/app/models/post';
 import { CanvasService } from 'src/app/services/canvas.service';
 import { BucketService } from 'src/app/services/bucket.service';
@@ -15,6 +18,11 @@ import {
 import { HTMLPost } from '../html-post/html-post.component';
 import Converters from '../../utils/converters';
 import { Tag } from 'src/app/models/tag';
+import {
+  AddPostComponent,
+  AddPostDialog,
+} from 'src/app/components/add-post-modal/add-post.component';
+import User from 'src/app/models/user';
 import Upvote from 'src/app/models/upvote';
 
 @Component({
@@ -42,6 +50,7 @@ export class ListModalComponent implements OnInit, OnDestroy {
 
   constructor(
     public dialogRef: MatDialogRef<ListModalComponent>,
+    public dialog: MatDialog,
     public bucketService: BucketService,
     public postService: PostService,
     public canvasService: CanvasService,
@@ -198,6 +207,27 @@ export class ListModalComponent implements OnInit, OnDestroy {
     }
   }
 
+  openAddPostDialog() {
+    const dialogData: AddPostDialog = {
+      type: PostType.LIST,
+      spawnPosition: {
+        top: 150,
+        left: 150,
+      },
+      board: this.board,
+      user: this.user,
+      onComplete: async (post: Post) => {
+        const htmlPost = await this.converters.toHTMLPost(post);
+        this.posts.push(htmlPost);
+        this.filterPosts();
+      },
+    };
+    this.dialog.open(AddPostComponent, {
+      width: '500px',
+      data: dialogData,
+    });
+  }
+
   async movePostToBoard(postID: string) {
     const htmlPost = this.posts.find((p) => p.post.postID == postID);
     if (!htmlPost) return;

frontend/src/app/services/canvas.service.ts

@@ -56,6 +56,19 @@ export class CanvasService {
     return savedPost;
   }
 
+  async createListPost(post: Post) {
+    const savedPost = await this.postService.create(post);
+    this.socketService.emit(SocketEvent.POST_CREATE, savedPost);
+    for (const tag of post.tags) {
+      this.socketService.emit(SocketEvent.POST_TAG_ADD, {
+        tag,
+        post: savedPost,
+      });
+    }
+
+    return savedPost;
+  }
+
   async createBoardPostFromBucket(post: Post) {
     const upvotes = await this.upvotesService.getUpvotesByPost(post.postID);
     const comments = await this.commentService.getCommentsByPost(post.postID);
@@ -127,8 +140,10 @@ export class CanvasService {
     const result = await this.commentService.add(comment);
 
     let existing = this.fabricUtils.getObjectFromId(result.comment.postID);
-    existing = this.fabricUtils.setCommentCount(existing, result.count);
-    this.fabricUtils._canvas.requestRenderAll();
+    if (existing) {
+      existing = this.fabricUtils.setCommentCount(existing, result.count);
+      this.fabricUtils._canvas.requestRenderAll();
+    }
 
     const post = await this.postService.get(result.comment.postID);
 
@@ -147,8 +162,10 @@ export class CanvasService {
     this.socketService.emit(SocketEvent.POST_COMMENT_REMOVE, result.comment);
     if (parseInt(result.count) != -1) {
       let existing = this.fabricUtils.getObjectFromId(postID);
-      existing = this.fabricUtils.setCommentCount(existing, result.count);
-      this.fabricUtils._canvas.requestRenderAll();
+      if (existing) {
+        existing = this.fabricUtils.setCommentCount(existing, result.count);
+        this.fabricUtils._canvas.requestRenderAll();
+      }
     }
   }
 
@@ -158,7 +175,14 @@ export class CanvasService {
 
     const fabricObject = this.fabricUtils.getObjectFromId(post.postID);
     if (!fabricObject) {
-      return await this.postService.update(post.postID, { tags: tags });
+      const savedPost = await this.postService.update(post.postID, {
+        tags: tags,
+      });
+      this.socketService.emit(SocketEvent.POST_TAG_ADD, {
+        tag,
+        post: savedPost,
+      });
+      return savedPost;
     }
 
     if (tag.specialAttributes) {
@@ -167,7 +191,6 @@ export class CanvasService {
         tag
       );
     }
-
     const savedPost = await this.postService.update(post.postID, update);
 
     this.socketService.emit(SocketEvent.POST_TAG_ADD, { tag, post: savedPost });
@@ -188,7 +211,12 @@ export class CanvasService {
 
     const fabricObject = this.fabricUtils.getObjectFromId(post.postID);
     if (!fabricObject) {
-      return await this.postService.update(post.postID, update);
+      const savedPost = await this.postService.update(post.postID, update);
+      this.socketService.emit(SocketEvent.POST_TAG_REMOVE, {
+        tag,
+        post: savedPost,
+      });
+      return savedPost;
     }
 
     if (tag.specialAttributes) {

frontend/src/app/utils/FabricUtils.ts

@@ -84,7 +84,7 @@ export class FabricUtils {
       const childObj = group.getObjects().find((obj) => obj.name == child);
       return childObj;
     } else {
-      const childObj = group.objects.find((obj) => obj.name == child);
+      const childObj = group?.objects.find((obj) => obj.name == child);
       return childObj;
     }
   }
@@ -373,14 +373,14 @@ export class FabricUtils {
     const comment: any = this.getChildFromGroup(fabricObj, 'comment');
     const commentCount: any = this.getChildFromGroup(fabricObj, 'commentCount');
 
-    commentCount.set({ text: amount.toString(), dirty: true });
+    commentCount?.set({ text: amount.toString(), dirty: true });
 
     if (amount >= 1) {
-      commentCount.set({ opacity: 1, dirty: true });
-      comment.set({ opacity: 1, dirty: true });
+      commentCount?.set({ opacity: 1, dirty: true });
+      comment?.set({ opacity: 1, dirty: true });
     } else {
-      commentCount.set({ opacity: 0, dirty: true });
-      comment.set({ opacity: 0, dirty: true });
+      commentCount?.set({ opacity: 0, dirty: true });
+      comment?.set({ opacity: 0, dirty: true });
     }
 
     fabricObj.dirty = true;