Merge pull request #227 from unb-mds/217/front/ajustar-erros-e-melhor…

…ar-desenho 217/front/ajustar erros e melhorar desenho
unb-mds · Feb 14, 2025 · a536d62 · a536d62
2 parents 3d1f1ce + c189d28
commit a536d62
Show file tree

Hide file tree

Showing 16 changed files with 195 additions and 101 deletions.
diff --git a/API/AcheiUnB/static/dist/.vite/manifest.json b/API/AcheiUnB/static/dist/.vite/manifest.json
@@ -1,15 +1,13 @@
 {
   "index.html": {
-    "file": "js/index-D96LntmE.js",
+    "file": "js/index-DagMRiY7.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
-    "css": [
-      "assets/index-k303jj23.css"
-    ],
+    "css": ["assets/index-CZ44oVY3.css"],
     "assets": [
       "assets/Favicon-DZaE_dAz.png",
-      "assets/found-and-lost-box-BB3OpleO.jpg",
+      "assets/found-and-lost-box-BIV9dkbR.jpg",
       "assets/default-avatar-BpcudYYH.png"
     ]
   },
@@ -18,11 +16,11 @@
     "src": "src/assets/icons/Favicon.png"
   },
   "src/assets/icons/found-and-lost-box.jpg": {
-    "file": "assets/found-and-lost-box-BB3OpleO.jpg",
+    "file": "assets/found-and-lost-box-BIV9dkbR.jpg",
     "src": "src/assets/icons/found-and-lost-box.jpg"
   },
   "src/assets/images/default-avatar.png": {
     "file": "assets/default-avatar-BpcudYYH.png",
     "src": "src/assets/images/default-avatar.png"
   }
-}
+}
diff --git a/API/AcheiUnB/static/dist/assets/found-and-lost-box-BB3OpleO.jpg b/API/AcheiUnB/static/dist/assets/found-and-lost-box-BB3OpleO.jpg
diff --git a/API/AcheiUnB/static/dist/assets/found-and-lost-box-BIV9dkbR.jpg b/API/AcheiUnB/static/dist/assets/found-and-lost-box-BIV9dkbR.jpg
diff --git a/API/AcheiUnB/static/dist/assets/index-CZ44oVY3.css b/API/AcheiUnB/static/dist/assets/index-CZ44oVY3.css
diff --git a/API/AcheiUnB/static/dist/index.html b/API/AcheiUnB/static/dist/index.html
@@ -1,12 +1,24 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" type="image/png" href="/static/dist/assets/Favicon-DZaE_dAz.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="/static/dist/assets/Favicon-DZaE_dAz.png"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AcheiUnB</title>
-    <script type="module" crossorigin src="/static/dist/js/index-D96LntmE.js"></script>
-    <link rel="stylesheet" crossorigin href="/static/dist/assets/index-k303jj23.css">
+    <script
+      type="module"
+      crossorigin
+      src="/static/dist/js/index-D96LntmE.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      crossorigin
+      href="/static/dist/assets/index-k303jj23.css"
+    />
   </head>
   <body>
     <div id="app"></div>

diff --git a/API/AcheiUnB/static/dist/js/index-DagMRiY7.js b/API/AcheiUnB/static/dist/js/index-DagMRiY7.js
diff --git a/API/celerybeat-schedule b/API/celerybeat-schedule
diff --git a/web/src/assets/icons/box.svg b/web/src/assets/icons/box.svg
diff --git a/web/src/assets/icons/found-and-lost-box.jpg b/web/src/assets/icons/found-and-lost-box.jpg
diff --git a/web/src/components/Empty-State-User.vue b/web/src/components/Empty-State-User.vue
@@ -1,17 +1,18 @@
 <template>
-    <div class="flex flex-col items-center justify-center h-64 text-center">
-        <img :src="box" class="w-40 h-40 mb-4" />
-        <p class="text-cinza3 font-inter text-lg">
-            Parece que você não tem itens {{ message }} <span class="text-azul font-bold">{{ highlightText }}</span>
-        </p>
-    </div>
+  <div class="flex flex-col items-center justify-center h-64 text-center">
+    <img :src="box" class="w-20 h-20 mb-4 opacity-15" />
+    <p class="text-cinza3 font-inter text-lg">
+      Parece que você não tem itens {{ message }}
+      <span class="text-azul font-bold">{{ highlightText }}</span>
+    </p>
+  </div>
 </template>
 
 <script setup>
-import box from "@/assets/icons/found-and-lost-box.jpg"; // Caminho para a imagem
+import box from "@/assets/icons/box.svg"; // Caminho para a imagem
 
 defineProps({
-    message: String, // Parâmetro para personalizar a mensagem
-    highlightText: String
+  message: String, // Parâmetro para personalizar a mensagem
+  highlightText: String,
 });
-</script>
+</script>
diff --git a/web/src/components/Empty-State.vue b/web/src/components/Empty-State.vue
@@ -1,16 +1,43 @@
 <template>
-    <div class="flex flex-col items-center justify-center h-64 text-center">
-        <img :src="box" class="w-40 h-40 mb-4" />
-        <p class="text-cinza3 font-inter text-lg">
-            Parece que o <span class="text-azul font-bold">AcheiUnB</span> {{ message }}
-        </p>
-    </div>
+  <div class="flex flex-col items-center justify-center h-64 text-center">
+    <img :src="box" class="w-20 h-20 mb-4 opacity-15" />
+    <p class="text-cinza3 font-inter text-lg">
+      Parece que o <span class="text-azul font-bold">AcheiUnB</span> {{ computedMessage }}
+    </p>
+  </div>
 </template>
 
 <script setup>
-import box from "@/assets/icons/found-and-lost-box.jpg"; // Caminho para a imagem
+import { computed, toRefs } from "vue";
+import { filtersState } from "@/store/filters"; // Importação corrigida sem Pinia
+import box from "@/assets/icons/box.svg";
 
-defineProps({
-    message: String, // Parâmetro para personalizar a mensagem
+// Definição das propriedades recebidas
+const props = defineProps({
+  type: {
+    type: String,
+    required: true, // Obrigatório ("achado" ou "perdido")
+  },
 });
-</script>
+
+const { searchQuery, activeCategory, activeLocation } = toRefs(filtersState);
+
+// Computed Property para modificar a mensagem dinamicamente
+const computedMessage = computed(() => {
+  // Define a palavra correta com base no tipo de item
+  const itemType = props.type === "achado" ? "achado" : "perdido";
+
+  // Verifica os filtros e retorna a mensagem correspondente
+  if (searchQuery.value != "") {
+    return `não encontrou resultados para "${searchQuery.value}" nos itens ${itemType}s.`;
+  }
+  if (activeCategory.value != null) {
+    return `não encontrou itens ${itemType}s da categoria "${activeCategory.value}".`;
+  }
+  if (activeLocation.value != null) {
+    return `não encontrou itens ${itemType}s no local "${activeLocation.value}".`;
+  }
+
+  return `está sem itens ${itemType}s... Você pode adicionar um!`;
+});
+</script>
diff --git a/web/src/components/Item-Card.vue b/web/src/components/Item-Card.vue
@@ -18,31 +18,37 @@
     </button>
 
     <!-- Modal de Confirmação de Exclusão -->
-    <div v-if="showConfirmModal" class="fixed inset-0 flex items-center justify-center">
-      <div 
-        class="bg-azul p-6 rounded-lg shadow-lg w-full max-w-sm sm:max-w-md lg:max-w-lg text-center"
-        @click.stop
+    <Teleport to="body">
+      <!-- Garante que o modal será renderizado fora do ItemCard -->
+      <div
+        v-if="showConfirmModal"
+        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
       >
-        <p class="text-white font-inter text-lg">
-          Você realmente deseja excluir este item do AcheiUnB?
-        </p>
-
-        <div class="flex flex-col sm:flex-row justify-center mt-4 gap-4">
-          <button 
-            class="bg-red-500 text-white font-inter px-4 py-2 rounded-md hover:bg-red-600 transition w-full sm:w-auto"
-            @click="confirmDelete"
-          >
-            Excluir
-          </button>
-          <button 
-            class="bg-white font-inter px-4 py-2 rounded-md hover:bg-gray-200 transition w-full sm:w-auto"
-            @click="showConfirmModal = false"
-          >
-            Cancelar
-          </button>
+        <div
+          class="bg-azul p-6 rounded-lg shadow-lg w-full max-w-sm sm:max-w-md lg:max-w-lg text-center relative"
+          @click.stop
+        >
+          <p class="text-white font-inter text-lg">
+            Você realmente deseja excluir este item do AcheiUnB?
+          </p>
+
+          <div class="flex flex-col sm:flex-row justify-center mt-4 gap-4">
+            <button
+              class="bg-red-500 text-white font-inter px-4 py-2 rounded-md hover:bg-red-600 transition w-full sm:w-auto"
+              @click="confirmDelete"
+            >
+              Excluir
+            </button>
+            <button
+              class="bg-white font-inter px-4 py-2 rounded-md hover:bg-gray-200 transition w-full sm:w-auto"
+              @click="closeModal"
+            >
+              Cancelar
+            </button>
+          </div>
         </div>
       </div>
-    </div>
+    </Teleport>
 
     <!--linha-->
     <div class="h-[2px] w-1/4 bg-laranja mt-4"></div>
@@ -66,7 +72,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 
 const props = defineProps({
@@ -84,13 +90,30 @@ const props = defineProps({
 const emit = defineEmits(["delete"]);
 const router = useRouter();
 const showConfirmModal = ref(false);
+const selectedItemId = ref(null);
 
 const viewItemDetails = () => {
   if (!showConfirmModal.value) {
     router.push({ name: "ListItem", query: { idItem: props.id } });
   }
 };
 
+const openModal = (id) => {
+  selectedItemId.value = id;
+  showConfirmModal.value = true;
+
+  // Bloqueia a rolagem da página quando o modal está aberto
+  document.body.style.overflow = "hidden";
+};
+
+const closeModal = () => {
+  showConfirmModal.value = false;
+  selectedItemId.value = null;
+
+  // Libera a rolagem da página ao fechar o modal
+  document.body.style.overflow = "";
+};
+
 const confirmDelete = () => {
   emit("delete", props.id);
   showConfirmModal.value = false;

diff --git a/web/src/views/Found.vue b/web/src/views/Found.vue
@@ -9,7 +9,7 @@
     </div>
 
     <!-- Se não houver itens, exibir mensagem e imagem -->
-    <EmptyState v-if="foundItems.length === 0" message="está sem itens achados... Você pode adicionar um!" />
+    <EmptyState v-if="foundItems.length === 0" type="achado" />
 
     <div
       v-else

diff --git a/web/src/views/Lost.vue b/web/src/views/Lost.vue
@@ -9,7 +9,7 @@
     </div>
 
     <!-- Se não houver itens, exibir mensagem e imagem -->
-    <EmptyState v-if="lostItems.length === 0" message="está sem itens perdidos... Você pode adicionar um!" />
+    <EmptyState v-if="lostItems.length === 0" type="perdido" />
 
     <div
       v-else

diff --git a/web/src/views/UserItems-Found.vue b/web/src/views/UserItems-Found.vue
@@ -12,9 +12,7 @@
     </router-link>
 
     <!-- Título (Agora centralizado corretamente) -->
-    <h1 class="text-2xl font-bold absolute left-1/2 transform -translate-x-1/2">
-      Meus Itens
-    </h1>
+    <h1 class="text-2xl font-bold absolute left-1/2 transform -translate-x-1/2">Meus Itens</h1>
 
     <!-- Logo (Clicável para ir para /about) -->
     <button>
@@ -28,9 +26,11 @@
     <SubMenu />
   </div>
 
-  <!-- Se não houver itens, exibir mensagem e imagem -->
-  <EmptyState v-if="myItemsFound.length === 0" message="achados registrados... Você pode adicionar um no" highlightText="AcheiUnB"/>
-
+  <EmptyState
+    v-if="!loading && myItemsFound.length === 0"
+    message="achados registrados... Você pode adicionar um no"
+    highlightText="AcheiUnB"
+  />
   <div
     v-else
     class="grid grid-cols-[repeat(auto-fit,_minmax(180px,_1fr))] sm:grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] justify-items-center align-items-center lg:px-3 gap-y-3 pb-24"
@@ -61,7 +61,6 @@ import { formatTime } from "@/utils/dateUtils";
 import MainMenu from "../components/Main-Menu.vue";
 import SubMenu from "../components/Sub-Menu-UserFound.vue";
 import ItemCard from "@/components/Item-Card.vue";
-import Alert from "@/components/Alert.vue";
 import Logo from "@/components/Logo.vue";
 import NotAvailableImage from "@/assets/images/not-available.png";
 import EmptyState from "@/components/Empty-State-User.vue";
@@ -70,8 +69,8 @@ const myItemsFound = ref([]);
 const submitError = ref(false);
 const formSubmitted = ref(false);
 const alertMessage = ref("");
+const loading = ref(true);
 
-// Função para buscar os itens encontrados
 const fetchItems = async () => {
   try {
     const response = await fetchMyItemsFound();
@@ -80,13 +79,15 @@ const fetchItems = async () => {
     alertMessage.value = "Erro ao carregar itens encontrados.";
     submitError.value = true;
   }
+
+  loading.value = false;
 };
 
 // Função para confirmar exclusão
 const confirmDelete = async (itemId) => {
   try {
     await deleteItem(itemId); // Chama a API para excluir o item
-    myItemsFound.value = myItemsFound.value.filter(item => item.id !== itemId); // Remove do estado
+    myItemsFound.value = myItemsFound.value.filter((item) => item.id !== itemId); // Remove do estado
   } catch (error) {
     console.error("Erro ao excluir item:", error);
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
         </div>
         <!-- Se não houver itens, exibir mensagem e imagem -->
-        <EmptyState v-if="foundItems.length === 0" message="está sem itens achados... Você pode adicionar um!" />
+        <EmptyState v-if="foundItems.length === 0" type="achado" />
         <div
           v-else
@@ Expand Down @@