ISSUE-521: Save to personal board posts centered

backend/src/constants.ts

@@ -27,8 +27,6 @@ export enum SocketEvent {
   BOARD_CLEAR = 'BOARD_CLEAR',
   BOARD_CONN_UPDATE = 'BOARD_CONN_UPDATE',
 
-  PERSONAL_BOARD_ADD_POST = 'PERSONAL_BOARD_ADD_POST',
-
   BUCKET_ADD_POST = 'BUCKET_ADD_POST',
   BUCKET_REMOVE_POST = 'BUCKET_REMOVE_POST',
 

backend/src/socket/events/post.events.ts

@@ -13,7 +13,6 @@ import dalComment from '../../repository/dalComment';
 import dalPost from '../../repository/dalPost';
 import postTrace from '../trace/post.trace';
 import {
-  PersonalBoardAddPostEventInput,
   PostStopMoveEventInput,
   PostTagEventInput,
   SocketPayload,
@@ -243,27 +242,6 @@ class PostRead {
   }
 }
 
-class PersonalBoardAddPost {
-  static type: SocketEvent = SocketEvent.PERSONAL_BOARD_ADD_POST;
-
-  static async handleEvent(
-    input: SocketPayload<PersonalBoardAddPostEventInput>
-  ): Promise<PersonalBoardAddPostEventInput> {
-    if (input.trace.allowTracing)
-      await postTrace.personalBoardAddPost(input, this.type);
-    return input.eventData;
-  }
-
-  static async handleResult(
-    io: Server,
-    socket: Socket,
-    result: PostTagEventInput
-  ) {
-    // Emitting SocketEvent to specific personalBoard
-    io.to(result.post.boardID).emit(this.type, result);
-  }
-}
-
 const postEvents = [
   PostCreate,
   PostUpdate,
@@ -277,7 +255,6 @@ const postEvents = [
   PostTagAdd,
   PostTagRemove,
   PostRead,
-  PersonalBoardAddPost,
 ];
 
 export default postEvents;

backend/src/socket/trace/post.trace.ts

@@ -3,7 +3,6 @@ import { UpvoteModel } from '../../models/Upvote';
 import { PostModel } from '../../models/Post';
 import dalTrace from '../../repository/dalTrace';
 import {
-  PersonalBoardAddPostEventInput,
   PostStopMoveEventInput,
   PostTagEventInput,
   SocketPayload,
@@ -235,30 +234,6 @@ const read = async (input: SocketPayload<string>, eventType: string) => {
   return dalTrace.create(trace);
 };
 
-/**
- * Creates trace for saving a post to the user's personal board
- * @param input
- * @param eventType the associated SocketEvent
- * @returns
- */
-const personalBoardAddPost = async (
-  input: SocketPayload<PersonalBoardAddPostEventInput>,
-  eventType: string
-) => {
-  const trace = await createTrace(input.trace);
-  const postID = input.eventData.originalPostID;
-  const newPostID = input.eventData.newPostID;
-  const personalBoardID = input.eventData.personalBoardID;
-
-  trace.event = {
-    postID: postID,
-    postAddedToPersonalBoardID: personalBoardID,
-    personalBoardSavedPostID: newPostID,
-  };
-  trace.eventType = eventType;
-  return dalTrace.create(trace);
-};
-
 const postTrace = {
   create,
   update,
@@ -271,7 +246,6 @@ const postTrace = {
   tagRemove,
   move,
   read,
-  personalBoardAddPost,
 };
 
 export default postTrace;

backend/src/socket/types/event.types.ts

@@ -25,12 +25,6 @@ export type PostStopMoveEventInput = {
   top: number;
 };
 
-export type PersonalBoardAddPostEventInput = {
-  originalPostID: string;
-  newPostID: string;
-  personalBoardID: string;
-};
-
 export type BucketEventInput = {
   bucketID: string;
   posts: string[];

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

@@ -278,41 +278,37 @@ export class AddPostComponent {
   }
 
   async handlePersonalBoardCopy() {
-    const project = await this.projectService.get(this.board.projectID);
-    const boards = await this.boardService.getAllPersonal(this.board.projectID);
-
-    for (const board of boards) {
-      if (
-        !project.teacherIDs.includes(board.ownerID) ||
-        board.ownerID === this.user.userID
-      ) {
-        let post;
-        if (this.data.type == PostType.BUCKET && this.data.bucket)
-          post = this.getBucketPost();
-        else if (this.data.type == PostType.LIST) post = this.getListPost();
-        else post = this.getBoardPost();
-
-        post.boardID = board.boardID;
-        const newPost = await this.postService.create(post);
-        const postInput = {
-          originalPostID: post.postID,
-          newPostID: newPost.postID,
-          personalBoardID: board.boardID,
-          post: post,
-        };
-        if (newPost) {
-          this.socketService.emit(
-            SocketEvent.PERSONAL_BOARD_ADD_POST,
-            postInput
-          );
+    try {
+      const project = await this.projectService.get(this.board.projectID);
+      const boards = await this.boardService.getAllPersonal(
+        this.board.projectID
+      );
+
+      for (const board of boards) {
+        if (
+          !project.teacherIDs.includes(board.ownerID) ||
+          board.ownerID === this.user.userID
+        ) {
+          let post;
+          if (this.data.type == PostType.BUCKET && this.data.bucket)
+            post = this.getBucketPost();
+          else if (this.data.type == PostType.LIST) post = this.getListPost();
+          else post = this.getBoardPost();
+
+          post.boardID = board.boardID;
+          const newPost = await this.postService.create(post);
         }
       }
+      this.snackbarService.queueSnackbar(
+        'Successfully copied post to all student personal boards.'
+      );
+    } catch (error) {
+      this.snackbarService.queueSnackbar(
+        'Unable to copy posts. Please refresh and try again!'
+      );
+    } finally {
+      this.dialogRef.close();
     }
-    this.snackbarService.queueSnackbar(
-      'Successfully copied post to all student personal boards.'
-    );
-
-    this.dialogRef.close();
   }
 
   async updateMultipleChoicePost() {

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

@@ -79,6 +79,8 @@ export class CanvasComponent implements OnInit, OnDestroy {
 
   embedded = false;
 
+  numSavedPosts: number = 0;
+
   zoom = 1;
 
   mode: Mode = Mode.EDIT;
@@ -143,7 +145,6 @@ export class CanvasComponent implements OnInit, OnDestroy {
       [SocketEvent.WORKFLOW_RUN_DISTRIBUTION, this.handleWorkflowRun],
       [SocketEvent.WORKFLOW_POST_SUBMIT, this.handleWorkflowPost],
       [SocketEvent.BOARD_CONN_UPDATE, this.handleBoardConnEvent],
-      [SocketEvent.PERSONAL_BOARD_ADD_POST, this.handlePersonalBoardAddPost],
     ]);
   }
 
@@ -387,16 +388,6 @@ export class CanvasComponent implements OnInit, OnDestroy {
     });
   };
 
-  handlePersonalBoardAddPost = (postData: any) => {
-    if (
-      postData.post.type === PostType.BOARD &&
-      this.board.scope === BoardScope.PROJECT_PERSONAL
-    ) {
-      const fabricPost = new FabricPostComponent(postData.post);
-      this.canvas.add(fabricPost);
-    }
-  };
-
   showBucketsModal() {
     this._openDialog(
       BucketsModalComponent,
@@ -767,6 +758,10 @@ export class CanvasComponent implements OnInit, OnDestroy {
           post: obj,
           board: this.board,
           commentPress: commentPress,
+          numSavedPosts: this.numSavedPosts,
+          updateNumSavedPosts: (num) => {
+            this.numSavedPosts = num;
+          },
         });
         this.canvasService.readPost(obj.postID);
       }

frontend/src/app/components/csv-download-button/traceDefaults.ts

@@ -130,12 +130,4 @@ export default [
     value: 'postRead',
     default: 0,
   },
-  {
-    value: 'postAddedToPersonalBoardID',
-    default: '',
-  },
-  {
-    value: 'personalBoardSavedPostID',
-    default: '',
-  },
 ];

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

@@ -54,6 +54,8 @@ export class PostModalData {
   commentPress?: boolean;
   onCommentEvent?: Function;
   onTagEvent?: Function;
+  numSavedPosts: number = 0;
+  updateNumSavedPosts?: Function;
 }
 
 @Component({
@@ -77,6 +79,8 @@ export class PostModalComponent {
   isMultipleChoiceSelected = false;
   submitMultipleChoiceAnswer = false;
 
+  numSavedPosts: number;
+
   PostType: typeof PostType = PostType;
 
   title: string;
@@ -126,6 +130,7 @@ export class PostModalComponent {
   ) {
     dialogRef.backdropClick().subscribe(() => this.close());
     this.user = data.user;
+    this.numSavedPosts = data.numSavedPosts;
     this.contentType = data.post.contentType;
     this.showComments = data?.commentPress ? true : false;
     this.postService.get(data.post.postID).then(async (p: Post) => {
@@ -334,37 +339,47 @@ export class PostModalComponent {
   }
 
   async savePostToPersonalBoard() {
-    const personalBoard = await this.boardService.getPersonal(
-      this.project.projectID
-    );
-
-    if (!personalBoard) return;
-
-    const post: Post = {
-      postID: generateUniqueID(),
-      userID: this.user.userID,
-      boardID: personalBoard.boardID,
-      type: PostType.BOARD,
-      contentType: this.contentType,
-      multipleChoice: this.multipleChoiceOptions,
-      title: this.title,
-      author: this.user.username,
-      desc: this.desc,
-      tags: this.tags,
-      displayAttributes: this.post.displayAttributes,
-    };
+    try {
+      const personalBoard = await this.boardService.getPersonal(
+        this.project.projectID
+      );
 
-    const newPost = await this.postService.create(post);
+      if (!personalBoard) return;
+
+      if (this.post.displayAttributes) {
+        const postOffset = 50 * this.numSavedPosts;
+        this.numSavedPosts += 1;
+        if (this.data.updateNumSavedPosts)
+          this.data.updateNumSavedPosts(this.numSavedPosts);
+        const position = {
+          top: this.canvasService.centerPos.top + postOffset,
+          left: this.canvasService.centerPos.left + postOffset,
+        };
+        this.post.displayAttributes.position = position;
+      }
 
-    const postInput = {
-      originalPostID: this.post.postID,
-      newPostID: newPost.postID,
-      personalBoardID: personalBoard.boardID,
-      post: post,
-    };
-    if (newPost) {
-      this.socketService.emit(SocketEvent.PERSONAL_BOARD_ADD_POST, postInput);
-      this.openSnackBar('Successfully copied to your Personal Board');
+      const post: Post = {
+        postID: generateUniqueID(),
+        userID: this.user.userID,
+        boardID: personalBoard.boardID,
+        type: PostType.BOARD,
+        contentType: this.contentType,
+        multipleChoice: this.multipleChoiceOptions,
+        title: this.title,
+        author: this.user.username,
+        desc: this.desc,
+        tags: this.tags,
+        displayAttributes: this.post.displayAttributes,
+      };
+
+      const newPost = await this.postService.create(post);
+
+      if (newPost)
+        this.openSnackBar('Successfully copied to your Personal Board');
+    } catch (error) {
+      this.openSnackBar(
+        'Unable to copy post to your Personal Board. Please refresh and try again!'
+      );
     }
   }
 

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

@@ -21,6 +21,11 @@ import Upvote from '../models/upvote';
 import { WorkflowService } from './workflow.service';
 import { UserService } from './user.service';
 
+interface Position {
+  top: number;
+  left: number;
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -346,4 +351,8 @@ export class CanvasService {
   async readPost(postID: string) {
     this.socketService.emit(SocketEvent.POST_READ, postID);
   }
+
+  get centerPos(): Position {
+    return this.fabricUtils._canvas.getCenter();
+  }
 }

frontend/src/app/utils/constants.ts

@@ -37,8 +37,6 @@ export enum SocketEvent {
   BOARD_CLEAR = 'BOARD_CLEAR',
   BOARD_CONN_UPDATE = 'BOARD_CONN_UPDATE',
 
-  PERSONAL_BOARD_ADD_POST = 'PERSONAL_BOARD_ADD_POST',
-
   VOTES_CLEAR = 'VOTES_CLEAR',
 
   WORKFLOW_RUN_DISTRIBUTION = 'WORKFLOW_RUN_DISTRIBUTION',