<!---------------------------------------------------- File: Forums.vue Author: Anthony Debucquoy Scope: Extension messagerie Description: Forum des étudiants -----------------------------------------------------> <script setup> import { ref, reactive } from 'vue' import { getCourses } from '@/rest/courses.js' import { ForumsOfCurrentCourse, getForumsOfCourse, createForum } from '@/rest/forum.js' import { PostsOfCurrentForum, getPostsOfForum } from '@/rest/forum.js' import { fetchedPost, fetchPost } from '@/rest/forum.js' import { getSelf } from '@/rest/Users.js' const courses = await reactive(getCourses()); const selectedCourse = ref(); const selectedForum = ref(); const Role = (await getSelf()).role; const addForum = ref(false); const addForumName = 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)" v-if="ForumsOfCurrentCourse != null"> <option v-for="forum in ForumsOfCurrentCourse" :value=forum.id>{{forum.name}}</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.name }}</div> <button v-if="Role === 'Admin' || Role === 'Teacher' " id="createPost" @click="createPost()">+</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.messages">{{msg.author}} - {{msg.content}}</p> </div> </div> </div> <div id="forumAdder" v-if=addForum @click.self="addForum = false"> <div id="addForumForm"> <label>New Forum:</label> <input type="text" placeholder="Name" v-model=addForumName @keyup.enter="createForum(selectedCourse, $event.target.value); addForum = false;" /> </div> </div> </template> <style scoped> #forumAdder{ 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; } #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; } #ForumSelector button{ background-color: green; border: none; border-radius: 25%; margin: 10px; } #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; } #Messages{ padding: 25px; border-top: 3px dotted white; } #Messages > p { background-color: orange; } </style>