feat: show relative enrollment time in participant modal

Author: enricoprazeres

lib/atomic/activities.ex

@@ -356,7 +356,8 @@ defmodule Atomic.Activities do
   def list_activity_participants(id) do
     from(u in User,
       join: e in assoc(u, :enrollments),
-      where: e.activity_id == ^id
+      where: e.activity_id == ^id,
+      preload: [enrollments: e]
     )
   end
 

lib/atomic_web/components/activity.ex

@@ -47,14 +47,20 @@ defmodule AtomicWeb.Components.Activity do
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-calendar-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
-              <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.start) %></span>
+              <%= if Timex.to_date(@activity.start) == Timex.to_date(@activity.finish) do %>
+                <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.start) %></span>
+              <% else %>
+                <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.start) %></span>
+                <.icon name="hero-arrow-right" class="size-4 mt-[3px]"/>
+                <span class="font-medium text-zinc-900"><%= pretty_display_date(@activity.finish) %></span>
+              <% end %>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
               <.icon name="hero-user-group-solid" class="size-5" />
-              <span class="font-medium text-zinc-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
+              <span class="font-medium text-zinc-900"><%= @activity.enrolled %> <%= if @activity.maximum_entries, do: "/" %> <%= @activity.maximum_entries %></span>
               <span class="sr-only text-zinc-400">enrollments</span>
             </span>
           </span>

lib/atomic_web/live/activity_live/form_component.html.heex

@@ -23,7 +23,7 @@
           </div>
         </div>
         <div class="flex w-full">
-          <div class="justify-top flex hidden flex-col items-center pt-3 sm:block">
+          <div class="justify-top hidden sm:flex flex-col items-center pt-3 ">
             <div class="size-3 bg-primary-600 m-1 rounded-full" />
             <div class="flex justify-center">
               <div class="border-l-primary-600 h-[3.25rem] w-[3px] border-l border-dashed" />
@@ -134,7 +134,7 @@
     </div>
     <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
       <div class="mt-4 flex-grow">
-        <.field class="\-h-10 resize-none " type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+        <.field class="\-h-10 resize-none atomic-button atomic-button--primary-outline" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
         <div class="flex w-full justify-end">
           <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
             <span><%= gettext("Done") %></span>
@@ -146,9 +146,9 @@
       <div class="h-full w-full">
         <div class="">
           <%= if @has_max_capacity? do %>
-            <.field class="" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
+            <.field class="atomic-button atomic-button--primary-outline" type="number" field={@form[:maximum_entries]} placeholder="Choose maximum entries" />
           <% else %>
-            <.field class="" type="number" field={@form[:maximum_entries]} value="" placeholder="∞ Unlimited" />
+            <.field class="atomic-button atomic-button--primary-outline" type="number" field={@form[:maximum_entries]} value="" placeholder="∞ Unlimited" />
           <% end %>
         </div>
         <div class="flex gap-3">

lib/atomic_web/live/activity_live/show.ex

@@ -78,6 +78,7 @@ defmodule AtomicWeb.ActivityLive.Show do
   end
 
   def handle_event("handle_participants_modal", _, socket) do
+    IO.inspect(socket)
     {:noreply, socket |> assign(:participants_modal, not socket.assigns.participants_modal)}
   end
 

lib/atomic_web/live/activity_live/show.html.heex

@@ -264,15 +264,20 @@
   </div>
 </.modal>
 <!-- Participants show modal -->
-<.modal :if={@participants_modal} show id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
-  <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
+<.modal :if={@participants_modal} show class="max-w-[500px]" id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
+  <div class="flex w-full justify-center">
+    <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
+  </div>
   <%= if length(@participants) != 0 do %>
   <div class="flex justify-center place-items-center w-full">
-    <div class="align-center mt-4 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-fit">
+    <div class="align-center mt-4 grid gap-4 grid-cols-1 w-fit max-h-80 overflow-auto scrollbar-hide">
       <%= for participant <- @participants do %>
-        <div class="flex h-10">
-          <.avatar size={:xs} name={participant.name} type={:user} />
-          <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline"><%= participant.name %></.link>
+        <div class="flex h-10 place-items-center justify-between">
+          <div class="flex place-items-center">
+            <.avatar size={:xs} name={participant.name} type={:user} />
+            <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline"><%= participant.name %></.link>
+          </div>
+          <span class="ml-2 text-gray-500 hidden sm:block"><%= relative_datetime(participant.enrollments |> List.first() |> Map.get(:inserted_at)) %></span>
         </div>
       <% end %>
     </div>