adding members management

frontend/src/Apps/Msg.vue

@@ -7,9 +7,10 @@
 
 <script setup>
 	import { ref, reactive } from 'vue'
-	import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName} from '@/rest/msg.js'
+	import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName, invite} from '@/rest/msg.js'
 
 	const msgContent = ref("");
+	const addMember = ref(false);
 
 </script>
 
@@ -19,8 +20,8 @@
 			<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')">+</button>
 		</div>
-		<div id="discussion">
-			<h1 id=msgName ><input class="InputTitle" type="text" @blur="updateDiscussionName(currentDiscussion.id, currentDiscussion.name)" v-model="currentDiscussion.name"></h1>
+		<div id="discussion" v-if="currentDiscussion.length != 0">
+			<h1 id=msgName ><input class="InputTitle" type="text" @change="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.content }}
@@ -31,6 +32,10 @@
 				<input type="submit" @click="sendMessage(currentDiscussion.id, msgContent, null)" value="send">
 			</div>
 		</div>
+		<div id="members" v-if="currentDiscussion.length != 0">
+			<div class="memberItem" v-for="member in currentDiscussion.members" :key="member.id">{{ member.firstName }} {{ member.lastName.toUpperCase() }}</div>
+			<input type=text id="addMembers" @focus="addMember = true" @blur="addMember = false;$event.target.value = ''" @change="invite(currentDiscussion.id, $event.target.value)" :placeholder="addMember ? 'Regno' : '+'"/>
+		</div>
 	</div>
 </template>
 
@@ -42,7 +47,7 @@ div#msg{
 	height: 100%;
 
 	display: grid;
-	grid-template-columns: 20% auto;
+	grid-template-columns: 20% auto 10%;
 }
 
 div#discList{
@@ -53,7 +58,17 @@ div#discList{
 	padding: 10px;
 	display: flex;
 	flex-direction: column;
+}
 
+div#members{
+	margin: 30px 0;
+	border-radius: 10px 0 0 10px;
+	background-color: red;
+	background-color: rgba(255, 255, 255, 0.05);
+	overflow: hidden;
+	display: flex;
+	padding: 10px 0 0 10px;
+	flex-direction: column;
 }
 
 .InputTitle{
@@ -74,6 +89,19 @@ div#discList{
 	border: 1px solid darkorange;
 }
 
+.memberItem{
+	color: darkorange;
+	display: flex;
+	font-family: sans-serif;
+	font-weight: bold;
+	height: 4vh;
+	margin: 5px;
+	border-radius: 30px 0 0 30px;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid darkorange;
+}
+
 #createDiscussion{
 	height: 4vh;
 	margin: 5px;
@@ -84,6 +112,17 @@ div#discList{
 	font-weight: 900;
 	font-size: 2em;
 }
+#addMembers{
+	height: 4vh;
+	margin: 5px;
+	text-align: center;
+	color: white;
+	background-color: green;
+	border-radius: 30px 0 0 30px;
+	border: none;
+	font-weight: 900;
+	font-size: 2em;
+}
 
 div#discussion{
 	display: flex;

frontend/src/rest/msg.js

@@ -13,8 +13,8 @@ import { ref } from 'vue'
  * - name
  * - members
  */
-export const discussionsList = ref({});
-export const currentDiscussion = ref({});
+export const discussionsList = ref();
+export const currentDiscussion = ref([]);
 
 
 export async function createDiscussion(name){
@@ -24,7 +24,7 @@ export async function createDiscussion(name){
 
 
 export async function invite(id, regNo){
-	restPost("/discussion/"+ id+ "/invite", {user: regNo});
+	restPatch("/discussion/"+ id+ "/add", {regNo: parseInt(regNo)}).then(() => fetchDiscussion(id))
 }
 
 export async function sendMessage(id, content, responseId){