Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: profile pages #528

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft

feat: profile pages #528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4a45798
feat: initial profile layouts
AfonsoMartins26 Sep 10, 2024
60544c3
Merge branch 'develop' into am/profile
AfonsoMartins26 Sep 10, 2024
4fd7220
chore: format
AfonsoMartins26 Sep 10, 2024
6d6bd05
fix: profile picture upload
AfonsoMartins26 Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion lib/atomic/accounts.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,10 +500,11 @@ defmodule Atomic.Accounts do
{:error, %Ecto.Changeset{}}

"""
def update_user(%User{} = user, attrs \\ %{}, _after_save \\ &{:ok, &1}) do
def update_user(%User{} = user, attrs \\ %{}, after_save \\ &{:ok, &1}) do
user
|> User.changeset(attrs)
|> Repo.update()
|> after_save(after_save)
end

@doc """
Expand Down
2 changes: 1 addition & 1 deletion lib/atomic/accounts/user.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ defmodule Atomic.Accounts.User do
field :confirmed_at, :naive_datetime
field :phone_number, :string
field :profile_picture, Uploaders.ProfilePicture.Type
field :cover_image, Uploaders.ProfilePicture.Type

belongs_to :course, Course
belongs_to :current_organization, Organization
Expand Down Expand Up @@ -70,7 +71,6 @@ defmodule Atomic.Accounts.User do

def picture_changeset(user, attrs) do
user
|> cast(attrs, @required_fields ++ @optional_fields)
|> cast_attachments(attrs, [:profile_picture])
end

Expand Down
10 changes: 1 addition & 9 deletions lib/atomic_web/components/sidebar.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ defmodule AtomicWeb.Components.Sidebar do
<AtomicWeb.Components.Dropdown.dropdown orientation={@orientation} items={dropdown_items(@current_user)} id="user-menu-button">
<:wrapper>
<button class="flex w-full select-none flex-row items-center gap-x-2 px-4 py-3 text-sm font-semibold leading-6 text-zinc-700 lg:px-0">
<AtomicWeb.Components.Avatar.avatar name={@current_user.name} src={user_image(@current_user)} size={:xs} color={:light_gray} class="!text-sm" />
<AtomicWeb.Components.Avatar.avatar name={@current_user.name} src={Uploaders.ProfilePicture.url({@current_user.profile_picture, @current_user}, :original)} size={:xs} color={:light_gray} class="!text-sm" />
<span class="text-sm font-semibold leading-6" aria-hidden="true"><%= @current_user.name %></span>
<.icon name={:chevron_right} solid class="h-5 w-5" />
</button>
Expand Down Expand Up @@ -188,14 +188,6 @@ defmodule AtomicWeb.Components.Sidebar do
|> JS.dispatch("focus", to: "#mobile-sidebar")
end

defp user_image(user) do
if user.profile_picture do
Uploaders.ProfilePicture.url({user, user.profile_picture}, :original)
else
nil
end
end

defp get_organizations(nil), do: []
defp get_organizations(user), do: Organizations.list_user_organizations(user.id)
end
18 changes: 9 additions & 9 deletions lib/atomic_web/live/activity_live/form_component.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div>
<.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}>
<div class="relative py-5 border-b border-gray-200 sm:py-6">
<div class="relative border-b border-gray-200 py-5 sm:py-6">
<div class="flex flex-col gap-y-3 lg:self-end">
<div class="w-full">
<.field type="text" field={@form[:title]} placeholder="Choose a title" required />
Expand All @@ -14,45 +14,45 @@
</div>

<div class="flex flex-col">
<div class="flex pt-6 flex-col md:flex-row justify-center md:justify-start">
<div class="flex flex-col justify-center pt-6 md:flex-row md:justify-start">
<div class="flex flex-col gap-y-1">
<.field type="datetime-local" field={@form[:start]} label="Starting date" required />
</div>

<div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
<div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
<.field type="datetime-local" field={@form[:finish]} label="Ending date" required />
</div>
</div>

<div class="flex mt-4 flex-col md:flex-row justify-center md:justify-start">
<div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
<div class="flex flex-col gap-y-1">
<.field type="number" field={@form[:minimum_entries]} label="Minimum entries" placeholder="Choose minimum entries" required />
</div>

<div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
<div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
<.field type="number" field={@form[:maximum_entries]} label="Maximum entries" placeholder="Choose maximum entries" required />
</div>
</div>

<div class="flex mt-4 flex-col md:flex-row justify-center md:justify-start">
<div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start">
<.inputs_for :let={fl} field={@form[:location]}>
<div class="flex flex-col gap-y-1">
<.field type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
</div>

<div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
<div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
<.field type="url" field={fl[:url]} label="URL" placeholder="Choose an URL" />
</div>
</.inputs_for>
</div>

<div class="flex-grow mt-4">
<div class="mt-4 flex-grow">
<.field type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
</div>
</div>
</div>

<div class="flex-grow mt-4">
<div class="mt-4 flex-grow">
<div class="flex justify-center lg:justify-end">
<.button type="submit" phx-disable-with="Saving...">Save</.button>
</div>
Expand Down
10 changes: 5 additions & 5 deletions lib/atomic_web/live/activity_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,18 @@
<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">
<.icon name={:users} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
<.icon name={:users} solid class="mr-1.5 h-5 w-5 flex-shrink-0 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">
<.icon name={:calendar} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
<.icon name={:calendar} solid class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
<%= if activity.start do %>
<%= display_date(activity.start) %>
<% end %>
</p>
<%= if activity.location do %>
<p class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
<.icon name={:map_pin} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" />
<.icon name={:map_pin} solid class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" />
<%= activity.location && activity.location.name %>
</p>
<% end %>
Expand All @@ -70,11 +70,11 @@
<div class="flex flex-col-reverse lg:flex-row-reverse lg:items-center lg:justify-between">
<%= if Activities.verify_maximum_enrollments?(activity.id) do %>
<div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
<.icon name={:bell} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Open
<.icon name={:bell} solid class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" /> Open
</div>
<% else %>
<div class="mt-2 flex items-center text-sm text-zinc-500 lg:mt-0">
<.icon name={:bell} solid class="flex-shrink-0 mr-1.5 w-5 h-5 text-zinc-400" /> Closed
<.icon name={:bell} solid class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" /> Closed
</div>
<% end %>
</div>
Expand Down
18 changes: 9 additions & 9 deletions lib/atomic_web/live/activity_live/show.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,14 @@
<div class="flex gap-x-2">
<div class="text-zinc-900x inset-y-0 my-auto flex w-full gap-y-4 text-sm">
<.icon name={:calendar} solid class="h-5 w-5 text-zinc-400" />
<p class="block pl-1.5 max-w-6xl">
<p class="block max-w-6xl pl-1.5">
<%= display_date(@activity.start) %>
</p>
</div>
</div>
<div class="inset-y-0 my-auto flex md:pl-3">
<.icon name={:clock} solid class="h-5 w-5 text-zinc-400" />
<p class="block pl-1.5 max-w-6xl">
<p class="block max-w-6xl pl-1.5">
<%= display_time(@activity.start) %> - <%= display_time(@activity.finish) %>
</p>
</div>
Expand Down Expand Up @@ -97,7 +97,7 @@
<dd class="mt-1 flex text-sm text-zinc-900">
<%= draw_qr_code(@activity, @current_user, @socket) |> raw %>
</dd>
<dd class="mt-1 flex text-sm text-zinc-900 flex-row space-x-1">
<dd class="mt-1 flex flex-row space-x-1 text-sm text-zinc-900">
<span>
<%= gettext("If you can't go please") %>
</span>
Expand All @@ -116,12 +116,12 @@
phx-click="enroll"
phx-disable-with={gettext("Enrolling...")}
phx-throttle="0"
class="w-fit mt-1 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-orange-500"
class="mt-1 w-fit rounded-md bg-orange-500 px-3.5 py-2 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-orange-500"
>
<%= gettext("Enroll") %>
</button>
<% else %>
<button phx-click="must-login" class="w-fit mt-1 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-orange-500">
<button phx-click="must-login" class="mt-1 w-fit rounded-md bg-orange-500 px-3.5 py-2 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-orange-500">
<%= gettext("Enroll") %>
</button>
<% end %>
Expand All @@ -138,13 +138,13 @@
<div class="flex flex-row space-x-1">
<%= if @has_permissions? do %>
<.link patch={Routes.activity_edit_path(@socket, :edit, @activity.organization_id, @activity)} class="button">
<div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
<.icon name={:pencil} solid class="mr-3 w-5 h-5 text-zinc-400" /> Edit
<div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
<.icon name={:pencil} solid class="mr-3 h-5 w-5 text-zinc-400" /> Edit
</div>
</.link>
<%= link to: "#", phx_click: "delete", phx_value_id: @activity.id, data: [confirm: "Are you sure?"] do %>
<div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
<.icon name={:trash} solid class="mr-3 w-5 h-5 text-zinc-400" /> Delete
<div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
<.icon name={:trash} solid class="mr-3 h-5 w-5 text-zinc-400" /> Delete
</div>
<% end %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion lib/atomic_web/live/announcement_live/edit.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<%= gettext("Delete") %>
</.button>
</:actions>
<div class="pt-4 px-4">
<div class="px-4 pt-4">
<.live_component module={AtomicWeb.AnnouncementLive.FormComponent} id={@announcement.id} organization={@current_organization} title={@page_title} action={@live_action} announcement={@announcement} return_to={Routes.announcement_show_path(@socket, :show, @announcement)} />
</div>
</.page>
2 changes: 1 addition & 1 deletion lib/atomic_web/live/announcement_live/new.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<.page title={gettext("New Announcement")}>
<div class="pt-4 px-4">
<div class="px-4 pt-4">
<.live_component module={AtomicWeb.AnnouncementLive.FormComponent} id={:new} organization={@current_organization} title={@page_title} action={@live_action} announcement={@announcement} return_to={Routes.announcement_index_path(@socket, :index)} />
</div>
</.page>
12 changes: 6 additions & 6 deletions lib/atomic_web/live/announcement_live/show.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="py-4 px-4 sm:px-0">
<div class="px-4 flex flex-col gap-2 mt-6 sm:flex-row sm:items-center">
<div class="px-4 py-4 sm:px-0">
<div class="mt-6 flex flex-col gap-2 px-4 sm:flex-row sm:items-center">
<div>
<div class="flex justify-between items-center">
<div class="flex items-center justify-between">
<h4 class="text-2xl font-bold text-zinc-800">
<%= @announcement.title %>
</h4>
Expand All @@ -14,9 +14,9 @@
</div>

<%= if @has_permissions? do %>
<.link patch={Routes.announcement_edit_path(@socket, :edit, @announcement.organization, @announcement)} class="px-2 button">
<div type="button" class="inline-flex justify-center py-2 px-4 w-fit text-sm font-medium text-zinc-700 bg-white rounded-md border border-zinc-300 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
<.icon name={:pencil} solid class="mr-3 w-5 h-5 text-zinc-400" /> Edit
<.link patch={Routes.announcement_edit_path(@socket, :edit, @announcement.organization, @announcement)} class="button px-2">
<div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
<.icon name={:pencil} solid class="mr-3 h-5 w-5 text-zinc-400" /> Edit
</div>
</.link>
<% end %>
2 changes: 1 addition & 1 deletion lib/atomic_web/live/department_live/edit.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>
<% end %>
</:actions>
<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.DepartmentLive.FormComponent}
id="department-edit"
Expand Down
2 changes: 1 addition & 1 deletion lib/atomic_web/live/department_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<.empty_state url={Routes.department_edit_path(@socket, :new, @current_organization)} placeholder="department" />
</div>
<% else %>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-4 px-4 mx-auto max-w-5xl sm:px-6 lg:px-8">
<div class="mx-auto grid max-w-5xl grid-cols-1 gap-4 px-4 sm:grid-cols-2 sm:px-6 md:grid-cols-2 lg:px-8">
<%= for {department, collaborators} <- @departments do %>
<.link navigate={Routes.department_show_path(@socket, :show, @organization, department)}>
<.department_card department={department} collaborators={collaborators} />
Expand Down
12 changes: 6 additions & 6 deletions lib/atomic_web/live/department_live/show.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<!-- Department Header -->
<div class="h-32 w-full select-none">
<%= if @department.banner do %>
<img class="w-full h-32 object-cover" src={Uploaders.Banner.url({@department.banner, @department}, :original)} />
<img class="h-32 w-full object-cover" src={Uploaders.Banner.url({@department.banner, @department}, :original)} />
<% else %>
<.gradient seed={@department.id} class="object-cover" />
<% end %>
Expand All @@ -11,10 +11,10 @@
<div class="flex w-full flex-col bg-white lg:flex-row">
<main class="relative z-0 mb-10 flex-1 overflow-y-auto focus:outline-none xl:order-last">
<div class="mx-4 max-w-5xl sm:mx-6 lg:mx-8">
<div class="my-6 flex min-w-0 sm:flex-row items-center justify-between">
<div class="my-6 flex min-w-0 items-center justify-between sm:flex-row">
<!-- Department info -->
<div>
<h1 class="flex-1 select-none truncate text-wrap text-xl sm:text-2xl font-bold pr-4 text-gray-900">
<h1 class="text-wrap flex-1 select-none truncate pr-4 text-xl font-bold text-gray-900 sm:text-2xl">
<%= @department.name %>
</h1>
<.link navigate={Routes.organization_show_path(@socket, :show, @organization)}>
Expand Down Expand Up @@ -80,7 +80,7 @@
<% end %>
</div>
<!-- Large screens -->
<div class="flex-row gap-4 hidden sm:flex">
<div class="hidden flex-row gap-4 sm:flex">
<%= if @current_view == "show" do %>
<!-- Collaborate -->
<%= if !@current_collaborator do %>
Expand Down Expand Up @@ -156,14 +156,14 @@
<div class="col-span-3 sm:col-span-2">
<h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900"><%= gettext("Recent Activity") %></h2>
<!-- Recent activity empty state -->
<.link class="flex flex-col items-center justify-center mt-4" navigate={Routes.organization_show_path(@socket, :show, @organization)}>
<.link class="mt-4 flex flex-col items-center justify-center" navigate={Routes.organization_show_path(@socket, :show, @organization)}>
<.avatar class="mb-4 p-1" type={:organization} color={:white} size={:lg} name={@organization.name} src={Uploaders.Logo.url({@organization.logo, @organization}, :original)} />
<p class="select-none text-center text-gray-900"><%= gettext("This department doesn't have any recent activity.") %></p>
<p class="select-none text-center text-gray-900"><%= gettext("In the meantime, check out %{organization_name}.", organization_name: @organization.name) %></p>
</.link>
</div>
<!-- People -->
<div class="w-full hidden sm:block">
<div class="hidden w-full sm:block">
<h2 class="mb-2 flex-1 select-none truncate text-lg font-semibold text-gray-900"><%= gettext("People") %></h2>
<div class="mb-2 flex max-w-full flex-wrap gap-1">
<%= for collaborator <- @all_collaborators |> Enum.take(18) do %>
Expand Down
Loading