feat: calendar view

lib/exmr_web/live/exam_live/index.ex

@@ -12,6 +12,8 @@ defmodule ExmrWeb.ExamLive.Index do
       |> assign(:sort_by, "date")
       |> assign(:live_action, :index)
       |> assign(exam: %{})
+      |> assign(events: Enum.group_by(Exams.list_exams(), & &1.date))
+      |> assign(current_month: Date.utc_today())
 
     {:ok, socket}
   end

lib/exmr_web/live/exam_live/index.html.heex

@@ -27,38 +27,72 @@
         {exam.date} |
         <b>
           {case Date.diff(exam.date, Date.utc_today()) do
-            0 -> gettext("Today")
+          0 -> gettext("Today")
-            1 -> gettext("Tommorow")
+          1 -> gettext("Tommorow")
-            x when x > 1 -> ngettext("Tomorrow", "%{count} days left", x)
+          x when x > 1 -> ngettext("Tomorrow", "%{count} days left", x)
-            x when x < 0 -> ngettext("Yesterday", "%{count} days passed", x * -1)
+          x when x < 0 -> ngettext("Yesterday", "%{count} days passed", x * -1)
-          end}
+            end}
         </b>
       </div>
     </div>
-    <button
+    <button phx-click="edit" phx-value-id={exam.id}
-      phx-click="edit"
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-md">
-      phx-value-id={exam.id}
-      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-md"
-    >
       {gettext("Edit")}
     </button>
-    <button
+    <button phx-click="remove" phx-value-id={exam.id}
-      phx-click="remove"
+      class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-3 rounded-md">
-      phx-value-id={exam.id}
-      class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-3 rounded-md"
-    >
       {gettext("Remove")}
     </button>
   </div>
 </div>
 
 <.modal :if={@live_action in [:new, :edit]} id="exam-modal" show on_cancel={JS.patch(~p"/exams")}>
-  <.live_component
+  <.live_component module={ExmrWeb.ExamLive.FormComponent} id={@exam.id || :new} title={@page_title}
-    module={ExmrWeb.ExamLive.FormComponent}
+    action={@live_action} exam={@exam} patch={~p"/exams"} />
-    id={@exam.id || :new}
-    title={@page_title}
-    action={@live_action}
-    exam={@exam}
-    patch={~p"/exams"}
-  />
 </.modal>
+
+<div>
+  <!-- Navigation -->
+  <!-- <div class="flex justify-between mb-4"> -->
+  <!--   <button phx-click="previous_month" class="px-2 py-1 bg-blue-200">Previous</button> -->
+  <!--   <h2>{@current_month |> Date.to_string() |> String.replace("-", " ")}</h2> -->
+  <!--   <button phx-click="next_month" class="px-2 py-1 bg-blue-200">Next</button> -->
+  <!-- </div> -->
+
+  <!-- Calendar -->
+  <div class="grid grid-cols-7 gap-1">
+    <!-- Weekdays -->
+    <%= for day <- ~w(Sun Mon Tue Wed Thu Fri Sat) do %>
+      <div class="font-bold text-center">{day}</div>
+      <% end %>
+
+        <!-- Empty spaces for previous month -->
+        <%= for _ <- 1..(Date.day_of_week(@current_month) - 1) do %>
+          <div></div>
+          <% end %>
+
+            <!-- Days of the month -->
+            <%= for day <- 1..Date.days_in_month(@current_month) do %>
+              <% {:ok, date}=Date.new(@current_month.year, @current_month.month, day) %>
+
+                <div class={["border rounded p-3", @current_month == date && "bg-zinc-800"]}>
+                  <div class="text-sm font-bold">{day}</div>
+
+                  <!-- Render events for the current day -->
+
+                  <% IO.puts("Date: #{date}") %>
+                    <% IO.inspect(Map.get(@events, date)) %>
+                      <%= case Map.get(@events, date) do %>
+                        <% nil -> %>
+                          <!-- No events for this day -->
+                          <% events -> %>
+                            <ul class="mt-2 text-xs">
+                              <%= for event <- events do %>
+                                <li>{event.subject}</li>
+                                <% end %>
+                            </ul>
+                            <% end %>
+                </div>
+                <% end %>
+  </div>
+</div>