Fix broken buttons for phx-update ignore (#532)

lib/mindwendel_web/live/brainstorming_live/share_component.ex

@@ -4,26 +4,24 @@ defmodule MindwendelWeb.BrainstormingLive.ShareComponent do
   alias Mindwendel.Permissions
 
   def handle_event("toggle_url_secret", _value, socket) do
-    %{brainstorming: brainstorming, uri: uri, current_user: current_user} = socket.assigns
+    %{
+      brainstorming_id: brainstorming_id,
+      uri: uri,
+      admin_uri: admin_uri,
+      current_user: current_user,
+      activated_uri_type: activated_uri_type
+    } = socket.assigns
 
-    if Permissions.has_moderating_permission(brainstorming.id, current_user) do
-      new_uri = create_download_link(brainstorming, uri)
-      {:noreply, assign(socket, :uri, new_uri)}
-    else
-      {:noreply, socket}
-    end
-  end
+    if Permissions.has_moderating_permission(brainstorming_id, current_user) do
+      toggled_activated_uri = if activated_uri_type == :uri, do: :admin_uri, else: :uri
+      active_uri = if toggled_activated_uri == :uri, do: uri, else: admin_uri
 
-  def secret_in_uri(uri) do
-    uri |> String.split("#") |> length == 2
-  end
-
-  defp create_download_link(brainstorming, uri) do
-    if secret_in_uri(uri) do
-      url_fragments = String.split(uri, "#")
-      List.first(url_fragments)
+      {:noreply,
+       socket
+       |> assign(:activated_uri_type, toggled_activated_uri)
+       |> assign(:active_uri, active_uri)}
     else
-      "#{uri}##{brainstorming.admin_url_id}"
+      {:noreply, socket}
     end
   end
 end

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

@@ -8,7 +8,7 @@
         id="brainstorming-link-input-readonly"
         readonly="true"
         type="text"
-        value={@uri}
+        value={@active_uri}
       />
       <button
         class="btn btn-outline-secondary"
@@ -23,23 +23,23 @@
         class="btn btn-outline-secondary"
         data-native-sharing-button-share-data-text={gettext("Join my brainstorming")}
         data-native-sharing-button-share-data-title={gettext("Mindwendel Brainstorming")}
-        data-native-sharing-button-share-data-url={@uri}
+        data-native-sharing-button-share-data-url={@active_uri}
         id="brainstorming-link-share-button"
         phx-hook="NativeSharingButton"
       >
         <i class="bi-share-fill"></i>
       </button>
     </div>
     <div class="input-group mt-3">
-      <%= if has_moderating_permission(@brainstorming.id, @current_user) do %>
+      <%= if has_moderating_permission(@brainstorming_id, @current_user) do %>
         <.input
           name="admin_url_id"
           type="checkbox"
           options={["switch"]}
           id="brainstorming-link-toggle-admin-secret"
           phx-click="toggle_url_secret"
           phx-target={@myself}
-          checked={secret_in_uri(@uri)}
+          checked={@activated_uri_type == :admin_uri}
           label={gettext("Give moderating permissions")}
         />
       <% end %>
@@ -50,7 +50,11 @@
 
   <div class="row mb-3">
     <div class="d-flex justify-content-center">
-      <div data-qr-code-url={@uri} id="brainstorming-link-qr-code-canvas" phx-hook="QrCodeCanvas">
+      <div
+        data-qr-code-url={@active_uri}
+        id="brainstorming-link-qr-code-canvas"
+        phx-hook="QrCodeCanvas"
+      >
       </div>
     </div>
   </div>
@@ -60,8 +64,8 @@
       <a
         class="btn btn-primary"
         data-qr-code-file-extension="svg"
-        data-qr-code-filename={@uri}
-        data-qr-code-url={@uri}
+        data-qr-code-filename="qrcode"
+        data-qr-code-url={@active_uri}
         id="brainstorming-link-qr-code-download-as-svg-button"
         phx-hook="QrCodeDownloadButton"
       >
@@ -71,8 +75,8 @@
       <a
         class="btn btn-primary"
         data-qr-code-file-extension="png"
-        data-qr-code-filename={@uri}
-        data-qr-code-url={@uri}
+        data-qr-code-filename="qrcode"
+        data-qr-code-url={@active_uri}
         id="brainstorming-link-qr-code-download-as-png-button"
         phx-hook="QrCodeDownloadButton"
       >

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

@@ -90,14 +90,12 @@
       show
       on_cancel={JS.patch(~p"/brainstormings/#{@brainstorming.id}")}
       title={gettext("New idea")}
-      phx_update="ignore"
     >
       <.live_component
         module={MindwendelWeb.IdeaLive.FormComponent}
         id={:new}
         action={:new}
         brainstorming_id={@brainstorming.id}
-        filtered_labels={@filtered_labels}
         current_user={@current_user}
         idea={@idea}
       />
@@ -176,15 +174,17 @@
       show
       on_cancel={JS.patch(~p"/brainstormings/#{@brainstorming.id}")}
       title={gettext("Share brainstorming")}
-      phx_update="ignore"
     >
       <.live_component
         module={MindwendelWeb.BrainstormingLive.ShareComponent}
         id={:share}
         action={:share}
-        brainstorming={@brainstorming}
+        brainstorming_id={@brainstorming.id}
         current_user={@current_user}
         uri={url(~p"/brainstormings/#{@brainstorming.id}")}
+        admin_uri={url(~p"/brainstormings/#{@brainstorming.id}/##{@brainstorming.admin_url_id}")}
+        active_uri={url(~p"/brainstormings/#{@brainstorming.id}")}
+        activated_uri_type={:uri}
       />
     </.modal>
   </div>

lib/mindwendel_web/live/idea_live/form_component.ex

@@ -4,6 +4,7 @@ defmodule MindwendelWeb.IdeaLive.FormComponent do
   alias MIME
   alias Mindwendel.Ideas
   alias Mindwendel.Attachments
+  alias Mindwendel.Brainstormings
   alias Mindwendel.IdeaLabels
 
   @whitelisted_file_extensions ~w(.jpg .jpeg .gif .png .pdf)
@@ -89,12 +90,17 @@ defmodule MindwendelWeb.IdeaLive.FormComponent do
   defp save_idea(socket, :new, idea_params) do
     tmp_attachments = prepare_attachments(socket)
 
+    # This is a workaround to get the filtered labels for the idea without (!) passing them as a parameter to the form component.
+    # Unfortunatly, passing either the brainstorming or filter labels directly triggers a re-render of the form component when changing the filter labels and results in a stuck bootstrap modal.
+    {:ok, brainstorming} = Brainstormings.get_brainstorming(socket.assigns.brainstorming_id)
+    filtered_labels = brainstorming.filter_labels_ids
+
     idea_params_merged =
       idea_params
       |> Map.put("user_id", socket.assigns.current_user.id)
       |> Map.put(
         "idea_labels",
-        IdeaLabels.get_idea_labels(socket.assigns.filtered_labels)
+        IdeaLabels.get_idea_labels(filtered_labels)
       )
       |> Map.put("tmp_attachments", tmp_attachments)
 

priv/gettext/de/LC_MESSAGES/default.po

@@ -97,7 +97,7 @@ msgstr "Export als HTML"
 msgid "Got stuck? Try inspirational teasers!"
 msgstr "Keine Ideen? Hier gibts Gedankenanstöße!"
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:108
+#: lib/mindwendel_web/live/idea_live/form_component.ex:114
 #, elixir-autogen, elixir-format
 msgid "Idea created successfully"
 msgstr "Idee erstellt"
@@ -258,17 +258,17 @@ msgstr "Mindwendel Brainstorming"
 msgid "Share"
 msgstr "Teilen"
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:178
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:176
 #, elixir-autogen, elixir-format
 msgid "Share brainstorming"
 msgstr "Teile Dein Brainstorming"
 
-#: lib/mindwendel_web/live/brainstorming_live/share_component.html.heex:79
+#: lib/mindwendel_web/live/brainstorming_live/share_component.html.heex:83
 #, elixir-autogen, elixir-format
 msgid "Download as png"
 msgstr "Download als PNG"
 
-#: lib/mindwendel_web/live/brainstorming_live/share_component.html.heex:68
+#: lib/mindwendel_web/live/brainstorming_live/share_component.html.heex:72
 #, elixir-autogen, elixir-format
 msgid "Download as svg"
 msgstr "Download als SVG"
@@ -278,7 +278,7 @@ msgstr "Download als SVG"
 msgid "Brainstorming delete are you sure"
 msgstr "Bist du sicher, dass das Brainstorming gelöscht werden soll?"
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:145
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:143
 #, elixir-autogen, elixir-format
 msgid "Update idea"
 msgstr "Idee bearbeiten"
@@ -402,13 +402,13 @@ msgstr "Name"
 
 #: lib/mindwendel_web/live/brainstorming_live/show.html.heex:37
 #: lib/mindwendel_web/live/brainstorming_live/show.html.heex:39
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:128
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:126
 #: lib/mindwendel_web/live/lane_live/index_component.html.heex:130
 #, elixir-autogen, elixir-format
 msgid "New lane"
 msgstr "Neue Spalte"
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:162
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:160
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Update lane"
 msgstr "Spalte bearbeiten"
@@ -463,7 +463,7 @@ msgstr "Idee bearbeiten"
 msgid "Delete idea"
 msgstr "Löschen"
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:77
+#: lib/mindwendel_web/live/idea_live/form_component.ex:78
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Idea updated"
 msgstr "Idee aktualisiert"
@@ -480,17 +480,17 @@ msgstr "Zusätzlicher Anhang"
 msgid "No filename"
 msgstr "Kein Dateiname"
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:147
+#: lib/mindwendel_web/live/idea_live/form_component.ex:153
 #, elixir-autogen, elixir-format
 msgid "File type is not allowed"
 msgstr "Dateityp nicht erlaubt"
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:145
+#: lib/mindwendel_web/live/idea_live/form_component.ex:151
 #, elixir-autogen, elixir-format
 msgid "The selected file is too large"
 msgstr "Datei ist zu groß"
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:146
+#: lib/mindwendel_web/live/idea_live/form_component.ex:152
 #, elixir-autogen, elixir-format
 msgid "Too many files selected"
 msgstr "Zu viele Dateien ausgewählt"
@@ -553,7 +553,7 @@ msgstr "Impressum"
 msgid "Privacy"
 msgstr "Datenschutzerklärung"
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:111
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:109
 #, elixir-autogen, elixir-format
 msgid "Idea details"
 msgstr "Detailansicht"

priv/gettext/default.pot

@@ -96,7 +96,7 @@ msgstr ""
 msgid "Got stuck? Try inspirational teasers!"
 msgstr ""
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:108
+#: lib/mindwendel_web/live/idea_live/form_component.ex:114
 #, elixir-autogen, elixir-format
 msgid "Idea created successfully"
 msgstr ""
@@ -257,17 +257,17 @@ msgstr ""
 msgid "Share"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:178
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:176
 #, elixir-autogen, elixir-format
 msgid "Share brainstorming"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/share_component.html.heex:79
+#: lib/mindwendel_web/live/brainstorming_live/share_component.html.heex:83
 #, elixir-autogen, elixir-format
 msgid "Download as png"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/share_component.html.heex:68
+#: lib/mindwendel_web/live/brainstorming_live/share_component.html.heex:72
 #, elixir-autogen, elixir-format
 msgid "Download as svg"
 msgstr ""
@@ -277,7 +277,7 @@ msgstr ""
 msgid "Brainstorming delete are you sure"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:145
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:143
 #, elixir-autogen, elixir-format
 msgid "Update idea"
 msgstr ""
@@ -401,13 +401,13 @@ msgstr ""
 
 #: lib/mindwendel_web/live/brainstorming_live/show.html.heex:37
 #: lib/mindwendel_web/live/brainstorming_live/show.html.heex:39
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:128
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:126
 #: lib/mindwendel_web/live/lane_live/index_component.html.heex:130
 #, elixir-autogen, elixir-format
 msgid "New lane"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:162
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:160
 #, elixir-autogen, elixir-format
 msgid "Update lane"
 msgstr ""
@@ -462,7 +462,7 @@ msgstr ""
 msgid "Delete idea"
 msgstr ""
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:77
+#: lib/mindwendel_web/live/idea_live/form_component.ex:78
 #, elixir-autogen, elixir-format
 msgid "Idea updated"
 msgstr ""
@@ -479,17 +479,17 @@ msgstr ""
 msgid "No filename"
 msgstr ""
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:147
+#: lib/mindwendel_web/live/idea_live/form_component.ex:153
 #, elixir-autogen, elixir-format
 msgid "File type is not allowed"
 msgstr ""
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:145
+#: lib/mindwendel_web/live/idea_live/form_component.ex:151
 #, elixir-autogen, elixir-format
 msgid "The selected file is too large"
 msgstr ""
 
-#: lib/mindwendel_web/live/idea_live/form_component.ex:146
+#: lib/mindwendel_web/live/idea_live/form_component.ex:152
 #, elixir-autogen, elixir-format
 msgid "Too many files selected"
 msgstr ""
@@ -552,7 +552,7 @@ msgstr ""
 msgid "Privacy"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:111
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:109
 #, elixir-autogen, elixir-format
 msgid "Idea details"
 msgstr ""