Clyde/frontend/src/Apps/Forums.vue

<!----------------------------------------------------
	File: Forums.vue 
	Author: Anthony Debucquoy 
	Scope: Extension messagerie
	Description: Forum des étudiants
----------------------------------------------------->

<script setup>
import { ref, reactive } from 'vue'
import i18n from '@/i18n.js'
import { getCourses, getUserActualCourses } from '@/rest/courses.js'
import { ForumsOfCurrentCourse, getForumsOfCourse, createForum } from '@/rest/forum.js'
import { PostsOfCurrentForum, getPostsOfForum, createPost } from '@/rest/forum.js'
import { fetchedPost, fetchPost, sendAnswer } from '@/rest/forum.js'
import { getSelf } from '@/rest/Users.js'

const Role = (await getSelf()).role;
const courses = Role === 'Admin' || Role === 'Secretary' || Role === 'Teacher' ? await reactive(getCourses(Role)) : await reactive(getUserActualCourses());
const selectedCourse = ref();
const selectedForum = ref();

const addForumName = ref("");
const addPost = ref(false);
const addPostSubject = ref("");
const addPostContent = ref("");

</script>

<template>
	<div id="app">
		<div id="ForumSelector">
			<select id="cours" value="" v-model="selectedCourse"  @change="getForumsOfCourse(selectedCourse)">
				<option v-for="course in courses" :value="course.courseID">{{course.title}}</option>
			</select>

			<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">{{ i18n("forum.create") }}</option>
			</select>
		</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>
			<button v-if="Role === 'Admin' || Role === 'Teacher' "  id="createPost" @click="addPost = true">+</button>
		</div>
		<div id="PostViewer" v-if="fetchedPost != null">
			<div id="Post">
				<h1>{{ fetchedPost.subject }}</h1>
				{{fetchedPost.content}}
			</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); $event.target.value = ''"/>
			</div>
		</div>
	</div>
	<div class=popup v-if="selectedForum === 'create' || addPost" @click.self="selectedForum = ''; addPost = false" >

		<!-- Popup to add forum -->
		<div id="addForumForm" v-if="selectedForum === 'create'" @keyup.enter="createForum(selectedCourse, addForumName); selectedForum = '';">
			<label>{{ i18n("forum.create.name") }}</label>
			<input type="text" placeholder="Name" v-model=addForumName  />
		</div>

		<!-- Popup to add Post -->
		<div id="addPostForm" v-if=addPost>
			<label>{{ i18n("forum.post.create.name") }}</label>
			<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); addPost = false;">
		</div>

	</div>
</template>

<style scoped>

.popup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #00000022;
	z-index: 9;
}

#addForumForm{
	position: relative;
	width: 30%;
	left: calc(50% - 30% / 2);
	top: calc(50% - 10% / 2);
	border-radius: 10px;
	height: 10%;
	background-color: white;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

#addPostForm{
	position: relative;
	width: 30%;
	left: calc(50% - 30% / 2);
	top: calc(50% - 50% / 2);
	border-radius: 10px;
	height: 50%;
	background-color: white;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}

#app{
	display: grid;
	width: 100%;
	height: 100%;
	grid-template: 5em auto / 25% 75%;
}

#ForumSelector{
	background-color: #FFFFFF0E;
	grid-column: 1 / 3;
	border-radius: 100px;
	margin: 10px;
	display: flex;
	justify-content: space-around;
}

#ForumSelector select{
	background-color: #ffa000;
	border: none;
	margin: 10px;
	border-radius: 10px;
	width: 200px;
	text-align: center;
}

#PostSelector button{
	background-color: green;
	color: white;
	border: none;
	height: 4vh;
	margin: 5px;
	border-radius: 0 30px 30px 0;
	align-items: center;
	justify-content: center;
}

#PostSelector{
	background-color: #FFFFFF0E;
	border-radius: 0 25px 25px 0;
	margin: 10px 0 10px 10px;
	overflow: hidden;
	padding: 10px;

	display: flex;
	flex-direction: column;

}

.postItem{
	color: darkorange;
	display: flex;
	font-family: sans-serif;
	font-weight: bold;
	height: 4vh;
	margin: 5px;
	border-radius: 0 30px 30px 0;
	align-items: center;
	justify-content: center;
	border: 1px solid darkorange;
}

.postItem:hover{
	background-color: gray;
}

#PostViewer{
	background-color: #FFFFFF0E;
	border-radius: 25px;
	margin: 10px;

	max-height: 100%;

	overflow: scroll;
}

#Post{
	padding: 25px;
	color: white;
}

#Post > h1{
	text-align: center;
	text-decoration: underline;
}

#Messages{
	padding: 25px;
	border-top: 3px dotted white;

}

#Messages > p {

	background-color: orange;
}

</style>