Add layout

config/config.exs

@@ -67,6 +67,9 @@ config :tailwind,
     cd: Path.expand("../assets", __DIR__)
   ]
 
+config :icons,
+  collection: [Heroicons, Ionicons]
+
 config :atomic, Atomic.Scheduler,
   jobs: [
     # Runs every midnight:

lib/atomic/activities.ex

@@ -263,6 +263,19 @@ defmodule Atomic.Activities do
     end
   end
 
+  def get_user_enrollments(user) do
+    Enrollment
+    |> where(user_id: ^user.id)
+    |> Repo.all()
+  end
+
+  def get_user_activities(user) do
+    enrollments = get_user_enrollments(user)
+    activities = for enrollment <- enrollments, do: get_activity!(enrollment.activity_id)
+
+    activities |> Repo.preload([:enrollments, :activity_sessions, :speakers])
+  end
+
   @doc """
   Creates an enrollment.
 

lib/atomic/organizations.ex

@@ -293,6 +293,13 @@ defmodule Atomic.Organizations do
     |> Repo.preload(preloads)
   end
 
+  def get_membership_role!(user_id, organization_id) do
+    case Repo.get_by(Membership, user_id: user_id, organization_id: organization_id) do
+      nil -> nil
+      membership -> membership.role
+    end
+  end
+
   @doc """
   Creates an user organization.
 

lib/atomic_web.ex

@@ -98,8 +98,10 @@ defmodule AtomicWeb do
 
       import AtomicWeb.ErrorHelpers
       import AtomicWeb.Gettext
-      import AtomicWeb.ViewUtils
+      import AtomicWeb.UtilsView
       alias AtomicWeb.Router.Helpers, as: Routes
+
+      alias Icons.{Heroicons, Ionicons}
     end
   end
 

lib/atomic_web/config.ex

@@ -0,0 +1,67 @@
+defmodule AtomicWeb.Config do
+  @moduledoc """
+  Web configuration for our pages.
+  """
+  alias AtomicWeb.Router.Helpers, as: Routes
+
+  def pages(conn) do
+    [
+      %{
+        key: :activities,
+        title: "Home",
+        icon: :home,
+        url: Routes.activity_index_path(conn, :index),
+        tabs: []
+      },
+      %{
+        key: :calendar,
+        title: "Calendar",
+        icon: :calendar,
+        url: "",
+        tabs: []
+      },
+      %{
+        key: :departments,
+        title: "Departments",
+        icon: :cube,
+        url: Routes.department_index_path(conn, :index, :org),
+        tabs: []
+      },
+      %{
+        key: :instructors,
+        title: "Activities",
+        icon: :academic_cap,
+        url: Routes.activity_index_path(conn, :index),
+        tabs: []
+      },
+      %{
+        key: :partners,
+        title: "Partners",
+        icon: :user_group,
+        url: Routes.partner_index_path(conn, :index),
+        tabs: []
+      },
+      %{
+        key: :memberships,
+        title: "Memberships",
+        icon: :user_add,
+        url: Routes.membership_index_path(conn, :index, :org),
+        tabs: []
+      },
+      %{
+        key: :board,
+        title: "Board",
+        icon: :users,
+        url: Routes.board_index_path(conn, :index, :org),
+        tabs: []
+      },
+      %{
+        key: :scanner,
+        title: "Scanner",
+        icon: :qrcode,
+        url: Routes.scanner_index_path(conn, :index),
+        tabs: []
+      }
+    ]
+  end
+end

lib/atomic_web/live/activity_live/edit.ex

@@ -11,8 +11,21 @@ defmodule AtomicWeb.ActivityLive.Edit do
 
   @impl true
   def handle_params(%{"id" => id} = _params, _url, socket) do
+    entries = [
+      %{
+        name: gettext("Activities"),
+        route: Routes.activity_index_path(socket, :index)
+      },
+      %{
+        name: gettext("Edit Activity"),
+        route: Routes.activity_edit_path(socket, :edit, id)
+      }
+    ]
+
     {:noreply,
      socket
+     |> assign(:breadcrumb_entries, entries)
+     |> assign(:current_page, :activities)
      |> assign(:page_title, gettext("Edit Activity"))
      |> assign(
        :activity,

lib/atomic_web/live/activity_live/index.ex

@@ -11,7 +11,18 @@ defmodule AtomicWeb.ActivityLive.Index do
 
   @impl true
   def handle_params(params, _url, socket) do
-    {:noreply, apply_action(socket, socket.assigns.live_action, params)}
+    entries = [
+      %{
+        name: gettext("Activities"),
+        route: Routes.activity_index_path(socket, :index)
+      }
+    ]
+
+    {:noreply,
+     socket
+     |> assign(:current_page, :activities)
+     |> assign(:breadcrumb_entries, entries)
+     |> apply_action(socket.assigns.live_action, params)}
   end
 
   defp apply_action(socket, :edit, %{"id" => id}) do
@@ -40,7 +51,18 @@ defmodule AtomicWeb.ActivityLive.Index do
     {:noreply, assign(socket, :activies, list_activities())}
   end
 
+  def handle_event("open-enrollments", _payload, socket) do
+    {:noreply, assign(socket, :activities, list_activities())}
+  end
+
+  def handle_event("activities-enrolled", _payload, socket) do
+    user = socket.assigns.current_user
+    activities = Activities.get_user_activities(user)
+
+    {:noreply, assign(socket, :activities, activities)}
+  end
+
   defp list_activities do
-    Activities.list_activities(preloads: [:activity_sessions])
+    Activities.list_activities(preloads: [:activity_sessions, :enrollments, :speakers])
   end
 end

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

@@ -1,32 +1,92 @@
-<h1>Listing Activities</h1>
+<div class="inline-block min-w-full align-middle">
+  <div x-data="{ view: 'list' }">
+    <div class="bg-white">
+      <div class="pt-4 px-4">
+        <div class="flex items-center justify-between">
+          <div class="min-w-0 flex-1">
+            <h2 class="text-xl font-bold leading-7 text-zinc-900 sm:truncate sm:text-4xl">
+              <%= gettext("Activities") %>
+            </h2>
+          </div>
+        </div>
+        <div class="flex flex-col-reverse border-b border-zinc-200 xl:flex-row">
+          <div class="flex w-full items-center justify-between">
+            <nav class="-mb-px flex flex-1 space-x-6 overflow-x-auto xl:space-x-8" aria-label="Tabs">
+              <div x-on:click="open = ! open" x-bind:class="! open ? 'border-transparent' : 'border-zinc-800'" phx-click="open-enrollments" class="text-zinc-500 hover:text-zinc-700 whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium">
+                <%= gettext("Open Enrollments") %>
+              </div>
 
-<table>
-  <thead>
-    <tr>
-      <th>Title</th>
-      <th>Date</th>
-      <th>Location</th>
-      <th>Minimum entries</th>
-      <th>Maximum entries</th>
+              <div x-on:click="open = ! open" x-bind:class="! open ? 'border-zinc-800' : 'border-transparent'" phx-click="activities-enrolled" class="text-zinc-500 hover:text-zinc-700 whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium">
+                <%= gettext("Activities Enrolled") %>
+              </div>
+            </nav>
+            <div class="hidden lg:block">
+              <%= live_patch("New", to: Routes.activity_new_path(@socket, :new), class: "rounded-md bg-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600") %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-      <th></th>
-    </tr>
-  </thead>
-  <tbody id="activities">
-    <%= for activity <- @activities do %>
-      <tr id={"activity-#{activity.id}"}>
-        <td><%= activity.title %></td>
-        <td><%= hd(activity.activity_sessions).start %></td>
-        <td><%= hd(activity.activity_sessions).location.name %></td>
-        <td><%= activity.minimum_entries %></td>
-        <td><%= activity.maximum_entries %></td>
-
-        <td>
-          <span><%= live_redirect("Show", to: Routes.activity_show_path(@socket, :show, activity)) %></span>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
-
-<span><%= live_patch("New Activity", to: Routes.activity_new_path(@socket, :new)) %></span>
+    <div>
+      <div class="overflow-hidden bg-white">
+        <ul role="list" class="divide-y divide-zinc-200">
+          <%= for activity <- @activities do %>
+            <li>
+              <%= live_redirect to: Routes.activity_show_path(@socket, :show, activity), class: "block hover:bg-zinc-50", replace: false do %>
+                <div class="px-4 py-4 lg:px-6">
+                  <div class="flex items-center justify-between">
+                    <p class="truncate text-sm font-medium text-zinc-900">
+                      <%= activity.title %>
+                    </p>
+                  </div>
+                  <div class="mt-2 lg:flex lg:justify-between">
+                    <div class="lg:flex lg:space-x-3">
+                      <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
+                        <Heroicons.Solid.users class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                        <%= Enum.count(activity.enrollments) %> / <%= activity.maximum_entries %>
+                      </p>
+                      <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
+                        <Heroicons.Solid.calendar class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                        <%= if hd(activity.activity_sessions) do %>
+                          <%= display_date(hd(activity.activity_sessions).start) %>
+                        <% end %>
+                      </p>
+                      <%= if not is_nil(hd(activity.activity_sessions).location) do %>
+                        <p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
+                          <Heroicons.Solid.location_marker class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
+                          <%= if hd(activity.activity_sessions).location do %>
+                            <%= hd(activity.activity_sessions).location && hd(activity.activity_sessions).location.name %>
+                          <% end %>
+                        </p>
+                      <% end %>
+                    </div>
+                  </div>
+                  <div class="flex flex-col-reverse lg:flex-row-reverse lg:items-center lg:justify-between">
+                    <div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
+                      <Heroicons.Solid.bell class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Closing
+                    </div>
+                    <div class="flex flex-row space-x-2">
+                      <%= for speaker <- activity.speakers do %>
+                        <div class="mt-2 flex items-center">
+                          <span class="inline-flex justify-center items-center mr-1.5 w-6 h-6 bg-zinc-500 rounded-full">
+                            <span class="text-xs font-medium leading-none text-white">
+                              <%= extract_initials(speaker.name) %>
+                            </span>
+                          </span>
+                          <p class="text-sm text-zinc-500">
+                            <%= extract_first_last_name(speaker.name) %>
+                          </p>
+                        </div>
+                      <% end %>
+                    </div>
+                  </div>
+                </div>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

lib/atomic_web/live/activity_live/new.ex

@@ -12,9 +12,22 @@ defmodule AtomicWeb.ActivityLive.New do
 
   @impl true
   def handle_params(_params, _url, socket) do
+    entries = [
+      %{
+        name: gettext("Activities"),
+        route: Routes.activity_index_path(socket, :index)
+      },
+      %{
+        name: gettext("New Activity"),
+        route: Routes.activity_new_path(socket, :new)
+      }
+    ]
+
     {:noreply,
      socket
      |> assign(:page_title, gettext("New Activity"))
+     |> assign(:breadcrumb_entries, entries)
+     |> assign(:current_page, :activities)
      |> assign(:activity, %Activity{
        activity_sessions: [%Session{}],
        speakers: []