Add line numbering css and .ex code

assets/css/app.css

@@ -22,46 +22,58 @@
     height: 225px;
 }
 
-form input[type="text"]{
+.dropdown-menu-arrow::before {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: calc(95% - 12px);
+    border-width: 0 5px 5px 5px;
+    border-style: solid;
+    border-color: transparent transparent white transparent
+}
+
+.menu-item {
+    @apply block px-4 py-2 text-sm text-white font-brand font-regular
+}
+
+.menu-item:hover {
+    @apply hover:text-emDark-light
+}
+
+form input[type="text"] {
     @apply bg-emDark-dark font-brand font-regular text-white text-xs border border-white
 }
 
-form input[type="text"]:focus{
+form input[type="text"]:focus {
     @apply focus:outline-none focus:border-emLavender focus:ring-0
 }
 
-.textarea{
+.textarea {
     @apply bg-emDark-dark font-brand font-regular text-white text-xs border border-white h-[300px] resize-none;
     border-top: none;
+    border-left: none;
 }
 
-.textarea:focus{
+.textarea:focus {
     @apply focus:outline-none focus:border-white focus:ring-0
 }
 
-.create_button{
-    @apply bg-emPurple border border-white font-brand font-regular text-black text-base
+.line-numbers {
+    @apply border border-white font-brand font-regular text-xs text-emDark-light bg-emDark-dark h-[300px] w-[54px] text-right overflow-hidden resize-none;
+    border-right: none;
+    border-top: none;
 }
 
-.create_button:hover{
-    @apply hover:bg-emPurple-dark text-emDark-light border-emDark-light
-}
-.dropdown-menu-arrow::before {
-    content: "";
-    position: absolute;
-    top: -5px;
-    left: calc(95% - 12px);
-    border-width: 0 5px 5px 5px;
-    border-style: solid; 
-    border-color: transparent transparent white transparent
+.line-numbers:focus {
+    @apply focus:outline-none focus:border-white focus:ring-0;
 }
 
-.menu-item {
-    @apply block px-4 py-2 text-sm text-white font-brand font-regular
+.create_button {
+    @apply bg-emPurple border border-white font-brand font-regular text-black text-base
 }
 
-.menu-item:hover {
-    @apply hover:text-emDark-light
+.create_button:hover {
+    @apply hover:bg-emPurple-dark text-emDark-light border-emDark-light
 }
 
 .round-image-padding {

lib/elixir_gist/accounts/user.ex

@@ -8,7 +8,7 @@ defmodule ElixirGist.Accounts.User do
     field :password, :string, virtual: true, redact: true
     field :hashed_password, :string, redact: true
     field :confirmed_at, :naive_datetime
-
+    has_many :gists, ElixirGist.Gists.Gist
     timestamps(type: :utc_datetime)
   end
 

lib/elixir_gist/gists/gist.ex

@@ -19,6 +19,6 @@ defmodule ElixirGist.Gists.Gist do
   def changeset(gist, attrs) do
     gist
     |> cast(attrs, [:name, :description, :markup_text, :user_id])
-    |> validate_required([:name, :description, :markup_text, :user_id])
+    |> validate_required([:name, :user_id])
   end
 end

lib/elixir_gist_web/live/create_gist_live.ex

@@ -9,12 +9,27 @@ defmodule ElixirGistWeb.CreateGistLive do
         socket,
         form: to_form(Gists.change_gist(%Gist{}))
       )
+
     {:ok, socket}
   end
-end
 
-# def render(assigns) do
-#   ~H"""
+  def handle_event("validate", %{"gist" => params}, socket) do
+    changeset =
+      %Gist{}
+      |> Gists.change_gist(params)
+      |> Map.put(:action, :validate)
+
+    {:noreply, assign(socket, :form, to_form(changeset))}
+  end
 
-#   """
-# end
+  def handle_event("create", %{"gist" => params}, socket) do
+    case Gists.create_gist(socket.assigns.current_user, params) do
+      {:ok, _gist} ->
+        changeset = Gists.change_gist(%Gist{})
+        {:noreply, assign(socket, :form, to_form(changeset))}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, :form, to_form(changeset))}
+    end
+  end
+end

lib/elixir_gist_web/live/create_gist_live.html.heex

@@ -22,13 +22,20 @@
           />
         </div>
       </div>
-      <%= textarea(@form, :markup_text,
-        class: "textarea w-full rounded-b-md",
-        placeholder: "Insert code...",
-        spellcheck: "false",
-        autocomplete: "off",
-        phx_debounce: "blur"
-      ) %>
+      <div id="gist-wrapper" class="flex w-full" phx-update="ignore">
+        <textarea id="line-numbers" class="line-numbers rounded-bl-md" readonly>
+          <%= "1\n" %>
+        </textarea>
+        <%= textarea(@form, :markup_text,
+          id: "gist-textarea",
+          phx_hook: "UpdateLineNumbers",
+          class: "textarea w-full rounded-br-md",
+          placeholder: "Insert code...",
+          spellcheck: "false",
+          autocomplete: "off",
+          phx_debounce: "blur"
+        ) %>
+      </div>
     </div>
     <div class="flex justify-end">
       <.button class="create_button" phx-disable-with="Creating...">Create gist</.button>