PGL/Clyde
3
2
Fork 3
Code Issues 13 Pull Requests Actions Projects 3 Releases 2 Wiki Activity

Linking front for forum creation

Browse Source
This commit is contained in:
Debucquoy Anthony
2024-04-09 17:27:26 +02:00
parent 5f483216b9
commit 61e269eb27
7 changed files with 50 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/Apps/Forums.vue
View File

@ -8,13 +8,18 @@
<script setup>
import { ref, reactive } from 'vue'
import { getCourses } from '@/rest/courses.js'
import { ForumsOfCurrentCourse, getForumsOfCourse } from '@/rest/forum.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>
@ -28,10 +33,11 @@ const selectedForum = ref();
<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 id="createPost" @click="createPost()">+</button-->
<button v-if="Role === 'Admin' || Role === 'Teacher' " id="createPost" @click="createPost()">+</button>
</div>
<div id="PostViewer" v-if="fetchedPost != null">
<div id="Post">
@ -43,10 +49,41 @@ const selectedForum = ref();
</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%;