diff --git a/frontend/src/app/components/add-post-modal/add-post.component.ts b/frontend/src/app/components/add-post-modal/add-post.component.ts index 55d19a0c..a256a659 100644 --- a/frontend/src/app/components/add-post-modal/add-post.component.ts +++ b/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,7 +123,23 @@ 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() { @@ -131,6 +147,8 @@ export class AddPostComponent { 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(); } diff --git a/frontend/src/app/components/canvas/canvas.component.ts b/frontend/src/app/components/canvas/canvas.component.ts index 318127f5..8a777889 100644 --- a/frontend/src/app/components/canvas/canvas.component.ts +++ b/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) => { diff --git a/frontend/src/app/components/list-modal/list-modal.component.html b/frontend/src/app/components/list-modal/list-modal.component.html index fe2c7f41..6460906c 100644 --- a/frontend/src/app/components/list-modal/list-modal.component.html +++ b/frontend/src/app/components/list-modal/list-modal.component.html @@ -1,5 +1,15 @@

- CK List +
+ CK List + +
diff --git a/frontend/src/app/components/list-modal/list-modal.component.ts b/frontend/src/app/components/list-modal/list-modal.component.ts index 1b3f4560..16ea3e83 100644 --- a/frontend/src/app/components/list-modal/list-modal.component.ts +++ b/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, + 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; diff --git a/frontend/src/app/services/canvas.service.ts b/frontend/src/app/services/canvas.service.ts index 4e2450e6..dafd8e66 100644 --- a/frontend/src/app/services/canvas.service.ts +++ b/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) { diff --git a/frontend/src/app/utils/FabricUtils.ts b/frontend/src/app/utils/FabricUtils.ts index b392f86b..5ba7f066 100644 --- a/frontend/src/app/utils/FabricUtils.ts +++ b/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;