From 2e02cd88701a75ebc00d897d1e20b4958ccf4fff Mon Sep 17 00:00:00 2001
From: Anthony Debucquoy <debucquoy.anthony@gmail.com>
Date: Sat, 13 Apr 2024 15:56:43 +0200
Subject: [PATCH] Style bits redone

---
 frontend/src/Apps/Forums.vue | 30 +++++++++++++++++++-----------
 frontend/src/rest/forum.js   |  4 +++-
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Apps/Forums.vue b/frontend/src/Apps/Forums.vue
index 50e17f6..0effc5c 100644
--- a/frontend/src/Apps/Forums.vue
+++ b/frontend/src/Apps/Forums.vue
@@ -18,7 +18,6 @@ const selectedCourse = ref();
 const selectedForum = ref();
 const Role = (await getSelf()).role;
 
-const addForum = ref(false);
 const addForumName = ref("");
 const addPost = ref(false);
 const addPostSubject = ref("");
@@ -33,10 +32,10 @@ const addPostContent = ref("");
 				<option v-for="course in courses" :value="course.courseId">{{course.title}}</option>
 			</select>
 
-			<select id="forum" value="" v-model="selectedForum"  @change="getPostsOfForum(selectedForum)" v-if="ForumsOfCurrentCourse != null">
+			<select id="forum" value="" v-model="selectedForum"  @change="getPostsOfForum(selectedForum !== 'create' ? selectedForum : null)" v-if="ForumsOfCurrentCourse != null">
 				<option v-for="forum in ForumsOfCurrentCourse" :value=forum.id>{{forum.name}}</option>
+				<option v-if="(Role === 'Admin' || Role === 'Teacher') && ForumsOfCurrentCourse != null" value="create">Create Forum</option>
 			</select>
-			<button v-if="(Role === 'Admin' || Role === 'Teacher') && ForumsOfCurrentCourse != null " id="createPost" @click="addForum = true">+</button>
 		</div>
 		<div id="PostSelector" v-if="PostsOfCurrentForum != null">
 			<div @click="fetchPost(post.id)" class="postItem" v-for="post in PostsOfCurrentForum" :key="post.id">{{ post.subject }}</div>
@@ -49,14 +48,14 @@ const addPostContent = ref("");
 			</div>
 			<div id="Messages">
 				<p v-for="msg in fetchedPost.answers">{{msg.author.firtName}} {{msg.author.lastName}} - {{msg.content}}</p>
-				<input v-if=!fetchedPost.locked type="text" placeholder="response" @keyup.enter="sendAnswer(fetchedPost.id, $event.target.value)"/>
+				<input v-if=!fetchedPost.locked type="text" placeholder="response" @keyup.enter="sendAnswer(fetchedPost.id, $event.target.value); $event.target.value = ''"/>
 			</div>
 		</div>
 	</div>
-	<div class=popup v-if="addForum || addPost" @click.self="addForum = false; addPost = false" >
+	<div class=popup v-if="selectedForum === 'create' || addPost" @click.self="selectedForum = ''; addPost = false" >
 
 		<!-- Popup to add forum -->
-		<div id="addForumForm" v-if=addForum @keyup.enter="createForum(selectedCourse, addForumName); addForum = false;">
+		<div id="addForumForm" v-if="selectedForum === 'create'" @keyup.enter="createForum(selectedCourse, addForumName); selectedForum = '';">
 			<label>New Forum:</label>
 			<input type="text" placeholder="Name" v-model=addForumName  />
 		</div>
@@ -64,9 +63,9 @@ const addPostContent = ref("");
 		<!-- Popup to add Post -->
 		<div id="addPostForm" v-if=addPost>
 			<label>New Post:</label>
-			<input type="text" placeholder="subject" v-model=addPostSubject @keyup.enter="createPost(selectedForum, addPostSubject, addPostContent); addForum = false;"/>
+			<input type="text" placeholder="subject" v-model=addPostSubject @keyup.enter="createPost(selectedForum, addPostSubject, addPostContent); addPost = false;"/>
 			<textarea v-model="addPostContent" placeholder=content></textarea>
-			<input type="submit" value="send" @click="createPost(selectedForum, addPostSubject, addPostContent); addForum = false;">
+			<input type="submit" value="send" @click="createPost(selectedForum, addPostSubject, addPostContent); addPost = false;">
 		</div>
 
 	</div>
@@ -139,11 +138,15 @@ const addPostContent = ref("");
 	text-align: center;
 }
 
-#ForumSelector button{
+#PostSelector button{
 	background-color: green;
+	color: white;
 	border: none;
-	border-radius: 25%;
-	margin: 10px;
+	height: 4vh;
+	margin: 5px;
+	border-radius: 0 30px 30px 0;
+	align-items: center;
+	justify-content: center;
 }
 
 #PostSelector{
@@ -187,7 +190,12 @@ const addPostContent = ref("");
 
 #Post{
 	padding: 25px;
+	color: white;
+}
 
+#Post > h1{
+	text-align: center;
+	text-decoration: underline;
 }
 
 #Messages{
diff --git a/frontend/src/rest/forum.js b/frontend/src/rest/forum.js
index 5aa49a0..637245f 100644
--- a/frontend/src/rest/forum.js
+++ b/frontend/src/rest/forum.js
@@ -25,7 +25,9 @@ export function createForum(id, name){
  * List post of a specified forum
  */
 export async function getPostsOfForum(id){
-	PostsOfCurrentForum.value = await restGet("/forum/" + id);
+	if(id != null){
+		PostsOfCurrentForum.value = await restGet("/forum/" + id);
+	}
 }
 
 export function createPost(id, subject, content){