work on pipelines

lib/memex_web/components/pipelines_table_component.ex

@@ -0,0 +1,135 @@
+defmodule MemexWeb.Components.PipelinesTableComponent do
+  @moduledoc """
+  A component that displays a list of pipelines
+  """
+  use MemexWeb, :live_component
+  alias Ecto.UUID
+  alias Memex.{Accounts.User, Pipelines, Pipelines.Pipeline}
+  alias Phoenix.LiveView.{Rendered, Socket}
+
+  @impl true
+  @spec update(
+          %{
+            required(:id) => UUID.t(),
+            required(:current_user) => User.t(),
+            required(:pipelines) => [Pipeline.t()],
+            optional(any()) => any()
+          },
+          Socket.t()
+        ) :: {:ok, Socket.t()}
+  def update(%{id: _id, pipelines: _pipelines, current_user: _current_user} = assigns, socket) do
+    socket =
+      socket
+      |> assign(assigns)
+      |> assign_new(:actions, fn -> [] end)
+      |> display_pipelines()
+
+    {:ok, socket}
+  end
+
+  defp display_pipelines(
+         %{
+           assigns: %{
+             pipelines: pipelines,
+             current_user: current_user,
+             actions: actions
+           }
+         } = socket
+       ) do
+    columns =
+      if actions == [] or current_user |> is_nil() do
+        []
+      else
+        [%{label: nil, key: :actions, sortable: false}]
+      end
+
+    columns = [
+      %{label: gettext("title"), key: :title},
+      %{label: gettext("description"), key: :description},
+      %{label: gettext("tags"), key: :tags},
+      %{label: gettext("visibility"), key: :visibility}
+      | columns
+    ]
+
+    rows =
+      pipelines
+      |> Enum.map(fn pipeline ->
+        pipeline
+        |> get_row_data_for_pipeline(%{
+          columns: columns,
+          current_user: current_user,
+          actions: actions
+        })
+      end)
+
+    socket |> assign(columns: columns, rows: rows)
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="w-full">
+      <.live_component
+        module={MemexWeb.Components.TableComponent}
+        id={@id}
+        columns={@columns}
+        rows={@rows}
+      />
+    </div>
+    """
+  end
+
+  @spec get_row_data_for_pipeline(Pipeline.t(), additional_data :: map()) :: map()
+  defp get_row_data_for_pipeline(pipeline, %{columns: columns} = additional_data) do
+    columns
+    |> Map.new(fn %{key: key} ->
+      {key, get_value_for_key(key, pipeline, additional_data)}
+    end)
+  end
+
+  @spec get_value_for_key(atom(), Pipeline.t(), additional_data :: map()) ::
+          any() | {any(), Rendered.t()}
+  defp get_value_for_key(:title, %{id: id, title: title}, _additional_data) do
+    assigns = %{id: id, title: title}
+
+    title_block = ~H"""
+    <.link
+      navigate={Routes.pipeline_show_path(Endpoint, :show, @id)}
+      class="link"
+      data-qa={"pipeline-show-#{@id}"}
+    >
+      <%= @title %>
+    </.link>
+    """
+
+    {title, title_block}
+  end
+
+  defp get_value_for_key(:description, %{description: description}, _additional_data) do
+    assigns = %{description: description}
+
+    description_block = ~H"""
+    <div class="truncate max-w-sm">
+      <%= @description %>
+    </div>
+    """
+
+    {description, description_block}
+  end
+
+  defp get_value_for_key(:tags, %{tags: tags}, _additional_data) do
+    tags |> Pipelines.get_tags_string()
+  end
+
+  defp get_value_for_key(:actions, pipeline, %{actions: actions}) do
+    assigns = %{actions: actions, pipeline: pipeline}
+
+    ~H"""
+    <div class="flex justify-center items-center space-x-4">
+      <%= render_slot(@actions, @pipeline) %>
+    </div>
+    """
+  end
+
+  defp get_value_for_key(key, pipeline, _additional_data), do: pipeline |> Map.get(key)
+end

lib/memex_web/live/pipeline_live/form_component.ex

@@ -4,8 +4,8 @@ defmodule MemexWeb.PipelineLive.FormComponent do
   alias Memex.Pipelines
 
   @impl true
-  def update(%{pipeline: pipeline} = assigns, socket) do
-    changeset = Pipelines.change_pipeline(pipeline)
+  def update(%{pipeline: pipeline, current_user: current_user} = assigns, socket) do
+    changeset = Pipelines.change_pipeline(pipeline, current_user)
 
     {:ok,
      socket
@@ -14,39 +14,56 @@ defmodule MemexWeb.PipelineLive.FormComponent do
   end
 
   @impl true
-  def handle_event("validate", %{"pipeline" => pipeline_params}, socket) do
+  def handle_event(
+        "validate",
+        %{"pipeline" => pipeline_params},
+        %{assigns: %{pipeline: pipeline, current_user: current_user}} = socket
+      ) do
     changeset =
-      socket.assigns.pipeline
-      |> Pipelines.change_pipeline(pipeline_params)
+      pipeline
+      |> Pipelines.change_pipeline(pipeline_params, current_user)
       |> Map.put(:action, :validate)
 
     {:noreply, assign(socket, :changeset, changeset)}
   end
 
-  def handle_event("save", %{"pipeline" => pipeline_params}, socket) do
-    save_pipeline(socket, socket.assigns.action, pipeline_params)
+  def handle_event(
+        "save",
+        %{"pipeline" => pipeline_params},
+        %{assigns: %{action: action}} = socket
+      ) do
+    save_pipeline(socket, action, pipeline_params)
   end
 
-  defp save_pipeline(socket, :edit, pipeline_params) do
-    case Pipelines.update_pipeline(socket.assigns.pipeline, pipeline_params) do
-      {:ok, _pipeline} ->
+  defp save_pipeline(
+         %{assigns: %{pipeline: pipeline, return_to: return_to, current_user: current_user}} =
+           socket,
+         :edit,
+         pipeline_params
+       ) do
+    case Pipelines.update_pipeline(pipeline, pipeline_params, current_user) do
+      {:ok, %{title: title}} ->
         {:noreply,
          socket
-         |> put_flash(:info, "pipeline updated successfully")
-         |> push_navigate(to: socket.assigns.return_to)}
+         |> put_flash(:info, gettext("%{title} saved", title: title))
+         |> push_navigate(to: return_to)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, assign(socket, :changeset, changeset)}
     end
   end
 
-  defp save_pipeline(socket, :new, pipeline_params) do
-    case Pipelines.create_pipeline(pipeline_params) do
-      {:ok, _pipeline} ->
+  defp save_pipeline(
+         %{assigns: %{return_to: return_to, current_user: current_user}} = socket,
+         :new,
+         pipeline_params
+       ) do
+    case Pipelines.create_pipeline(pipeline_params, current_user) do
+      {:ok, %{title: title}} ->
         {:noreply,
          socket
-         |> put_flash(:info, "pipeline created successfully")
-         |> push_navigate(to: socket.assigns.return_to)}
+         |> put_flash(:info, gettext("%{title} created", title: title))
+         |> push_navigate(to: return_to)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, assign(socket, changeset: changeset)}

lib/memex_web/live/pipeline_live/form_component.html.heex

@@ -1,6 +1,4 @@
-<div>
-  <h2><%= @title %></h2>
-
+<div class="h-full flex flex-col justify-start items-stretch space-y-4">
   <.form
     :let={f}
     for={@changeset}
@@ -8,23 +6,44 @@
     phx-target={@myself}
     phx-change="validate"
     phx-submit="save"
+    phx-debounce="300"
+    class="flex flex-col justify-start items-stretch space-y-4"
   >
-    <%= label(f, :title) %>
-    <%= text_input(f, :title) %>
+    <%= text_input(f, :title,
+      class: "input input-primary",
+      placeholder: gettext("title")
+    ) %>
     <%= error_tag(f, :title) %>
 
-    <%= label(f, :description) %>
-    <%= textarea(f, :description) %>
+    <%= textarea(f, :description,
+      id: "pipeline-form-description",
+      class: "input input-primary h-64 min-h-64",
+      phx_hook: "MaintainAttrs",
+      phx_update: "ignore",
+      placeholder: gettext("description")
+    ) %>
     <%= error_tag(f, :description) %>
 
-    <%= label(f, :visibility) %>
-    <%= select(f, :visibility, Ecto.Enum.values(Memex.Pipelines.Pipeline, :visibility),
-      prompt: "Choose a value"
+    <%= text_input(f, :tags_string,
+      id: "tags-input",
+      class: "input input-primary",
+      placeholder: gettext("tag1,tag2"),
+      phx_update: "ignore",
+      value: Pipelines.get_tags_string(@changeset)
     ) %>
-    <%= error_tag(f, :visibility) %>
+    <%= error_tag(f, :tags_string) %>
 
-    <div>
-      <%= submit("Save", phx_disable_with: "Saving...") %>
+    <div class="flex justify-center items-stretch space-x-4">
+      <%= select(f, :visibility, Ecto.Enum.values(Memex.Pipelines.Pipeline, :visibility),
+        class: "grow input input-primary",
+        prompt: gettext("select privacy")
+      ) %>
+
+      <%= submit(dgettext("actions", "save"),
+        phx_disable_with: gettext("saving..."),
+        class: "mx-auto btn btn-primary"
+      ) %>
     </div>
+    <%= error_tag(f, :visibility) %>
   </.form>
 </div>

lib/memex_web/live/pipeline_live/index.ex

@@ -1,46 +1,80 @@
 defmodule MemexWeb.PipelineLive.Index do
   use MemexWeb, :live_view
-
-  alias Memex.Pipelines
-  alias Memex.Pipelines.Pipeline
+  alias Memex.{Pipelines, Pipelines.Pipeline}
 
   @impl true
+  def mount(%{"search" => search}, _session, socket) do
+    {:ok, socket |> assign(search: search) |> display_pipelines()}
+  end
+
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, :pipelines, list_pipelines())}
+    {:ok, socket |> assign(search: nil) |> display_pipelines()}
   end
 
   @impl true
-  def handle_params(params, _url, socket) do
-    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+  def handle_params(params, _url, %{assigns: %{live_action: live_action}} = socket) do
+    {:noreply, apply_action(socket, live_action, params)}
   end
 
-  defp apply_action(socket, :edit, %{"id" => id}) do
+  defp apply_action(%{assigns: %{current_user: current_user}} = socket, :edit, %{"id" => id}) do
+    %{title: title} = pipeline = Pipelines.get_pipeline!(id, current_user)
+
     socket
-    |> assign(:page_title, "edit pipeline")
-    |> assign(:pipeline, Pipelines.get_pipeline!(id))
+    |> assign(page_title: gettext("edit %{title}", title: title))
+    |> assign(pipeline: pipeline)
   end
 
-  defp apply_action(socket, :new, _params) do
+  defp apply_action(%{assigns: %{current_user: %{id: current_user_id}}} = socket, :new, _params) do
     socket
-    |> assign(:page_title, "new Pipeline")
-    |> assign(:pipeline, %Pipeline{})
+    |> assign(page_title: gettext("new pipeline"))
+    |> assign(pipeline: %Pipeline{user_id: current_user_id})
   end
 
   defp apply_action(socket, :index, _params) do
     socket
-    |> assign(:page_title, "listing pipelines")
-    |> assign(:pipeline, nil)
+    |> assign(page_title: gettext("pipelines"))
+    |> assign(search: nil)
+    |> assign(pipeline: nil)
+    |> display_pipelines()
+  end
+
+  defp apply_action(socket, :search, %{"search" => search}) do
+    socket
+    |> assign(page_title: gettext("pipelines"))
+    |> assign(search: search)
+    |> assign(pipeline: nil)
+    |> display_pipelines()
   end
 
   @impl true
-  def handle_event("delete", %{"id" => id}, socket) do
-    pipeline = Pipelines.get_pipeline!(id)
-    {:ok, _} = Pipelines.delete_pipeline(pipeline)
+  def handle_event("delete", %{"id" => id}, %{assigns: %{current_user: current_user}} = socket) do
+    pipeline = Pipelines.get_pipeline!(id, current_user)
+    {:ok, %{title: title}} = Pipelines.delete_pipeline(pipeline, current_user)
 
-    {:noreply, assign(socket, :pipelines, list_pipelines())}
+    socket =
+      socket
+      |> assign(pipelines: Pipelines.list_pipelines(current_user))
+      |> put_flash(:info, gettext("%{title} deleted", title: title))
+
+    {:noreply, socket}
   end
 
-  defp list_pipelines do
-    Pipelines.list_pipelines()
+  @impl true
+  def handle_event("search", %{"search" => %{"search_term" => ""}}, socket) do
+    {:noreply, socket |> push_patch(to: Routes.pipeline_index_path(Endpoint, :index))}
+  end
+
+  def handle_event("search", %{"search" => %{"search_term" => search_term}}, socket) do
+    {:noreply,
+     socket |> push_patch(to: Routes.pipeline_index_path(Endpoint, :search, search_term))}
+  end
+
+  defp display_pipelines(%{assigns: %{current_user: current_user, search: search}} = socket)
+       when not (current_user |> is_nil()) do
+    socket |> assign(pipelines: Pipelines.list_pipelines(search, current_user))
+  end
+
+  defp display_pipelines(%{assigns: %{search: search}} = socket) do
+    socket |> assign(pipelines: Pipelines.list_public_pipelines(search))
   end
 end

lib/memex_web/live/pipeline_live/index.html.heex

@@ -1,10 +1,69 @@
-<h1>listing pipelines</h1>
+<div class="mx-auto flex flex-col justify-center items-start space-y-4 max-w-3xl">
+  <h1 class="text-xl">
+    <%= gettext("pipelines") %>
+  </h1>
+
+  <.form
+    :let={f}
+    for={:search}
+    phx-change="search"
+    phx-submit="search"
+    class="self-stretch flex flex-col items-stretch"
+  >
+    <%= text_input(f, :search_term,
+      class: "input input-primary",
+      value: @search,
+      phx_debounce: 300,
+      placeholder: gettext("search")
+    ) %>
+  </.form>
+
+  <%= if @pipelines |> Enum.empty?() do %>
+    <h1 class="self-center text-primary-500">
+      <%= gettext("no pipelines found") %>
+    </h1>
+  <% else %>
+    <.live_component
+      module={MemexWeb.Components.PipelinesTableComponent}
+      id="pipelines-index-table"
+      current_user={@current_user}
+      pipelines={@pipelines}
+    >
+      <:actions :let={pipeline}>
+        <%= if @current_user do %>
+          <.link
+            patch={Routes.pipeline_index_path(@socket, :edit, pipeline)}
+            data-qa={"pipeline-edit-#{pipeline.id}"}
+          >
+            <%= dgettext("actions", "edit") %>
+          </.link>
+          <.link
+            href="#"
+            phx-click="delete"
+            phx-value-id={pipeline.id}
+            data-confirm={dgettext("prompts", "are you sure?")}
+            data-qa={"delete-pipeline-#{pipeline.id}"}
+          >
+            <%= dgettext("actions", "delete") %>
+          </.link>
+        <% end %>
+      </:actions>
+    </.live_component>
+  <% end %>
+
+  <%= if @current_user do %>
+    <.link patch={Routes.pipeline_index_path(@socket, :new)} class="self-end btn btn-primary">
+      <%= dgettext("actions", "new pipeline") %>
+    </.link>
+  <% end %>
+</div>
 
 <%= if @live_action in [:new, :edit] do %>
   <.modal return_to={Routes.pipeline_index_path(@socket, :index)}>
     <.live_component
       module={MemexWeb.PipelineLive.FormComponent}
       id={@pipeline.id || :new}
+      current_user={@current_user}
       title={@page_title}
       action={@live_action}
       pipeline={@pipeline}
@@ -12,53 +71,3 @@
     />
   </.modal>
 <% end %>
-
-<table>
-  <thead>
-    <tr>
-      <th>Title</th>
-      <th>Description</th>
-      <th>Visibility</th>
-
-      <th></th>
-    </tr>
-  </thead>
-  <tbody id="pipelines">
-    <%= for pipeline <- @pipelines do %>
-      <tr id={"pipeline-#{pipeline.id}"}>
-        <td><%= pipeline.title %></td>
-        <td><%= pipeline.description %></td>
-        <td><%= pipeline.visibility %></td>
-
-        <td>
-          <span>
-            <.link navigate={Routes.pipeline_show_path(@socket, :show, pipeline)}>
-              <%= dgettext("actions", "show") %>
-            </.link>
-          </span>
-          <span>
-            <.link patch={Routes.pipeline_index_path(@socket, :edit, pipeline)}>
-              <%= dgettext("actions", "edit") %>
-            </.link>
-          </span>
-          <span>
-            <.link
-              href="#"
-              phx-click="delete"
-              phx-value-id={pipeline.id}
-              data-confirm={dgettext("prompts", "are you sure?")}
-            >
-              <%= dgettext("actions", "delete") %>
-            </.link>
-          </span>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
-
-<span>
-  <.link patch={Routes.pipeline_index_path(@socket, :new)}>
-    <%= dgettext("actions", "new pipeline") %>
-  </.link>
-</span>

lib/memex_web/live/pipeline_live/show.ex

@@ -9,13 +9,33 @@ defmodule MemexWeb.PipelineLive.Show do
   end
 
   @impl true
-  def handle_params(%{"id" => id}, _, socket) do
+  def handle_params(
+        %{"id" => id},
+        _,
+        %{assigns: %{live_action: live_action, current_user: current_user}} = socket
+      ) do
     {:noreply,
      socket
-     |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:pipeline, Pipelines.get_pipeline!(id))}
+     |> assign(:page_title, page_title(live_action))
+     |> assign(:pipeline, Pipelines.get_pipeline!(id, current_user))}
   end
 
-  defp page_title(:show), do: "show pipeline"
-  defp page_title(:edit), do: "edit pipeline"
+  @impl true
+  def handle_event(
+        "delete",
+        _params,
+        %{assigns: %{pipeline: pipeline, current_user: current_user}} = socket
+      ) do
+    {:ok, %{title: title}} = Pipelines.delete_pipeline(pipeline, current_user)
+
+    socket =
+      socket
+      |> put_flash(:info, gettext("%{title} deleted", title: title))
+      |> push_navigate(to: Routes.pipeline_index_path(Endpoint, :index))
+
+    {:noreply, socket}
+  end
+
+  defp page_title(:show), do: gettext("show pipeline")
+  defp page_title(:edit), do: gettext("edit pipeline")
 end

lib/memex_web/live/pipeline_live/show.html.heex

@@ -1,10 +1,51 @@
-<h1>show pipeline</h1>
+<div class="mx-auto flex flex-col justify-center items-stretch space-y-4 max-w-3xl">
+  <h1 class="text-xl">
+    <%= @pipeline.title %>
+  </h1>
+
+  <p><%= if @pipeline.tags, do: @pipeline.tags |> Enum.join(", ") %></p>
+
+  <textarea
+    id="show-pipeline-description"
+    class="input input-primary h-128 min-h-128"
+    phx-hook="MaintainAttrs"
+    phx-update="ignore"
+    readonly
+    phx-no-format
+  ><%= @pipeline.description %></textarea>
+
+  <p class="self-end">
+    <%= gettext("Visibility: %{visibility}", visibility: @pipeline.visibility) %>
+  </p>
+
+  <div class="self-end flex space-x-4">
+    <.link class="btn btn-primary" patch={Routes.pipeline_index_path(@socket, :index)}>
+      <%= dgettext("actions", "back") %>
+    </.link>
+    <%= if @current_user do %>
+      <.link class="btn btn-primary" patch={Routes.pipeline_show_path(@socket, :edit, @pipeline)}>
+        <%= dgettext("actions", "edit") %>
+      </.link>
+
+      <button
+        type="button"
+        class="btn btn-primary"
+        phx-click="delete"
+        data-confirm={dgettext("prompts", "are you sure?")}
+        data-qa={"delete-pipeline-#{@pipeline.id}"}
+      >
+        <%= dgettext("actions", "delete") %>
+      </button>
+    <% end %>
+  </div>
+</div>
 
 <%= if @live_action in [:edit] do %>
   <.modal return_to={Routes.pipeline_show_path(@socket, :show, @pipeline)}>
     <.live_component
       module={MemexWeb.PipelineLive.FormComponent}
       id={@pipeline.id}
+      current_user={@current_user}
       title={@page_title}
       action={@live_action}
       pipeline={@pipeline}
@@ -12,32 +53,3 @@
     />
   </.modal>
 <% end %>
-
-<ul>
-  <li>
-    <strong>Title:</strong>
-    <%= @pipeline.title %>
-  </li>
-
-  <li>
-    <strong>Description:</strong>
-    <%= @pipeline.description %>
-  </li>
-
-  <li>
-    <strong>Visibility:</strong>
-    <%= @pipeline.visibility %>
-  </li>
-</ul>
-
-<span>
-  <.link patch={Routes.pipeline_show_path(@socket, :edit, @pipeline)} class="button">
-    <%= dgettext("actions", "edit") %>
-  </.link>
-</span>
-|
-<span>
-  <.link patch={Routes.pipeline_index_path(@socket, :index)}>
-    <%= dgettext("actions", "Back") %>
-  </.link>
-</span>

lib/memex_web/router.ex

@@ -87,7 +87,8 @@ defmodule MemexWeb.Router do
       live "/context/:id", ContextLive.Show, :show
 
       live "/pipelines", PipelineLive.Index, :index
-      live "/pipelines/:id", PipelineLive.Show, :show
+      live "/pipelines/:search", PipelineLive.Index, :search
+      live "/pipeline/:id", PipelineLive.Show, :show
     end
   end