36 sol post title

backend/entities/post_entity.py

@@ -1,7 +1,7 @@
 '''User accounts for all registered users in the application.'''
 
 
-from sqlalchemy import Integer, String, ForeignKey
+from sqlalchemy import Integer, String, ForeignKey, Text
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 from typing import Self
 from .entity_base import EntityBase
@@ -21,7 +21,8 @@ class PostEntity(EntityBase):
     __tablename__ = 'posts'
 
     id: Mapped[int] = mapped_column(Integer, primary_key=True)
-    content: Mapped[str] = mapped_column(String(64), nullable=False, default='')
+    title: Mapped[str] = mapped_column(String(64), nullable = False, default = '')
+    content: Mapped[str] = mapped_column(Text, nullable=False, default='')
 
     user_id: Mapped[int] = mapped_column(ForeignKey('user.id'))
     user: Mapped[UserEntity] = relationship("UserEntity",back_populates='posts')
@@ -35,6 +36,7 @@ def from_model(cls, model: Post, user: UserEntity ) -> Self:
         #user_svc: UserPostService = Depends()
         return cls(
             id=model.id,
+            title = model.title,
             content=model.content,
             user = user,
             votes= [],
@@ -48,6 +50,7 @@ def to_model(self) -> Post:
         vote_num = [vote.to_model() for vote in self.votes]
         return Post(
             id=self.id,
+            title = self.title,
             content=self.content,
             user=self.user.to_model(),
             votes=vote_num,

backend/models/post.py

@@ -5,6 +5,7 @@
 
 class Post(BaseModel):
     id: int | None = None
+    title: str
     content: str
     user: User
     votes: list[User] = []

frontend/src/app/makeforum/makeforum.component.css

@@ -1,13 +1,39 @@
 .button {
-    transition-duration: 0.4s;
-  }
-
-  .button:hover {
-    background-color: #4CAF50; /* Green */
-    color: white;
-  }
+  transition-duration: 0.4s;
+}
 
+.button:hover {
+  background-color: #4CAF50; /* Green */
+  color: white;
+}
+
+#back:hover {
+  background-color: #4786C6; /* Green */
+  color: white;
+}
 
 a {
-    text-decoration: underline;
-  }
+  text-decoration: underline;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-width: 150px;
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+  background-color: #333;
+  padding: 20px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+h1, h3 {
+  display: flex;
+  justify-content: center;
+}

frontend/src/app/makeforum/makeforum.component.html

@@ -2,13 +2,18 @@ <h1>Forum</h1>
 
 <h3>Make a Forum Post With Resources</h3>
 
-<form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <div>
-        <input id="content" type="text" formControlName="content">
-    </div>
-    <button class="button" type="submit">Submit</button>
-</form>
+<form class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
+  <mat-form-field class="full-width">
+    <mat-label>Title</mat-label>
+    <input matInput type="text" formControlName="title" placeholder="Title">
+  </mat-form-field>
 
-<a mat-list-item routerLink="/viewforum">Back</a>
+  <mat-form-field class="full-width">
+    <mat-label>Content</mat-label>
+    <textarea cdkTextareaAutosize id="content" type="text" formControlName="content" matInput rows="5" placeholder="Write content here..."></textarea>
+  </mat-form-field>
+  <button mat-stroked-button class="button" type="submit">Submit</button>
+</form>
 
 
+<button mat-stroked-button class="button" id="back" routerLink="/viewforum">Back</button>

frontend/src/app/makeforum/makeforum.component.ts

@@ -22,6 +22,7 @@ export class ForumComponent {
   };
 
   form = this.formBuilder.group({
+    title: '',
     content: ''
   });
 
@@ -33,52 +34,52 @@ export class ForumComponent {
 
   onSubmit(): void {
     let form = this.form.value;
+    let formTitle = this.form.value.title ?? "";
     let formContent = this.form.value.content ?? "";
     console.log(form)
     this.profileService.profile$
       .subscribe({
-        next: (profile) => this.onSuccess(profile, formContent), 
+        next: (profile) => this.onSuccess(profile, formContent, formTitle), 
         error: (err) => this.onError(err)
       });
 
 
     if (this.form.value.content?.length == 0) {
       window.alert("Please check your input!")
+    }
+  } 
 
+  private onSuccess(profile: Profile | undefined, formContent: string, formTitle: string): void {
+    // this is where we have something in scope of type profile
+    // let current: new Date
+    let unique = Math.floor(Number(Math.random()*1000)) // generates date of successful form
+
+    let new_Date: Date = new Date();
+    // Converting date to string
+    let result: string = new_Date.toLocaleString();
+    // Convert the date object to US specific date string
+    let date = new_Date.toLocaleString("en-US");
+
+    if (profile == undefined) {
+      // handle this case better?
+      return;
     }
-    // we need to define onerror
-} 
 
-private onSuccess(profile: Profile | undefined, formContent: string): void {
-  // this is where we have something in scope of type profile
-  // let current: new Date
-  let unique = Math.floor(Number(Math.random()*1000)) // generates date of successful form
-
-  let new_Date: Date = new Date();
-  // Converting date to string
-  let result: string = new_Date.toLocaleString();
-  // Convert the date object to US specific date string
-  let date = new_Date.toLocaleString("en-US");
-
-  if (profile == undefined) {
-    // handle this case better?
-    return;
+    this.postService.makePost(unique, formTitle, formContent, profile, [], date)
+    .subscribe({
+      next: (post) => this.onSuccessMP(),
+      error: (err) => this.onError(err)
+    });
+    console.log(profile.pid) 
   }
 
-  this.postService.makePost(unique, formContent, profile, [], date)
-  .subscribe({
-    next: (post) => this.onSuccessMP(),
-    error: (err) => this.onError(err)
-  });
-  console.log(profile.pid) 
-}
-private onError(error: Error): void {
-  if (error.message) {
-    window.alert(error.message);
-  } else {
-    window.alert("Unknown error: " + JSON.stringify(error));
+  private onError(error: Error): void {
+    if (error.message) {
+      window.alert(error.message);
+    } else {
+      window.alert("Unknown error: " + JSON.stringify(error));
+    }
   }
-}
 
   private onSuccessMP(){
 

frontend/src/app/post.service.ts

@@ -25,6 +25,7 @@ export interface User{
 
   export interface Post {
     id: number;
+    title: string;
     content: string;
     user: User;
     votes: User[];
@@ -61,10 +62,10 @@ export class PostService {
         return this.http.get<Post[]>("/api/post"); 
     }
 
-    makePost(id: number, content: string, user: Profile, votes: [], timestamp: string): Observable<Post> {
+    makePost(id: number, title: string, content: string, user: Profile, votes: [], timestamp: string): Observable<Post> {
         if(user.id && user.first_name && user.last_name && user.email && user.pronouns){
             let u: User = {id: user.id, pid:user.pid, onyen: user.onyen, first_name:user.first_name, last_name:user.last_name, email:user.email, pronouns:user.pronouns, permissions: user.permissions};
-            let post: Post = {id:id, content: content, user: u, votes: votes, timestamp:timestamp};
+            let post: Post = {id: id, title: title, content: content, user: u, votes: votes, timestamp:timestamp};
             console.log("Made it to api call")
             console.log(JSON.stringify(post))
             try{

frontend/src/app/viewforum/viewforum.component.html

@@ -2,13 +2,15 @@ <h1>Forum</h1>
 
 <table>
   <thead>
+      <td>Title</td>
       <td>Response</td>
       <td>First Name</td> 
       <td>Last Name</td>
       <td>Date</td>
   </thead>
   <tbody>
       <tr *ngFor="let post of post$| async">
+          <td>{{ post.title }}</td>
           <td>{{ post.content }}</td>
           <td>{{ post.user.first_name}}</td>
           <td>{{ post.user.last_name}}</td>