shift73k/lib/shift73k_web/live/shift_live/index.html.leex

<div class="row justify-content-start justify-content-sm-center">
  <div class="col-md-10 col-xl-10">

    <h2 class="mb-3 mb-sm-0">
      <%= icon_div @socket, "bi-card-list", [class: "icon baseline"] %>
      My Shifts
    </h2>




    <div class="row justify-content-start justify-content-sm-center">
      <div class="col-md-10 col-xl-10">


        <%# month navigation %>
        <div class="d-flex justify-content-between align-items-end my-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" <%= if Map.get(@cursor_date, :month) == Map.get(Date.utc_today(), :month), do: "disabled" %>>
              <%= icon_div @socket, "bi-asterisk", [class: "icon baseline"] %>
              <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">
              <%= icon_div @socket, "bi-chevron-left", [class: "icon baseline"] %>
              <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>
              <%= icon_div @socket, "bi-chevron-right", [class: "icon baseline", style: "margin-left:0.125rem;"] %>
            </button>
          </div>
        </div>


        <%= for day <- Enum.to_list(@date_range) do %>
          <%= if Date.day_of_week(day, @current_user.week_start_at) == 1 do %>
          <div class="border-top mt-4 mb-4"></div>
          <% end %>
          <h4>
            <%= Calendar.strftime(day, "%A, %b %-d") %>
          </h4>
          <% day_shifts = Enum.filter(@shifts, fn s -> s.date == day end) %>
          <%= if !Enum.empty?(day_shifts) do %>


            <%= for shift <- day_shifts do %>


                <div class="card mt-2 mb-4 col-12 ms-sm-3 ms-md-4 col-lg-10 ms-lg-5 col-xxl-8" id="shift-<%= shift.id %>">
                  <div class="card-body">
                    <h5 class="card-title">
                      <%= icon_div @socket, "bi-tag", [class: "icon baseline text-muted me-1"] %>
                      <%= shift.subject %>
                    </h5>


                    <table class="table table-borderless table-nonfluid table-sm">
                      <tbody>

                        <tr>
                          <th scope="row" class="text-end">
                            <%= icon_div @socket, "bi-hourglass", [class: "icon baseline text-muted"] %>
                            <span class="visually-hidden">Hours:</span>
                          </th>
                          <td>
                            <%= format_shift_time(shift.time_start) %>
                            &mdash;
                            <%= format_shift_time(shift.time_end) %>
                            <span class="text-muted">
                              <span class="visually-hidden">Shift length:</span>
                              (<%= format_shift_length(shift) %>)
                            </span>
                            <span class="valid-feedback d-block text-muted mt-n1">TZ: <%= shift.time_zone %></span>
                          </td>
                        </tr>

                        <tr>
                          <th scope="row" class="text-end">
                            <%= icon_div @socket, "bi-geo", [class: "icon baseline text-muted"] %>
                            <span class="visually-hidden">Location:</span>
                          </th>
                          <td>
                            <%= if shift.location do %>
                              <%= shift.location %>
                            <% else %>
                              <span class="text-muted fst-italic">none</span>
                            <% end %>
                          </td>
                        </tr>
                        <tr>
                          <th scope="row" class="text-end">
                            <%= icon_div @socket, "bi-justify-left", [class: "icon baseline text-muted"] %>
                            <span class="visually-hidden">Description:</span>
                          </th>
                          <td class="shift-description">
                            <%= if shift.description do %>
                              <%= text_to_html shift.description %>
                            <% else %>
                              <span class="text-muted fst-italic">none</span>
                            <% end %>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <%#= if Roles.can?(@current_user, template, :edit) do %>
                      <%#= live_patch to: Routes.shift_template_index_path(@socket, :edit, template), class: "btn btn-primary btn-sm text-nowrap" do %>
                        <%#= icon_div @socket, "bi-pencil", [class: "icon baseline"] %>
                        <%# Edit %>
                      <%# end %>
                    <%# end %>

                    <%#= if Roles.can?(@current_user, template, :delete) do %>
                      <%# <button class="btn btn-outline-danger btn-sm text-nowrap" phx-click="delete-modal" phx-value-id=" %>
                        <%#= shift.id %>
                        <%# "> %>
                        <%#= icon_div @socket, "bi-trash", [class: "icon baseline"] %>
                        <%# Delete %>
                      <%# </button> %>
                    <%# end %>

                      <%= button to: "#", phx_click: "delete", phx_value_id: shift.id, data: [confirm: "Are you sure?"], class: "btn btn-outline-danger btn-sm text-nowrap" do %>
                        <%= icon_div @socket, "bi-trash", [class: "icon baseline"] %>
                        Delete
                      <% end %>



                  </div>
                </div>




            <% end %>






          <% else %>
            <p class="text-muted"><em>Nothing scheduled</em></p>
          <% end %>
        <% end %>


      </div>
    </div>


  </div>
</div>