tonitch/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

responses and general modifications

Browse Source
This commit is contained in:
Debucquoy Anthony
2024-04-09 23:41:24 +02:00
parent 7b0d76dae8
commit 106bf96a98
8 changed files with 105 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,8 +9,8 @@
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 { PostsOfCurrentForum, getPostsOfForum, createPost } from '@/rest/forum.js'
import { fetchedPost, fetchPost, sendAnswer } from '@/rest/forum.js'
import { getSelf } from '@/rest/Users.js'
const courses = await reactive(getCourses());
@ -20,6 +20,9 @@ const Role = (await getSelf()).role;
const addForum = ref(false);
const addForumName = ref("");
const addPost = ref(false);
const addPostSubject = ref("");
const addPostContent = ref("");
</script>
@ -36,8 +39,8 @@ const addForumName = ref("");
<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 @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">
@ -45,21 +48,33 @@ const addForumName = ref("");
{{fetchedPost.content}}
</div>
<div id="Messages">
<p v-for="msg in fetchedPost.messages">{{msg.author}} - {{msg.content}}</p>
<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)"/>
</div>
</div>
</div>
<div id="forumAdder" v-if=addForum @click.self="addForum = false">
<div id="addForumForm">
<div class=popup v-if="addForum || addPost" @click.self="addForum = false; addPost = false" >
<!-- Popup to add forum -->
<div id="addForumForm" v-if=addForum @keyup.enter="createForum(selectedCourse, addForumName); addForum = false;">
<label>New Forum:</label>
<input type="text" placeholder="Name" v-model=addForumName @keyup.enter="createForum(selectedCourse, $event.target.value); addForum = false;" />
<input type="text" placeholder="Name" v-model=addForumName />
</div>
<!-- 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;"/>
<textarea v-model="addPostContent" placeholder=content></textarea>
<input type="submit" value="send" @click="createPost(selectedForum, addPostSubject, addPostContent); addForum = false;">
</div>
</div>
</template>
<style scoped>
#forumAdder{
.popup{
position: fixed;
top: 0;
left: 0;
@ -84,6 +99,21 @@ const addForumName = ref("");
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;
gap: 10px;
}
#app{
display: grid;
width: 100%;

51
frontend/src/rest/forum.js
View File

@ -1,3 +1,10 @@
/*******************************************************
* File: forum.js
* Author: Anthony Debucquoy
* Scope: Extension messagerie
* Description: Forum related functions and calls
*******************************************************/
import { ref } from 'vue'
import { restGet, restPost, restDelete, restPatch } from './restConsumer.js'
@ -18,17 +25,11 @@ export function createForum(id, name){
* List post of a specified forum
*/
export async function getPostsOfForum(id){
PostsOfCurrentForum.value = [
{
id: 1,
name: "Post~1"
},
{
id: 2,
name: "Post~2"
},
]
// PostsCurrentForum.value = await restGet("/forum/" + id);
PostsOfCurrentForum.value = await restGet("/forum/" + id);
}
export function createPost(id, subject, content){
restPost("/forum/" + id, {subject: subject, content: content}).then(_ => getPostsOfForum(id));
}
export const PostsOfCurrentForum = ref();
@ -37,29 +38,11 @@ export const PostsOfCurrentForum = ref();
* Get a post and its responses
*/
export async function fetchPost(id){
fetchedPost.value = {
id: 1,
subject: "This is the subject of the post",
content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
messages: [
{
id: 1,
author: "author~1",
content: "J'ai pas copris le message !"
},
{
id: 2,
author: "author~2",
content: "tu as fait une faute dans ton message..."
},
{
id: 3,
author: null,
content: "I'm anonymous noww..."
}
]
}
// fetchedPost.value = await restGet("/forum/post/" + id);
fetchedPost.value = await restGet("/forum/post/" + id);
}
export function sendAnswer(id, content){
restPost("/forum/post/" + id, {content: content}).then(_ => fetchPost(id))
}
export const fetchedPost = ref();