Skip to content

Commit

Permalink
refactor: improve calendar week view code and style
Browse files Browse the repository at this point in the history
  • Loading branch information
@nunom27
nunom27 committed Aug 9, 2024
1 parent 05abb49 commit 3642b8c
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 49 deletions.
6 changes: 4 additions & 2 deletions lib/atomic_web/components/calendar/month.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,10 @@ defmodule AtomicWeb.Components.CalendarMonth do
</li>
<% end %>
<%= if Enum.count(get_date_activities(@activities, @date)) > 2 do %>
<li class="text-zinc-500">
+ <%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
<li class="text-zinc-500 hover:text-primary-600">
<button type="button" phx-click="show-more" phx-value-date={@date}>
+<%= Enum.count(get_date_activities(@activities, @date)) - 2 %> more
</button>
</li>
<% end %>
</ol>
Expand Down
29 changes: 20 additions & 9 deletions lib/atomic_web/components/calendar/week.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
|> assign(today: Timex.today(timezone))

~H"""
<div id={@id} class="flex flex-auto flex-col overflow-auto rounded-lg bg-white">
<div id={@id} class="flex flex-auto flex-col overflow-y-auto overflow-x-hidden rounded-lg bg-white">
<div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
<div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5">
<div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
Expand Down Expand Up @@ -77,7 +77,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
<div class="left-0 w-12 flex-none bg-white ring-1 ring-zinc-100"></div>
<div class="grid flex-auto grid-cols-1 grid-rows-1">
<!-- Horizontal lines -->
<div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(30, minmax(2.5rem, 1fr))">
<div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(48, minmax(3.5rem, 1fr))">
<div class="row-end-1 h-6"></div>
<%= for hour <- hours() do %>
<div>
Expand All @@ -100,7 +100,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
<ol class="col-start-1 col-end-2 row-start-1 grid grid-cols-1 sm:hidden" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
<.day date={@current_date} idx={0} activities={@activities} />
</ol>
<ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7" style="grid-template-rows: 1.25rem repeat(301, minmax(0, 1fr))">
<ol class="col-start-1 col-end-2 row-start-1 hidden sm:grid sm:grid-cols-7" style="grid-template-rows: 1.75rem repeat(288, minmax(0, 1fr))">
<%= for idx <- 0..6 do %>
<.day date={Timex.shift(@beginning_of_week, days: idx)} idx={idx} activities={@activities} />
<% end %>
Expand Down Expand Up @@ -142,19 +142,29 @@ defmodule AtomicWeb.Components.CalendarWeek do
|> Timex.format!("{m}")
|> String.to_integer()

minutes = (minutes * 20 / 60) |> trunc()

2 + (hours - 8) * 20 + minutes
hours * 12 + div(minutes, 5) + 2
end

defp calc_time(start, finish) do
time_diff = (NaiveDateTime.diff(finish, start) / 3600) |> trunc()
time_diff = (NaiveDateTime.diff(finish, start) / 60) |> trunc()

2 + 20 * time_diff
if time_diff == 0 do
1
else
div(time_diff, 5)
end
end

defp hours,
do: [
"0H",
"1H",
"2H",
"3H",
"4H",
"5H",
"6H",
"7H",
"8H",
"9H",
"10H",
Expand All @@ -169,6 +179,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
"19H",
"20H",
"21H",
"22H"
"22H",
"23H"
]
end
77 changes: 61 additions & 16 deletions lib/atomic_web/live/calendar_live/show.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,53 +18,98 @@ defmodule AtomicWeb.CalendarLive.Show do
@impl true
def handle_params(params, _, socket) do
mode = Map.get(params, "mode", "month")
current_date = Map.get(socket.assigns, :current_date, Timex.today(socket.assigns.timezone))

{:noreply,
socket
|> assign(:page_title, "Calendar")
|> assign(:current_page, :calendar)
|> assign(:params, params)
|> assign(:mode, mode)
|> assign(:activities, list_activities(socket.assigns.timezone, mode, params))
|> assign(:activities, list_activities(socket.assigns.timezone, mode, current_date))
|> assign(:current_path, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
|> assign(:current_date, Timex.today(socket.assigns.timezone))
|> assign(:current_date, current_date)
|> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
|> assigns_week(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
end

@impl true
def handle_event("previous", _, socket) do
new_date =
if socket.assigns.mode == "week" do
socket.assigns.current_date |> Timex.add(Duration.from_days(-7))
else
socket.assigns.beginning_of_month |> Timex.add(Duration.from_days(-1))
end

{:noreply,
socket
|> assign(
:current_date,
socket.assigns.beginning_of_month |> Timex.add(Duration.from_days(-1))
new_date
)
|> assign(
:activities,
list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
)
|> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
|> assigns_dates()}
end

@impl true
def handle_event("present", _, socket) do
new_date = Timex.today(socket.assigns.timezone)

{:noreply,
socket
|> assign(:current_date, Timex.today(socket.assigns.timezone))
|> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
|> assign(:current_date, new_date)
|> assign(
:activities,
list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
)
|> assigns_dates()}
end

@impl true
def handle_event("next", _, socket) do
new_date =
if socket.assigns.mode == "week" do
socket.assigns.current_date |> Timex.add(Duration.from_days(7))
else
socket.assigns.end_of_month |> Timex.add(Duration.from_days(1))
end

{:noreply,
socket
|> assign(:current_date, socket.assigns.end_of_month |> Timex.add(Duration.from_days(1)))
|> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
|> assign(:current_date, new_date)
|> assign(
:activities,
list_activities(socket.assigns.timezone, socket.assigns.mode, new_date)
)
|> assigns_dates()}
end

@impl true
def handle_event("set-mode", _, socket) do
{:noreply,
socket
|> assign(:current_date, socket.assigns.end_of_month |> Timex.add(Duration.from_days(1)))
|> assigns_month(Routes.calendar_show_path(AtomicWeb.Endpoint, :show))}
def handle_event("show-more", %{"date" => date}, socket) do
case Timex.parse(date, "{YYYY}-{0M}-{0D}") do
{:ok, naive_date} ->
date = Timex.to_date(naive_date)

{:noreply,
socket
|> assign(:current_date, date)
|> push_patch(to: Routes.calendar_show_path(socket, :show, mode: "week"), replace: true)}

{:error, _reason} ->
{:noreply, socket}
end
end

defp assigns_dates(socket) do
if socket.assigns.mode == "week" do
assigns_week(socket, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
else
assigns_month(socket, Routes.calendar_show_path(AtomicWeb.Endpoint, :show))
end
end

defp assigns_month(socket, current_path) do
Expand Down Expand Up @@ -169,9 +214,9 @@ defmodule AtomicWeb.CalendarLive.Show do
|> assign(next_week_path: next_week_path)
end

defp list_activities(timezone, mode, params) do
start = build_beggining_date(timezone, mode, params)
finish = build_ending_date(timezone, mode, params)
defp list_activities(timezone, mode, current_date) do
start = build_beggining_date(timezone, mode, current_date)
finish = build_ending_date(timezone, mode, current_date)

Activities.list_activities_from_to(start, finish)
end
Expand Down
18 changes: 8 additions & 10 deletions lib/atomic_web/live/calendar_live/show.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<.page title="Calendar">
<div>
<div x-data="{ mode_view: false }" class="flex-col lg:flex lg:h-full lg:mx-8 m-4 rounded-md ring-1 ring-zinc-200 overflow-hidden">
<div x-data="{ mode_view: false }" class="flex-col h-[787px] lg:flex lg:mx-8 m-4 rounded-md ring-1 ring-zinc-200 overflow-hidden">
<header class="px-6 py-4 flex flex-col sm:flex-row border-b border-zinc-300 bg-gray-50">
<div class="flex-1">
<div class="relative z-20 flex w-full items-center justify-between lg:flex-none">
Expand Down Expand Up @@ -71,7 +71,7 @@
tabindex="-1"
>
<div class="py-1" role="none">
<.link patch={@current_path}>
<.link patch="?mode=week">
<button
type="button"
@click="mode_view = false"
Expand All @@ -89,7 +89,7 @@
<%= gettext("Week view") %>
</button>
</.link>
<.link patch={@current_path}>
<.link patch="?mode=month">
<button
type="button"
@click="mode_view = false"
Expand Down Expand Up @@ -118,13 +118,11 @@
</button>
<div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1" role="none">
<.link patch={"#{if @mode == "month" do @current_path else @current_path end}"}>
<button type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
<%= gettext("Today") %>
</button>
</.link>
<button @click="mode_view = false" phx-click="present" type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
<%= gettext("Today") %>
</button>
<div class="mx-4 border-b border-zinc-200" />
<.link patch={@current_path}>
<.link patch="?mode=week">
<button
type="button"
@click="mode_view = false"
Expand All @@ -142,7 +140,7 @@
<%= gettext("Week view") %>
</button>
</.link>
<.link patch={@current_path}>
<.link patch="?mode=month">
<button
type="button"
@click="mode_view = false"
Expand Down
20 changes: 8 additions & 12 deletions lib/atomic_web/views/calendar_utils.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,20 @@ defmodule AtomicWeb.CalendarUtils do
use Phoenix.HTML
use Timex

def build_beggining_date(timezone, "month", params) do
current = current_from_params(timezone, params)
Timex.beginning_of_month(current) |> Timex.to_naive_datetime()
def build_beggining_date(_timezone, "month", current_date) do
Timex.beginning_of_month(current_date) |> Timex.to_naive_datetime()
end

def build_beggining_date(timezone, "week", params) do
current = current_from_params(timezone, params)
Timex.beginning_of_week(current) |> Timex.to_naive_datetime()
def build_beggining_date(_timezone, "week", current_date) do
Timex.beginning_of_week(current_date) |> Timex.to_naive_datetime()
end

def build_ending_date(timezone, "month", params) do
current = current_from_params(timezone, params)
Timex.end_of_month(current) |> Timex.to_naive_datetime()
def build_ending_date(_timezone, "month", current_date) do
Timex.end_of_month(current_date) |> Timex.to_naive_datetime()
end

def build_ending_date(timezone, "week", params) do
current = current_from_params(timezone, params)
Timex.end_of_week(current) |> Timex.to_naive_datetime()
def build_ending_date(_timezone, "week", current_date) do
Timex.end_of_week(current_date) |> Timex.to_naive_datetime()
end

def current_from_params(timezone, %{"day" => day, "month" => month, "year" => year}) do
Expand Down

0 comments on commit 3642b8c

Please sign in to comment.