Clyde/frontend/src/Apps/Msg.vue

<!----------------------------------------------------
	File:  Msg.vue
	Author: Anthony Debucquoy
	Scope: Extension messagerie
	Description: Main msg page
----------------------------------------------------->

<script setup>
	import { ref, reactive } from 'vue'
	import { discussionsList, currentDiscussion, fetchDiscussion, createDiscussion, sendMessage, updateDiscussionName, invite, removeMember} from '@/rest/msg.js'

	const msgContent = ref("");
	const addMember = ref(false);

</script>

<template>
	<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')">+</button>
		</div>
		<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 }}<br/>
					<span class="sender" v-if="!msg.sender">{{msg.author.firstName}}</span>
				</div>
			</div>
			<div id=messageBox>
				<input type="text" v-model="msgContent">
				<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" @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>
</template>

<style scoped>

div#msg{
	position: relative;
	width: 100%;
	height: 100%;

	display: grid;
	grid-template-columns: 20% auto 10%;
}

div#discList{
	margin: 30px 0 30px 30px;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	overflow: hidden;
	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{
	all: inherit;
	margin: auto;
}

.discItem{
	color: darkorange;
	display: flex;
	font-family: sans-serif;
	font-weight: bold;
	height: 4vh;
	margin: 5px;
	border-radius: 0 30px 30px 0;
	align-items: center;
	justify-content: center;
	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;
}

.memberItem:hover span{
	display: none;
}

.memberItem:hover{
	background-color: red;
}

.memberItem:hover:before{
	color: white;
	content: "X"
}

#createDiscussion{
	height: 4vh;
	margin: 5px;
	color: white;
	background-color: green;
	border-radius: 0 30px 30px 0;
	border: none;
	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;
	flex-direction: column;
	margin: 30px;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	overflow: hidden;
}

#msgName{
	text-align: center;
	display: block;
	background-color: #2a1981;
	border-radius: 5px;
	color: white;
	width: 75%;
	margin: 30px auto;
}

.discItem:hover{
	background-color: gray;
}

#msgs{
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

.msg {
	background-color: aliceblue;
	font-family: sans-serif;
	margin: 10px;
	padding: 5px;
	border-radius: 3px;
	max-width: 50%;
	align-self: start;
}

.sender{
	display: inline-block;
	color: gray;
	font-size: 0.5em;
}

.msg[sender=true]{
	background-color: darkorange;
	align-self: end;
}

#messageBox{
	width: 100%;
	height: 30px;
	background-color: white;
	display: flex;
}

#messageBox input[type="text"]{
	all: inherit;
	padding: 0 10px;
}

#messageBox input[type="submit"]{
	border: inherit;
	padding: 0 10px;
}

</style>