WIP: Add basic structure for user ZingGrid table

.ruby-gemset

@@ -0,0 +1 @@
+codefund

app/controllers/users_controller.rb

@@ -10,12 +10,23 @@ class UsersController < ApplicationController
   skip_before_action :authenticate_administrator!, if: -> { params[:redir].present? }
 
   def index
-    users = User.includes(:avatar_attachment, :organization).include_image_count.order(order_by)
-    users = @user_search.apply(users)
-    users = users.where(organization: @organization) if @organization
-    @pagy, @users = pagy(users)
+    respond_to do |format|
+      format.html do
+        users = User.includes(:avatar_attachment, :organization).include_image_count
+        users = @user_search.apply(users)
+        users = users.where(organization: @organization) if @organization
+        @user_count = users.size
+
+        render "/users/for_organization/index" if @organization
+      end
 
-    render "/users/for_organization/index" if @organization
+      format.json do
+        users = User.includes(:avatar_attachment, :organization).include_image_count.order(order_by)
+        users = @user_search.apply(users)
+        users = users.where(organization: @organization) if @organization
+        @pagy, @users = pagy(users)
+      end
+    end
   end
 
   def new

app/javascript/src/app/theme.js

@@ -41,7 +41,9 @@ import 'theme/js/components/hs.step-form';
 
 // theme initialization
 document.addEventListener('turbolinks:load', () => {
-  jQuery('[data-toggle="tooltip"]').tooltip();
+  jQuery('body').tooltip({
+    selector: '[data-toggle="tooltip"]'
+  });
   jQuery.HSCore.components.HSHeader.init(jQuery('#header'));
   jQuery.HSCore.components.HSUnfold.init(jQuery('[data-unfold-target]'));
   jQuery.HSCore.components.HSGoTo.init('.js-go-to');

app/models/user.rb

@@ -268,6 +268,11 @@ def active_for_authentication?
     super && !blacklisted?
   end
 
+  def avatar_image_url
+    return self.avatar if self.avatar.attached?
+    self.gravatar_url("404")
+  end
+
   # protected instance methods ................................................
   protected
 

app/views/users/_table.html.erb

@@ -1,20 +1,50 @@
-<div class="table-responsive">
-  <table class="table table-striped">
-    <thead>
-      <tr class="border-bottom">
-        <%= sortable_tr "first_name", "Name" %>
-        <th scope="col">Organization</th>
-        <th scope="col">Roles</th>
-        <%= sortable_tr "last_sign_in_at", "Login" %>
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody class="font-size-1">
-      <%= render partial: "/users/tr", collection: users, as: :user %>
-    </tbody>
-  </table>
-  <div class="d-flex justify-content-between align-items-center">
-    <span><%== pagy_bootstrap_nav(pagy) if pagy.pages > 1 %></span>
-    <%= pagy_entries(pagy) %>
+<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
+
+<zing-grid
+  sort
+  page-size='25'
+>
+  <zg-data>
+    <zg-param name='src' value='/users.json'></zg-param>
+    <zg-param name="loadByPage" value="true"></zg-param>
+    <zg-param name="pageKey" value="page"></zg-param>
+    <zg-param name="countPath" value="count"></zg-param>
+    <zg-param name="sortBy" value="column"></zg-param>
+    <zg-param name="sortDirKey" value="direction"></zg-param>
+    <zg-param name="recordPath" value="results"></zg-param>
+    <zg-param name='nextIDPath' value='pagination.next'></zg-param>
+    <zg-param name='prevIDPath' value='pagination.prev'></zg-param>
+    <zg-param name='nextIDKey' value='page'></zg-param>
+    <zg-param name='prevIDKey' value='page'></zg-param>
+    <zg-param name='countPath' value='pagination.count'></zg-param>
+  </zg-data>
+  <zg-column index="full_name" header="Name" renderer-template="renderName"></zg-column>
+  <zg-column index="organization.name" header="Organization" renderer-template='renderOrganization' sort='disabled'></zg-column>
+  <zg-column index="roles" header="Roles" sort='disabled'></zg-column>
+  <zg-column index="last_sign_in_at" header="Login" type="date"></zg-column>
+  <zg-column index="actions" header="&nbsp;" sort='disabled'></zg-column>
+  <zg-pager size-options='25'></zg-pager>
+</zing-grid>
+
+<template id="renderName">
+  <div class="media align-items-center">
+    <span class="u-sm-avatar position-relative mr-3">
+      <!-- need to add a smarter avatar_url method to user to get fallback if needed -->
+      <img src='[[record.avatar_image_url]]' class='img-fluid rounded-circle' alt='[[record.full_name]]' />
+      <!-- add template conditional on record.accepted_or_not_invited -->
+        <!-- <span class="badge badge-md badge-outline-dark badge-pos badge-pos--bottom-right rounded-circle">
+          <span class='fas fa-envelope' title='Pending invitation' data-original-title='Pending invitation' data-toggle='tooltip' data-placement='top'></span>
+        </span> -->
+      <!-- end conditional -->
+    </span>
+    <span>
+      <a href='/users/[[record.id]]' title='View User' data-original-title='View User' data-toggle='tooltip' data-placement='top'>[[record.full_name]]</a>
+      <small class="d-block text-muted">[[record.email]]</small>
+    </span>
   </div>
-</div>
+</template>
+
+<template id="renderOrganization">
+  <!-- need to make tihs conditional on presence of organization -->
+  <a href='/organizations/[[record.organization.id]]'>[[record.organization.name]]</a>
+</template>

app/views/users/for_organization/index.html.erb

@@ -3,5 +3,5 @@
     Members
     <small class="text-muted d-block">Members of the organization</small>
   </h3>
-  <%= render "/users/table", users: @users, pagy: @pagy %>
+  <%= render "/users/table" %>
 <% end %>

app/views/users/index.html.erb

@@ -8,7 +8,7 @@
 
 <% content_for :page_heading do %>
   <%= page_heading "Viewing", "Users",
-    subtitle: "#{pluralize(@pagy.count, "record")} found",
+    subtitle: "#{pluralize(@user_count, "record")} found",
     icon: "fas fa-user-circle" %>
 <% end %>
 
@@ -18,7 +18,7 @@
                layout: "/@shared/collapsable_search_form",
                locals: { search: @user_search } %>
     <div class="bg-white p-4">
-      <%= render "/users/table", users: @users, pagy: @pagy %>
+      <%= render "/users/table" %>
     </div>
   </div>
-</main>
+</main>

app/views/users/index.json.jbuilder

@@ -1,3 +1,14 @@
 # frozen_string_literal: true
 
-json.array! @users, partial: "users/user", as: :user
+json.pagination @pagy
+json.results @users do |user|
+  json.extract! user, :id, :created_at, :updated_at, :last_sign_in_at, :first_name, :email
+  json.full_name user.full_name
+  json.avatar_image_url user.avatar_image_url
+  json.is_advertiser user.advertiser?
+  json.organization user.organization
+  json.accepted_or_not_invited user.accepted_or_not_invited?
+  json.blacklisted user.blacklisted?
+  json.roles user.roles
+  json.gid_param user.to_gid_param
+end

app/views/users/show.json.jbuilder

@@ -1,3 +1,4 @@
 # frozen_string_literal: true
 
-json.partial! "users/user", user: @user
+json.extract! @user, :id, :created_at, :updated_at
+json.url user_url(@user, format: :json)