From ca520cf481ccb876faed24143c9602c1f64d2db7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Mon, 1 Mar 2021 18:17:24 +0100
Subject: [PATCH] Add buttons for moving cell (#64)

---
 assets/js/session/index.js               |  4 ++--
 lib/live_book_web/live/cell_component.ex | 20 ++++++++++++++++++++
 lib/live_book_web/live/icons.ex          | 20 ++++++++++++++++++++
 lib/live_book_web/live/session_live.ex   |  9 ++++++++-
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/assets/js/session/index.js b/assets/js/session/index.js
index 5aaae1145..e6bd87bae 100644
--- a/assets/js/session/index.js
+++ b/assets/js/session/index.js
@@ -71,9 +71,9 @@ const Session = {
         } else if (key === "k") {
           this.pushEvent("move_cell_focus", { offset: -1 });
         } else if (key === "J") {
-          this.pushEvent("move_cell", { offset: 1 });
+          this.pushEvent("move_focused_cell", { offset: 1 });
         } else if (key === "K") {
-          this.pushEvent("move_cell", { offset: -1 });
+          this.pushEvent("move_focused_cell", { offset: -1 });
         } else if (key === "n") {
           this.pushEvent("insert_cell_below_focused", { type: "elixir" });
         } else if (key === "N") {
diff --git a/lib/live_book_web/live/cell_component.ex b/lib/live_book_web/live/cell_component.ex
index 3d12817d9..ead4c4d8a 100644
--- a/lib/live_book_web/live/cell_component.ex
+++ b/lib/live_book_web/live/cell_component.ex
@@ -27,6 +27,16 @@ defmodule LiveBookWeb.CellComponent do
         <button phx-click="delete_focused_cell" class="text-gray-500 hover:text-current">
           <%= Icons.svg(:trash, class: "h-6") %>
         </button>
+        <button class="text-gray-500 hover:text-current"
+          phx-click="move_focused_cell"
+          phx-value-offset="-1">
+          <%= Icons.svg(:chevron_up, class: "h-6") %>
+        </button>
+        <button class="text-gray-500 hover:text-current"
+          phx-click="move_focused_cell"
+          phx-value-offset="1">
+          <%= Icons.svg(:chevron_down, class: "h-6") %>
+        </button>
       </div>
     <% end %>
 
@@ -56,6 +66,16 @@ defmodule LiveBookWeb.CellComponent do
         <button phx-click="delete_focused_cell" class="text-gray-500 hover:text-current">
           <%= Icons.svg(:trash, class: "h-6") %>
         </button>
+        <button class="text-gray-500 hover:text-current"
+          phx-click="move_focused_cell"
+          phx-value-offset="-1">
+          <%= Icons.svg(:chevron_up, class: "h-6") %>
+        </button>
+        <button class="text-gray-500 hover:text-current"
+          phx-click="move_focused_cell"
+          phx-value-offset="1">
+          <%= Icons.svg(:chevron_down, class: "h-6") %>
+        </button>
       </div>
     <% end %>
 
diff --git a/lib/live_book_web/live/icons.ex b/lib/live_book_web/live/icons.ex
index 5cb6557db..dd07e1f7b 100644
--- a/lib/live_book_web/live/icons.ex
+++ b/lib/live_book_web/live/icons.ex
@@ -149,6 +149,26 @@ defmodule LiveBookWeb.Icons do
     """
   end
 
+  def svg(:chevron_up, attrs) do
+    assigns = %{attrs: heroicon_svg_attrs(attrs)}
+
+    ~L"""
+    <%= tag(:svg, @attrs) %>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+    </svg>
+    """
+  end
+
+  def svg(:chevron_down, attrs) do
+    assigns = %{attrs: heroicon_svg_attrs(attrs)}
+
+    ~L"""
+    <%= tag(:svg, @attrs) %>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+    </svg>
+    """
+  end
+
   # https://heroicons.com
   defp heroicon_svg_attrs(attrs) do
     heroicon_svg_attrs = [
diff --git a/lib/live_book_web/live/session_live.ex b/lib/live_book_web/live/session_live.ex
index 897d55448..6373154b1 100644
--- a/lib/live_book_web/live/session_live.ex
+++ b/lib/live_book_web/live/session_live.ex
@@ -291,6 +291,8 @@ defmodule LiveBookWeb.SessionLive do
   end
 
   def handle_event("move_cell_focus", %{"offset" => offset}, socket) do
+    offset = ensure_integer(offset)
+
     case new_focused_cell_from_offset(socket.assigns, offset) do
       {:ok, cell} ->
         {:noreply, focus_cell(socket, cell)}
@@ -300,7 +302,9 @@ defmodule LiveBookWeb.SessionLive do
     end
   end
 
-  def handle_event("move_cell", %{"offset" => offset}, socket) do
+  def handle_event("move_focused_cell", %{"offset" => offset}, socket) do
+    offset = ensure_integer(offset)
+
     if socket.assigns.focused_cell_id do
       Session.move_cell(socket.assigns.session_id, socket.assigns.focused_cell_id, offset)
     end
@@ -536,4 +540,7 @@ defmodule LiveBookWeb.SessionLive do
   defp runtime_description(%Runtime.ElixirStandalone{}), do: "Elixir standalone runtime"
   defp runtime_description(%Runtime.MixStandalone{}), do: "Mix standalone runtime"
   defp runtime_description(%Runtime.Attached{}), do: "Attached runtime"
+
+  defp ensure_integer(n) when is_integer(n), do: n
+  defp ensure_integer(n) when is_binary(n), do: String.to_integer(n)
 end