From 3fb9602fa824e99671a6f9bf3c27042a81ad462c Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Fri, 12 Mar 2021 17:26:37 -0500
Subject: [PATCH] progress on shift assign calendar table display
---
assets/css/_bs-custom.scss | 4 +-
assets/css/app.scss | 56 +++++++++++++++++++
assets/js/app.js | 1 +
.../live/shift_assign_live/index.ex | 56 +++++++++++++++++++
.../live/shift_assign_live/index.html.leex | 47 +++++++++++++++-
5 files changed, 161 insertions(+), 3 deletions(-)
diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss
index 8e9d1002..d6a8b0f3 100644
--- a/assets/css/_bs-custom.scss
+++ b/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;
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 384fc844..385e860d 100644
--- a/assets/css/app.scss
+++ b/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;
+ }
+ }
+ }
+ }
+}
diff --git a/assets/js/app.js b/assets/js/app.js
index e228a03b..7c7ad521 100644
--- a/assets/js/app.js
+++ b/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
diff --git a/lib/shift73k_web/live/shift_assign_live/index.ex b/lib/shift73k_web/live/shift_assign_live/index.ex
index 527ad622..057c98fa 100644
--- a/lib/shift73k_web/live/shift_assign_live/index.ex
+++ b/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
diff --git a/lib/shift73k_web/live/shift_assign_live/index.html.leex b/lib/shift73k_web/live/shift_assign_live/index.html.leex
index 6ea4a950..72a76d0c 100644
--- a/lib/shift73k_web/live/shift_assign_live/index.html.leex
+++ b/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>