progress on shift assign calendar table display

assets/css/_bs-custom.scss

@@ -18,6 +18,6 @@ $enable-negative-margins: true;
 // Colors
 $primary: #662c91;
 $secondary: #ee6c4d;
-$success: #a1c181;
-$info: #81c3d7;
+$success: #3f784c;
+$info: #3f84e5;
 $warning: #fcca46;

assets/css/app.scss

@@ -64,3 +64,59 @@
 .right-addon select {
   padding-right: 2rem;
 }
+
+/* calendar table rounded */
+// table.table.table-rounded,
+// table.table.table-rounded thead,
+// table.table.table-rounded thead tr,
+// table.table.table-rounded thead tr th:first-child {
+//   border-radius: 10px 0 0 10px;
+// }
+
+table.table.table-rounded {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-style: hidden;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  thead {
+    tr {
+      th {
+        border-top: 1px solid $table-border-color;
+        border-right: 1px solid $table-border-color;
+        border-bottom: 2px solid $black !important;
+        border-left: none;
+        &:first-child {
+          border-top-left-radius: $border-radius;
+          border-left: 1px solid $table-border-color;
+        }
+        &:last-child {
+          border-top-right-radius: $border-radius;
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        border-top: none;
+        border-right: 1px solid $table-border-color;
+        border-bottom: 1px solid $table-border-color !important;
+        border-left: none;
+        &:first-child {
+          border-left: 1px solid $table-border-color;
+        }
+      }
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: $border-radius;
+        }
+        td:last-child {
+          border-bottom-right-radius: $border-radius;
+        }
+      }
+    }
+  }
+}

assets/js/app.js

@@ -34,6 +34,7 @@ import "../node_modules/bootstrap-icons/icons/arrow-repeat.svg"; // resend confi
 import "../node_modules/@mdi/svg/svg/head-question-outline.svg"; // forgot password
 import "../node_modules/bootstrap-icons/icons/people.svg"; // users management
 // calendar/event icons
+import "../node_modules/bootstrap-icons/icons/calendar3.svg";
 import "../node_modules/bootstrap-icons/icons/calendar3-event.svg";
 import "../node_modules/bootstrap-icons/icons/calendar3-range.svg";
 import "../node_modules/bootstrap-icons/icons/clock-history.svg"; // shift template

lib/shift73k_web/live/shift_assign_live/index.ex

@@ -1,10 +1,66 @@
 defmodule Shift73kWeb.ShiftAssignLive.Index do
   use Shift73kWeb, :live_view
+  use Timex
+
+  alias Shift73k.EctoEnums.WeekdayEnum
 
   @impl true
   def mount(_params, session, socket) do
     socket
     |> assign_defaults(session)
+    |> assign_day_names()
+    |> assign_init_dates(Timex.today())
+    |> assign_week_rows()
     |> live_okreply()
   end
+
+  defp rotate_week(week_start_at) do
+    {a, b} = Enum.split_while(WeekdayEnum.__enum_map__(), fn {k, _v} -> k != week_start_at end)
+    b ++ a
+  end
+
+  defp day_names(week_start_at) do
+    week_start_at
+    |> rotate_week()
+    |> Keyword.values()
+    |> Enum.map(&Timex.day_shortname/1)
+    |> IO.inspect(label: "day names...")
+  end
+
+  defp week_rows(cursor_date, week_start_at) do
+    first =
+      cursor_date
+      |> Timex.beginning_of_month()
+      |> Timex.beginning_of_week(week_start_at)
+
+    last =
+      cursor_date
+      |> Timex.end_of_month()
+      |> Timex.end_of_week(week_start_at)
+      |> IO.inspect(label: "last found")
+
+    Interval.new(from: first, until: last, right_open: false)
+    |> Enum.map(& &1)
+    |> Enum.chunk_every(7)
+    |> IO.inspect(label: "week rows")
+  end
+
+  defp assign_day_names(socket) do
+    day_names = day_names(socket.assigns.current_user.week_start_at)
+    assign(socket, :day_names, day_names)
+  end
+
+  defp assign_init_dates(socket, today) do
+    socket
+    |> assign(:current_date, today)
+    |> assign(:cursor_date, today)
+  end
+
+  defp assign_week_rows(socket) do
+    cursor_date = socket.assigns.cursor_date
+    week_start_at = socket.assigns.current_user.week_start_at
+
+    assign(socket, :week_rows, week_rows(cursor_date, week_start_at))
+  end
+
 end

lib/shift73k_web/live/shift_assign_live/index.html.leex

@@ -1,4 +1,49 @@
 <h2 class="mb-3 mb-sm-0">
-  <%= icon_div @socket, "bi-clock-history", [class: "icon baseline"] %>
+  <%= icon_div @socket, "bi-calendar3", [class: "icon baseline"] %>
   Assign Shift To Dates
 </h2>
+
+<%# month navigation %>
+<div class="d-flex justify-content-between align-items-baseline mt-4">
+  <h3 class="ms-4 text-muted mb-0">
+    <%= Timex.format!(@current_date, "%B %Y", :strftime) %>
+  </h3>
+  <div class="me-4">
+    <a href="#" phx-click="prev-month" class="btn btn-primary">
+      <%= icon_div @socket, "bi-chevron-left", [class: "icon baseline"] %>
+      Prev
+    </a>
+    <a href="#" phx-click="next-month" class="btn btn-primary">
+      Next
+      <%= icon_div @socket, "bi-chevron-right", [class: "icon baseline"] %>
+    </a>
+  </div>
+</div>
+
+<%# calendar month table display %>
+<table class="table table-rounded shadow mt-3">
+  <thead>
+    <tr>
+      <%= for {day_name, _i} <- Enum.with_index(@day_names) do %>
+        <th width="14%">
+          <%= day_name %>
+        </th>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+    <%= for week <- @week_rows do %>
+      <tr>
+      <%= for day <- week do %>
+        <%= if Timex.compare(day, @current_date, :days) == 0 do %>
+        <td width="14%" style="height: 5rem;" class="bg-info text-white">
+        <% else %>
+        <td width="14%" style="height: 5rem;">
+        <% end %>
+          <%= Timex.format!(day, "%d", :strftime) %>
+        </td>
+      <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>