Merge pull request #211 from unb-mds/bug/203/chat-página-de-mensagem

Bug/203/chat página de mensagem

API/chat/serializers.py

@@ -45,4 +45,7 @@ def create(self, validated_data):
         # Associa o item ao chat usando o item_id
         item_id = validated_data.pop("item_id")
         validated_data["item"] = Item.objects.get(id=item_id)
-        return super().create(validated_data)
+
+        # Criação do chat
+        chat_room = super().create(validated_data)
+        return chat_room

API/chat/views.py

@@ -16,32 +16,31 @@ class ChatRoomViewSet(ModelViewSet):
     permission_classes = [IsAuthenticated]
 
     def create(self, request, *args, **kwargs):
-        participant_1_id = request.data.get("participant_1")
+        participant_1_id = request.user.id  # Usuário autenticado
         participant_2_id = request.data.get("participant_2")
         item_id = request.data.get("item_id")
 
-        # Verifica se todos os dados necessários foram fornecidos
-        if not participant_1_id or not participant_2_id or not item_id:
-            raise ValidationError(
-                "Os campos participant_1, participant_2 e item são obrigatórios."
-            )
-
-        # Verifica se o item existe
-        try:
-            item = Item.objects.get(id=item_id)
-        except Item.DoesNotExist:
-            raise ValidationError({"item": "Item não encontrado."})
-
-        # Verifica se já existe um chat para este item e participantes
-        if ChatRoom.objects.filter(
-            item=item,
-            participant_1__in=[participant_1_id, participant_2_id],
-            participant_2__in=[participant_1_id, participant_2_id],
-        ).exists():
-            raise ValidationError(
-                "Já existe um chat para este item com os mesmos participantes."
-            )
+        # 🔒 Verifica se os dados necessários foram fornecidos
+        if not participant_2_id or not item_id:
+            raise ValidationError("Os campos participant_2 e item são obrigatórios.")
 
+        # 🔒 Impedir criação de chats consigo mesmo
+        if participant_1_id == int(participant_2_id):
+            raise ValidationError("Não é possível criar um chat consigo mesmo.")
+
+        # 🔍 Verifica se o item existe
+        if not Item.objects.filter(id=item_id).exists():
+            raise ValidationError("O item associado não foi encontrado.")
+
+        # 🔍 Verifica se já existe um chat entre esses participantes para o mesmo item
+        existing_chat = ChatRoom.objects.filter(
+            participant_1=participant_1_id, participant_2=participant_2_id, item_id=item_id
+        ).first()
+
+        if existing_chat:
+            raise ValidationError("Já existe um chat para este item com os mesmos participantes.")
+
+        # 🔄 Se não existir, cria o chat normalmente
         return super().create(request, *args, **kwargs)
 
 

web/src/components/Header-Message.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="fixed top-0 left-0 w-full bg-verde shadow-md py-3 px-4 flex items-center z-10">
+
+    <!-- Botão de Voltar -->
+    <img 
+      @click="goBack"
+      :src="LeftArrow"
+      alt="Voltar"
+      class="w-6 h-6 md:w-8 md:h-8 cursor-pointer"
+    />
+
+    <!-- Container do usuário e item com espaçamento adequado -->
+    <div class="flex items-center space-x-4 ml-2">
+      <!-- Foto do Usuário -->
+      <img
+        :src="userImage || defaultAvatar"
+        alt="Foto do usuário"
+        class="w-8 h-8 md:w-10 md:h-10 rounded-full object-cover border-2 border-white"
+      />
+
+      <!-- Nome do Usuário -->
+      <span class="text-white font-semibold text-sm md:text-base truncate max-w-[120px] md:max-w-[200px]">
+        {{ userName || "Usuário" }}
+      </span>
+
+      <!-- Imagem do Item -->
+      <img
+        :src="itemImage || notAvailableImage"
+        alt="Imagem do item"
+        class="w-8 h-8 md:w-10 md:h-10 rounded-lg object-cover border-2 border-white"
+      />
+    </div>
+
+    <!-- Logo: alinhada à direita em telas menores, centralizada em telas maiores -->
+    <div class="ml-auto md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
+      <router-link to="/about" class="no-underline text-white">
+        <Logo class="pr-4" sizeClass="text-2xl" />
+      </router-link>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import api from "../services/api";
+import Logo from "./Logo.vue"; // Importa a logo branca do projeto
+import defaultAvatar from "@/assets/images/default-avatar.png";
+import notAvailableImage from "@/assets/images/not-available.png";
+import LeftArrow from "@/assets/icons/arrow-left-white.svg";
+
+const props = defineProps({
+  userId: {
+    type: String,
+    required: true,
+  },
+  itemId: {
+    type: String,
+    required: true,
+  },
+});
+
+const router = useRouter();
+const userName = ref("");
+const userImage = ref(null);
+const itemImage = ref(null);
+
+const fetchUserData = async () => {
+  if (!props.userId) return;
+  try {
+    const response = await api.get(`/users/${props.userId}/`);
+    userName.value = response.data.first_name || "Usuário";
+    userImage.value = response.data.foto;
+  } catch (error) {
+    console.error("Erro ao buscar dados do usuário:", error);
+  }
+};
+
+const fetchItemData = async () => {
+  if (!props.itemId) return;
+  try {
+    const response = await api.get(`/items/${props.itemId}`);
+    itemImage.value = response.data.image_urls?.[0] || notAvailableImage;
+  } catch (error) {
+    console.error("Erro ao buscar dados do item:", error);
+  }
+};
+
+const goBack = () => {
+  router.back();
+};
+
+onMounted(async () => {
+  await fetchUserData();
+  await fetchItemData();
+});
+</script>

web/src/router/index.js

@@ -76,25 +76,23 @@ const routes = [
     name: "UserItemsFound",
     component: UserItemsFound,
   },
-  /*{
-    path: "/message",
-    name: "Message",
-    component: Message,
-  },*/
   {
     path: "/chat/new",
     name: "NewChat",
-    component: Message, // A mesma tela de chat será usada para criar um novo chat
+    component: Message,
     meta: { requiresAuth: true },
   },
+  // Rota para chat que aceita chatroomId no path e itemId nos query parameters
   {
     path: "/chat/:chatroomId",
     name: "Chat",
     component: Message,
     meta: { requiresAuth: true },
-    props: true, // Permite passar o `chatroomId` como propriedade
+    props: route => ({
+      chatroomId: route.params.chatroomId || route.query.chatroomId,
+      itemId: route.params.itemId || route.query.itemId
+    }),
   },
-  { path: "/:catchAll(.*)", name: "NotFound", component: Login },
 ];
 
 const router = createRouter({