feat: unlimited attendees

Author: enricoprazeres

lib/atomic_web/components/image_uploader.ex

@@ -21,14 +21,14 @@ defmodule AtomicWeb.Components.ImageUploader do
             <%= if @image do %>
               <div class="flex flex-col place-items-center">
                 <img class="p-4" src={@image} />
-                <span class="text-sm text-orange-500 cursor-pointer hover:text-red-800">Click to upload new image</span>
+                <span class="cursor-pointer text-sm text-orange-500 hover:text-red-800">Click to upload new image</span>
                 <p class="text-xs text-zinc-500">(PNG, JPG, GIF up to 10MB)</p>
               </div>
             <% else %>
               <article class="h-full w-full">
                 <figure class="flex h-full items-center justify-center">
                   <div class="flex h-full w-full place-items-center rounded-md border-2 border-dashed border-zinc-300">
-                    <div class="flex place-items-center justify-center h-full mx-auto sm:col-span-6 lg:w-full">
+                    <div class="mx-auto flex h-full place-items-center justify-center sm:col-span-6 lg:w-full">
                       <div class="my-[140px] flex justify-center px-6">
                         <div class="space-y-1 text-center">
                           <svg class="size-12 mx-auto text-zinc-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
@@ -53,9 +53,9 @@ defmodule AtomicWeb.Components.ImageUploader do
         <%= if @uploads.image.entries do %>
           <%= for entry <- @uploads.image.entries do %>
             <%= for err <- upload_errors(@uploads.image, entry) do %>
-            <div class="flex justify-center">
-              <p class="alert alert-danger text-orange-500"><%= Phoenix.Naming.humanize(err) %></p>
-            </div>
+              <div class="flex justify-center">
+                <p class="alert alert-danger text-orange-500"><%= Phoenix.Naming.humanize(err) %></p>
+              </div>
             <% end %>
             <article class="upload-entry">
               <figure class="">

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

@@ -1,5 +1,5 @@
 <.page title="Edit Activity">
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={@activity.id} title={@page_title} action={@live_action} activity={@activity} current_organization={@activity.organization} return_to={~p"/activities/#{@activity.id}"} />
   </div>
 </.page>

lib/atomic_web/live/activity_live/form_component.ex

@@ -24,15 +24,17 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
      |> assign_form(changeset)
      |> assign(:description_modal, false)
      |> assign(:maximum_entries_modal, false)
-     |> assign(:has_max_capacity?, true)
+     |> assign(:has_max_capacity?, activity.maximum_entries)
      |> assign(:has_description?, initial_description)
      |> allow_upload(:image, accept: Uploaders.Post.extension_whitelist(), max_entries: 1)}
   end
 
   @impl true
   def handle_event("validate", %{"activity" => activity_params}, socket) do
     description = Map.get(activity_params, "description", "")
+    capacity = Map.get(activity_params, "max_entries", "")
     has_description = is_nil(description) || String.trim(description) == ""
+    has_capacity = is_nil(capacity) || String.trim(capacity) == ""
 
     changeset =
       socket.assigns.activity
@@ -42,6 +44,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
     {:noreply,
      socket
      |> assign(:has_description?, not has_description)
+     |> assign(:has_max_capacity?, has_capacity)
      |> assign_form(changeset)}
   end
 
@@ -75,9 +78,10 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
 
   @impl true
   def handle_event("remove_max_capacity", _, socket) do
-    {:noreply, socket
-      |> assign(:has_max_capacity?, false)
-      |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
+    {:noreply,
+     socket
+     |> assign(:has_max_capacity?, false)
+     |> assign(:maximum_entries_modal, not socket.assigns.maximum_entries_modal)}
   end
 
   defp save_activity(socket, :new, activity_params) do

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

@@ -23,24 +23,24 @@
           </div>
         </div>
         <div class="flex w-full">
-          <div class="justify-top flex flex-col items-center pt-3 hidden sm:block">
+          <div class="justify-top flex hidden flex-col items-center pt-3 sm:block">
             <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] border-l border-dashed w-[3px]" />
+              <div class="border-l-primary-600 h-[3.25rem] w-[3px] border-l border-dashed" />
             </div>
             <div class="size-3 border-primary-600 m-1 rounded-full border" />
           </div>
           <div class="flex w-full flex-col">
-            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 sm:p-1 sm:pl-3">
+            <div class="text-nowrap flex flex-col items-baseline justify-between gap-y-1 sm:flex-row sm:p-1 sm:pl-3">
               <span>Start</span>
               <div class="w-full sm:w-56">
-                <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
+                <.field class="atomic-button atomic-button--primary-outline w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:start]} label_class="hidden" error_label_class="hidden" required />
               </div>
             </div>
-            <div class="text-nowrap flex flex-col sm:flex-row items-baseline justify-between gap-y-1 sm:p-1 sm:pl-3">
+            <div class="text-nowrap flex flex-col items-baseline justify-between gap-y-1 sm:flex-row sm:p-1 sm:pl-3">
               <span>End</span>
               <div class="w-full sm:w-56">
-                <.field class="w-full sm:w-56 atomic-button atomic-button--primary-outline text-gray-900" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
+                <.field class="atomic-button atomic-button--primary-outline w-full text-gray-900 sm:w-56" type="datetime-local" field={@form[:finish]} label_class="hidden" error_label_class="hidden" required />
               </div>
             </div>
           </div>
@@ -49,9 +49,9 @@
         <label for="description_button" class="atomic-label atomic-label--required">
           Description
         </label>
-        <.button id="description_button" class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+        <.button id="description_button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-3 text-gray-300 focus-within:bg-white lg:w-full" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
           <%= if not @has_description? do %>
-            <label class="text-left cursor-pointer text-gray-500">
+            <label class="cursor-pointer text-left text-gray-500">
               Add description
             </label>
           <% end %>
@@ -67,7 +67,7 @@
               autocomplete="off"
               error_class="text-danger-600 placeholder-danger-700"
               error_label_class="text-danger-700"
-              class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
             />
           </div>
         </.button>
@@ -86,14 +86,14 @@
         <label for="capacity_button" class="atomic-label atomic-label--required">
           Capacity
         </label>
-        <.button id="capacity_button" type="button" class="lg:w-full flex flex-col items-start px-3 py-3 border-gray-300 rounded-md bg-white text-gray-300 group atomic-button atomic-button--primary-outline focus-within:bg-white" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
+        <.button id="capacity_button" type="button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-3 text-gray-300 focus-within:bg-white lg:w-full" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
           <%= if @has_max_capacity? do %>
             <.field
-              class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
               type="number"
               field={@form[:maximum_entries]}
               label="Maximum entries"
-              placeholder="Choose maximum entries"
+              placeholder="Choose maximum capacity"
               readonly
               required
               label_class="hidden"
@@ -103,19 +103,19 @@
             />
           <% else %>
             <.field
-            class="text-sm p-0 bg-transparent border-none shadow-none cursor-pointer focus:outline-none focus:ring-0 focus:border-transparent text-gray-900"
-            type="number"
-            field={@form[:maximum_entries]}
-            label="Maximum entries"
-            placeholder="Unlimited"
-            readonly
-            value="nil"
-            required
-            label_class="hidden"
-            wrapper_class="m-0"
-            error_class="text-danger-600 placeholder-danger-700"
-            error_label_class="text-danger-700"
-          />
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+              type="number"
+              field={@form[:maximum_entries]}
+              label="Maximum entries"
+              placeholder="Unlimited"
+              value=" "
+              readonly
+              required
+              label_class="hidden"
+              wrapper_class="m-0"
+              error_class="text-danger-600 placeholder-danger-700"
+              error_label_class="text-danger-700"
+            />
           <% end %>
         </.button>
 
@@ -135,20 +135,20 @@
     <.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 />
-        <div class="w-full flex justify-end">
+        <div class="flex w-full justify-end">
           <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
             <span><%= gettext("Done") %></span>
           </.button>
         </div>
       </div>
     </.modal>
     <.modal :if={@maximum_entries_modal} id="maximum_entries_modal" show on_cancel={JS.push("toggle_maximum_entries_modal", target: @myself)}>
-      <div class="w-full h-full">
+      <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" />
           <% else %>
-            <.field class="" type="number" value="nil" field={@form[:maximum_entries]} placeholder="Unlimited"/>
+            <.field class="" type="number" field={@form[:maximum_entries]} value="" placeholder="Unlimited" />
           <% end %>
         </div>
         <div class="flex gap-3">

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

@@ -7,27 +7,27 @@
     <% end %>
   </:actions>
   <!-- Tabs -->
-  <.tabs class="overflow-scroll scrollbar-hide max-w-5-xl mx-auto px-4 sm:px-6 lg:px-8">
+  <.tabs class="scrollbar-hide max-w-5-xl mx-auto overflow-scroll px-4 sm:px-6 lg:px-8">
     <%= if @is_authenticated? and @has_current_organization? do %>
       <.link patch="?tab=organization" replace={false}>
         <.tab active={@current_tab == "organization"}>
-          <.icon name="hero-globe-alt" class="h-5 w-5 mr-1" />
+          <.icon name="hero-globe-alt" class="mr-1 h-5 w-5" />
           <%= @current_user.current_organization.name <> gettext("'s activities") %>
         </.tab>
       </.link>
     <% end %>
 
     <.link patch="?tab=discover" replace={false}>
       <.tab active={@current_tab == "discover"}>
-        <.icon name="hero-globe-alt" class="h-5 w-5 mr-1" />
+        <.icon name="hero-globe-alt" class="mr-1 h-5 w-5" />
         <%= gettext("Discover") %>
       </.tab>
     </.link>
 
     <%= if @is_authenticated? do %>
       <.link patch="?tab=following" replace={false}>
         <.tab active={@current_tab == "following"}>
-          <.icon name="hero-eye" class="h-5 w-5 mr-1" />
+          <.icon name="hero-eye" class="mr-1 h-5 w-5" />
           <%= gettext("Following") %>
         </.tab>
       </.link>
@@ -36,13 +36,13 @@
     <%= if @is_authenticated? do %>
       <.link patch="?tab=enrolled" replace={false}>
         <.tab active={@current_tab == "enrolled"} number={@upcoming_enrolled_count}>
-          <.icon name="hero-ticket" class="h-5 w-5 mr-1" />
+          <.icon name="hero-ticket" class="mr-1 h-5 w-5" />
           <%= gettext("Upcoming") %>
         </.tab>
       </.link>
       <.link patch="?tab=past" replace={false}>
         <.tab active={@current_tab == "past"}>
-          <.icon name="hero-clock" class="h-5 w-5 mr-1" />
+          <.icon name="hero-clock" class="mr-1 h-5 w-5" />
           <%= gettext("Past") %>
         </.tab>
       </.link>
@@ -55,15 +55,15 @@
         <.empty_state url={~p"/organizations/#{@current_organization}/activities/new"} placeholder="activity" />
       </div>
     <% else %>
-      <div class="text-zinc-600 mt-32 flex flex-col items-center w-full justify-center">
+      <div class="mt-32 flex w-full flex-col items-center justify-center text-zinc-600">
         <.icon class="w-24" name="hero-megaphone" />
         <p class="pt-4"><%= gettext("No activities to show.") %></p>
         <p><%= activities_empty_state_description(@current_tab) %></p>
       </div>
     <% end %>
   <% else %>
     <div class="overflow-hidden bg-white">
-      <ul role="list" class="p-4 overflow-auto grid sm:grid-cols-2 gap-4">
+      <ul role="list" class="grid gap-4 overflow-auto p-4 sm:grid-cols-2">
         <%= for activity <- @activities do %>
           <li id={activity.id} class={@current_tab == "past" && "opacity-70"}>
             <.activity_card activity={activity} />

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

@@ -1,5 +1,5 @@
 <.page title="New Activity">
-  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <.live_component module={AtomicWeb.ActivityLive.FormComponent} id={:new} title={@page_title} action={@live_action} activity={@activity} current_organization={@current_organization} return_to={~p"/activities/"} />
   </div>
 </.page>