redesign send bar

backend/src/main/java/ovh/herisson/Clyde/EndPoints/Msg/MessagesController.java

@@ -65,7 +65,7 @@ public class MessagesController {
 	}
 
 	@PatchMapping("/discussion/{id}/add")
-	public ResponseEntity<Discussion> AlterDiscussion(@RequestHeader("Authorization") String token, @PathVariable long id, @RequestBody User data){
+	public ResponseEntity<Discussion> invite(@RequestHeader("Authorization") String token, @PathVariable long id, @RequestBody User data){
 		User user = authServ.getUserFromToken(token);
 		if(user == null){
 			return new UnauthorizedResponse<>(null);
@@ -78,6 +78,20 @@ public class MessagesController {
 		return new ResponseEntity<>(disc, HttpStatus.OK);
 	}
 
+	@PatchMapping("/discussion/{id}/remove")
+	public ResponseEntity<Discussion> removeMember(@RequestHeader("Authorization") String token, @PathVariable long id, @RequestBody User data){
+		User user = authServ.getUserFromToken(token);
+		if(user == null){
+			return new UnauthorizedResponse<>(null);
+		}
+
+		Discussion disc = discRepo.findById(id).orElse(null);
+		User member = userServ.getUserById(data.getRegNo());
+		disc.delMember(member);
+		discRepo.save(disc);
+		return new ResponseEntity<>(disc, HttpStatus.OK);
+	}
+
 	@PostMapping("/discussion/{id}")
 	public ResponseEntity<Discussion> sendMessage(@RequestHeader("Authorization") String token, @PathVariable long id, @RequestBody Message msg){
 		User user = authServ.getUserFromToken(token);

backend/src/main/java/ovh/herisson/Clyde/Tables/Msg/Discussion.java

@@ -55,4 +55,8 @@ public class Discussion{
     public void addMember(User user) {
 		members.add(user);
     }
+
+    public void delMember(User user) {
+		members.remove(user);
+    }
 }

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;
@@ -130,6 +143,7 @@ div#discussion{
 	margin: 30px;
 	background-color: rgba(255, 255, 255, 0.05);
 	border-radius: 10px;
+	overflow: hidden;
 }
 
 #msgName{
@@ -168,21 +182,19 @@ div#discussion{
 }
 
 #messageBox{
+	width: 100%;
+	height: 30px;
+	background-color: white;
 	display: flex;
-	margin: 10px;
-	border-radius: 5px;
 }
 
 #messageBox input[type="text"]{
-	align-self: end;
-	flex-grow: 1;
+	all: inherit;
+	padding: 0 10px;
 }
 
 #messageBox input[type="submit"]{
-	position: absolute;
-	right: 50px;
-	margin: 2px;
-	border: none;
+	border: inherit;
 	padding: 0 10px;
 }
 

frontend/src/rest/msg.js

@@ -27,12 +27,16 @@ 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,
 		response: responseId,
 	}
-	restPost("/discussion/" + id, data);
+	restPost("/discussion/" + id, data).then(() => fetchDiscussion(id));
 }
 
 export async function updateDiscussionName(id, name){