Add folder, directory, and search pages

CHANGELOG.md

@@ -6,9 +6,11 @@
   - Add contact page
   - Add version page
   - Add dashboard
+  - Add directory
   - Add randomization report
   - Add data health page
   - Add report card page
+  - Add search page
 - **Admin Changes**
   - Add admin dashboard
   - Add user role management

Gemfile

@@ -17,6 +17,7 @@ gem "font-awesome-sass",       "~> 5.2.0"
 gem "haml",                    "~> 5.0.4"
 gem "jquery-rails",            "~> 4.3.3"
 gem "kaminari",                "~> 1.1.1"
+gem "pg_search",               "~> 2.1.2"
 
 # Rails defaults
 gem "bootsnap",                ">= 1.1.0", require: false

Gemfile.lock

@@ -152,6 +152,10 @@ GEM
       mini_portile2 (~> 2.3.0)
     orm_adapter (0.5.0)
     pg (1.0.0)
+    pg_search (2.1.2)
+      activerecord (>= 4.2)
+      activesupport (>= 4.2)
+      arel (>= 6)
     popper_js (1.14.3)
     public_suffix (3.0.2)
     puma (3.12.0)
@@ -267,6 +271,7 @@ DEPENDENCIES
   kaminari (~> 1.1.1)
   listen (>= 3.0.5, < 3.2)
   pg (>= 0.18, < 2.0)
+  pg_search (~> 2.1.2)
   puma (~> 3.11)
   rails (= 5.2.1)
   sass-rails (~> 5.0)

app/assets/stylesheets/components/alignment.scss

@@ -0,0 +1,30 @@
+.nowrap {
+  white-space: nowrap;
+}
+
+.overflow-hidden,
+.overflow-hover {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.overflow-hover {
+  @media (hover) {
+    &:hover {
+      overflow: visible;
+    }
+  }
+}
+
+.breakword {
+  word-break: break-word;
+
+  code {
+    white-space: pre-wrap;
+  }
+}
+
+.center-horizontally {
+  display: flex;
+  justify-content: center;
+}

app/assets/stylesheets/components/all.scss

@@ -1,3 +1,4 @@
+@import 'components/alignment';
 @import 'components/body';
 @import 'components/breadcrumbs';
 @import 'components/contact';

app/assets/stylesheets/extensions/all.scss

@@ -8,4 +8,5 @@
 @import 'extensions/links';
 @import 'extensions/menu';
 @import 'extensions/navbars';
+@import 'extensions/pagination';
 @import 'extensions/text';

app/assets/stylesheets/extensions/pagination.scss

@@ -0,0 +1,41 @@
+@each $name, $theme in $themes {
+  .theme-#{$name}-bg {
+    @if map-get($theme, link-color) {
+      .page-item.active {
+        .page-link {
+          background-color: map-get($theme, link-color);
+          border-color: map-get($theme, link-color);
+          color: map-get($theme, brand-white);
+        }
+      }
+      .page-link {
+        color: map-get($theme, link-color);
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: map-get($theme, link-color);
+          text-decoration: none;
+        }
+      }
+    } @else {
+      .page-item.active {
+        .page-link {
+          background-color: map-get($theme, primary);
+          border-color: map-get($theme, primary);
+          color: map-get($theme, brand-white);
+        }
+      }
+      .page-link {
+        color: map-get($theme, primary);
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: map-get($theme, primary);
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}

app/controllers/internal_controller.rb

@@ -10,11 +10,34 @@ class InternalController < ApplicationController
   # def dashboard
   # end
 
+  # GET /directory
+  def directory
+    scope = User.current.search(params[:search], match_start: false)
+    @users = scope_order(scope).page(params[:page]).per(20)
+  end
+
+  # # GET /folder
+  # def folder
+  # end
+
   # # GET /reports
   # def reports
   # end
 
   # # GET /data-health
   # def data_health
   # end
+
+  # GET /search
+  def search
+    @search_documents = PgSearch.multisearch(params[:search]).page(params[:page]).per(10)
+    render layout: "layouts/full_page"
+  end
+
+  private
+
+  def scope_order(scope)
+    @order = params[:order]
+    scope.order(Arel.sql(User::ORDERS[params[:order]] || User::DEFAULT_ORDER))
+  end
 end

app/models/user.rb

@@ -33,6 +33,13 @@ def self.searchable_attributes
     %w(full_name email username)
   end
 
+  include PgSearch
+  multisearchable against: [:full_name, :email, :username]
+  # pg_search_scope :search_for, against: [:full_name, :email, :username],
+  #                              using: {
+  #                                tsearch: { prefix: true, any_word: true }
+  #                              }
+
   # Validations
   validates :full_name, presence: true
   validates :full_name, format: { with: /\A.+\s.+\Z/, message: "must include first and last name" }

app/views/admin/dashboard.html.haml

@@ -7,4 +7,4 @@
 
 .dashboard-container
   = render "forms/horizontal/show/generic", title: "Users", content: User.count
-  = render "forms/horizontal/show/generic", title: "Documents", content: -1
+  =# render "forms/horizontal/show/generic", title: "Documents", content: -1

app/views/health/_sidebar.html.haml

@@ -3,6 +3,6 @@
     #sidebar-nav-wrapper.sidebar-nav-wrapper.collapse
       .pt-3.py-md-3.mx-3.my-0.ml-md-3.mb-md-3.mr-md-0
         %ul.sidebar-menu.sidebar-menu-shadow
-          %li.sidebar-menu-header= render "sidebar/toggle", title: "Loft-HF"
+          %li.sidebar-menu-header= render "sidebar/toggle", title: ENV["website_name"]
           %li= link_to "Data health", data_health_path, class: current_page?(data_health_path) ? "active" : nil
           %li= link_to "Report card", report_card_path, class: current_page?(report_card_path) ? "active" : nil

app/views/internal/_sidebar.html.haml

@@ -1,7 +1,19 @@
 .col-12.col-md-3.col-xl-2.sidebar-wrapper
   .sidebar
-    #sidebar-nav-wrapper.sidebar-nav-wrapper.collapse
-      .pt-3.py-md-3.mx-3.my-0.ml-md-3.mb-md-3.mr-md-0
+    #sidebar-nav-wrapper.sidebar-nav-wrapper.collapse.pt-3.py-md-3
+      .mx-3.my-0.ml-md-3.mb-md-3.mr-md-0
         %ul.sidebar-menu.sidebar-menu-shadow
-          %li.sidebar-menu-header= render "sidebar/toggle", title: "Loft-HF"
+          %li.sidebar-menu-header= render "sidebar/toggle", title: ENV["website_name"]
           %li= link_to "Dashboard", dashboard_path, class: current_page?(dashboard_path) ? "active" : nil
+          %li= link_to "Directory", directory_path, class: current_page?(directory_path) ? "active" : nil
+
+      .mx-3.my-0.ml-md-3.mb-md-3.mr-md-0
+        %ul.sidebar-menu.sidebar-menu-shadow
+          %li.sidebar-menu-header Documents
+          %li= link_to "Manual of Procedures", folder_path(title: "Manual of Procedures"), class: current_page?(folder_path(title: "Manual of Procedures")) ? "active" : nil
+
+      - if false
+        .mx-3.my-0.ml-md-3.mb-md-3.mr-md-0
+          %ul.sidebar-menu.sidebar-menu-shadow
+            %li.sidebar-menu-header DSMB Reports
+            %li= link_to "Subset B", folder_path(title: "b"), class: current_page?(folder_path(title: "b")) ? "active" : nil

app/views/internal/_tabs.html.haml

@@ -1,5 +1,5 @@
 - content_for :tabs do
-  - current_page = params[:controller].in?(%w(internal)) && params[:action].in?(%w(dashboard))
+  - current_page = params[:controller].in?(%w(internal)) && params[:action].in?(%w(dashboard directory folder))
   = link_to dashboard_path, class: "header-tab #{"header-tab-active" if current_page}", data: { object: "#{"suppress-click" if current_page?(dashboard_path)}" } do
     = icon("fas", "home")
     - if current_page
@@ -23,6 +23,14 @@
     - else
       .d-none.d-sm-inline Data Health
 
+  - current_page = params[:controller].in?(%w(internal)) && params[:action].in?(%w(search))
+  = link_to search_path, class: "header-tab #{"header-tab-active" if current_page}", data: { object: "#{"suppress-click" if current_page?(search_path)}" } do
+    = icon("fas", "search")
+    - if current_page
+      Search
+    - else
+      .d-none.d-sm-inline Search
+
   - if false
     - current_page = params[:controller].in?(%w(settings))
     - settings_profile_path = dashboard_path # TODO: Remove (and implement settings_profile_path)

app/views/internal/dashboard.html.haml

@@ -11,7 +11,6 @@
     = ENV["website_name"]
     website!
 
-
   .jumbotron-custom-text
     .mb-3
       = icon("fas", "chart-area", class: "text-primary")

app/views/internal/directory.html.haml

@@ -0,0 +1,33 @@
+- @title = "Directory"
+
+- @theme = "default"
+- content_for :header, @title
+= render "internal/tabs"
+- content_for :sidebar, render("internal/sidebar")
+
+- if @users.present?
+  .dashboard-container.dashboard-table
+    %table.table.table-striped.table-borderless.table-hover.table-sticky
+      %col
+      %thead
+        %tr
+          %th Name
+          %th Email
+
+      - @users.each do |user|
+        %tr
+          %td= user.full_name
+          %td= user.email
+
+  .center-horizontally= paginate @users, theme: "bootstrap"
+
+  .jumbotron.jumbotron-custom-text.jumbotron-shadow
+    = icon("far", "comments")
+    = mail_to ActionMailer::Base.smtp_settings[:email], "Contact us"
+    if your listed information is incorrect.
+
+- else
+  .jumbotron.jumbotron-custom-text
+    = icon("fas", "clone", class: "mr-1")
+    No users found.
+    = link_to "Start over", directory_path if params[:search].present?

app/views/internal/folder.html.haml

@@ -0,0 +1,42 @@
+- @title = "Folder"
+
+- @theme = "default"
+- content_for :header, @title
+= render "internal/tabs"
+- content_for :sidebar, render("internal/sidebar")
+
+.dashboard-container.dashboard-container-border-accent
+  .d-inline-block.mr-1= icon("far", "file-alt")
+  .d-inline{ style: "font-weight: 200;" }= params[:title]
+
+.dashboard-container.dashboard-table
+  %table.table.table-striped.table-borderless.table-hover.table-sticky
+    %col
+    %col
+    %col{ width: "1px" }
+    %thead
+      %tr
+        %th File
+        %th.text-center Size
+        %th.text-center Uploaded
+    %tr
+      %td
+        %span.text-primary Introduction.pdf
+        %small.text-muted (download disabled)
+      %td.text-center.small
+        = number_to_human_size 202049
+      %td.text-center.nowrap.small
+        = (Time.zone.now - 1.day).strftime("%Y-%^b-%d")
+    %tr
+      %td
+        %span.text-primary MOP-Final-revision.pdf
+        %small.text-muted (download disabled)
+      %td.text-center.small
+        = number_to_human_size 4022049
+      %td.text-center.nowrap.small
+        = (Time.zone.now - 2.day).strftime("%Y-%^b-%d")
+
+.jumbotron.jumbotron-custom-text.jumbotron-shadow
+  = icon("fas", "info-circle")
+
+  Not finding a specific file? Use the search to find it more quickly.

app/views/internal/search.html.haml

@@ -0,0 +1,66 @@
+- @title = "Search"
+
+- @theme = "default"
+= render "internal/tabs"
+- @container = "container-fluid"
+
+.page-box.p-0.last-box.d-flex.flex-column.justify-content-between
+  %div
+    .header-container{ class: content_for?(:tabs) ? "header-container-no-border" : nil }
+      .container-fluid
+        %h1.page-heading
+          = @title
+    .header-tabs
+      .container-fluid
+        = yield :tabs
+
+    .row.no-gutters.flex-md-nowrap.theme-custom-spacing
+      %main.col.p-3.remove-last-margin{ role: "main" }
+        .container
+          = form_with url: search_path, method: :get, local: true, id: "search-form", class: "my-3", skip_enforcing_utf8: true do |form|
+            .input-group
+              = form.text_field :search, value: params[:search], class: "form-control form-control-lg", placeholder: "Start your search...", autocomplete: "off", autofocus: params[:search].blank?
+              .input-group-append
+                = link_to "#", class: "btn btn-lg btn-primary", data: { object: "submit-and-disable", target: "#search-form" } do
+                  %i.fa.fa-search
+
+          - if @search_documents.present?
+            - @search_documents.each do |document|
+              .dashboard-container.dashboard-container-border-accent
+                - case document.searchable.class.to_s
+                - when "User"
+                  .d-flex.align-items-center
+                    .d-inline-block.mr-1.text-primary-muted.pr-3= icon("far", "user", class: "fa-3x")
+                    .d-inline{ style: "font-weight: 200;" }
+                      .text-dark= document.searchable.full_name
+                      .text-muted
+                        = document.searchable.email
+                - else
+                  .d-inline-block.mr-1= icon("far", "file-alt")
+                  .d-inline.text-muted{ style: "font-weight: 200;" } File
+          - elsif params[:search].present?
+            .mt-5.mb-4.text-center{ style: "font-weight: 300;font-size: 1.25rem;" }
+              No results returned.
+              = link_to "Start over.", search_path
+          - else
+            .mt-5.mb-4.text-center.text-primary-muted{ style: "font-weight: 300;font-size: 1.25rem;" } Search for files and users.
+
+
+  .py-5.footer-custom-bg
+    .container
+      .lead.text-center.mb-5
+        = icon("far", "comments")
+
+        = mail_to ActionMailer::Base.smtp_settings[:email], "Contact us"
+        with any questions.
+
+        - if false
+          Have another question?
+
+          = link_to contact_path do
+            %span.nowrap
+              Contact us
+              %i.fa.fa-caret-right
+
+        .text-center
+          .text-center.pt-5= image_tag "logos/loft-logo-v1.png", style: "max-width: 400px;width: 100%;height: auto;", class: "img-ignore-selection rounded"

app/views/reports/_sidebar.html.haml

@@ -3,5 +3,5 @@
     #sidebar-nav-wrapper.sidebar-nav-wrapper.collapse
       .pt-3.py-md-3.mx-3.my-0.ml-md-3.mb-md-3.mr-md-0
         %ul.sidebar-menu.sidebar-menu-shadow
-          %li.sidebar-menu-header= render "sidebar/toggle", title: "Loft-HF"
+          %li.sidebar-menu-header= render "sidebar/toggle", title: ENV["website_name"]
           %li= link_to "Reports", reports_path, class: current_page?(reports_path) ? "active" : nil