add new segment

lib/content/content_context.ex

@@ -735,6 +735,21 @@ defmodule Zoonk.Content do
     lesson_step |> change_lesson_step(attrs) |> Repo.update()
   end
 
+  @doc """
+  Adds a segment to a lesson step.
+
+  ## Examples
+
+      iex> add_segment_to_lesson_step(step_id)
+      {:ok, %LessonStep{}}
+  """
+  @spec add_segment_to_lesson_step(non_neg_integer()) :: lesson_step_changeset()
+  def add_segment_to_lesson_step(step_id) do
+    lesson_step = Repo.get!(LessonStep, step_id)
+    new_segments = lesson_step.segments ++ [dgettext("orgs", "untitled segment")]
+    update_lesson_step(lesson_step, %{kind: :fill, segments: new_segments})
+  end
+
   @doc """
   Updates a lesson step kind.
 

lib/dashboard/lessons/components/step_fill.ex

@@ -2,13 +2,24 @@ defmodule ZoonkWeb.Components.Dashboard.StepFill do
   @moduledoc false
   use ZoonkWeb, :live_component
 
+  alias Zoonk.Content
+
   @impl Phoenix.LiveComponent
   def render(assigns) do
     ~H"""
-    <div id="segments" class="flex gap-2">
+    <div id="segments" class="flex flex-wrap items-center gap-2">
       <.link :for={{segment, index} <- Enum.with_index(@segments)} class={["bg-white p-2 rounded-md shadow-sm", is_nil(segment) && "semibold text-teal-500"]}>
         <%= get_segment(segment, index, @options) %>
       </.link>
+
+      <button
+        type="button"
+        phx-click="add_segment"
+        phx-target={@myself}
+        class="flex h-8 w-8 items-center justify-center rounded-full bg-teal-100 text-teal-900 hover:bg-teal-200 focus:outline-none focus:ring-2 focus:ring-teal-500"
+      >
+        <span class="sr-only"><%= dgettext("orgs", "Add segment") %></span> +
+      </button>
     </div>
     """
   end
@@ -17,4 +28,17 @@ defmodule ZoonkWeb.Components.Dashboard.StepFill do
   defp get_segment(segment, _idx, _options), do: segment
 
   defp get_segment_option(options, index), do: Enum.find(options, fn option -> option.segment == index end)
+
+  @impl Phoenix.LiveComponent
+  def handle_event("add_segment", _params, socket) do
+    case Content.add_segment_to_lesson_step(socket.assigns.step_id) do
+      {:ok, lesson_step} ->
+        {:noreply, assign(socket, segments: lesson_step.segments)}
+
+      {:error, changeset} ->
+        Sentry.Context.set_extra_context(%{changeset: changeset.errors, step_id: socket.assigns.step_id})
+        Sentry.capture_message("Unable to add segment.")
+        {:noreply, put_flash!(socket, :error, dgettext("errors", "Unable to add segment. Please, contact support."))}
+    end
+  end
 end

lib/dashboard/lessons/lesson_editor.html.heex

@@ -60,6 +60,7 @@
         id={:step_fill}
         segments={@selected_step.segments}
         options={options_with_segments(@selected_step.options)}
+        step_id={@selected_step.id}
       />
 
       <.step_image course={@course} lesson={@lesson} step={@selected_step} />

test/content/content_context_test.exs

@@ -806,6 +806,14 @@ defmodule Zoonk.ContentTest do
     end
   end
 
+  describe "add_segment_to_lesson_step/1" do
+    test "adds a segment to a lesson step" do
+      lesson_step = lesson_step_fixture(%{kind: :fill, segments: ["This is a", nil, "step."]})
+      assert {:ok, %LessonStep{} = updated} = Content.add_segment_to_lesson_step(lesson_step.id)
+      assert updated.segments == ["This is a", nil, "step.", "untitled segment"]
+    end
+  end
+
   describe "update_lesson_step_kind/2" do
     test "updates the kind of a lesson step" do
       lesson_step = lesson_step_fixture(%{kind: :readonly})

test/dashboard/lesson_editor_test.exs

@@ -538,6 +538,17 @@ defmodule ZoonkWeb.DashboardLessonEditorLiveTest do
       assert has_element?(lv, "span", "watch video:")
       refute has_element?(lv, "span", "https://www.youtube.com/watch?v=12345678901")
     end
+
+    test "adds a segment to a fill kind step", %{conn: conn, course: course} do
+      lesson = lesson_fixture(%{course_id: course.id})
+      lesson_step_fixture(%{lesson_id: lesson.id, kind: :fill, order: 1, segments: []})
+
+      {:ok, lv, _html} = live(conn, ~p"/dashboard/c/#{course.slug}/l/#{lesson.id}/s/1")
+
+      lv |> element("button", "Add segment") |> render_click()
+
+      assert has_element?(lv, "a", "untitled segment")
+    end
   end
 
   defp assert_403(conn, course) do