cm-admin 3.0.10 → 3.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e06eca00acf8ab69325f9c3f9e21fe2ca85decefc8e5a3a6e3aaf3130155aa2c
-  data.tar.gz: 14d4e93f9a7929139d7ae0da003ea493c6b4e37e14a15df88287860ee04a43da
+  metadata.gz: ff19f67d38436ec27a855939e767014dd4f5141ab77bab65a008214335bbc173
+  data.tar.gz: '085404b4f42517231f0afdf48ea0616a3333eb4a1492d82234bbdaebeb75c8fa'
 SHA512:
-  metadata.gz: '09f6012b9c167c248cbd50eae357d590bead028346279c133df0ae5d50efbb4c93e8cce97c35192598b6dcc7301ca05cb7bd39e1c8afe04b9bc63e2db07a14cd'
-  data.tar.gz: 5486d07094d0afb477aeb1be63456858d7565ad41d82a03d0a859ffbb8a7e5e7ca6e8fb24bcb9a4264f3e67b61760b39be89e854992f075af2dd56b5f19ee8aa
+  metadata.gz: 7a11b38ef299303693933134bea4bdbe55136f49890839e2628ef7fb9c7a4615913b492560a8bb5b2d09642aa914138604ae78349c19cabdf0dcd6cffd08ad25
+  data.tar.gz: 5cd4341e3125c9627bfb0dab6ad8a42acbbaeb91e27324c48bdccca80e0c30039b20178fffb689e549d482c4f5a977a9ccf2a2906c13e0c15f2508ff822758bd

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    cm-admin (3.0.10)
+    cm-admin (3.0.11)
       caxlsx_rails
       cocoon (~> 1.2.15)
       csv-importer (~> 0.8.2)

data/app/assets/javascripts/cm_admin/filters.js

@@ -3,14 +3,16 @@ var currentRequest = null;
 var 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++) {
-      var txtValue = $(dropdownElements[i]).children().text();
-      if (txtValue.toUpperCase().indexOf(filter) > -1) {
-        $(dropdownElements[i]).css('display', 'flex');
-      } else {
-        $(dropdownElements[i]).css('display', 'none');
+    if(element.val()) { 
+      var filter = element.val().toUpperCase();
+      var dropdownElements = element.parents(':nth(1)').find('.list-area').children();
+      for (var i = 0; i < dropdownElements.length; i++) {
+        var txtValue = $(dropdownElements[i]).children().text();
+        if (txtValue.toUpperCase().indexOf(filter) > -1) {
+          $(dropdownElements[i]).css('display', 'flex');
+        } else {
+          $(dropdownElements[i]).css('display', 'none');
+        }
       }
     }
   }
@@ -63,6 +65,21 @@ var getFilteredData = function(filterType, filterValue, filterColumn=null, sortD
     var availableParams = searchParams + '&' + filterParams
     var queryString = getParamsAsObject(availableParams)
   }
+  
+  if (filterColumn) {
+    const filterChip = $(`[data-db-column="${filterColumn}"]`);
+    const filterName = filterChip.find('.filter-name');
+    
+    if (isValueEmpty(filterValue)) {
+        if (!filterName.data('appended')) {
+            filterName.html(`${filterName.text()} is `);
+            filterName.data('appended', true);
+        }
+    } else {
+        filterName.html(filterName.text().replace(/\s*is $/, ''));
+        filterName.data('appended', false);
+    }
+  }
 
   return currentRequest = $.ajax(url, {
     type: 'GET',
@@ -100,6 +117,10 @@ var getFilteredData = function(filterType, filterValue, filterColumn=null, sortD
   });
 }
 
+const isValueEmpty = function(value) { 
+  return value !== undefined && value !== null && value !== '' && (!Array.isArray(value) || value.length !== 0);
+}
+
 $(document).on('change', '[data-behaviour="filter"]', function(e) {
   var filterType = $(this).data('filter-type')
   var filterColumn = $(this).data('db-column')
@@ -206,8 +227,6 @@ $(document).on('click', '[data-behaviour="filter-input"]', function(e) {
 
   if (filterType == 'range') {
     filterElement.parent().toggleClass('hidden')
-  } else if (filterType == 'multi_select') {
-    $(this).parent().children(':last').toggleClass('hidden')
   } else if (filterType == 'date') {
     filterElement.click()
   }
@@ -219,12 +238,12 @@ $(document).on('click', '.clear-btn', function(e) {
 })
 
 var unhideClearFilterBtn = function(filterValue) {
-  if (filterValue) {
+  if (isValueEmpty(filterValue)) {
     $('.clear-btn').removeClass('hidden')
   }
 }
 
-$(document).on('click', '[data-behaviour="select-option"] .cm-checkbox', function(e) {
+$(document).on('click', '[data-behaviour="select-option"] [data-behaviour="multi-select-filter-checkbox"]', function(e) {
   $(this).prop('checked', !$(this).prop('checked'));
 })
 // Selecting options for single and multi select filters
@@ -255,9 +274,11 @@ $(document).on('click', '[data-behaviour="select-option"]', function(e) {
   }
   else if (filterType == 'multi_select') {
     var parentChip = $(this).parent().siblings(':first')
-    var checkboxElement = $(this).find('.cm-checkbox')
+    var checkboxElement = $(this).find('[data-behaviour="multi-select-filter-checkbox"]')
     checkboxElement.prop('checked', !checkboxElement.prop('checked'))
-    var checkedCount = $(this).parent().find('.cm-checkbox').filter(':checked').length
+    var checkedCount = $(this).parent().find('[data-behaviour="multi-select-filter-checkbox"]').filter(':checked').length
+    var filterValue = []
+    var filterValueText = []
     if (checkboxElement.prop('checked')) {
       var chip = $('<div class="chip"></div>')
       var firstSpan = $('<span></span>').text($(this).text())
@@ -272,53 +293,42 @@ $(document).on('click', '[data-behaviour="select-option"]', function(e) {
         }
       }
     }
+    $(this).parent().find('[data-behaviour="multi-select-filter-checkbox"]').filter(':checked').each(function() {
+      filterValue.push($(this).parent().data('value'))
+      filterValueText.push($(this).parent().text())
+    })
 
     if (checkedCount > 0) {
-      parentChip.addClass('search-with-chips').removeClass('search-area')
+      parentChip.addClass('active')
       $(this).parents(':nth(1)').children(':last').addClass('active')
     } else {
-      parentChip.addClass('search-area').removeClass('search-with-chips')
+      parentChip.removeClass('active')
       $(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 filterValueText = []
-
-  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'))
-      filterValueText.push($(checkedElements[i]).parent().text())
-    }
-
+    // Truncate filter value logic
     var truncatedFilterValue = filterValueText[0]
     if (filterValue.length > 1) {
-      truncatedFilterValue += ' + ' + (filterValue.length - 1) + ' more'
+      truncatedFilterValue += ' + ' + (filterValue.length - 1);
+    }
+    // Update the filter input element with the truncated value
+    var filterInputElement = $(this).parents(':nth(4)').children(':first')
+    if (filterValue.length > 0) {
+      filterInputElement.children(':nth(1)').text(truncatedFilterValue)
+      filterInputElement.children(':last').removeClass('hidden')
+    } else {
+      filterInputElement.children(':nth(1)').text('')
+      filterInputElement.children(':last').addClass('hidden')
     }
-
-    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')
+    var searchInputElement = $(this).parents(':nth(1)').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
@@ -338,26 +348,30 @@ $(document).on('click', '.filter-chip-remove', function(e) {
 });
 
 $(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 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 = []; 
+  var filterValueText = $(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]).text() == filterValueText) {
+          var checkboxElement = $(selectElement[i]).find('[data-behaviour="multi-select-filter-checkbox"]');
+          checkboxElement.prop('checked', false);  // Uncheck the box
+          break;
+      }
   }
-
-  var checkedCount = $(selectElement).find('.cm-checkbox').filter(':checked').length
+  selectElement.find('[data-behaviour="multi-select-filter-checkbox"]').filter(':checked').each(function() {
+      filterValue.push($(this).parent().data('value'));
+  });
+  var checkedCount = selectElement.find('[data-behaviour="multi-select-filter-checkbox"]').filter(':checked').length;
   if (checkedCount < 1) {
-    $(selectElement).parent().siblings(':first').addClass('search-area').removeClass('search-with-chips')
-    $(selectElement).parent().siblings(':last').removeClass('active')
+      selectElement.parent().siblings(':first').removeClass('active');
+      selectElement.parent().siblings(':last').removeClass('active');
   }
-})
+  unhideClearFilterBtn(filterValue);
+  getFilteredData(filterType, filterValue, filterColumn);
+});
 
 $(document).on("change", '[data-behaviour="sort-column"], [data-behaviour="sort-direction"]', function (e) {
   getFilteredData(null, null, null, true);
@@ -381,3 +395,71 @@ $(document).on("click", '[data-behaviour="reset-sort"]', function (e) {
     }
   });
 });
+
+$(document).on(
+  "click",
+  '[data-behaviour="multi-select-filter-apply"]',
+  function (e) {
+    $(this).parent();
+    $(this).closest('[data-behaviour="multi-select-filter-dropdown"]').removeClass('show');
+    $(this).closest('[data-behaviour="multi-select-filter-wrapper"]').find('[data-behaviour="filter-input"]').removeClass('show');
+  }
+);
+
+$(document).on(
+  "click",
+  '[data-behaviour="multi-select-filter-clear"]',
+  function (e) {
+    const dropdown = $(this).closest('[data-behaviour="multi-select-filter-dropdown"]');
+
+    const filterInputElement = $(this).parents(':nth(4)').children(':first')
+    filterInputElement.children(':nth(1)').text('')
+
+    const checkboxes = dropdown.find('[data-behaviour="multi-select-filter-checkbox"]:checked');
+    checkboxes.each(function() {
+      this.checked = false;
+    });
+
+    const chips = dropdown.find('.chip');
+    chips.each(function() {
+      $(this).remove();
+    });
+
+    const chipsArea = dropdown.find('[data-behaviour="multi-select-filter-chips-area"]');
+    chipsArea.removeClass('active');
+
+    const filter_element = dropdown.prev();
+    const db_column = filter_element.attr('data-db-column');
+    getFilteredData(filter_element.attr('data-filter-type'), [], db_column);
+  }
+);
+
+const initializeFilterLabels = function(filterParams) {
+  Object.keys(filterParams).forEach(filterType => {
+      const filterObj = filterParams[filterType];
+      Object.keys(filterObj).forEach(filterColumn => {
+          const filterChip = $(`[data-db-column="${filterColumn}"]`);
+          const filterName = filterChip.find('.filter-name');
+
+          // Append "is" to indicate active filter
+          if (filterName.length && !filterName.text().endsWith('is')) {
+              filterName.html(`${filterName.text()} is `);
+              filterName.data('appended', true);
+          }
+      });
+  });
+};
+
+$(document).ready(function() {
+  const initialFilterParams = getParamsAsObject(window.location.search);
+  initializeFilterLabels(initialFilterParams.filters || {});
+});
+
+$(document).ready(function() {
+  const chipsAreas = document.querySelectorAll('[data-behaviour="multi-select-filter-chips-area"]');
+  chipsAreas.forEach(function(chipsArea) {
+    chipsArea.classList.add('active');
+  });
+});
+
+

data/app/assets/stylesheets/cm_admin/base/filters.scss

@@ -4,6 +4,7 @@
   z-index: 1;
   &__inner {
     @include flex(row, flex-start, center, wrap);
+    gap: 8px;
     .filter-chips-wrapper {
       .filter-chip {
         margin-left: 16px;
@@ -76,7 +77,8 @@
         &:focus {
           border-color: $brand-color !important;
           outline: 0 !important;
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+          box-shadow:
+            inset 0 1px 1px rgba(0, 0, 0, 0.075),
             0 0 8px rgba(102, 175, 233, 0.6) !important;
         }
       }
@@ -94,7 +96,8 @@
             &:focus {
               border-color: $brand-color;
               outline: 0;
-              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+              box-shadow:
+                inset 0 1px 1px rgba(0, 0, 0, 0.075),
                 0 0 8px rgba(102, 175, 233, 0.6);
             }
             .select2-selection__rendered {

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

@@ -2,48 +2,34 @@
 
 .dropdown-popup {
   border: none !important;
-  .popup-base {
-    position: absolute;
-    min-width: 256px;
-    height: 56px;
-    padding: 8px;
-    background: $white;
-    border: 1px solid $grey-lighter-clr;
-    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
-    border-radius: $radius-4;
-  }
+
   .popup-inner {
     position: relative;
     min-width: 240px;
     margin: 0 auto;
     background-color: $white;
-    border: 1px solid #e0e0e0;
+    border: 1px solid $dropdown-border-clr;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
     border-radius: $radius-4;
+
     .search-area {
       input {
-        width: 100%;
-        min-height: 40px;
-        padding: 9px 16px;
-        font-size: $t4-text;
+        @extend .form-control;
         border: none;
-        border-radius: 4px 4px 0 0;
         &::placeholder {
-          color: $ink-lightest-clr;
-        }
-        &:focus {
-          outline: none;
-          border: 1px solid $brand-color;
+          font-size: $t4-text;
         }
       }
     }
-    .search-with-chips {
-      display: flex;
-      flex-wrap: wrap;
-      padding: 8px 16px;
+
+    .chips-area {
+      @include flex($wrap: wrap);
+      &.active {
+        padding: 8px 16px;
+        border-bottom: 1px solid $dropdown-border-clr;
+      }
       .chip {
-        display: inline-flex;
-        align-items: center;
+        @extend .d-inline-flex, .align-items-center;
         margin: 2px;
         padding: 0 4px;
         background: $grey-lighter-clr;
@@ -54,26 +40,18 @@
         }
         span:nth-child(2) {
           @include font($size: 10px, $color: $ink-lightest-clr);
-          margin-left: 4px;
+          margin: 4px 0 0 4px;
           cursor: pointer;
         }
       }
-      input {
-        border: none;
-        font-size: $t4-text;
-        margin: 2px;
-        &:focus {
-          outline: 3px auto rgba(47, 128, 237, 0.3);
-        }
-      }
     }
+
     .list-area {
       max-height: 240px;
       overflow-y: auto;
-      border-top: 1px solid #e0e0e0;
+      border-top: 1px solid $dropdown-border-clr;
       .list-item {
-        display: flex;
-        align-items: center;
+        @include flex($align: center);
         padding: 9px 16px;
         @include font($size: $t4-text, $color: $primary-text-clr);
         line-height: 22px;
@@ -88,65 +66,16 @@
         }
       }
       .selected {
-        color: $brand-color;
-      }
-    }
-    .apply-area {
-      @include font($size: $t4-text, $color: $ink-lightest-clr, $weight: 600);
-      line-height: 22px;
-      text-align: center;
-      padding: 9px 16px;
-      box-shadow: inset 0px 1px 0px rgba(148, 151, 155, 0.15);
-      cursor: not-allowed;
-      &.active {
-        cursor: pointer;
         color: $blue-regular-clr;
       }
     }
-  }
-}
-
-.applied-select {
-  margin-left: 20rem;
-}
 
-.column-popup {
-  display: inline-block;
-  min-width: 156px;
-  max-height: 295px;
-  background-color: $white;
-  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.16));
-  border-radius: $radius-4;
-  z-index: 1;
-  .column-option {
-    .option-title {
-      @include font($size: $t6-text, $color: $ink-lightest-clr, $weight: 600);
-      line-height: 16px;
-      text-transform: uppercase;
-      margin: 0;
-      padding: 18px 16px 9px;
-    }
-    .option-action {
-      padding: 9px 16px;
-      cursor: pointer;
-      @include transition-linear;
-      &:hover {
-        background-color: $grey-lighter-clr;
-      }
-      .action-icon {
-        font-size: $t4-text;
-      }
-      .action-name {
-        @include font($size: $t4-text, $color: $primary-text-clr);
-        line-height: 22px;
-        margin-left: 8px;
-      }
-    }
-    .cannot-sort {
-      @include font($size: $t6-text, $color: $ink-lightest-clr);
-      line-height: 16px;
-      margin-bottom: 9px;
-      padding: 0 16px;
+    .popup-footer {
+      display: grid;
+      grid-template-columns: 50px 1fr;
+      grid-gap: 8px;
+      padding: 8px 16px;
+      background-color: $grey-lightest-clr;
     }
   }
 }

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

@@ -43,7 +43,8 @@
 .filter-chip {
   display: inline-block;
   position: relative;
-  padding: 5px 16px;
+  height: 32px;
+  padding: 4px 16px;
   font-size: $t4-text;
   font-weight: 600;
   line-height: 22px;

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

@@ -38,6 +38,7 @@ $grey-lighter-clr: #f3f4f6;
 $grey-lightest-clr: #f8f9fa;
 $grey-dark-clr: #828282;
 $card-grey-lighter-clr: #f3f4f6;
+$dropdown-border-clr: #e0e0e0;
 
 /* Ink Colors */
 $ink-regular-clr: #1d2129;

data/lib/cm_admin/version.rb

@@ -1,3 +1,3 @@
 module CmAdmin
-  VERSION = '3.0.10'
+  VERSION = '3.0.11'
 end

data/lib/cm_admin/view_helpers/filter_helper.rb

@@ -27,7 +27,7 @@ module CmAdmin
           concat(content_tag(:div, class: 'popup-base') do
             concat(content_tag(:div, class: 'popup-inner') do
               concat(content_tag(:div, class: 'search-area') do
-                concat tag.input placeholder: 'Search for filter', data: { behaviour: 'dropdown-filter-search' }
+                concat tag.input placeholder: 'Search', data: { behaviour: 'dropdown-filter-search' }
               end)
               concat(content_tag(:div, class: 'list-area') do
                 filters.each do |filter|
@@ -67,14 +67,14 @@ module CmAdmin
 
       def filter_chip(value, filter)
         data_hash = { behaviour: 'filter-input', filter_type: "#{filter.filter_type}", db_column: "#{filter.db_column_name}" }
-        data_hash.merge!(bs_toggle: 'dropdown') if filter.filter_type.to_s.eql?('single_select')
+        data_hash.merge!(bs_toggle: 'dropdown', bs_auto_close: 'outside') if ['single_select', 'multi_select'].include?(filter.filter_type.to_s)
 
         if value && filter.filter_type.to_s.eql?('multi_select')
           truncated_value = value[0]
-          truncated_value += " + #{value.size - 1} more" if value.size > 1
+          truncated_value += " + #{value.size - 1}" if value.size > 1
         end
         concat(content_tag(:div, class: "filter-chip #{filter.filter_type.to_s.eql?('single_select') ? 'dropdown' : ''}", data: data_hash) do
-          concat tag.span "#{filter.display_name} is "
+          concat tag.span "#{filter.display_name} ", class: 'filter-name'
           concat tag.span "#{filter.filter_type.to_s.eql?('multi_select') ? truncated_value : value}"
           concat(content_tag(:div, class: "filter-chip-remove #{value ? '' : 'hidden'}") do
             tag.i class: 'fa fa-times bolder'
@@ -84,7 +84,7 @@ module CmAdmin
       end
 
       def add_search_filter(filter)
-        tag.div class: 'filter-search me-3' do
+        tag.div class: 'filter-search' do
           concat(content_tag(:div, class: 'input-group input-group-sm') do
             concat(content_tag(:span, class: 'input-group-text') do
               tag.i class: 'fa fa-search'
@@ -97,7 +97,7 @@ module CmAdmin
       def add_range_filter(filter)
         value = params.dig(:filters, :range, :"#{filter.db_column_name}")
         is_active = value || filter.active_by_default
-        concat(content_tag(:div, class: "position-relative me-3 #{is_active ? '' : 'hidden'}") do
+        concat(content_tag(:div, class: "position-relative #{is_active ? '' : 'hidden'}") do
           concat filter_chip(value, filter)
 
           concat(content_tag(:div, class: 'position-absolute mt-2 range-container hidden') do
@@ -111,7 +111,7 @@ module CmAdmin
       def add_date_filter(filter)
         value = params.dig(:filters, :date, :"#{filter.db_column_name}")
         is_active = value || filter.active_by_default
-        concat(content_tag(:div, class: "position-relative me-3 #{is_active ? '' : 'hidden'}") do
+        concat(content_tag(:div, class: "position-relative #{is_active ? '' : 'hidden'}") do
           concat filter_chip(value, filter)
 
           concat(content_tag(:div, class: 'date-filter-wrapper w-100') do
@@ -131,7 +131,7 @@ module CmAdmin
                          else
                            []
                          end
-        concat(content_tag(:div, class: "position-relative me-3 #{is_active ? '' : 'hidden'}") do
+        concat(content_tag(:div, class: "position-relative #{is_active ? '' : 'hidden'}") do
           selected_value_text = if value && select_options[0].class == Array
                                   select_options.map { |collection| collection[0] if collection[1].to_s.eql?(value) }.compact.join(', ')
                                 else
@@ -143,7 +143,7 @@ module CmAdmin
             concat(content_tag(:div, class: 'popup-base') do
               concat(content_tag(:div, class: 'popup-inner') do
                 concat(content_tag(:div, class: 'search-area') do
-                  concat tag.input placeholder: "#{filter.placeholder}", data: { behaviour: 'dropdown-filter-search' }
+                  concat tag.input placeholder: "Search", data: { behaviour: 'dropdown-filter-search' }
                 end)
                 concat(content_tag(:div, class: 'list-area') do
                   select_options.each do |val|
@@ -184,13 +184,13 @@ module CmAdmin
           value_mapped_text = value
         end
 
-        concat(content_tag(:div, class: "position-relative me-3 #{is_active ? '' : 'hidden'}") do
+        concat(content_tag(:div, class: "position-relative #{is_active ? '' : 'hidden'}", data: { behaviour: 'multi-select-filter-wrapper' }) do
           concat filter_chip(value_mapped_text, filter)
 
-          concat(content_tag(:div, class: 'position-absolute mt-2 dropdown-popup hidden') do
+          concat(content_tag(:div, class: 'dropdown-menu dropdown-popup', data: { behaviour: 'multi-select-filter-dropdown' }) do
             concat(content_tag(:div, class: 'popup-base') do
               concat(content_tag(:div, class: 'popup-inner') do
-                concat(content_tag(:div, class: "#{value ? 'search-with-chips' : 'search-area'}") do
+                concat(content_tag(:div, class: 'chips-area', data: { behaviour: 'multi-select-filter-chips-area' }) do
                   if value_mapped_text
                     value_mapped_text.each do |val|
                       concat(content_tag(:div, class: 'chip') do
@@ -201,7 +201,9 @@ module CmAdmin
                       end)
                     end
                   end
-                  concat tag.input placeholder: "#{filter.placeholder}", data: { behaviour: 'dropdown-filter-search' }
+                end)
+                concat(content_tag(:div, class: 'search-area') do
+                  concat tag.input placeholder: "Search", data: { behaviour: 'dropdown-filter-search' }
                 end)
                 concat(content_tag(:div, class: 'list-area') do
                   select_options.each do |val|
@@ -211,13 +213,16 @@ module CmAdmin
                     elsif val.class.eql?(String)
                       filter_value = filter_text = val
                     end
-                    concat(content_tag(:div, class: "pointer list-item #{value && (value.eql?(val) || value.include?(filter_value.to_s)) ? 'selected' : ''}", data: { behaviour: 'select-option', filter_type: "#{filter.filter_type}", db_column: "#{filter.db_column_name}", value: filter_value }) do
-                      concat tag.input class: 'cm-checkbox', type: 'checkbox', checked: value ? value.include?(filter_value.to_s) : false
-                      concat tag.label filter_text.to_s.titleize, class: 'pointer'
+                    concat(content_tag(:div, class: "list-item pointer", data: { behaviour: 'select-option', filter_type: "#{filter.filter_type}", db_column: "#{filter.db_column_name}", value: filter_value }) do
+                      concat tag.input class: 'form-check-input m-0 pointer', type: 'checkbox', checked: value ? value.include?(filter_value.to_s) : false, data: { behaviour: 'multi-select-filter-checkbox', value: filter_value }
+                      concat tag.label filter_text.to_s.titleize, class: 'form-check-label pointer'
                     end)
                   end
                 end)
-                concat tag.div 'Apply', class: "apply-area #{value ? 'active' : ''}"
+                concat(content_tag(:div, class: 'popup-footer') do
+                  concat tag.button 'Clear', class: 'btn-ghost', data: { behaviour: 'multi-select-filter-clear' }
+                  concat tag.button 'Apply', class: 'btn-primary', data: { behaviour: 'multi-select-filter-apply' }
+                end)
               end)
             end)
           end)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: cm-admin
 version: !ruby/object:Gem::Version
-  version: 3.0.10
+  version: 3.0.11
 platform: ruby
 authors:
 - Michael