shift73k/lib/shift73k_web/live/shift_assign_live/index.html.heex

<%= if @delete_days_shifts do %>
  <.live_component
    module={Shift73kWeb.ModalComponent}
    id="modal"
    component={Shift73kWeb.ShiftAssignLive.DeleteComponent}
    opts={[
      id: "delete-days-shifts-#{@current_user.id}",
      title: "Delete Shifts From Selected Days",
      delete_days_shifts: @delete_days_shifts,
      current_user: @current_user
    ]}
    />
<% end %>


<h2 class="mb-3 mb-sm-0">
  <i class="bi bi-calendar2-plus me-1"></i> Schedule Shifts
</h2>

<div class="row justify-content-center mt-4">
  <div class="col-12 col-lg-9 col-xl-8 col-xxl-7 d-flex justify-content-center align-items-end">

      <%= form_for :template_select, "#", [phx_change: "change-selected-template"], fn sts -> %>
        <%= label sts, :template, "Select shift template to assign to dates", class: "form-label" %>
        <%= select sts, :template, @shift_templates,
            value: @shift_template && @shift_template.id || (@shift_template_options |> hd() |> elem(1)),
            class: "form-select"
          %>
      <% end %>

      <%  details_button_class = "ms-2 btn btn-primary text-nowrap"
          details_button_class = if @show_template_btn_active, do: "#{details_button_class} active", else: details_button_class %>
      <button type="button" class={details_button_class} id="#templateDetailsBtn" phx-click="toggle-template-details" phx-value-target_id="#templateDetailsCol">
        <i class={@show_template_btn_active && "bi bi-binoculars-fill me-sm-1" || "bi bi-binoculars me-sm-1"}></i>
        <span class="d-none d-sm-inline">Details</span>
      </button>

  </div>


  <%  template_details_div_class = "col-12 col-lg-9 col-xl-8 col-xxl-7 collapse"
      template_details_div_class = if @show_template_details, do: "#{template_details_div_class} show", else: template_details_div_class %>
  <div class={template_details_div_class} id="#templateDetailsCol" phx-hook="BsCollapse">
    <div class="card mt-4">
      <div class="card-body">

        <%= form_for @shift_template_changeset, "#", [phx_change: "validate-shift-template"], fn stf -> %>

          <div class="row">

            <div class="col-12 col-md-6">
              <%= label stf, :subject, "Subject/Title", class: "form-label" %>
              <div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(stf, :subject)}>
                <i class="bi bi-tag icon is-left text-muted fs-5"></i>
                <%= text_input stf, :subject,
                    value: input_value(stf, :subject),
                    class: input_class(stf, :subject, "form-control"),
                    phx_debounce: 250,
                    disabled: @shift_template.id != @custom_shift.id,
                    aria_describedby: error_ids(stf, :subject)
                  %>
                <%= error_tag stf, :subject %>
              </div>
            </div>

            <div class="col-12 col-md-6 mb-3">
              <div class="row gx-2 gx-sm-3">

                <div class="col-6" phx-feedback-for={input_id(stf, :time_start)}>
                  <%= label stf, :time_start, "Start", class: "form-label" %>
                  <%= time_input stf, :time_start,
                      precision: :minute,
                      value: input_value(stf, :time_start),
                      class: input_class(stf, :time_start, "form-control"),
                      disabled: @shift_template.id != @custom_shift.id,
                      aria_describedby: error_ids(stf, :time_start),
                      required: true
                    %>
                </div>

                <div class="col-6" phx-feedback-for={input_id(stf, :time_end)}>
                  <%= label stf, :time_end, "End", class: "form-label" %>
                  <%= time_input stf, :time_end,
                      precision: :minute,
                      value: input_value(stf, :time_end),
                      class: input_class(stf, :time_end, "form-control"),
                      disabled: @shift_template.id != @custom_shift.id,
                      aria_describedby: error_ids(stf, :time_end),
                      required: true
                    %>
                </div>

              </div>

              <div class="valid-feedback d-block text-primary">Shift length: <%= @shift_length %></div>

              <div class="phx-orphaned-feedback" phx-feedback-for={input_id(stf, :time_start)}>
                <%= error_tag stf, :time_start %>
              </div>
              <div class="phx-orphaned-feedback" phx-feedback-for={input_id(stf, :time_end)}>
                <%= error_tag stf, :time_end %>
              </div>
            </div>

            <div class="col-12 col-md-6">
              <%= label stf, :location, class: "form-label" %>
              <div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(stf, :location)}>
                <i class="bi bi-geo icon is-left text-muted fs-5"></i>
                <%= text_input stf, :location,
                    value: input_value(stf, :location),
                    class: input_class(stf, :location, "form-control"),
                    phx_debounce: 250,
                    disabled: @shift_template.id != @custom_shift.id,
                    aria_describedby: error_ids(stf, :location)
                  %>
                <%= error_tag stf, :location %>
              </div>
            </div>

            <div class="col-12 col-md-6">
              <%= label stf, :time_zone, class: "form-label" %>
              <div class="inner-addon left-addon mb-3 mb-md-0" phx-feedback-for={input_id(stf, :time_zone)}>
                <i class="bi bi-map icon is-left text-muted fs-5"></i>
                <%= text_input stf, :time_zone,
                    value: input_value(stf, :time_zone),
                    class: input_class(stf, :time_zone, "form-control"),
                    disabled: @shift_template.id != @custom_shift.id,
                    phx_debounce: 250,
                    list: "tz_list",
            placeholder: "Default: #{app_time_zone()}"
                  %>
                  <datalist id="tz_list">
                    <%= for tz_name <- Tzdata.zone_list() do %>
                      <option value={tz_name}></option>
                    <% end %>
                    end
                  </datalist>
                <%= if @shift_template.id == @custom_shift.id do %>
                  <div class="valid-feedback d-block text-primary">Type to search & select from list of known <%= link "IANA tz database", to: "https://en.wikipedia.org/wiki/List_of_tz_database_time_zones", target: "_blank" %> time zones</div>
                <% end %>
                <%= error_tag stf, :time_zone %>
              </div>
            </div>

            <div class="col-12">
              <%= label stf, :description, class: "form-label" %>
              <div phx-feedback-for={input_id(stf, :description)}>

                <%= textarea stf, :description,
                    value: input_value(stf, :description),
                    class: input_class(stf, :description, "form-control"),
                    disabled: @shift_template.id != @custom_shift.id,
                    phx_debounce: 250,
                    aria_describedby: error_ids(stf, :description)
                  %>
                <%= error_tag stf, :description %>
              </div>
            </div>

          </div>

        <% end %>

      </div>
    </div>

  </div>
</div>














<%# month navigation %>
<div class="d-flex justify-content-between align-items-end mt-4">
  <h3 class="text-muted mb-0">
    <%= Calendar.strftime(@cursor_date, "%B %Y") %>
  </h3>
  <div>
    <button type="button" phx-click="month-nav" phx-value-month="now" class="btn btn-info text-white" disabled={if Map.get(@cursor_date, :month) == Map.get(Date.utc_today(), :month), do: :true, else: :false}>
      <i class="bi bi-asterisk me-sm-1"></i>
      <span class="d-none d-sm-inline">Today</span>
    </button>
    <button type="button" phx-click="month-nav" phx-value-month="prev" class="btn btn-primary">
      <i class="bi bi-chevron-left me-sm-1"></i>
      <span class="d-none d-sm-inline">Prev</span>
    </button>
    <button type="button" phx-click="month-nav" phx-value-month="next" class="btn btn-primary">
      <span class="d-none d-sm-inline">Next</span>
      <i class="bi bi-chevron-right ms-sm-1"></i>
    </button>
  </div>
</div>

<%# calendar month table display %>
<table class="table table-rounded table-calendar shadow mt-3">
  <thead>
    <tr>
      <%= for {day_name, _i} <- Enum.with_index(@day_names) do %>
        <th>
          <%= day_name %>
        </th>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <%= for week <- @week_rows do %>
      <tr>
      <%= for day <- week do %>
        <td class={day_color(day, @current_date, @cursor_date, @selected_days)} phx-click="select-day" phx-value-day={day}>

          <%= Calendar.strftime(day, "%d") %><%= if day.month != @cursor_date.month, do: "-#{Calendar.strftime(day, "%b")}" %>

          <% day_shifts = Enum.filter(@known_shifts, fn s -> s.date == day end) %>
          <% shifts_to_show = shifts_to_show(day_shifts) %>

          <%= for shift <- shifts_to_show do %>
            <span class="badge bg-primary text-start d-block">
              <span>
              <%= format_shift_time(shift.time_start) %>
              <%= shift.subject %>
              </span>
            </span>
          <% end %>

          <%= if length(day_shifts) > 2 do %>
            <span class="badge bg-primary text-start d-block"><span><%= length(day_shifts) - 1 %> more&hellip;</span></span>
          <% end %>


        </td>
      <% end %>
      </tr>
    <% end %>
  </tbody>
</table>


<div class="row justify-content-center justify-content-lg-end my-5">
  <div class="col-12 col-sm-10 col-md-8 col-lg-auto d-flex flex-column-reverse flex-lg-row">

  <button class="btn btn-outline-danger mb-1 mb-lg-0 me-lg-1" phx-click="delete-days-shifts" disabled={if Enum.empty?(@selected_days), do: :true, else: :false}>
    <i class="bi bi-trash me-1"></i> Delete shifts from selected days
  </button>

  <button class="btn btn-outline-dark mb-1 mb-lg-0 me-lg-1" phx-click="clear-days" disabled={if Enum.empty?(@selected_days), do: :true, else: :false}>
    <i class="bi bi-eraser me-1"></i> De-select all selected
  </button>

  <button class="btn btn-primary mb-1 mb-lg-0" phx-click="save-days" disabled={if (!@shift_template_changeset.valid? || Enum.empty?(@selected_days)), do: :true, else: :false}>
    <i class="bi bi-save me-1"></i> Assign shifts to selected days
  </button>

  </div>
</div>