cm-admin 0.3.0 → 0.4.3

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

@@ -4,23 +4,23 @@
   font-size: $t4-text;
   line-height: 22px;
   padding: 4px;
-  &.default-tag {
+  &.default-0 {
     color: $primary-text-clr;
     background: $grey-lighter-clr;
   }
-  &.green-tag {
+  &.default-1 {
     color: $green-regular-clr;
     background: $green-lightest-clr;
   }
-  &.yellow-tag {
+  &.default-2 {
     color: $yellow-regular-clr;
     background: $yellow-lightest-clr;
   }
-  &.red-tag {
+  &.default-3 {
     color: $red-regular-clr;
     background: $red-lightest-clr;
   }
-  &.blue-tag {
+  &.default-4 {
     color: $blue-regular-clr;
     background: $blue-lightest-clr;
   }
@@ -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/assets/stylesheets/cm_admin/scaffold.scss

@@ -0,0 +1,14 @@
+.jGrowl {
+  color: #1D2129 !important;
+  font-size: 14px !important;
+  .success{
+    background-color: #C1EDE2 !important;
+  }
+  .notice {
+    background-color: #CDE1FB !important;
+  }
+  .error {
+    background-color: #FDCFCF !important;
+  }
+  
+}

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,23 @@
 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("jgrowl")
 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');
+      }
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+$(document).on("keydown", function(e) {
+  if (e.keyCode == 75 && e.metaKey) {
+    $('#quickSearchModal').modal('show')
+  }
+});
+
+var liSelected;
+$(document).on('keydown', function(e){
+  var sel_item = $('.search-results-container > a.visible');
+  if ($('#quickSearchModal').hasClass('show')) {
+    var selected;
+    if(e.which === 40){
+      if(liSelected){
+        liSelected.removeClass('active-item');
+        next = liSelected.next();
+        if(next.length > 0){
+          liSelected = next.addClass('active-item');
+          selected = next.text();
+
+        }else{
+          liSelected = sel_item.eq(0).addClass('active-item');
+          selected = sel_item.eq(0).text();
+        }
+      }else{
+        liSelected = sel_item.eq(0).addClass('active-item');
+        selected = sel_item.eq(0).text();
+      }
+    }else if(e.which === 38){
+      if(liSelected){
+        liSelected.removeClass('active-item');
+        next = liSelected.prev();
+        if(next.length > 0){
+          liSelected = next.addClass('active-item');
+          selected = next.text();
+
+        }else{
+
+          liSelected = sel_item.last().addClass('active-item');
+          selected = sel_item.last().text()
+        }
+      }else{
+        liSelected = sel_item.last().addClass('active-item');
+        selected = sel_item.last().text()
+      }
+    }
+    if(liSelected && e.which === 13) {
+      console.log("Selected item id ", liSelected)
+      href = liSelected.attr('href')
+      window.location = href
+    }
+  }
+});
+
+$(document).on('keyup', '[data-behaviour="quick-input-search"]', function(e) {
+  if ($(this).val().length > 0) {
+    $('.clear-search').removeClass('hidden')
+  } else {
+    $('.clear-search').addClass('hidden')
+  }
+  CmFilter.quick_input_search($(this))
+});
+
+$(document).on('click', '.clear-search', function(){
+  $('#quick-search-input').val('')
+  $('.clear-search').addClass('hidden')
+  CmFilter.quick_input_search($('#quick-search-input'))
+});

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

@@ -1,3 +1,32 @@
+$(document).ready(function(e) {
+  $('.select-2').select2();
+  flatpickr("[data-behaviour='date-only']", {})
+  flatpickr("[data-behaviour='date-time']", {
+    enableTime: true
+  })
+  flatpickr("[data-behaviour='filter'][data-filter-type='date']", {
+    mode: 'range'
+  })
+  Sortable.create($('.columns-list')[0],{
+    handle: '.dragger',
+    animation: 150
+  });
+});
+
+$(document).on("keypress keyup blur", "[data-behaviour='decimal-only'], [data-behaviour='filter'][data-filter-type='range']", function (e) {
+  var charCode = (e.which) ? e.which : e.keyCode
+  if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
+    return false;
+  return true;
+});
+
+$(document).on("keypress keyup blur", "[data-behaviour='integer-only']", function (event) {
+ $(this).val($(this).val().replace(/[^\d].+/, ""));
+  if ((event.which < 48 || event.which > 57)) {
+      event.preventDefault();
+  }
+});
+
 $(document).on('click', '.row-action-cell', function(e) {
   e.stopPropagation();
   if ($(this).hasClass('opacity-1')) {
@@ -11,4 +40,4 @@ $(document).on('click', '.row-action-cell', function(e) {
   } else {
     return $(this).find('.table-export-popup').addClass('hidden');
   }
-});
+});

data/app/javascript/stylesheets/cm_admin/application.scss

@@ -0,0 +1,4 @@
+@import "bootstrap/scss/bootstrap";
+@import "flatpickr/dist/flatpickr";
+@import "../../../../node_modules/daterangepicker/daterangepicker.css";
+@import "jgrowl/jquery.jgrowl"