ISSUE-413: Change post colour based on author's role

backend/src/constants.ts

@@ -46,7 +46,8 @@ export enum SocketEvent {
   TRACING_DISABLED = 'TRACING_DISABLED',
 }
 
-export const POST_COLOR = '#FFE663';
+export const STUDENT_POST_COLOR = '#FFE678';
+export const TEACHER_POST_COLOR = '#28C8FF';
 
 export const POST_DEFAULT_OPACITY = 1;
 export const POST_DEFAULT_BORDER = 'black';

backend/src/models/Post.ts

@@ -44,8 +44,8 @@ export class DisplayAttributes {
   @prop({ required: false })
   public borderColor?: string;
 
-  @prop({ required: false })
-  public fillColor?: string;
+  @prop({ required: true })
+  public fillColor!: string;
 
   @prop({ required: false })
   public opacity?: number;
@@ -83,8 +83,8 @@ export class PostModel {
   @prop({ required: true, type: () => [TagModel] })
   public tags!: TagModel[];
 
-  @prop({ required: false, type: () => DisplayAttributes })
-  public displayAttributes?: DisplayAttributes;
+  @prop({ required: true, type: () => DisplayAttributes })
+  public displayAttributes!: DisplayAttributes;
 }
 
 export default getModelForClass(PostModel);

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

@@ -1,10 +1,10 @@
 import { Server, Socket } from 'socket.io';
 import {
-  POST_COLOR,
   POST_DEFAULT_OPACITY,
   POST_MOVING_FILL,
   POST_MOVING_OPACITY,
   SocketEvent,
+  STUDENT_POST_COLOR,
 } from '../../constants';
 import { CommentModel } from '../../models/Comment';
 import { UpvoteModel } from '../../models/Upvote';
@@ -21,6 +21,7 @@ import {
 import dalVote from '../../repository/dalVote';
 import WorkflowManager from '../../agents/workflow.agent';
 import { TaskActionType } from '../../models/Workflow';
+import { getDefaultPostColor } from '../../utils/board.helpers';
 
 class PostCreate {
   static type: SocketEvent = SocketEvent.POST_CREATE;
@@ -92,10 +93,12 @@ class PostStopMove {
   static async handleEvent(
     input: SocketPayload<PostStopMoveEventInput>
   ): Promise<PostModel | null> {
-    const post = await dalPost.update(input.eventData.postID, {
+    const postID = input.eventData.postID;
+    const defaultFill = await getDefaultPostColor(postID);
+    const post = await dalPost.update(postID, {
       displayAttributes: {
         position: { left: input.eventData.left, top: input.eventData.top },
-        fillColor: POST_COLOR,
+        fillColor: defaultFill ?? STUDENT_POST_COLOR,
         opacity: POST_DEFAULT_OPACITY,
       },
     });

backend/src/utils/board.helpers.ts

@@ -1,7 +1,15 @@
 import { mongo } from 'mongoose';
-import { DEFAULT_TAGS, POST_TAGGED_BORDER_THICKNESS } from '../constants';
+import {
+  DEFAULT_TAGS,
+  POST_TAGGED_BORDER_THICKNESS,
+  STUDENT_POST_COLOR,
+  TEACHER_POST_COLOR,
+} from '../constants';
 import { PermissionsModel } from '../models/Board';
 import Tag, { TagModel } from '../models/Tag';
+import { Role } from '../models/User';
+import dalPost from '../repository/dalPost';
+import dalUser from '../repository/dalUser';
 
 export function getDefaultBoardPermissions(): PermissionsModel {
   return {
@@ -31,3 +39,15 @@ export function getDefaultBoardTags(boardID: string): TagModel[] {
     };
   });
 }
+
+export async function getDefaultPostColor(
+  postID: string
+): Promise<string | null> {
+  const post = await dalPost.getById(postID);
+  if (!post) return null;
+
+  const user = await dalUser.findByUserID(post.userID);
+  if (!user) return null;
+
+  return user.role == Role.STUDENT ? STUDENT_POST_COLOR : TEACHER_POST_COLOR;
+}

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

@@ -11,22 +11,24 @@ import Post, {
   MultipleChoiceOptions,
 } from 'src/app/models/post';
 import { Tag } from 'src/app/models/tag';
-import User from 'src/app/models/user';
-import { BoardService } from 'src/app/services/board.service';
+import User, { Role } from 'src/app/models/user';
 import { CanvasService } from 'src/app/services/canvas.service';
+import { UserService } from 'src/app/services/user.service';
+import { BoardService } from 'src/app/services/board.service';
 import { PostService } from 'src/app/services/post.service';
 import { ProjectService } from 'src/app/services/project.service';
 import { SnackbarService } from 'src/app/services/snackbar.service';
 import { SocketService } from 'src/app/services/socket.service';
 import {
   NEEDS_ATTENTION_TAG,
-  POST_COLOR,
   POST_TAGGED_BORDER_THICKNESS,
+  STUDENT_POST_COLOR,
+  TEACHER_POST_COLOR,
   SocketEvent,
 } from 'src/app/utils/constants';
 import { MyErrorStateMatcher } from 'src/app/utils/ErrorStateMatcher';
 import { FabricUtils } from 'src/app/utils/FabricUtils';
-import Utils, { generateUniqueID } from 'src/app/utils/Utils';
+import { generateUniqueID } from 'src/app/utils/Utils';
 
 export interface AddPostDialog {
   type: PostType;
@@ -72,6 +74,7 @@ export class AddPostComponent {
   matcher = new MyErrorStateMatcher();
 
   constructor(
+    public userService: UserService,
     public canvasService: CanvasService,
     public boardService: BoardService,
     public projectService: ProjectService,
@@ -188,6 +191,7 @@ export class AddPostComponent {
       borderWidth: containsAttentionTag
         ? POST_TAGGED_BORDER_THICKNESS
         : undefined,
+      fillColor: this.defaultPostFill(),
     };
 
     return {
@@ -217,7 +221,7 @@ export class AddPostComponent {
       title: this.title,
       desc: this.message,
       tags: this.tags,
-      displayAttributes: null,
+      displayAttributes: { fillColor: this.defaultPostFill() },
     };
   }
 
@@ -233,7 +237,7 @@ export class AddPostComponent {
       title: this.title,
       desc: this.message,
       tags: this.tags,
-      displayAttributes: null,
+      displayAttributes: { fillColor: this.defaultPostFill() },
     };
   }
 
@@ -322,6 +326,12 @@ export class AddPostComponent {
     this.dialogRef.close();
   }
 
+  defaultPostFill() {
+    return this.userService.user?.role === Role.TEACHER
+      ? TEACHER_POST_COLOR
+      : STUDENT_POST_COLOR;
+  }
+
   onNoClick(): void {
     this.dialogRef.close();
   }

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

@@ -235,12 +235,14 @@ export class BucketsModalComponent implements OnInit, OnDestroy {
       (tag) => tag.name == NEEDS_ATTENTION_TAG.name
     );
 
+    const fill = await this.fabricUtils.defaultPostColor(htmlPost.post.userID);
     const renderAttr: DisplayAttributes = {
       position: {
         left: this.Xoffset,
         top: this.Yoffset,
       },
       lock: !this.board.permissions.allowStudentMoveAny,
+      fillColor: fill,
       borderColor: containsAttentionTag ? NEEDS_ATTENTION_TAG.color : undefined,
       borderWidth: containsAttentionTag
         ? POST_TAGGED_BORDER_THICKNESS

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

@@ -1,14 +1,8 @@
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  TemplateRef,
-} from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { fabric } from 'fabric';
 import { Canvas } from 'fabric/fabric-impl';
 
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MatDialog } from '@angular/material/dialog';
 
 import Post, { PostType } from '../../models/post';
 
@@ -25,6 +19,7 @@ import {
   POST_MOVING_FILL,
   POST_MOVING_OPACITY,
   SocketEvent,
+  STUDENT_POST_COLOR,
 } from 'src/app/utils/constants';
 import { UserService } from 'src/app/services/user.service';
 import { Board, BoardPermissions, BoardScope } from 'src/app/models/board';
@@ -35,7 +30,6 @@ import { UpvotesService } from 'src/app/services/upvotes.service';
 import { CreateWorkflowModalComponent } from '../create-workflow-modal/create-workflow-modal.component';
 import { BucketsModalComponent } from '../buckets-modal/buckets-modal.component';
 import { ListModalComponent } from '../list-modal/list-modal.component';
-import { POST_COLOR } from 'src/app/utils/constants';
 import { FileUploadService } from 'src/app/services/fileUpload.service';
 import { SnackbarService } from 'src/app/services/snackbar.service';
 import { TaskModalComponent } from '../task-modal/task-modal.component';
@@ -48,7 +42,6 @@ import { getErrorMessage } from 'src/app/utils/Utils';
 import { Subscription } from 'rxjs';
 import { FabricPostComponent } from '../fabric-post/fabric-post.component';
 import { TraceService } from 'src/app/services/trace.service';
-import { DistributionWorkflow } from 'src/app/models/workflow';
 import Upvote from 'src/app/models/upvote';
 import { ManageGroupModalComponent } from '../groups/manage-group-modal/manage-group-modal.component';
 import { TodoListModalComponent } from '../todo-list-modal/todo-list-modal.component';
@@ -105,7 +98,6 @@ export class CanvasComponent implements OnInit, OnDestroy {
     protected fabricUtils: FabricUtils,
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    private confirmationRef: MatDialogRef<TemplateRef<any>>,
     public snackbarService: SnackbarService,
     public dialog: MatDialog,
     public fileUploadService: FileUploadService,
@@ -248,8 +240,12 @@ export class CanvasComponent implements OnInit, OnDestroy {
 
     const { left, top } = post.displayAttributes.position;
 
-    this.fabricUtils.animateToPosition(existing, left, top, () => {
-      existing = this.fabricUtils.setFillColor(existing, POST_COLOR);
+    this.fabricUtils.animateToPosition(existing, left, top, async () => {
+      const fill = await this.fabricUtils.defaultPostColor(post.userID);
+      existing = this.fabricUtils.setFillColor(
+        existing,
+        fill ?? STUDENT_POST_COLOR
+      );
       existing = this.fabricUtils.setOpacity(existing, POST_DEFAULT_OPACITY);
       existing = this.fabricUtils.setPostMovement(
         existing,
@@ -600,6 +596,7 @@ export class CanvasComponent implements OnInit, OnDestroy {
     if (!(isStudentAndVisible || IsTeacherAndVisisble)) {
       this.updateAuthorNames(post.postID, 'Anonymous');
     } else {
+      console.log('can');
       this.userService.getOneById(post.userID).then((user: any) => {
         this.updateAuthorNames(post.postID, user.username);
       });
@@ -762,13 +759,14 @@ export class CanvasComponent implements OnInit, OnDestroy {
       }
     };
 
-    const handleDroppedPost = (e) => {
+    const handleDroppedPost = async (e) => {
       if (!isMovingPost) return;
 
       let obj = e.target;
       isMovingPost = false;
 
-      obj = this.fabricUtils.setFillColor(obj, POST_COLOR);
+      const fill = await this.fabricUtils.defaultPostColor(obj.userID);
+      obj = this.fabricUtils.setFillColor(obj, fill ?? STUDENT_POST_COLOR);
       obj = this.fabricUtils.setOpacity(obj, POST_DEFAULT_OPACITY);
       this.canvas.renderAll();
 

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

@@ -2,9 +2,9 @@ import { Component, Inject } from '@angular/core';
 import { fabric } from 'fabric';
 import Post from 'src/app/models/post';
 import {
-  POST_COLOR,
   POST_DEFAULT_BORDER,
   POST_DEFAULT_BORDER_THICKNESS,
+  STUDENT_POST_COLOR,
 } from 'src/app/utils/constants';
 import { numDigits } from 'src/app/utils/Utils';
 
@@ -156,7 +156,7 @@ export class FabricPostComponent extends fabric.Group {
         desc.getScaledHeight() +
         commentButton.getScaledHeight() +
         CONTENT_EXTRA_HEIGHT,
-      fill: fillColor ?? POST_COLOR,
+      fill: fillColor ?? STUDENT_POST_COLOR,
       rx: 20,
       ry: 20,
       strokeWidth: borderWidth ?? POST_DEFAULT_BORDER_THICKNESS,

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

@@ -12,7 +12,6 @@ import { UpvotesService } from 'src/app/services/upvotes.service';
 import { PostService } from 'src/app/services/post.service';
 import { SocketService } from 'src/app/services/socket.service';
 import { UserService } from 'src/app/services/user.service';
-import { POST_COLOR } from 'src/app/utils/constants';
 import { getErrorMessage } from 'src/app/utils/Utils';
 import Upvote from 'src/app/models/upvote';
 
@@ -53,7 +52,7 @@ export class HtmlPostComponent implements OnInit {
 
   user: AuthUser;
 
-  postColor: string = POST_COLOR;
+  postColor: string;
 
   showUsername = false;
 
@@ -72,6 +71,7 @@ export class HtmlPostComponent implements OnInit {
 
   ngOnInit(): void {
     this.user = this.userService.user!;
+    this.postColor = this.post.post.displayAttributes.fillColor;
   }
 
   openPostDialog(commentPress = false) {

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

@@ -24,6 +24,7 @@ import {
 } from 'src/app/components/add-post-modal/add-post.component';
 import User from 'src/app/models/user';
 import Upvote from 'src/app/models/upvote';
+import { FabricUtils } from 'src/app/utils/FabricUtils';
 
 @Component({
   selector: 'app-list-modal',
@@ -56,6 +57,7 @@ export class ListModalComponent implements OnInit, OnDestroy {
     public canvasService: CanvasService,
     public socketService: SocketService,
     public converters: Converters,
+    public fabricUtils: FabricUtils,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.board = data.board;
@@ -235,13 +237,14 @@ export class ListModalComponent implements OnInit, OnDestroy {
     const containsAttentionTag = htmlPost.post.tags.find(
       (tag) => tag.name == NEEDS_ATTENTION_TAG.name
     );
-
+    const fill = await this.fabricUtils.defaultPostColor(htmlPost.post.userID);
     const renderAttr: DisplayAttributes = {
       position: {
         left: this.Xoffset,
         top: this.Yoffset,
       },
       lock: !this.board.permissions.allowStudentMoveAny,
+      fillColor: fill,
       borderColor: containsAttentionTag ? NEEDS_ATTENTION_TAG.color : undefined,
       borderWidth: containsAttentionTag
         ? POST_TAGGED_BORDER_THICKNESS

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

@@ -20,7 +20,6 @@ import Post, {
 } from 'src/app/models/post';
 import { DELETE } from '@angular/cdk/keycodes';
 import { SocketEvent } from 'src/app/utils/constants';
-import { POST_COLOR } from 'src/app/utils/constants';
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
 import { SocketService } from 'src/app/services/socket.service';
 import { CanvasService } from 'src/app/services/canvas.service';
@@ -129,6 +128,7 @@ export class PostModalComponent {
     this.showComments = data?.commentPress ? true : false;
     this.postService.get(data.post.postID).then(async (p: Post) => {
       this.post = p;
+      this.postColor = p.displayAttributes.fillColor;
       this.title = p.title;
       this.editingTitle = linkifyStr(p.title, {
         defaultProtocol: 'https',
@@ -180,7 +180,6 @@ export class PostModalComponent {
     this.showAuthorName =
       (isStudent && data.board.permissions.showAuthorNameStudent) ||
       (isTeacher && data.board.permissions.showAuthorNameTeacher);
-    this.postColor = POST_COLOR;
   }
 
   ngOnInit(): void {

frontend/src/app/models/post.ts

@@ -8,7 +8,7 @@ export class DisplayAttributes {
   lock?: boolean;
   borderWidth?: number;
   borderColor?: string;
-  fillColor?: string;
+  fillColor: string;
   opacity?: number;
 }
 
@@ -42,5 +42,5 @@ export default class Post {
   author: string;
   tags: Tag[];
 
-  displayAttributes: DisplayAttributes | null;
+  displayAttributes: DisplayAttributes;
 }