From c519df297cd92404af7e16a9af73c7992e17a1fa Mon Sep 17 00:00:00 2001 From: Zoey de Souza Pessanha Date: Sun, 30 Jul 2023 20:05:28 -0300 Subject: [PATCH 1/2] Tela de listagem de Pesquisadores (#130) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * tela básica de listagem de pesquisadores * implementa tabela de pesquisadores dinâmica * adiciona handler para pesquisador * resolve diferentes cores nas colunas de uma tabela --- .../lib/identidades/models/usuario.ex | 2 +- .../adapters/pesquisador_adapter.ex | 19 ++++++ .../handlers/i_manage_pesquisador_handler.ex | 5 ++ .../handlers/pesquisador_handler.ex | 14 ++++ .../lib/modulo_pesquisa/repository.ex | 4 +- .../modulo_pesquisa/schemas/pesquisador.ex | 34 ++++++++++ apps/plataforma_digital/assets/css/app.scss | 1 + .../plataforma_digital/assets/css/button.scss | 8 ++- .../app/researcher/listagem_pesquisador.scss | 21 ++++++ .../plataforma_digital/assets/css/search.scss | 3 +- .../lib/plataforma_digital/design_system.ex | 3 +- .../design_system/authenticated_navbar.ex | 19 +++--- .../design_system/search_input.ex | 57 ++++++++++++---- .../live/pesquisa/list_pesquisador_live.ex | 67 +++++++++++++++++++ .../pesquisa/list_pesquisador_live.html.heex | 31 +++++++++ .../relatorio/list_report_live.html.heex | 2 +- .../lib/plataforma_digital/router.ex | 3 +- 17 files changed, 266 insertions(+), 27 deletions(-) create mode 100644 apps/modulo_pesquisa/lib/modulo_pesquisa/adapters/pesquisador_adapter.ex create mode 100644 apps/modulo_pesquisa/lib/modulo_pesquisa/handlers/i_manage_pesquisador_handler.ex create mode 100644 apps/modulo_pesquisa/lib/modulo_pesquisa/handlers/pesquisador_handler.ex create mode 100644 apps/modulo_pesquisa/lib/modulo_pesquisa/schemas/pesquisador.ex create mode 100644 apps/plataforma_digital/assets/css/pages/app/researcher/listagem_pesquisador.scss create mode 100644 apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/list_pesquisador_live.ex create mode 100644 apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/list_pesquisador_live.html.heex diff --git a/apps/identidades/lib/identidades/models/usuario.ex b/apps/identidades/lib/identidades/models/usuario.ex index ae374b08..2f35b354 100644 --- a/apps/identidades/lib/identidades/models/usuario.ex +++ b/apps/identidades/lib/identidades/models/usuario.ex @@ -4,7 +4,7 @@ defmodule Identidades.Models.Usuario do import Brcpfcnpj.Changeset, only: [validate_cpf: 3] alias Identidades.Models.Contato - # alias ModuloPesquisa.Models.Pesquisador + alias ModuloPesquisa.Models.Pesquisador @type t :: %Usuario{ cpf: binary, diff --git a/apps/modulo_pesquisa/lib/modulo_pesquisa/adapters/pesquisador_adapter.ex b/apps/modulo_pesquisa/lib/modulo_pesquisa/adapters/pesquisador_adapter.ex new file mode 100644 index 00000000..32465822 --- /dev/null +++ b/apps/modulo_pesquisa/lib/modulo_pesquisa/adapters/pesquisador_adapter.ex @@ -0,0 +1,19 @@ +defmodule ModuloPesquisa.Adapters.PesquisadorAdapter do + alias Identidades.Handlers.UsuarioHandler + + alias ModuloPesquisa.Models.Pesquisador, as: Model + alias ModuloPesquisa.Schemas.Pesquisador, as: Schema + + @spec internal_to_external(Model.t()) :: Schema.t() + def internal_to_external(pesquisador) do + attrs = %{ + id: pesquisador.id_publico, + nome: UsuarioHandler.build_usuario_name(pesquisador.usuario), + cpf: pesquisador.usuario.cpf, + email: pesquisador.usuario.contato.email_principal, + participacao: pesquisador.bolsa + } + + Schema.parse!(attrs) + end +end diff --git a/apps/modulo_pesquisa/lib/modulo_pesquisa/handlers/i_manage_pesquisador_handler.ex b/apps/modulo_pesquisa/lib/modulo_pesquisa/handlers/i_manage_pesquisador_handler.ex new file mode 100644 index 00000000..fa6bb07e --- /dev/null +++ b/apps/modulo_pesquisa/lib/modulo_pesquisa/handlers/i_manage_pesquisador_handler.ex @@ -0,0 +1,5 @@ +defmodule ModuloPesquisa.Handlers.IManagePesquisadorHandler do + alias ModuloPesquisa.Models.Pesquisador + + @callback list_pesquisadores() :: [Pesquisador.t()] +end diff --git a/apps/modulo_pesquisa/lib/modulo_pesquisa/handlers/pesquisador_handler.ex b/apps/modulo_pesquisa/lib/modulo_pesquisa/handlers/pesquisador_handler.ex new file mode 100644 index 00000000..a350780e --- /dev/null +++ b/apps/modulo_pesquisa/lib/modulo_pesquisa/handlers/pesquisador_handler.ex @@ -0,0 +1,14 @@ +defmodule ModuloPesquisa.Handlers.PesquisadorHandler do + alias ModuloPesquisa.Adapters.PesquisadorAdapter + alias ModuloPesquisa.Handlers.IManagePesquisadorHandler + alias ModuloPesquisa.Repository + + @behaviour IManagePesquisadorHandler + + @impl true + def list_pesquisadores do + Repository.list_pesquisador() + |> Enum.sort_by(& &1.usuario.primeiro_nome) + |> Enum.map(&PesquisadorAdapter.internal_to_external/1) + end +end diff --git a/apps/modulo_pesquisa/lib/modulo_pesquisa/repository.ex b/apps/modulo_pesquisa/lib/modulo_pesquisa/repository.ex index b9dad51b..d8414b8b 100644 --- a/apps/modulo_pesquisa/lib/modulo_pesquisa/repository.ex +++ b/apps/modulo_pesquisa/lib/modulo_pesquisa/repository.ex @@ -99,7 +99,9 @@ defmodule ModuloPesquisa.Repository do @impl true def list_pesquisador do - Repo.replica().all(Pesquisador) + query = from p in Pesquisador, preload: [usuario: [:contato]] + + Repo.replica().all(query) end @impl true diff --git a/apps/modulo_pesquisa/lib/modulo_pesquisa/schemas/pesquisador.ex b/apps/modulo_pesquisa/lib/modulo_pesquisa/schemas/pesquisador.ex new file mode 100644 index 00000000..8e010c82 --- /dev/null +++ b/apps/modulo_pesquisa/lib/modulo_pesquisa/schemas/pesquisador.ex @@ -0,0 +1,34 @@ +defmodule ModuloPesquisa.Schemas.Pesquisador do + use Ecto.Schema + + import Ecto.Changeset + + alias __MODULE__ + alias ModuloPesquisa.Models.Pesquisador, as: Model + + @type t :: %Pesquisador{ + id: String.t(), + nome: String.t(), + cpf: String.t(), + email: String.t(), + participacao: String.t() + } + + @required_fields ~w(id nome cpf email participacao)a + + @primary_key false + embedded_schema do + field :id, Database.Types.PublicId, autogenerate: false + field :nome, :string + field :cpf, :string + field :email, :string + field :participacao, Ecto.Enum, values: Model.tipo_bolsas() + end + + def parse!(attrs) do + %Pesquisador{} + |> cast(attrs, @required_fields) + |> validate_required(@required_fields) + |> apply_action!(:parse) + end +end diff --git a/apps/plataforma_digital/assets/css/app.scss b/apps/plataforma_digital/assets/css/app.scss index 78259d6b..307c2c96 100644 --- a/apps/plataforma_digital/assets/css/app.scss +++ b/apps/plataforma_digital/assets/css/app.scss @@ -177,6 +177,7 @@ footer { // Com autenticação @import "./pages/app/researcher/profile.scss"; +@import "./pages/app/researcher/listagem_pesquisador.scss"; @import "./pages/app/researcher/relatorio/mensal.scss"; @import "./pages/app/researcher/relatorio/list_report.scss"; diff --git a/apps/plataforma_digital/assets/css/button.scss b/apps/plataforma_digital/assets/css/button.scss index af55894a..9f066f71 100644 --- a/apps/plataforma_digital/assets/css/button.scss +++ b/apps/plataforma_digital/assets/css/button.scss @@ -1,10 +1,16 @@ .btn { @apply py-6 px-4; - @apply flex-center; + display: flex; + justify-content: center; + align-items: center; height: 3rem; gap: 0.5rem; border-radius: 0.25rem; + + svg { + display: inline; + } } .btn-primary { diff --git a/apps/plataforma_digital/assets/css/pages/app/researcher/listagem_pesquisador.scss b/apps/plataforma_digital/assets/css/pages/app/researcher/listagem_pesquisador.scss new file mode 100644 index 00000000..875be4be --- /dev/null +++ b/apps/plataforma_digital/assets/css/pages/app/researcher/listagem_pesquisador.scss @@ -0,0 +1,21 @@ +.listagem-pesquisador { + width: 100%; + height: 100%; + padding: 2.5rem; + display: flex; + flex-direction: column; + + .listagem-actions { + display: flex; + margin-bottom: 2.62rem; + + button { + margin-left: 1.5rem; + width: 10rem; + } + } + + a { + @apply text-black-100; + } +} diff --git a/apps/plataforma_digital/assets/css/search.scss b/apps/plataforma_digital/assets/css/search.scss index 43879064..0a7530cb 100644 --- a/apps/plataforma_digital/assets/css/search.scss +++ b/apps/plataforma_digital/assets/css/search.scss @@ -6,7 +6,7 @@ } &.large { - width: 32.5rem; + width: 36rem; } } @@ -54,6 +54,7 @@ } .search-input-wrapper .search-menu { + @apply bg-white-100; @apply border-x-black-10 border-b-black-10 border-2; border-top: 0; diff --git a/apps/plataforma_digital/lib/plataforma_digital/design_system.ex b/apps/plataforma_digital/lib/plataforma_digital/design_system.ex index 7a50d7ff..f0510ef2 100644 --- a/apps/plataforma_digital/lib/plataforma_digital/design_system.ex +++ b/apps/plataforma_digital/lib/plataforma_digital/design_system.ex @@ -556,6 +556,7 @@ defmodule PlataformaDigital.DesignSystem do end attr :rows, :list, default: [] + attr :"text-color", :string, required: true def table(assigns) do ~H""" @@ -578,7 +579,7 @@ defmodule PlataformaDigital.DesignSystem do <%= for col <- @column do %> <%= if Map.get(col, :type, "text") == "text" do %> - <.text size="md" color="text-blue-100"> + <.text size="md" color={Map.get(assigns, :"text-color")}> <%= render_slot(col, row) %> <% else %> diff --git a/apps/plataforma_digital/lib/plataforma_digital/design_system/authenticated_navbar.ex b/apps/plataforma_digital/lib/plataforma_digital/design_system/authenticated_navbar.ex index b46fc4b0..a219420d 100644 --- a/apps/plataforma_digital/lib/plataforma_digital/design_system/authenticated_navbar.ex +++ b/apps/plataforma_digital/lib/plataforma_digital/design_system/authenticated_navbar.ex @@ -2,6 +2,7 @@ defmodule PlataformaDigital.DesignSystem.AuthenticatedNavbar do use PlataformaDigital, :live_component alias Identidades.Models.Usuario + alias PlataformaDigital.DesignSystem attr :user, Usuario, required: true attr :open, :boolean, default: nil @@ -25,19 +26,21 @@ defmodule PlataformaDigital.DesignSystem.AuthenticatedNavbar do <.text :if={@open} size="base" color="text-black-60">Home
  • - - <.text :if={@open} size="base" color="text-black-60"> - Pesquisadores - + + + <.text :if={@open} size="base" color="text-black-60"> + Pesquisadores + +
    • - -
  • +
  • + <.text :if={@open} size="base" color="text-black-60"> Relatórios -
    • -     + +
  • <.text :if={@open} size="base" color="text-black-60">Agenda diff --git a/apps/plataforma_digital/lib/plataforma_digital/design_system/search_input.ex b/apps/plataforma_digital/lib/plataforma_digital/design_system/search_input.ex index 3ffec20b..7b1196f8 100644 --- a/apps/plataforma_digital/lib/plataforma_digital/design_system/search_input.ex +++ b/apps/plataforma_digital/lib/plataforma_digital/design_system/search_input.ex @@ -17,6 +17,7 @@ defmodule PlataformaDigital.DesignSystem.SearchInput do attr :placeholder, :string, default: "Faça uma pesquisa..." attr :field, Phoenix.HTML.FormFieldcontent attr :size, :string, values: ~w(base large), default: "base" + attr :patch, :string, required: true @impl true def render(assigns) do @@ -31,14 +32,15 @@ defmodule PlataformaDigital.DesignSystem.SearchInput do name={@name} list={@id <> "_data_list"} placeholder={@placeholder} + phx-click-away="dismiss-search" phx-keyup="search" phx-target={@myself} phx-debounce={100} />
      -
    • - <.link patch="/"> +
    • + <.link patch={mount_patch_uri(@patch, {key, option})}> <%= option %> @@ -49,16 +51,27 @@ defmodule PlataformaDigital.DesignSystem.SearchInput do """ end + defp mount_patch_uri(patch, {key, option}) do + query = URI.encode_query(Map.put(%{}, key, option)) + + patch + |> URI.parse() + |> URI.append_query(query) + |> URI.append_query("search=true") + |> URI.to_string() + end + @impl true def handle_event("search", %{"key" => "Backspace", "value" => ""}, socket) do - {:noreply, - socket - |> assign(typing?: false) - |> assign(filtered: [])} + {:noreply, reset_search(socket)} + end + + def handle_event("search", %{"key" => "Escape"}, socket) do + {:noreply, reset_search(socket)} end def handle_event("search", %{"value" => value}, socket) do - case maybe_display_matches(socket.assigns.content, value) do + case render_matches(socket.assigns.content, value) do [] -> {:noreply, socket} @@ -70,11 +83,31 @@ defmodule PlataformaDigital.DesignSystem.SearchInput do end end - defp maybe_display_matches(content, value) do - matches = Enum.filter(content, &(&1 =~ value)) - if Enum.empty?(matches), do: content, else: matches + def handle_event("dismiss-search", _params, socket) do + {:noreply, reset_search(socket)} + end + + defp reset_search(socket) do + socket + |> assign(typing?: false) + |> assign(filtered: []) end - defp maybe_render_content(content, []), do: content - defp maybe_render_content(_content, filtered), do: filtered + defp render_matches(content, value) do + content + |> Enum.map(&Map.from_struct/1) + |> Enum.map(&render_map/1) + |> List.flatten() + |> Enum.filter(fn {_, v} -> String.downcase(v) =~ value end) + end + + defp render_map(map) do + Enum.map(map, fn {key, value} -> + if is_map(value) do + render_map(value) + else + {key, to_string(value)} + end + end) + end end diff --git a/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/list_pesquisador_live.ex b/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/list_pesquisador_live.ex new file mode 100644 index 00000000..7d919c4c --- /dev/null +++ b/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/list_pesquisador_live.ex @@ -0,0 +1,67 @@ +defmodule PlataformaDigital.Pesquisa.ListPesquisadorLive do + @moduledoc false + + use PlataformaDigital, :auth_live_view + + alias ModuloPesquisa.Handlers.PesquisadorHandler + + @impl true + def mount(_params, _session, socket) do + pesquisadores = PesquisadorHandler.list_pesquisadores() + + {:ok, assign(socket, pesquisadores: pesquisadores, tabela: pesquisadores)} + end + + @impl true + def handle_params(%{"search" => "true"} = search, _uri, socket) do + tabela = + case search do + %{"cpf" => cpf} -> filter_by("cpf", socket.assigns.pesquisadores, cpf) + %{"bolsa" => bolsa} -> filter_by("bolsa", socket.assigns.pesquisadores, bolsa) + %{"nome" => nome} -> filter_by("nome", socket.assigns.pesquisadores, nome) + %{"email" => email} -> filter_by("email", socket.assigns.pesquisadores, email) + end + + {:noreply, assign(socket, tabela: tabela)} + end + + def handle_params(_params, _uri, socket) do + {:noreply, socket} + end + + defp filter_by("bolsa", pesquisadores, bolsa) do + Enum.filter(pesquisadores, fn pesquisador -> + to_string(pesquisador.bolsa) == bolsa + end) + end + + defp filter_by("cpf", pesquisadores, cpf) do + Enum.filter(pesquisadores, fn pesquisador -> + pesquisador.cpf == cpf + end) + end + + defp filter_by("nome", pesquisadores, nome) do + Enum.filter(pesquisadores, fn pesquisador -> + pesquisador.nome == nome + end) + end + + defp filter_by("email", pesquisadores, email) do + Enum.filter(pesquisadores, fn pesquisador -> + pesquisador.email == email + end) + end + + @impl true + def handle_event("register", _params, socket) do + {:noreply, socket} + end + + @spec humanize_bolsa(atom) :: String.t() + def humanize_bolsa(bolsa) do + bolsa + |> Atom.to_string() + |> Phoenix.Naming.humanize() + end +end diff --git a/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/list_pesquisador_live.html.heex b/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/list_pesquisador_live.html.heex new file mode 100644 index 00000000..8b316609 --- /dev/null +++ b/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/list_pesquisador_live.html.heex @@ -0,0 +1,31 @@ +
      +
      + <.search_input + name="listagem-pesquisador" + id="listagem-pesquisador" + content={@pesquisadores} + patch={~p"/app/pesquisa/pesquisadores"} + /> + + <.button :if={@current_user.tipo == :admin} style="primary" click="register"> + Cadastrar + +
      + + <.table rows={@tabela} text-color="text-black-100"> + <:column :let={pesquisador} label="Nome"> + <%= pesquisador.nome %> + + <:column :let={pesquisador} label="CPF"> + <%= pesquisador.cpf %> + + <:column :let={pesquisador} label="E-mail"> + pesquisador.email}> + <%= pesquisador.email %> + + + <:column :let={pesquisador} label="Participação"> + <%= humanize_bolsa(pesquisador.participacao) %> + + +
      diff --git a/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/relatorio/list_report_live.html.heex b/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/relatorio/list_report_live.html.heex index 77405179..45ed4e19 100644 --- a/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/relatorio/list_report_live.html.heex +++ b/apps/plataforma_digital/lib/plataforma_digital/live/pesquisa/relatorio/list_report_live.html.heex @@ -16,7 +16,7 @@ -<.table rows={@relatorios}> +<.table rows={@relatorios} text-color="text-blue-100"> <:column :let={relatorios} label=" ">
      <.checkbox name="check" id="usuario" />
      diff --git a/apps/plataforma_digital/lib/plataforma_digital/router.ex b/apps/plataforma_digital/lib/plataforma_digital/router.ex index b2ff46a0..bce9053f 100644 --- a/apps/plataforma_digital/lib/plataforma_digital/router.ex +++ b/apps/plataforma_digital/lib/plataforma_digital/router.ex @@ -40,10 +40,11 @@ defmodule PlataformaDigital.Router do live_session :require_authenticated_user, on_mount: [{PlataformaDigital.Authentication, :ensure_authenticated}] do live "/perfil", Pesquisa.ProfileLive + live "/pesquisadores", Pesquisa.ListPesquisadorLive scope "/relatorios" do + live "/", Pesquisa.Relatorio.ListReportLive live "/mensal", Pesquisa.Relatorio.MensalLive - live "/listagem", Pesquisa.Relatorio.ListReportLive end end end From 4338e7b61c30a6a1e36b67bb0a515591b18b7b0a Mon Sep 17 00:00:00 2001 From: Eduardo Ravagnani <48652031+link2755@users.noreply.github.com> Date: Thu, 16 Nov 2023 16:54:31 -0300 Subject: [PATCH 2/2] Componente Label #86 (#136) --- apps/plataforma_digital/assets/css/app.scss | 1 + apps/plataforma_digital/assets/css/label.scss | 25 +++++++++++++++++++ .../lib/plataforma_digital/design_system.ex | 21 ++++++++++++++++ 3 files changed, 47 insertions(+) create mode 100644 apps/plataforma_digital/assets/css/label.scss diff --git a/apps/plataforma_digital/assets/css/app.scss b/apps/plataforma_digital/assets/css/app.scss index 6da93a31..cd73eb1b 100644 --- a/apps/plataforma_digital/assets/css/app.scss +++ b/apps/plataforma_digital/assets/css/app.scss @@ -170,6 +170,7 @@ footer { @import "./toast.scss"; @import "./textarea.scss"; @import "./tabela.scss"; +@import "./label.scss"; // Páginas // Sem autenticação diff --git a/apps/plataforma_digital/assets/css/label.scss b/apps/plataforma_digital/assets/css/label.scss new file mode 100644 index 00000000..020ae686 --- /dev/null +++ b/apps/plataforma_digital/assets/css/label.scss @@ -0,0 +1,25 @@ +.label_component { + @apply inline-block; + + justify-content: center; + border-radius: 0.25rem; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + margin: 0.5rem; +} + +.label_component:nth-child(4n+2) { + @apply bg-blue-100 +} + +.label_component:nth-child(4n+3) { + @apply bg-orange-100 +} + +.label_component:nth-child(4n+4) { + @apply bg-green-100 +} + +.label_component:nth-child(4n+5) { + @apply bg-red-100 +} \ No newline at end of file diff --git a/apps/plataforma_digital/lib/plataforma_digital/design_system.ex b/apps/plataforma_digital/lib/plataforma_digital/design_system.ex index 2c58289b..643e7b56 100644 --- a/apps/plataforma_digital/lib/plataforma_digital/design_system.ex +++ b/apps/plataforma_digital/lib/plataforma_digital/design_system.ex @@ -603,4 +603,25 @@ defmodule PlataformaDigital.DesignSystem do """ end + + @doc """ + Componente de etiqueta, pode ser usado como marcador de imagens, de palavras chave + ou mesmo para visualização de dados diferentes dentro de um mesmo contexto. + + Recebe os atributos: + - `message`: texto a ser exibido na label + + """ + + attr(:id, :string, default: nil) + attr(:name, :string, default: nil) + attr(:message, :string, default: nil) + + def label(assigns) do + ~H""" +
      + <.text size="base" color="text-white-100"><%= @message %> +
      + """ + end end