feature: show caption for labels #273

lib/mindwendel_web/live/brainstorming_live/show.html.heex

@@ -105,6 +105,10 @@
       ) %>
     <% end %>
 
+    <%= live_component(MindwendelWeb.LabelLive.CaptionsComponent,
+      brainstorming: @brainstorming
+    ) %>
+
     <%= live_component(MindwendelWeb.IdeaLive.IndexComponent,
       ideas: @ideas,
       brainstorming: @brainstorming,

lib/mindwendel_web/live/label_live/captions_component.ex

@@ -0,0 +1,3 @@
+defmodule MindwendelWeb.LabelLive.CaptionsComponent do
+  use MindwendelWeb, :live_component
+end

lib/mindwendel_web/live/label_live/captions_component.html.heex

@@ -0,0 +1,14 @@
+<div class="d-flex flex-row justify-content-end">
+  <%= for brainstorming_idea_label <- @brainstorming.labels do %>
+    <div class="m-1">
+      <span
+        class="badge rounded-pill"
+        id={"idea-label-#{uuid()}"}
+        data-color={brainstorming_idea_label.color}
+        phx-hook="SetIdeaLabelBackgroundColor"
+      >
+        <%= brainstorming_idea_label.name %>
+      </span>
+    </div>
+  <% end %>
+</div>

priv/gettext/default.pot

@@ -97,7 +97,7 @@ msgid "Idea created successfully"
 msgstr ""
 
 #: lib/mindwendel_web/live/brainstorming_live/show.html.heex:25
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:117
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:121
 #, elixir-autogen, elixir-format
 msgid "New Idea"
 msgstr ""
@@ -122,7 +122,7 @@ msgstr ""
 msgid "No ideas brainstormed"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:120
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:124
 #, elixir-autogen, elixir-format
 msgid "Open new idea page (Hotkey: i)"
 msgstr ""

test/mindwendel_web/live/label_live/captions_test.exs

@@ -0,0 +1,24 @@
+defmodule MindwendelWeb.LabelLive.CaptionsTest do
+  alias MindwendelWeb.LabelLive.CaptionsComponent
+  use MindwendelWeb.ConnCase
+  import Phoenix.LiveViewTest
+
+  alias Mindwendel.Factory
+
+  setup do
+    %{brainstorming: Factory.insert!(:brainstorming)}
+  end
+
+  test "captions contain all labels", %{
+    brainstorming: brainstorming
+  } do
+    captions_component = render_component(CaptionsComponent, brainstorming: brainstorming)
+
+    # make sure that there is at least one label in the list:
+    assert Enum.count(brainstorming.labels) > 0
+
+    Enum.each(brainstorming.labels, fn label ->
+      assert captions_component =~ label.name
+    end)
+  end
+end