correções css| funcionalidade de filtro para tags | Barra de pesquisa…

… temporaria

assets/css/app.scss

@@ -178,6 +178,7 @@ footer {
 // Sem autenticação
 @import "./pages/login.scss";
 @import "./imagebank.scss";
+@import "./carousel.scss";
 
 // Com autenticação
 @import "./pages/app/researcher/profile.scss";

assets/css/imagebank.scss

@@ -53,8 +53,8 @@
 .image-bank-showcase > div > img {
   border-radius: 25px;
   overflow: hidden;
-  width: 100%;
-  height: 100%;
+  width: 30vw;
+  height: 30vw;
   display: block;
 }
 
@@ -71,3 +71,8 @@
   margin:auto
 }
 
+input#busca-acervo {
+  width: 100%;
+  color: black;
+}
+

lib/pescarte/modulo_pesquisa/repository.ex

@@ -83,10 +83,20 @@ defmodule Pescarte.ModuloPesquisa.Repository do
     Repo.replica().all(Midia)
   end
 
+  @impl true
+  def list_midias_from_tags(tag_etiquetas) do
+    query = from( m in Midia,
+      join: mt in assoc(m, :tags),
+      where: mt.etiqueta in ^tag_etiquetas,
+    )
+
+    Enum.uniq(Repo.replica().all(query))
+  end
+
   @impl true
   def list_midias_from_tag(tag_etiqueta) do
     with {:ok, tag} <- Pescarte.Database.fetch(Tag, tag_etiqueta) do
-      query = from(t in Tag, where: t.id == ^tag.id, preload: :midias)
+      query = from(t in Tag, where: t.id_publico == ^tag.id_publico, preload: :midias)
 
       case Pescarte.Database.fetch_one(query) do
         {:error, :not_found} -> []

lib/pescarte_web/layouts/root.html.heex

@@ -41,5 +41,4 @@
     }
   </script>
   <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js" defer></script>
-  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
 </html>

lib/pescarte_web/live/image_bank.ex

@@ -22,21 +22,22 @@ defmodule PescarteWeb.ImageBank do
 
     socket = assign(socket, :all_midia, list);
     socket = assign(socket, :page, 1);
-    socket = assign(socket, :content_mock, ["teste1", "teste2", "teste3"]);
+
 
     {:ok,
       socket
       |> assign(tagList: tagsCardData)
       |> assign(all_loaded: length(list) <= 6)
       |> assign(destaques: Enum.take(list, 3))
+      |> assign(:text_value, nil)
       |> stream_configure(:midias, dom_id: & &1.id_publico)
       |> stream(:midias, Enum.take(list, 6))}
   end
 
   def handle_event("load_more", _, socket) do
 
     socket = assign(socket, :page, socket.assigns.page + 1);
-    loaded_midia = Enum.take(MidiasHandler.list_midia(), socket.assigns.page * 6)
+    loaded_midia = Enum.take(get_midias(socket.assigns.tagList), socket.assigns.page * 6)
 
     {:noreply,
       socket
@@ -46,6 +47,7 @@ defmodule PescarteWeb.ImageBank do
 
   def handle_event("toggle_tag_filter",  %{"ref" => ref}, socket) do
 
+    IO.puts(ref)
     tagList =  socket.assigns.tagList
 
     tagList = update_in(
@@ -54,8 +56,7 @@ defmodule PescarteWeb.ImageBank do
       &Map.merge(&1, %{is_selected: !&1.is_selected})
     )
 
-    #REPLACE QUERY BELOW FROM tagLIST FROM ACTIVE QUERYS
-    filtered_media = MidiasHandler.list_midia()
+    filtered_media = get_midias(tagList)
 
     {:noreply,
       socket
@@ -66,25 +67,24 @@ defmodule PescarteWeb.ImageBank do
 
   end
 
-  def handle_event("handle_submit", _, socket) do
+  def handle_event("search", %{"value" => message}, socket) do
 
     tag_to_add = %{
-      etiqueta: "nova_tag",
+      etiqueta: message,
       is_selected: true
     }
 
     tagList = socket.assigns.tagList;
 
-    if (!Enum.find(tagList, fn elem -> elem.etiqueta == "nova_tag" end)) do
+    if (!Enum.find(tagList, fn elem -> elem.etiqueta == message end)) do
       #add tag to tagList
       tagList = [tag_to_add | socket.assigns.tagList]
 
       #removing last tag from tagList
       tagList = List.delete_at(tagList, length(tagList)-1)
 
-
       #REPLACE QUERY BELOW FROM tagLIST FROM ACTIVE QUERYS
-      filtered_media = MidiasHandler.list_midia()
+      filtered_media = get_midias(tagList)
 
       {:noreply,
         socket
@@ -97,4 +97,26 @@ defmodule PescarteWeb.ImageBank do
     end
   end
 
+  # função limpa o tagList para apenas uma lista de strings com as tags selecionadas
+  def reduce_taglist(taglist) do
+    reduced = [];
+    reduced =
+      for tag <- taglist do
+        if (tag.is_selected) do
+        reduced = tag.etiqueta
+        end
+      end
+
+    Enum.filter(reduced, & !is_nil(&1))
+  end
+
+  # função recebe lista de tags e retorna lista de midias filtradas ou todas midias caso vazias
+  def get_midias(taglist \\ []) do
+    reduced_taglist = reduce_taglist(taglist)
+    if (length(reduced_taglist) > 0) do
+      filtered_media = Repository.list_midias_from_tags(reduced_taglist)
+    else
+      filtered_media = MidiasHandler.list_midia()
+    end
+  end
 end

lib/pescarte_web/live/image_bank.html.heex

@@ -19,7 +19,25 @@
     <.text size="h2" color="text-blue-100">Acervo Completo</.text>
 
     <div class="image-bank-search">
-      <.search_input name="busca-acervo" id="busca-acervo" placeholder="Pesquise por palavras chave" content={@content_mock}/>
+      <!--
+      <.search_input name="busca-acervo" id="busca-acervo" placeholder="Pesquise por palavras chave"/>
+      -->
+      <fieldset class="search-input">
+        <span class="search-icon">
+          <Lucideicons.search />
+        </span>
+        <input
+          id="busca-acervo"
+          name="busca-acervo"
+          list="teste, tag, outra"
+          placeholder="Pesquise por palavras chave"
+          phx-keydown="search"
+          phx-key="Enter"
+          phx-debounce={100}
+        />
+      </fieldset>
+
+      -->
       <div class="image-bank-search-tags">
         <%= for tag <- @tagList do %>
           <.search_label message={tag.etiqueta} active={tag.is_selected} click="toggle_tag_filter" ref={tag.etiqueta}/>

lib/seeder/modulo_pesquisa/midia.ex

@@ -18,7 +18,7 @@ defmodule Seeder.ModuloPesquisa.Midia do
   def entries do
     [
       %Midia{
-        tags: tags(),
+        tags: Enum.take(tags(), 1),
         id_publico: Nanoid.generate(),
         nome_arquivo: "Barra do Furado_Quissamã (Adrya Pessanha de Paula).png",
         tipo: :imagem,
@@ -27,7 +27,7 @@ defmodule Seeder.ModuloPesquisa.Midia do
         link: "https://lh3.googleusercontent.com/drive-viewer/AEYmBYT_XHpza2oTr2ssZv0XHBWWubGEmLiPUcRikPheu5qXKn7ZmurEOxSEVkfnt3h_e6D532rXJ3_1H3blnj2fLU0UlnQ2aA=s1600"
       },
       %Midia{
-        tags: tags(),
+        tags: Enum.take(tags(), 2),
         id_publico: Nanoid.generate(),
         nome_arquivo: "Barra do Furado_Quissamã (Adrya Pessanha de Paula)(1).png",
         tipo: :imagem,
@@ -36,7 +36,7 @@ defmodule Seeder.ModuloPesquisa.Midia do
         link: "https://lh3.googleusercontent.com/drive-viewer/AEYmBYRXrA7b6v1Q7Xwv2Vl1E8nyOsLLo7rEiKxIpPcQmML0fMj1RIMJF1s-FfeNVIDqZadlPebueNzlCuKFCVJwx9-MhWbf=s1600"
       },
       %Midia{
-        tags: tags(),
+        tags: Enum.take(tags(), 3),
         id_publico: Nanoid.generate(),
         nome_arquivo: "Barra do Furado_Quissamã (Adrya Pessanha de Paula)(2).png",
         tipo: :imagem,
@@ -45,7 +45,7 @@ defmodule Seeder.ModuloPesquisa.Midia do
         link: "https://lh3.googleusercontent.com/drive-viewer/AEYmBYScjDfLvfoOvrECaXQ173rF6sCxjzc9x6Sa6KQQT-_K1vANatG0_2-D_Mp_OqyGER3NevhusKI0HkZXCij4QX7zdBtI9w=s1600"
       },
       %Midia{
-        tags: tags(),
+        tags: Enum.take(tags(), 4),
         id_publico: Nanoid.generate(),
         nome_arquivo: "01 Armação dos Búzio armadilha para capturar Siri. Praia da Rasa. Armadilha_ Pulsar (Bruno Siqueira) Bruno dos Santos Siqueira [email protected] .jpeg",
         tipo: :imagem,