From efaa296e5df6e763e311e92c672c9ee2242ae740 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Tue, 9 Mar 2021 10:20:47 -0500
Subject: [PATCH] improved user_management data display & sorting for mobile &
 desktop

---
 assets/css/app.scss                           |  6 +--
 assets/js/app.js                              |  1 +
 .../live/user_management/index.html.leex      | 47 ++++++++++++-------
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index c392dfd..384fc84 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -41,17 +41,17 @@
 }
 
 /* style icon */
-.inner-addon .icon {
+.inner-addon > .icon {
   position: absolute;
   padding: 0.5625rem 0.5rem;
   pointer-events: none;
 }
 
 /* align icon */
-.inner-addon .icon.is-left {
+.inner-addon > .icon.is-left {
   left: 0px;
 }
-.inner-addon .icon.is-right {
+.inner-addon > .icon.is-right {
   right: 0px;
 }
 
diff --git a/assets/js/app.js b/assets/js/app.js
index 29258d1..0436c43 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -19,6 +19,7 @@ import "../node_modules/bootstrap-icons/icons/key-fill.svg"; // pw confirm field
 import "../node_modules/bootstrap-icons/icons/lock.svg"; // current pw field
 import "../node_modules/bootstrap-icons/icons/shield.svg"; // role
 // live tables
+import "../node_modules/bootstrap-icons/icons/arrow-down-up.svg"; // sort
 import "../node_modules/bootstrap-icons/icons/funnel.svg"; // filter
 import "../node_modules/bootstrap-icons/icons/x-circle-fill.svg"; // clear filter
 import "../node_modules/bootstrap-icons/icons/sort-down-alt.svg";
diff --git a/lib/bones73k_web/live/user_management/index.html.leex b/lib/bones73k_web/live/user_management/index.html.leex
index c3ef6c9..31f390f 100644
--- a/lib/bones73k_web/live/user_management/index.html.leex
+++ b/lib/bones73k_web/live/user_management/index.html.leex
@@ -22,24 +22,47 @@
 </h2>
 
 <%# filtering and new item creation %>
-<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-end mb-3">
+<div class="row justify-content-between align-items-start align-items-sm-end mb-3">
 
+  <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
   <%= live_patch to: Routes.user_management_index_path(@socket, :new, Enum.into(@query, [])),
       class: "btn btn-primary mb-3 mb-sm-0" do %>
     <%= icon_div @socket, "bi-person-plus", [class: "icon baseline me-1"] %>
     New User
   <% end %>
+  </div>
 
+  <div class="col-12 d-block d-sm-none">
+  <%= form_for :sort, "#", [phx_change: "sort-by-change"], fn srt -> %>
+    <%= label srt, :sort_by, class: "visually-hidden" %>
+    <div class="input-group inner-addon left-addon mb-3 mb-sm-0">
+      <%= icon_div @socket, "bi-arrow-down-up", [class: "icon is-left text-muted fs-5", style: "z-index:1001;"], [style: "padding: 1px;"] %>
+      <%= Phoenix.HTML.Form.select srt, :sort_by, ["Email": "email", "Role": "role", "Created at": "inserted_at"], value: @query.sort_by, class: "form-select" %>
+      <button class="btn btn-primary" type="button" aria-label="Change sort order" phx-click="sort-order-change">
+      <%= icon_div @socket, (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"), [class: "icon baseline"] %>
+      </button>
+    </div>
+  <% end %>
+  </div>
+
+  <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
   <%= form_for :filter, "#", [phx_change: "filter-change"], fn flt -> %>
+    <%= label flt, :filter, class: "visually-hidden" %>
     <div class="inner-addon left-addon right-addon">
       <%= icon_div @socket, "bi-funnel", [class: "icon is-left text-muted fs-5"] %>
       <%= if @query.filter != "" do %>
         <%= icon_div @socket, "bi-x-circle-fill", [class: "icon is-right text-primary fs-5"], [role: "img", aria_hidden: false, aria_label: "Clear filter", class: "cursor-pointer pe-auto", phx_click: "filter-clear"] %>
       <% end %>
-      <%= text_input flt, :filter, name: "filter", class: "form-control", placeholder: "Filter users...", value: @query.filter %>
+      <%= text_input flt, :filter,
+          name: "filter",
+          value: @query.filter,
+          class: "form-control",
+          placeholder: "Filter users",
+          aria_label: "Filter users"
+        %>
     </div>
   <% end %>
-
+  </div>
 </div>
 
 <%# mobile data cards %>
@@ -65,13 +88,8 @@
             <dd class="col-sm-9"><%= dt_out(user.inserted_at) %></dd>
             <dt class="col-sm-3">
               Confirmed?
-              <%= if user.confirmed_at do %>
-                <span class="visually-hidden">Yes</span>
-                <%= icon_div @socket, "bi-check", [class: "icon baseline fs-4 text-success"], [role: "img", aria_hidden: false] %>
-              <% else %>
-                <span class="visually-hidden">No</span>
-                <%= icon_div @socket, "bi-x", [class: "icon baseline fs-4 text-warning"], [role: "img", aria_hidden: false] %>
-              <% end %>
+              <span class="visually-hidden"><%= user.confirmed_at && "Yes" || "No" %></span>
+              <input type="checkbox" class="form-check-input ms-1" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %>>
             </dt>
           </dl>
 
@@ -150,13 +168,8 @@
             <td class="align-middle"><%= user.role |> Atom.to_string() |> String.capitalize() %></td>
             <td class="align-middle" style="white-space: nowrap;"><%= dt_out(user.inserted_at) %></td>
             <td class="align-middle">
-              <%= if user.confirmed_at do %>
-                <span class="visually-hidden">Yes</span>
-                <%= icon_div @socket, "bi-check", [class: "icon baseline fs-4 text-success"], [role: "img", aria_hidden: false] %>
-              <% else %>
-                <span class="visually-hidden">No</span>
-                <%= icon_div @socket, "bi-x", [class: "icon baseline fs-4 text-warning"], [role: "img", aria_hidden: false] %>
-              <% end %>
+              <span class="visually-hidden"><%= user.confirmed_at && "Confirmed" || "Not confirmed" %></span>
+              <input type="checkbox" class="form-check-input" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %>>
             </td>
             <td class="align-middle text-end text-nowrap">