From 3fb9602fa824e99671a6f9bf3c27042a81ad462c Mon Sep 17 00:00:00 2001 From: Adam Piontek 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 @@

- <%= icon_div @socket, "bi-clock-history", [class: "icon baseline"] %> + <%= icon_div @socket, "bi-calendar3", [class: "icon baseline"] %> Assign Shift To Dates

+ +<%# month navigation %> +
+

+ <%= Timex.format!(@current_date, "%B %Y", :strftime) %> +

+
+ + <%= icon_div @socket, "bi-chevron-left", [class: "icon baseline"] %> + Prev + + + Next + <%= icon_div @socket, "bi-chevron-right", [class: "icon baseline"] %> + +
+
+ +<%# calendar month table display %> + + + + <%= for {day_name, _i} <- Enum.with_index(@day_names) do %> + + <% end %> + + + + <%= for week <- @week_rows do %> + + <%= for day <- week do %> + <%= if Timex.compare(day, @current_date, :days) == 0 do %> + + <% end %> + + <% end %> + +
+ <%= day_name %> +
+ <% else %> + + <% end %> + <%= Timex.format!(day, "%d", :strftime) %> +