Create Post in List modal

backend/src/models/Post.ts

@@ -4,6 +4,7 @@ import { TagModel } from './Tag';
 export enum PostType {
   BOARD = 'BOARD',
   BUCKET = 'BUCKET',
+  LIST = 'LIST',
 }
 
 export class Position {

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

@@ -330,6 +330,7 @@ export class CanvasComponent implements OnInit, OnDestroy {
       ListModalComponent,
       {
         board: this.board,
+        user: this.user,
       },
       '95vw'
     );
@@ -462,13 +463,13 @@ export class CanvasComponent implements OnInit, OnDestroy {
   }
 
   onResize(event) {
-    let scaleX = event.target.innerWidth / this.canvas.getWidth();
+    const scaleX = event.target.innerWidth / this.canvas.getWidth();
     // Without toolbar height
-    let scaleY = (event.target.innerHeight - 64) / this.canvas.getHeight();
-    let objects = this.canvas.getObjects();
+    const scaleY = (event.target.innerHeight - 64) / this.canvas.getHeight();
+    const objects = this.canvas.getObjects();
 
     // Resize all objects inside the canvas
-    for (var i in objects) {
+    for (const i in objects) {
       objects[i].scaleX = objects[i].getObjectScaling().scaleX * scaleY;
       objects[i].scaleY = objects[i].getObjectScaling().scaleY * scaleY;
       objects[i].left = (objects[i].left || 0) * scaleX;

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,14 +1,23 @@
 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 Post from 'src/app/models/post';
+import Post, { PostType } from 'src/app/models/post';
 import { BucketService } from 'src/app/services/bucket.service';
 import { PostService } from 'src/app/services/post.service';
 import { SocketService } from 'src/app/services/socket.service';
 import { SocketEvent } from 'src/app/utils/constants';
 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';
 
 @Component({
   selector: 'app-list-modal',
@@ -17,6 +26,7 @@ import { Tag } from 'src/app/models/tag';
 })
 export class ListModalComponent implements OnInit, OnDestroy {
   board: Board;
+  user: User;
 
   loading = true;
   loadingMore = false;
@@ -31,13 +41,15 @@ export class ListModalComponent implements OnInit, OnDestroy {
 
   constructor(
     public dialogRef: MatDialogRef<ListModalComponent>,
+    public dialog: MatDialog,
     public bucketService: BucketService,
     public postService: PostService,
     public socketService: SocketService,
     public converters: Converters,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.board = data.board;
+    this.user = data.user;
   }
 
   ngOnInit(): void {
@@ -171,6 +183,26 @@ 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.dialog.open(AddPostComponent, {
+      width: '500px',
+      data: dialogData,
+    });
+  }
+
   ngOnDestroy(): void {
     this.posts = [];
   }

frontend/src/app/models/post.ts

@@ -15,6 +15,7 @@ export class DisplayAttributes {
 export enum PostType {
   BOARD = 'BOARD',
   BUCKET = 'BUCKET',
+  LIST = 'LIST',
 }
 
 export default class Post {

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

@@ -56,6 +56,12 @@ export class CanvasService {
     return savedPost;
   }
 
+  async createListPost(post: Post) {
+    const savedPost = await this.postService.create(post);
+
+    return savedPost;
+  }
+
   async createBoardPostFromBucket(post: Post) {
     const upvotes = await this.upvotesService.getUpvotesByPost(post.postID);
     const comments = await this.commentService.getCommentsByPost(post.postID);