Add user component [WIP]

lib/vachan_web/live/list_live/add_user_component.ex

@@ -5,31 +5,43 @@ defmodule VachanWeb.ListLive.AddUserComponent do
   def render(assigns) do
     ~H"""
     <div id="list-id">
-      <.search_bar></.search_bar>
-      <%= if @search_person_detail== [] do %>
-      <% else %>
-        <form phx-submit="save">
+      <.search_bar phx-change="search_changed" />
+      <form phx-submit="save">
+        <%= if @search_person_detail && Enum.any?(@search_person_detail) do %> <!-- Check if the list is non-empty -->
           <.table id="add-to-list-table" rows={@search_person_detail}>
             <:col :let={person} label="First name"><%= person.first_name %></:col>
-            <:col :let={person} label="List name"><%= person.last_name %></:col>
+            <:col :let={person} label="Last name"><%= person.last_name %></:col>
             <:col :let={person} label="Email"><%= person.email %></:col>
             <:action :let={person}>
               <%= if person.id in @person_details do %>
                 <input
                   type="checkbox"
-                  name="selected_people[]"
-                  value={person.id}
                   checked={person.id in @person_details}
+                  phx-click={
+                    JS.push("remove_from_user_list",
+                      value: %{person_id: person.id, list_id: @list.id}
+                    )
+                  }
                 />
               <% else %>
-                <input type="checkbox" name="selected_people[]" value={person.id} />
+                <input
+                  type="checkbox"
+                  phx-click={
+                    JS.push("add_to_user_list",
+                      value: %{person_id: person.id, list_id: @list.id}
+                    )
+                  }
+                />
               <% end %>
             </:action>
           </.table>
-          <input type="hidden" name="list_id" value={@list.id} />
-          <.button type="submit" class="mt-8">Save</.button>
-        </form>
-      <% end %>
+        <% else %>
+          <!-- Optionally, you can display a message here if no search results are found -->
+        <% end %>
+        <div class="mt-4">
+          <.button type="submit" class="px-4 py-2">Save</.button>
+        </div>
+      </form>
     </div>
     """
   end

lib/vachan_web/live/list_live/index.html.heex

@@ -10,17 +10,25 @@
 
 <.table
   id="lists"
-  rows={@streams.lists}
-  row_click={fn {_id, list} -> JS.navigate(~p"/lists/#{list}") end}
+  <!-- rows={@streams.lists} --!>
+  <!-- row_click={fn {_id, list} -> JS.navigate(~p"/lists/#{list}") end} -->
 >
   <:col :let={{_id, list}} label="List Name"><%= list.name %></:col>
 
   <:action :let={{_id, list}}>
-    <div class="sr-only">
-      <.link navigate={~p"/lists/#{list}"}>Show</.link>
-    </div>
+
+
+    <.link navigate={~p"/lists/#{list}"}>
+      Manage People
+    </.link>
+  </:action>
+
+
+  <:action :let={{_id, list}}>
     <.link patch={~p"/lists/#{list}/edit"}>Edit</.link>
   </:action>
+
+
   <:action :let={{id, list}}>
     <.link
       phx-click={JS.push("delete", value: %{id: list.id}) |> hide("##{id}")}
@@ -30,6 +38,7 @@
     </.link>
   </:action>
 </.table>
+
 <.modal :if={@live_action in [:new, :edit]} id="list-modal" show on_cancel={JS.patch(~p"/lists")}>
   <.live_component
     module={VachanWeb.ListLive.FormComponent}

lib/vachan_web/live/profile_live/profile.ex

@@ -13,7 +13,23 @@ defmodule VachanWeb.ProfileLive.Profile do
       </.header>
 
       <.simple_form for={@form} id="profile-form" phx-change="validate" phx-submit="save">
-        <.input field={@form[:name]} type="text" label="Name" />
+
+        <.input field={@form[:name]} type="text" label="First Name" />
+        <%= if @name_error do %>
+          <p class="error-message" style="color: red;"><%= @name_error %></p>
+        <% end %>
+
+        <.input field={@form[:last_name]} type="text" label="Last Name" />
+        <%= if @last_name_error do %>
+          <p class="error-message" style="color: red;"><%= @last_name_error %></p>
+        <% end %>
+
+        <.input field={@form[:email]} type="text" label="Email" value={@email} readonly />
+
+        <.input field={@form[:company]} type="text" label="Company" />
+        <%= if @company_error do %>
+          <p class="error-message" style="color: red;"><%= @company_error %></p>
+        <% end %>
 
         <:actions>
           <.button phx-disable-with="Saving...">Save Profile</.button>
@@ -31,6 +47,10 @@ defmodule VachanWeb.ProfileLive.Profile do
       socket
       |> assign(:title, "Profile")
       |> assign(page: :profile)
+      |> assign_new(:email, fn -> user.email end)
+      |> assign(:name_error, nil)
+      |> assign(:last_name_error, nil)
+      |> assign(:company_error, nil)
       |> init_form(user)
 
     {:ok, socket}
@@ -39,7 +59,19 @@ defmodule VachanWeb.ProfileLive.Profile do
   @impl true
   def handle_event("validate", %{"form" => params}, socket) do
     form = AshPhoenix.Form.validate(socket.assigns.form, params)
-    {:noreply, assign(socket, form: form)}
+
+    name_error = socket.assigns.name_error
+    last_name_error = socket.assigns.last_name_error
+    company_error = socket.assigns.company_error
+
+    name_error = if Map.has_key?(params, "name"), do: validate_first_name(params["name"]), else: name_error
+    last_name_error = if Map.has_key?(params, "last_name"), do: validate_last_name(params["last_name"]), else: last_name_error
+    company_error = if Map.has_key?(params, "company"), do: validate_company(params["company"]), else: company_error
+
+    socket =
+      assign(socket, form: form, name_error: name_error, last_name_error: last_name_error, company_error: company_error)
+
+    {:noreply, socket}
   end
 
   @impl true
@@ -50,14 +82,14 @@ defmodule VachanWeb.ProfileLive.Profile do
     case AshPhoenix.Form.submit(form) do
       {:ok, result} ->
         form =
-          result
-          |> AshPhoenix.Form.for_update(:update,
+          AshPhoenix.Form.for_update(result, :update,
             api: Profiles,
             actor: socket.assigns.current_user,
             forms: [auto?: true]
           )
+          |> to_form()
 
-        {:noreply, assign(socket, form: to_form(form))}
+        {:noreply, assign(socket, form: form)}
 
       {:error, form} ->
         {:noreply, assign(socket, form: to_form(form))}
@@ -67,26 +99,54 @@ defmodule VachanWeb.ProfileLive.Profile do
   defp init_form(socket, user) do
     case Ash.get(Profiles.Profile, user.id, actor: user) do
       {:ok, profile} ->
-        assign(socket,
-          form:
-            AshPhoenix.Form.for_update(profile, :update,
-              api: Profiles,
-              actor: user,
-              forms: [auto?: true]
-            )
-            |> to_form()
-        )
+        form =
+          AshPhoenix.Form.for_update(profile, :update,
+            api: Profiles,
+            actor: user,
+            forms: [auto?: true]
+          )
+          |> to_form()
+
+        assign(socket, form: form)
 
       {:error, _} ->
-        assign(socket,
-          form:
-            AshPhoenix.Form.for_create(Profiles.Profile, :create,
-              api: Profiles,
-              actor: user,
-              forms: [auto?: true]
-            )
-            |> to_form()
-        )
+        form =
+          AshPhoenix.Form.for_create(Profiles.Profile, :create,
+            api: Profiles,
+            actor: user,
+            forms: [auto?: true]
+          )
+          |> to_form()
+
+        assign(socket, form: form)
+    end
+  end
+
+  defp validate_first_name(nil), do: ""
+  defp validate_first_name(""), do: ""
+  defp validate_first_name(name) do
+    if String.match?(name, ~r/^[a-zA-Z\s]+$/) do
+      nil
+    else
+      "First name should contain only letters and spaces"
+    end
+  end
+
+  defp validate_last_name(nil), do: ""
+  defp validate_last_name(""), do: ""
+  defp validate_last_name(last_name) do
+    if String.match?(last_name, ~r/^[a-zA-Z\s]+$/) do
+      nil
+    else
+      "Last name should contain only letters and spaces"
+    end
+  end
+
+  defp validate_company(company) do
+    if String.match?(company, ~r/^[a-zA-Z0-9\s]+$/) do
+      nil
+    else
+      "Company name should contain only letters, numbers, and spaces"
     end
   end
 end