remove member of a discussion

frontend/src/Apps/Msg.vue

@@ -7,7 +7,7 @@
 
 <script setup>
 	import { ref, reactive } from 'vue'
-	import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName, invite} from '@/rest/msg.js'
+	import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName, invite, removeMember} from '@/rest/msg.js'
 
 	const msgContent = ref("");
 	const addMember = ref(false);
@@ -33,7 +33,7 @@
 			</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>
+			<div class="memberItem" v-for="member in currentDiscussion.members" @click="removeMember(currentDiscussion.id, member.regNo)" :key="member.id"><span>{{ member.firstName }} {{ member.lastName.toUpperCase() }}</span></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>
@@ -102,6 +102,19 @@ div#members{
 	border: 1px solid darkorange;
 }
 
+.memberItem:hover span{
+	display: none;
+}
+
+.memberItem:hover{
+	background-color: red;
+}
+
+.memberItem:hover:before{
+	color: white;
+	content: "X"
+}
+
 #createDiscussion{
 	height: 4vh;
 	margin: 5px;

frontend/src/rest/msg.js

@@ -27,6 +27,10 @@ export async function invite(id, regNo){
 	restPatch("/discussion/"+ id+ "/add", {regNo: parseInt(regNo)}).then(() => fetchDiscussion(id))
 }
 
+export async function removeMember(id, regNo){
+	restPatch("/discussion/"+ id+ "/remove", {regNo: parseInt(regNo)}).then(() => fetchDiscussion(id))
+}
+
 export async function sendMessage(id, content, responseId){
 	let data = {
 		content: content,