cm-admin 0.3.0 → 0.4.0

data/app/assets/stylesheets/cm_admin/components/_dropdown-popup.scss

@@ -1,10 +1,10 @@
 @import "../helpers/index.scss";
 
 .dropdown-popup {
-  width: 256px;
+  border: none !important;
   .popup-base {
     position: absolute;
-    width: 256px;
+    min-width: 256px;
     height: 56px;
     padding: 8px;
     background: $white;
@@ -14,7 +14,7 @@
   }
   .popup-inner {
     position: relative;
-    width: 240px;
+    min-width: 240px;
     margin: 0 auto;
     background-color: $white;
     border: 1px solid #e0e0e0;
@@ -24,14 +24,16 @@
       input {
         width: 100%;
         min-height: 40px;
-        padding: 9px 16px 9px 16px;
+        padding: 9px 16px;
         font-size: $t4-text;
         border: none;
+        border-radius: 4px 4px 0 0;
         &::placeholder {
           color: $ink-lightest-clr;
         }
         &:focus {
-          outline: 3px auto rgba(47, 128, 237, 0.3);
+          outline: none;
+          border: 1px solid $brand-color;
         }
       }
     }
@@ -47,11 +49,11 @@
         background: $grey-lighter-clr;
         border-radius: $radius-4;
         span:nth-child(1) {
-          @include font($size: $t4-text, $color: $primary-text-clr); 
+          @include font($size: $t4-text, $color: $primary-text-clr);
           line-height: 22px;
         }
         span:nth-child(2) {
-          @include font($size: 10px, $color: $ink-lightest-clr); 
+          @include font($size: 10px, $color: $ink-lightest-clr);
           margin-left: 4px;
           cursor: pointer;
         }
@@ -73,11 +75,20 @@
         display: flex;
         align-items: center;
         padding: 9px 16px;
+        @include font($size: $t4-text, $color: $primary-text-clr);
+        line-height: 22px;
         label {
-          @include font($size: $t4-text, $color: $primary-text-clr); 
-          line-height: 22px;
           margin: 0 0 0 8px;
         }
+        &:hover {
+          background: $grey-lighter-clr;
+          &:nth-last-child(1) {
+            border-radius: 0 0 4px 4px;
+          }
+        }
+      }
+      .selected {
+        color: $brand-color;
       }
     }
     .apply-area {
@@ -86,8 +97,9 @@
       text-align: center;
       padding: 9px 16px;
       box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.15);
-      cursor: pointer;
+      cursor: not-allowed;
       &.active {
+        cursor: pointer;
         color: $blue-regular-clr;
       }
     }

data/app/assets/stylesheets/cm_admin/components/_range.scss

@@ -2,7 +2,7 @@
 
 .range-container {
   display: flex;
-  width: 360px;
+  width: 424px;
   height: 54px;
   padding: 8px;
   background: $white;
@@ -10,11 +10,22 @@
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
   border-radius: $radius-4;
   .range-item {
+    width: 200px;
+    border: 1px solid $grey-light-clr;
+    border-radius: $radius-4;
+    padding: 8px 0 8px 16px;
     &:nth-child(1) {
       margin-right: 4px;
     }
     &:nth-child(2) {
       margin-left: 4px;
     }
+    &:hover {
+      border: 1px solid $grey-dark-clr;
+    }
+    &:focus {
+      outline: none;
+      border: 1px solid $brand-color;
+    }
   }
-}
+}

data/app/assets/stylesheets/cm_admin/components/_status-tag.scss

@@ -37,6 +37,7 @@
   border-radius: $radius-4;
   @include transition-linear;
   cursor: pointer;
+  user-select: none;
   &:hover {
     background-color: #F3F4F6;
     .filter-chip-remove {
@@ -64,4 +65,4 @@
       color: $ink-lighter-clr;
     }
   }
-}
+}

data/app/assets/stylesheets/cm_admin/helpers/_variable.scss

@@ -35,6 +35,7 @@ $grey-regular-clr: #C7CED5;
 $grey-light-clr: #D9DEE3;
 $grey-lighter-clr: #F3F4F6;
 $grey-lightest-clr: #F8F9FA;
+$grey-dark-clr: #828282;
 
 /* Ink Colors */
 $ink-regular-clr: #1D2129;

data/app/controllers/cm_admin/application_controller.rb

@@ -1,6 +1,11 @@
 module CmAdmin
   class ApplicationController < ::ActionController::Base
+    # before_action :check_cm_admin
     layout 'cm_admin'
     helper CmAdmin::ViewHelpers
+
+    def check_cm_admin
+      redirect_to CmAdmin::Engine.mount_path + '/access-denied' unless defined?(::Current) && ::Current.cm_admin_user
+    end
   end
 end

data/app/controllers/cm_admin/exports_controller.rb

@@ -8,7 +8,7 @@ module CmAdmin
   class ExportsController < ApplicationController
 
     def export
-      file_path = CmAdmin::Models::Export.generate_excel(params[:class_name], params[:columns])
+      file_path = CmAdmin::Models::Export.generate_excel(params[:class_name], params[:columns], helpers)
       send_file file_path, disposition: 'attachment'
     end
 

data/app/controllers/cm_admin/static_controller.rb

@@ -0,0 +1,12 @@
+module CmAdmin
+  class StaticController < ::ActionController::Base
+    layout 'static'
+
+    def dashboard
+    end
+
+    def error_403
+      
+    end
+  end
+end

data/app/helpers/cm_admin/custom_helper.rb

@@ -0,0 +1,4 @@
+module CmAdmin
+  module CustomHelper
+  end
+end

data/app/javascript/packs/cm_admin/application.js

@@ -1,9 +1,22 @@
 require("@rails/ujs").start()
 require("turbolinks").start()
 require("@rails/activestorage").start()
+require("stylesheets/cm_admin/application")
 require("jquery")
+require("moment")
+require("bootstrap")
+require('flatpickr')
 require('./scaffolds.js')
+require('./quick_search.js')
 require('./filters.js')
 
+import jQuery from 'jquery'
+window.$ = jQuery
+window.jQuery = jQuery
+
+require("@nathanvda/cocoon")
 import "@fortawesome/fontawesome-free/css/all"
-import "bootstrap/dist/js/bootstrap"
+import "daterangepicker"
+
+
+

data/app/javascript/packs/cm_admin/filters.js

@@ -1,27 +1,58 @@
-var current_request = null;
+var currentRequest = null;
 
-$(document).on('keyup', '.search-input', function(e) {
-  e.stopPropagation();
+// Main method which will structure the existing filter values with the newly
+// applied filter. Send and receive the value from the backend.
+var getFilteredData = function(filterType, filterValue, filterColumn=null) {
   var url = window.location.pathname
-  var search_val = $(this).val();
-  var filter_params = {};
-  if (search_val) {
-    filter_params['search'] = search_val
-  }
-  // TODO add page and sort params in the query_string
-  query_string = {
-    filters: filter_params
+
+  // Based on the value changed for recent filter generate the filterParams hash
+  var filterParams = {};
+  if (filterColumn) {
+    filterParams[filterType] = {};
+    filterParams[filterType][filterColumn] = filterValue
+  } else {
+    filterParams[filterType] = filterValue
+  }
+
+  // TODO add sort params in the queryString
+  // page params is reinitialized to 1 when any new filter value is applied so
+  // that it won't throw the error when the user doesn't have sufficent data
+  // to display on the table.
+  var queryString = {
+    filters: filterParams,
+    page: 1
   };
-  return current_request = $.ajax(url, {
+
+  // Generate the queryString by concatenating the filterParams and
+  // searchParams that are already applied, if searchParams are present.
+  var searchParams = window.location.search
+  if (searchParams.length > 0) {
+    // Delete the previous applied value for multi_select filter from the
+    // searchParams as altering the array with new and old value will create
+    // more complicated logic. The new value is passed and structured in
+    // filterParams and will be concadinated with the searchParams post deletion
+    if (filterType == 'multi_select') {
+      searchParams = getParamsAsObject(searchParams)
+      if (searchParams['filters'][filterType] != undefined) {
+        delete(searchParams['filters'][filterType][filterColumn])
+      }
+      searchParams = jQuery.param(searchParams)
+    }
+    filterParams = jQuery.param(queryString)
+    var availableParams = searchParams + '&' + filterParams
+    queryString = getParamsAsObject(availableParams)
+  }
+
+  return currentRequest = $.ajax(url, {
     type: 'GET',
-    data: query_string,
+    data: queryString,
     beforeSend: function() {
-      if (current_request !== null) {
-        current_request.abort();
+      if (currentRequest !== null) {
+        currentRequest.abort();
       }
     },
     success: function(data) {
-      var queryParam = jQuery.param(query_string)
+      var queryParam = jQuery.param(queryString)
       window.history.pushState("", "", url + '?' + queryParam);
       $('.index-page__table-container').html(data);
     },
@@ -29,4 +60,288 @@ $(document).on('keyup', '.search-input', function(e) {
       console.log(errorThrown, textStatus);
     }
   });
+}
+
+$(document).on('change', '[data-behaviour="filter"]', function(e) {
+  var filterType = $(this).data('filter-type')
+  var filterColumn = $(this).data('db-column')
+
+  if (filterType == 'range') {
+    var rangeElements = $(this).parent().children()
+    var filterValue = $(rangeElements[0]).val() + ' to ' + $(rangeElements[1]).val()
+  } else {
+    var filterValue = $(this).val()
+  }
+
+  $(this).parents(':nth(1)').children(':first').children(':nth(1)').text(filterValue)
+  $(this).parents(':nth(1)').children(':first').children(':last').removeClass('hidden')
+
+  unhideClearFilterBtn(filterValue)
+  getFilteredData(filterType, filterValue, filterColumn)
+});
+
+$(document).on('keyup', '[data-behaviour="input-search"]', function(e) {
+  e.stopPropagation();
+
+  var searchValue = $(this).val();
+  unhideClearFilterBtn(searchValue)
+  getFilteredData('search', searchValue)
+});
+
+$(document).on('click', '[data-behaviour="filter-option"]', function(e) {
+  var filterType = $(this).data('filter-type')
+  var filterColumn = $(this).data('db-column')
+
+  // Clear the search value post selection and regenerate the dropdown elements.
+  var searchInputElement = $(this).parents(':nth(1)').children(':first').children()
+  searchInputElement.val('')
+  CmFilter.dropdown_search(searchInputElement)
+
+  unhideFilter(filterType, filterColumn)
+});
+
+var unhideFilter = function(filterType, filterColumn) {
+  var filterInputElement = $('[data-behaviour="filter-input"][data-filter-type=' + filterType + '][data-db-column='+ filterColumn + ']')
+
+  filterInputElement.parent().removeClass('hidden');
+  filterInputElement.click()
+};
+
+// Search inside the dropdowns
+$(document).on('keyup', '[data-behaviour="dropdown-filter-search"]', function(e) {
+  CmFilter.dropdown_search($(this))
+});
+
+// Method to decode the encoded nested and/or complex hash and convert it to
+// object that is used for filters while sending the data to the backend.
+var getParamsAsObject = function (query) {
+  query = query.substring(query.indexOf('?') + 1);
+
+  var re = /([^&=]+)=?([^&]*)/g;
+  var decodeRE = /\+/g;
+
+  var decode = function (str) {
+    return decodeURIComponent(str.replace(decodeRE, " "));
+  };
+
+  var params = {}, e;
+  while (e = re.exec(query)) {
+    var k = decode(e[1]), v = decode(e[2]);
+    if (k.substring(k.length - 2) === '[]') {
+      k = k.substring(0, k.length - 2);
+      (params[k] || (params[k] = [])).push(v);
+    }
+    else params[k] = v;
+  }
+
+  var assign = function (obj, keyPath, value) {
+    var lastKeyIndex = keyPath.length - 1;
+    for (var i = 0; i < lastKeyIndex; ++i) {
+      var key = keyPath[i];
+      if (!(key in obj))
+        obj[key] = {}
+      obj = obj[key];
+    }
+    obj[keyPath[lastKeyIndex]] = value;
+  }
+
+  for (var prop in params) {
+    var structure = prop.split('[');
+    if (structure.length > 1) {
+      var levels = [];
+      structure.forEach(function (item, i) {
+        var key = item.replace(/[?[\]\\ ]/g, '');
+        levels.push(key);
+      });
+      assign(params, levels, params[prop]);
+      delete(params[prop]);
+    }
+  }
+  return params;
+};
+
+$(document).on('click', '[data-behaviour="filter-input"]', function(e) {
+  var filterType = $(this).data('filter-type')
+  var filterColumn = $(this).data('db-column')
+
+  var filterElement = $('[data-behaviour="filter"][data-filter-type=' + filterType + '][data-db-column=' + filterColumn +']')
+
+  if (filterType == 'range') {
+    filterElement.parent().toggleClass('hidden')
+  } else if (filterType == 'multi_select') {
+    $(this).parent().children(':last').toggleClass('hidden')
+  } else if (filterType == 'date') {
+    filterElement.click()
+  }
+})
+
+// Remove all the applied filters and reload the page
+$(document).on('click', '.clear-btn', function(e) {
+  window.location.href = window.location.href.split("?")[0]
+})
+
+var unhideClearFilterBtn = function(filterValue) {
+  if (filterValue) {
+    $('.clear-btn').removeClass('hidden')
+  }
+}
+
+// Selecting options for single and multi select filters
+$(document).on('click', '[data-behaviour="select-option"]', function(e) {
+  var filterType = $(this).data('filter-type')
+  var filterColumn = $(this).data('db-column')
+
+  if (filterType == 'single_select') {
+    var filterValue = $(this).data('value')
+    if (!this.classList.contains('selected')) {
+      if (this.parentNode.querySelector('.list-item.selected') != null) {
+        this.parentNode.querySelector('.list-item.selected').classList.remove('selected');
+      }
+      $(this).addClass('selected')
+    }
+
+    $(this).parents(':nth(4)').children(':first').children(':nth(1)').text(filterValue)
+    $(this).parents(':nth(4)').children(':first').children(':last').removeClass('hidden')
+
+    // Clear the search value post selection and regenerate the dropdown elements.
+    var searchInputElement = $(this).parents(':nth(1)').children(':first').children()
+    searchInputElement.val('')
+    CmFilter.dropdown_search(searchInputElement)
+
+    unhideClearFilterBtn(filterValue)
+    getFilteredData(filterType, filterValue, filterColumn)
+  }
+  else if (filterType == 'multi_select') {
+    var parentChip = $(this).parent().siblings(':first')
+    var checkboxElement = $(this).find('.cm-checkbox')
+    checkboxElement.prop('checked', !checkboxElement.prop('checked'))
+    var checkedCount = $(this).parent().find('.cm-checkbox').filter(':checked').length
+
+    if (checkboxElement.prop('checked')) {
+      var chip = $('<div class="chip"></div>')
+      var firstSpan = $('<span></span>').text($(this).data('value'))
+      var secondSpan = $('<span data-behaviour="selected-chip"><i class="fa fa-times"></i></span>')
+      parentChip.prepend(chip.append(firstSpan).append(secondSpan))
+    } else {
+      var chipElement = parentChip.find('.chip')
+      for(var i = 0; i < chipElement.length; i++) {
+        if ($(chipElement[i]).text() == $(this).data('value')) {
+          $(chipElement[i]).remove()
+          break
+        }
+      }
+    }
+
+    if (checkedCount > 0) {
+      parentChip.addClass('search-with-chips').removeClass('search-area')
+      $(this).parents(':nth(1)').children(':last').addClass('active')
+    } else {
+      parentChip.addClass('search-area').removeClass('search-with-chips')
+      $(this).parents(':nth(1)').children(':last').removeClass('active')
+    }
+  }
+});
+
+// Apply button for multi select filters
+$(document).on('click', '.apply-area', function(e) {
+  var filterInputElement = $(this).parents(':nth(3)').children(':first')
+  var filterType = filterInputElement.data('filter-type')
+  var filterColumn = filterInputElement.data('db-column')
+  var filterValue = []
+
+  var selectFilterElement = $('[data-behaviour="select-option"][data-filter-type=' + filterType + '][data-db-column=' + filterColumn + ']')
+  var checkedElements = selectFilterElement.find('.cm-checkbox').filter(':checked')
+
+  if (checkedElements.length > 0) {
+    for(var i = 0; i < checkedElements.length; i++) {
+      filterValue.push($(checkedElements[i]).parent().data('value'))
+    }
+
+    truncatedFilterValue = filterValue[0]
+    if (filterValue.length > 1) {
+      truncatedFilterValue += ' + ' + (filterValue.length - 1) + ' more'
+    }
+
+    filterInputElement.children(':nth(1)').text(truncatedFilterValue)
+    filterInputElement.children(':last').removeClass('hidden')
+    selectFilterElement.parents(':nth(3)').addClass('hidden')
+
+    // Clear the search value post selection and regenerate the dropdown elements.
+    var searchInputElement = $(this).parent().children(':first').children(':last')
+    searchInputElement.val('')
+    CmFilter.dropdown_search(searchInputElement)
+
+    unhideClearFilterBtn(filterValue)
+    getFilteredData(filterType, filterValue, filterColumn)
+  }
+});
+
+// Remove single applied filter.
+$(document).on('click', '.filter-chip-remove', function(e) {
+  var url = window.location.pathname
+  var filterType = $(this).parent().data('filter-type')
+  var filterColumn = $(this).parent().data('db-column')
+
+  var searchParams = window.location.search
+  if (searchParams.length > 0) {
+    queryString = getParamsAsObject(searchParams)
+    if (queryString['filters'][filterType] != undefined) {
+      delete(queryString['filters'][filterType][filterColumn])
+      var queryParam = jQuery.param(queryString)
+      window.history.pushState("", "", url + '?' + queryParam);
+      window.location.reload()
+    }
+  }
 });
+
+$(document).on('click', '[data-behaviour="selected-chip"]', function(e) {
+  var filterType = $(this).parents(':nth(5)').find('.filter-chip').data('filter-type')
+  var filterColumn = $(this).parents(':nth(5)').find('.filter-chip').data('db-column')
+  var filterValue = $(this).siblings().text()
+
+  var selectElement = $('[data-behaviour="select-option"][data-filter-type=' + filterType + '][data-db-column=' + filterColumn + ']')
+  $(this).parent().remove()
+
+  for(var i = 0; i < selectElement.length; i++) {
+    if ($(selectElement[i]).data('value') == filterValue) {
+      var checkboxElement = $(selectElement[i]).find('.cm-checkbox')
+      checkboxElement.prop('checked', !checkboxElement.prop('checked'))
+      break
+    }
+  }
+
+  var checkedCount = $(selectElement).find('.cm-checkbox').filter(':checked').length
+  if (checkedCount < 1) {
+    $(selectElement).parent().siblings(':first').addClass('search-area').removeClass('search-with-chips')
+    $(selectElement).parent().siblings(':last').removeClass('active')
+  }
+})
+
+CmFilter = {
+  // Generate or remove elements of the dropdown based on the search value.
+  dropdown_search: function(element) {
+    var filter = element.val().toUpperCase();
+    var dropdownElements = element.parents(':nth(1)').find('.list-area').children();
+    for (var i = 0; i < dropdownElements.length; i++) {
+      txtValue = $(dropdownElements[i]).children().text();
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        $(dropdownElements[i]).css('display', 'flex');
+      } else {
+        $(dropdownElements[i]).css('display', 'none');
+      }
+    }
+  },
+  quick_input_search: function(element) {
+    var filter = element.val().toUpperCase();
+    var searchElements = element.parents(':nth(3)').find('.list-area').children();
+    searchElements.removeClass('visible').addClass('hidden')
+    console.log("Filter is ", filter)
+    console.log("Search elements are ", searchElements)
+    for (var i = 0; i < searchElements.length; i++) {
+      txtValue = $(searchElements[i]).children().text();
+      if (txtValue.toUpperCase().indexOf(filter) > -1) {
+        $(searchElements[i]).removeClass('hidden').addClass('visible');
+      }
+    }
+  }
+}