FEAT: Created function to filter supporting_material by name with jao…

…tarzan #54

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.nm7nap27a68"
+    "revision": "0.hsrqo6c7ha"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/portal/search/SearchBar.vue

@@ -3,13 +3,17 @@ import ContainerGlobal from '@/components/layout/ContainerGlobal.vue'
 import { ref } from 'vue';
 
 const history = ref('Pulmão de Cachorro')
+const name = ref('')
+const emits = defineEmits([
+    'search'
+])
 </script>
 
 <template>
     <ContainerGlobal>
         <div class="w-3/4 mx-auto">
             <div class="bg-[#F1F1F1] w-full rounded-lg h-12 flex">
-                <input type="text" placeholder="pesquisar..." class="bg-transparent my-auto ml-10 sm:ml-5 outline-none w-5/6">
+                <input type="text" v-model="name" @keyup="emits('search', name)" placeholder="pesquisar..." class="bg-transparent my-auto ml-10 sm:ml-5 outline-none w-5/6">
                 <i class="mdi mdi-magnify text-black text-4xl m-auto" />
             </div>
             <div class="w-full flex justify-end mt-2 sm:mt-3">

src/components/portal/search/SearchResults.vue

@@ -1,31 +1,20 @@
 <script setup>
 import { ContainerGlobal } from '@/components/index';
 
-const searchResults = [
-    {
-        title: 'link 1 Nome da aular',
-        description: 'breve descrição',
-        link: '#'
-    },
-    {
-        title: 'link 2 Nome do PDF',
-        description: 'breve descrição',
-        link: '#'
-    },
-    {
-        title: 'link 3 Nome da Referencia',
-        description: 'breve descrição',
-        link: '#'
-    },
-]
+const props = defineProps({
+    data: {
+        type: Array,
+        required: true
+    }
+})
 </script>
 
 <template>
     <ContainerGlobal>
         <div class="w-3/4 mx-auto flex flex-col my-4 font-poppins">
-            <div v-for="(result, index) in searchResults" :key="index" class="w-full flex h-auto my-4 justify-between md:flex-col">
+            <div v-for="(result, index) in props.data" :key="index" class="w-full flex h-auto my-4 justify-between md:flex-col">
                 <div class="flex flex-col my">
-                    <RouterLink class="text-xl sm:text-lg hover:text-zinc-600" :to="result.link">{{ result.title }}</RouterLink>
+                    <a :href="result.field_name" target="_blank" class="text-xl sm:text-lg hover:text-zinc-600">{{ result.name }}</a>
                     <ul class="text-[#787878] list-disc ml-4 text-lg sm:text-base">
                         <li>{{ result.description }}</li>
                     </ul>

src/services/supporting_material/supporting.js

@@ -34,6 +34,16 @@ class SupportingMaterialService {
         throw error
       }
     }
+
+    async SearchMaterialsByName(name) {
+
+      try {
+      const {data} = await api.get(`/supporting-material/?search=${name}`)
+      return data.results
+      } catch (error) {
+        throw error;
+      }
+    }
   /**
    * Creates a new Material.
    * @param {Object} newSpecie - The new Material object to create.

src/stores/supporting_material/supporting.js

@@ -28,6 +28,7 @@ export const useSupportingStore = defineStore('supporting', () => {
   const state = reactive({
     materials: [],
     materialsBySystem: [],
+    searchResults: [],
     loading: false,
     error: null,
     connection: false
@@ -45,7 +46,8 @@ export const useSupportingStore = defineStore('supporting', () => {
   const getMaterials = async () => {
     state.loading = true
     try {
-      state.materials = await SupportingMaterialService.getMaterials()
+      const response = await SupportingMaterialService.getMaterials()
+      state.materials = response
     } catch (error) {
       state.error = error
     } finally {
@@ -72,6 +74,19 @@ export const useSupportingStore = defineStore('supporting', () => {
     }
   }
 
+  const searchMaterialsByName = async (name) => {
+    state.loading = true
+    try {
+      const response = await SupportingMaterialService.SearchMaterialsByName(name)
+      state.searchResults = response
+    } catch (error) {
+      state.error = error
+    } finally {
+      state.loading = false
+      state.connection = true
+    }
+  }
+
   /**
    * Creates a new Material.
    * @async
@@ -134,6 +149,7 @@ export const useSupportingStore = defineStore('supporting', () => {
     getMaterials,
     createMaterial,
     updateMaterial,
-    deleteMaterial
+    deleteMaterial,
+    searchMaterialsByName
   }
 })

src/views/portal/ContentView.vue

@@ -1,11 +1,24 @@
 <script setup>
 import { HeaderPortal, SearchBar, SearchResults, SearchAddInfo, Footer } from '@/components';
+import { computed } from 'vue';
+import { useSupportingStore } from '@/stores';
+
+const supportingStore = useSupportingStore()
+
+const searchByName = (name) => {
+    supportingStore.searchMaterialsByName(name)
+}
+
+const returnSearchResults = computed(() => {
+    return supportingStore.state.searchResults.length > 0 ? supportingStore.state.searchResults : []
+})
+
 </script>
 
 <template>
     <HeaderPortal size="text-3xl" title="Conteúdos" />
-    <SearchBar />
-    <SearchResults />
+    <SearchBar @search="searchByName" />
+    <SearchResults :data="returnSearchResults" />
     <SearchAddInfo />
     <Footer class="mt-12"/>
 </template>