Merge pull request #453 from CodingFactory-Repos/develop-G10

[Feature] Add Emojis to the tchat

Author: AyakorK

back-end/package-lock.json

@@ -47,7 +47,6 @@
 		"pug": "^3.0.2",
 		"reflect-metadata": "^0.1.13",
 		"rimraf": "^5.0.1",
-		"sharp": "^0.32.1",
 		"rxjs": "^7.8.1",
 		"sharp": "^0.32.1",
 		"socket.io": "^4.6.1"

back-end/package.json

@@ -129,4 +129,11 @@ export class CallsController {
 	async isProductOwner(@Jwt() userId: ObjectId, @Res() res: Response) {
 		return res.status(201).json({ isProductOwner: true });
 	}
+
+	@Get('/is_pedagogue')
+	@UseGuards(JwtAuthGuard, new RoleValidator(Roles.PEDAGOGUE))
+	async IsPedagogue(@Jwt() userId: ObjectId, @Res() res: Response) {
+		console.log(Roles.PEDAGOGUE);
+		return res.status(201).json({ isPedagogue: true });
+	}
 }

back-end/src/base/calls/calls.controller.ts

@@ -13,6 +13,7 @@
 	},
 	"dependencies": {
 		"@imengyu/vue3-context-menu": "^1.2.10",
+		"@picmo/popup-picker": "^5.8.4",
 		"@pixi/graphics-smooth": "^1.1.0",
 		"@toycode/markdown-it-class": "^1.2.4",
 		"@vitejs/plugin-vue-jsx": "^3.0.1",
@@ -32,6 +33,7 @@
 		"marked": "^5.0.5",
 		"mavon-editor": "^3.0.1",
 		"pdfmake": "^0.2.7",
+		"picmo": "^5.8.4",
 		"pinia": "^2.1.3",
 		"pixi-viewport": "^5.0.1",
 		"pixi.js": "^7.2.4",
@@ -50,6 +52,7 @@
 		"vue-qrcode-reader": "^3.1.6",
 		"vue-qrious": "^3.1.0",
 		"vue-router": "^4.2.2",
+		"vue3-emoji-picker": "^1.1.7",
 		"vuedraggable": "^4.1.0",
 		"vuejs3-datepicker": "^1.0.19"
 	},

front-end/package-lock.json

@@ -1,7 +1,9 @@
 <template>
 	<div class="flex flex-col items-center mt-2.5">
-		<!-- PUT A FRAME AROUND THE QRCODE TO MAKE IT PRETTIER -->
-		<div v-if="url" class="border-4 border-white dark:border-gray-700 rounded-lg bg-white dark:bg-gray-700 p-4">
+		<div
+			v-if="url"
+			class="border-4 border-white dark:border-gray-700 rounded-lg bg-white dark:bg-gray-700 p-4"
+		>
 			<qrcode :value="url" />
 		</div>
 		<div v-else>
@@ -69,6 +71,12 @@ export default {
 				this.getQrCode();
 			}
 			this.message = response.data.message;
+			this.isPedago(response.data.message);
+		},
+		isPedago(message) {
+			if (message.includes('pédagogue')) {
+				this.$router.push('/');
+			}
 		},
 	},
 };

front-end/package.json

@@ -13,9 +13,7 @@
 		</div>
 		<div class="chatbox_input flex-col w-full absolute bottom-2">
 			<div class="w-full">
-				<div
-					class="gif-container h-[400px] flex z-10 w-[400px] mt-64 overflow-y-scroll"
-				>
+				<div class="gif-container h-[400px] flex z-10 w-[400px] mt-64 overflow-y-scroll">
 					<div class="flex flex-wrap justify-center">
 						<img
 							v-for="gif in gifs"
@@ -27,12 +25,21 @@
 						/>
 					</div>
 				</div>
+				<div
+					ref="emojiContainer"
+					v-if="showEmoji"
+					class="place-items-start ease-in-out transition-all duration-300"
+					onfocusout="showEmoji()"
+				>
+					<EmojiPicker :native="true" class="!mr-0 !ml-0" @select="(event) => addEmoji(event)" />
+				</div>
+				<button class="emojiBtn w-1/12 h-1/12" @click="displayEmoji()" ref="emojiBtn">😄</button>
 				<input
 					v-model="newMessageText"
 					@keydown.enter="sendMessage"
 					placeholder="Envoyer un message"
 					:class="{
-						'w-9/12': !gifSelected,
+						'w-8/12': !gifSelected,
 						'w-3/12': gifSelected,
 						'p-2': true,
 						'bg-white': true,
@@ -58,7 +65,7 @@
 					placeholder="Gif"
 					:class="{
 						'w-3/12': !gifSelected,
-						'w-9/12': gifSelected,
+						'w-8/12': gifSelected,
 						'p-2': true,
 						'bg-white': true,
 						'dark:bg-gray-700': true,
@@ -90,6 +97,8 @@ import axios, { AxiosError } from 'axios';
 import { manager } from '@/api/network/socket.io';
 import { http } from '@/api/network/axios';
 import { withErrorHandler } from '@/utils/storeHandler';
+import EmojiPicker from 'vue3-emoji-picker';
+import 'vue3-emoji-picker/css';
 
 const props = defineProps<{
 	roomId: string;
@@ -105,9 +114,10 @@ const gifs = ref([]);
 const newMessageText = ref('');
 const courseId = ref();
 const count = ref();
-const hoverHint = ref(false);
 const gifSelected = ref(false);
 const searchTimeout = ref(null);
+const showEmoji = ref(false);
+const emojiContainer = ref();
 
 /* SOCKET */
 
@@ -133,6 +143,15 @@ onUnmounted(() => {
 
 /* METHODS */
 
+const addEmoji = (selection) => {
+	console.log(selection.i);
+	newMessageText.value += selection.i;
+};
+
+const displayEmoji = () => {
+	showEmoji.value = !showEmoji.value;
+};
+
 const addMessage = (msg: Object) => {
 	messages.value.unshift(msg);
 };

front-end/src/components/RollCallComponents/CallsComponent.vue

@@ -1,8 +1,8 @@
 <template>
 	<div v-if="courseId" class="mx-auto">
-		<a :href="groupUrl">
+		<router-link :to="groupUrl">
 			<button class="bg-blue-500 text-white py-2 px-4 rounded mt-2 mb-4">Former les groupes</button>
-		</a>
+		</router-link>
 	</div>
 </template>
 

front-end/src/components/RollCallComponents/Chat.vue

@@ -8,7 +8,11 @@
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
 const goBack = () => {
-	window.history.back();
+	router.go(-1);
 };
 </script>

front-end/src/components/RollCallComponents/MakeGroupsComponent.vue

@@ -63,14 +63,16 @@
 									}"
 								/>
 							</DrawerRouterOption>
-							<DrawerRouterOption to="/app/rollcall" name="Attendance" :fold="!active">
-								<SvgQrCode
-									:class="{
-										'fill-selected-icon dark:fill-selected-icon':
-											route.path.startsWith('/app/rollcall'),
-									}"
-								/>
-							</DrawerRouterOption>
+							<div v-if="!isPedago">
+								<DrawerRouterOption to="/app/rollcall" name="Attendance" :fold="!active">
+									<SvgQrCode
+										:class="{
+											'fill-selected-icon dark:fill-selected-icon':
+												route.path.startsWith('/app/rollcall'),
+										}"
+									/>
+								</DrawerRouterOption>
+							</div>
 							<DrawerRouterOption to="/app/retrospective" name="Retrospective" :fold="!active">
 								<SvgNote
 									:class="{
@@ -118,7 +120,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useThemeStore } from '@/store/modules/theme.store';
@@ -138,6 +140,7 @@ import SvgNote from '@/components/common/svg/Note.vue';
 import SvgDark from '@/components/common/svg/Dark.vue';
 import SvgLight from '@/components/common/svg/Light.vue';
 import SvgLogout from '@/components/common/svg/Logout.vue';
+import { http } from '@/api/network/axios';
 
 const route = useRoute();
 const themeStore = useThemeStore();
@@ -149,6 +152,19 @@ const isBlacklist = computed(() => blacklist.some((rgx) => rgx.test(route.path))
 const theme = computed(() => themeStore.theme);
 const active = ref(false);
 const modalLogoutActive = ref(false);
+const isPedago = ref(false);
+
+onMounted(async () => {
+	await getIsPedago();
+});
+
+const getIsPedago = async () => {
+	try {
+		isPedago.value = await http.get(`/calls/is_pedagogue/`);
+	} catch (error) {
+		console.log(error);
+	}
+};
 
 const drawerAction = () => {
 	active.value = !active.value;