From d4831555d56735acaa16791bc8b14a96480ec9ab Mon Sep 17 00:00:00 2001
From: sorax <robert@hausgedacht.de>
Date: Wed, 4 Sep 2024 09:19:33 +0200
Subject: [PATCH] show focus & blur in nodes

---
 assets/js/hooks/index.ts                      | 20 ++++++++++++++++---
 .../live/episode_live/index.html.heex         |  1 +
 lib/radiator_web/live/outline_component.ex    | 12 +++++++++--
 .../live/outline_component.html.heex          |  2 ++
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/assets/js/hooks/index.ts b/assets/js/hooks/index.ts
index 2bc13a15..953a5e8e 100644
--- a/assets/js/hooks/index.ts
+++ b/assets/js/hooks/index.ts
@@ -5,16 +5,29 @@ export const Hooks = {
   outline: {
     selector: '.node:not([data-processed="true"]',
     mounted() {
-      this.el.addEventListener("toggle_collapse", ({ detail }) => {
-        const item = getItemById(detail.uuid);
+      this.handleEvent("focus", ({ uuid, user_name }) => {
+        const item = getItemById(uuid);
+        item!.querySelector(".editing")!.innerHTML = user_name;
+      });
+      this.handleEvent("blur", ({ uuid }) => {
+        const item = getItemById(uuid);
+        item!.querySelector(".editing")!.innerHTML = "";
+      });
+
+      this.el.addEventListener("toggle_collapse", ({ detail: { uuid } }) => {
+        const item = getItemById(uuid);
         item!.toggleAttribute("data-collapsed");
+
         const collapsedStatus = localStorage.getItem(this.el.id) || "{}";
         const collapsed = JSON.parse(collapsedStatus);
-        collapsed[detail.uuid] = !collapsed[detail.uuid];
+
+        collapsed[uuid] = !collapsed[uuid];
         localStorage.setItem(this.el.id, JSON.stringify(collapsed));
       });
+
       const collapsedStatus = localStorage.getItem(this.el.id) || "{}";
       const collapsed = JSON.parse(collapsedStatus);
+
       const nodes = this.el.querySelectorAll(this.selector);
       nodes.forEach((item: HTMLDivElement) => {
         const { uuid, parent_id, prev_id } = getNodeByItem(item);
@@ -26,6 +39,7 @@ export const Hooks = {
         } else if (parentNode) {
           parentNode.querySelector(".children")!.append(item);
         }
+
         item.toggleAttribute("data-collapsed", !!collapsed[uuid]);
         setAttribute(item, "processed", true);
       });
diff --git a/lib/radiator_web/live/episode_live/index.html.heex b/lib/radiator_web/live/episode_live/index.html.heex
index f36b142d..b7498fd4 100644
--- a/lib/radiator_web/live/episode_live/index.html.heex
+++ b/lib/radiator_web/live/episode_live/index.html.heex
@@ -66,6 +66,7 @@
         module={RadiatorWeb.OutlineComponent}
         episode_id={@selected_episode.id}
         user_id={@current_user.id}
+        user={@current_user}
       />
     </section>
 
diff --git a/lib/radiator_web/live/outline_component.ex b/lib/radiator_web/live/outline_component.ex
index 046424c0..fdaa7cd4 100644
--- a/lib/radiator_web/live/outline_component.ex
+++ b/lib/radiator_web/live/outline_component.ex
@@ -88,13 +88,21 @@ defmodule RadiatorWeb.OutlineComponent do
   end
 
   @impl true
-  def handle_event("focus", %{"uuid" => _uuid}, socket) do
+  def handle_event("focus", %{"uuid" => uuid}, socket) do
+    id = socket.assigns.user_id
+    name = socket.assigns.user.email |> String.split("@") |> List.first()
+
     socket
+    |> push_event("focus", %{uuid: uuid, user_id: id, user_name: name})
     |> reply(:noreply)
   end
 
-  def handle_event("blur", %{"uuid" => _uuid}, socket) do
+  def handle_event("blur", %{"uuid" => uuid}, socket) do
+    id = socket.assigns.user_id
+    name = socket.assigns.user.email |> String.split("@") |> List.first()
+
     socket
+    |> push_event("blur", %{uuid: uuid, user_id: id, user_name: name})
     |> reply(:noreply)
   end
 
diff --git a/lib/radiator_web/live/outline_component.html.heex b/lib/radiator_web/live/outline_component.html.heex
index 72a7d3ca..fdada29c 100644
--- a/lib/radiator_web/live/outline_component.html.heex
+++ b/lib/radiator_web/live/outline_component.html.heex
@@ -31,6 +31,8 @@
           phx-target={@myself}
         />
       </OutlineComponents.outline_form>
+      <div class="absolute top-0 right-0 z-10 px-1 text-xs text-white bg-green-500 rounded editing">
+      </div>
       <div class="ml-4 peer children group-data-[collapsed]:hidden"></div>
       <button
         class="absolute peer-empty:hidden top-3 left-0 group-data-[collapsed]:-rotate-90 duration-200 z-10"