messsaging on the frontend

frontend/src/Apps/Msg.vue

@@ -7,9 +7,9 @@
 
 <script setup>
 	import { ref, reactive } from 'vue'
-	import { getDiscussions, currentDiscussion, fetchDiscussion, createDiscussion } from '@/rest/msg.js'
+	import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName} from '@/rest/msg.js'
 
-	const discussionsList = reactive(await getDiscussions());
+	const msgContent = ref("");
 
 </script>
 
@@ -17,18 +17,18 @@
 	<div id="msg">
 		<div id="discList">
 			<div @click="fetchDiscussion(discussion.id)" class="discItem" v-for="discussion in discussionsList" :key="discussion.id">{{ discussion.name }}</div>
-			<button id="createDiscussion" @click="createDiscussion('New Discussion').then( e => discussionsList.push(e) )">+</button>
+			<button id="createDiscussion" @click="createDiscussion('New Discussion')">+</button>
 		</div>
 		<div id="discussion">
-			<h1 id=msgName >{{currentDiscussion.name}}</h1>
+			<h1 id=msgName ><input class="InputTitle" type="text" @blur="updateDiscussionName(currentDiscussion.id, currentDiscussion.name)" v-model="currentDiscussion.name"></h1>
 			<div id=msgs>
 				<div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id">
-					{{ msg.text }}
+					{{ msg.content }}
 				</div>
 			</div>
 			<div id=messageBox>
-				<input type="text" name="messageBox" value="">
+				<input type="text" v-model="msgContent">
-				<input type="submit" name="" id="" value="send">
+				<input type="submit" @click="sendMessage(currentDiscussion.id, msgContent, null)" value="send">
 			</div>
 		</div>
 	</div>
@@ -56,6 +56,11 @@ div#discList{
 
 }
 
+.InputTitle{
+	all: inherit;
+	margin: auto;
+}
+
 .discItem{
 	color: darkorange;
 	display: flex;
@@ -91,7 +96,7 @@ div#discussion{
 #msgName{
 	text-align: center;
 	display: block;
-	background-color: #0202f755;
+	background-color: #2a1981;
 	border-radius: 5px;
 	color: white;
 	width: 75%;

frontend/src/rest/msg.js

@@ -5,78 +5,47 @@
  * Description: Messages frontend api consumer
  *******************************************************/
 
-import { restGet, restPost } from './restConsumer.js'
+import { restGet, restPost, restPatch } from './restConsumer.js'
 import { ref } from 'vue'
 
-export const currentDiscussion = ref({});
-
 /**
- * @return array of
  * - id
  * - name
  * - members
  */
-export async function getDiscussions(){
+export const discussionsList = ref({});
-	return restGet("/discussions");
+export const currentDiscussion = ref({});
-}
 
-export async function fetchDiscussion(id){
-	currentDiscussion.value = {
-		id: id, 
-		name: "Discussion#2",
-		msgs: [
-			{
-				id: 1,
-				author: 1,
-				sender: true,
-				attachment: null,
-				text: "Hello world!"
-			},
-			{
-				id: 2,
-				author: 2,
-				sender: false,
-				attachment: null,
-				text: "Hello What?"
-			},
-			{
-				id: 3,
-				author: 2,
-				sender: false,
-				attachment: null,
-				text: "You morron"
-			},
-			{
-				id: 4,
-				author: 1,
-				sender: true,
-				attachment: null,
-				text: "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."
-			},
-			// {
-			// 	id: 5,
-			// 	author: 1,
-			// 	sender: true,
-			// 	attachment: null,
-			// 	text: "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."
-			// },
-			{
-				id: 6,
-				author: 2,
-				sender: false,
-				attachment: null,
-				text: "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."
-			}
-		]
-	}
-	// currentDiscussion.value = restGet("/discussion/" + id);
-}
 
 export async function createDiscussion(name){
-	return restPost("/discussion", {name: name});
+	let disc = await restPost("/discussion", {name: name});
+	discussionsList.value.push(disc);
 }
 
 
 export async function invite(id, regNo){
 	restPost("/discussion/"+ id+ "/invite", {user: regNo});
 }
+
+export async function sendMessage(id, content, responseId){
+	let data = {
+		content: content,
+		response: responseId,
+	}
+	restPost("/discussion/" + id, data);
+}
+
+export async function updateDiscussionName(id, name){
+	restPatch("/discussion/" + id, {name: name}).then(() => fetchDiscussions());
+}
+
+
+async function fetchDiscussions(){
+	discussionsList.value = await restGet("/discussions");
+}
+
+export async function fetchDiscussion(id){
+	currentDiscussion.value = await restGet("/discussion/" + id);
+}
+
+await fetchDiscussions();