cm-admin 0.2.0 → 0.4.2

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

@@ -0,0 +1,347 @@
+var currentRequest = null;
+
+// 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
+
+  // 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
+  };
+
+  // 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: queryString,
+    beforeSend: function() {
+      if (currentRequest !== null) {
+        currentRequest.abort();
+      }
+    },
+    success: function(data) {
+      var queryParam = jQuery.param(queryString)
+      window.history.pushState("", "", url + '?' + queryParam);
+      $('.index-page__table-container').html(data);
+    },
+    error: function(jqxhr, textStatus, errorThrown) {
+      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

@@ -0,0 +1,43 @@
+$(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')) {
+    $('.row-action-cell').removeClass('opacity-1')
+  } else {
+    $('.row-action-cell').removeClass('opacity-1')
+    $(this).addClass('opacity-1');
+  }
+  if ($(this).find('.table-export-popup').hasClass('hidden')) {
+    return $(this).find('.table-export-popup').removeClass('hidden');
+  } else {
+    return $(this).find('.table-export-popup').addClass('hidden');
+  }
+});

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

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

data/app/views/cm_admin/main/_associated_table.html.slim

@@ -0,0 +1,60 @@
+.admin-table-index
+  .table-top
+    p.table-top__total-count = "#{@associated_ar_object.pagy.count} #{@associated_model.ar_model.table_name} found"
+    .table-top__column-action
+      button.secondary-btn.column-btn data-target="#columnActionModal" data-toggle="modal" type="button"
+        span
+          i.fa.fa-columns.bolder
+        span
+          i.fa.fa-angle-down
+
+.new-admin-table.scrollable
+  table.cm-table
+    thead.cm-table__header
+      tr.header-row
+        th.check-box-space
+          span
+            input.cm-checkbox type="checkbox"
+        - @model.available_fields[@action.name.to_sym].each do |column|
+          th = column.header
+    tbody.cm-table__body
+      - @associated_ar_object.data.each do |ar_object|
+        tr.body-row
+          td.check-box-space
+            span
+              input.cm-checkbox type="checkbox"
+          - @model.available_fields[@action.name.to_sym].each do |column|
+            td
+              span class="#{column.cm_css_class}" = show_field_value(ar_object, column)
+          td.row-action-cell
+            .row-action-tool
+              button.secondary-btn.tool-btn type="button"
+                span
+                  i.fa.fa-bars.bolder
+                span
+                  i.fa.fa-angle-down
+              .popup-card.table-export-popup.hidden
+                .popup-option
+                  a href="#{page_url('edit', ar_object)}"
+                    | Edit
+/ .cm-pagination
+/   .cm-pagination__lhs Showing 1 to 15 out of 104
+/   .cm-pagination__rhs
+/     span.page-move-btn.disabled
+/       i.fa.fa-angle-double-left.bolder.f14
+/     span.page-move-btn.disabled
+/       i.fa.fa-chevron-left.bolder
+/     span.page-num-btn.active 1
+/     span.page-num-btn 2
+/     span.page-num-btn 3
+/     span.page-num-btn 4
+/     span.page-num-btn 5
+/     span.page-move-btn
+/       i.fa.fa-chevron-right.bolder
+/     span.page-move-btn
+/       i.fa.fa-angle-double-right.bolder.f14
+
+.cm-pagination
+  .cm-pagination__lhs Showing #{@associated_ar_object.pagy.from} to #{@associated_ar_object.pagy.to} out of #{@associated_ar_object.pagy.count}
+  .cm-pagination__rhs
+    == render partial: 'cm_admin/main/cm_pagy_nav', locals: { pagy: @associated_ar_object.pagy }

data/app/views/cm_admin/main/_cm_pagy_nav.html.slim

@@ -0,0 +1,23 @@
+- link = pagy_link_proc(pagy)
+
+nav.pagy_nav.pagination role="navigation" aria-label="pager"
+
+  - if pagy.prev
+    span ==> link.call(pagy.prev, '<', 'aria-label="previous" class="page-move-btn"')
+  - else
+    span ==> link.call('#', '<', 'class="page-move-btn disabled"')
+
+  - pagy.series.each do |item|        # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+    - if item.is_a?(Integer)          # page link
+      span ==> link.call(item, item, 'class="page-num-btn"')
+
+    - elsif item.is_a?(String)        # current page
+      span ==> link.call(item, item, 'class="page-num-btn active"')
+
+    - elsif item == :gap              # page gap
+      span.page.gap ==> pagy_t('pagy.nav.gap')
+
+  - if pagy.next
+    span == link.call(pagy.next, '>', 'aria-label="next" class="page-move-btn"')
+  - else
+    span ==> link.call('#', '>', 'class="page-move-btn disabled"')

data/app/views/cm_admin/main/_filters.html.slim

@@ -0,0 +1 @@
+= generate_filters(filters)

data/app/views/cm_admin/main/_nested_fields.html.slim

@@ -0,0 +1,7 @@
+.nested-fields
+  - @model.available_fields[action_name.to_sym][assoc_name].each do |field|
+    = f.label field.field_name, class: 'field-label'
+    br
+    = input_field_for_column(f, field)
+  - if @reflections.select {|x| x if x.name == assoc_name}.first.macro == :has_many
+    = link_to_remove_association "remove #{assoc_name}", f

data/app/views/cm_admin/main/_nested_table_form.html.slim

@@ -0,0 +1,6 @@
+#tasks
+  = f.fields_for table_name do |record|
+    = render partial: '/cm_admin/main/nested_fields', locals: { f: record, assoc_name: table_name }
+  - if @reflections.select {|x| x if x.name == table_name}.first.macro == :has_many
+    .links
+      = link_to_add_association "add #{table_name}", f, table_name, partial: '/cm_admin/main/nested_fields', render_options:  {locals: { assoc_name: table_name }}

data/app/views/cm_admin/main/_table.html.slim

@@ -0,0 +1,60 @@
+.admin-table-index
+  .table-top
+    p.table-top__total-count = "#{@ar_object.pagy.count} #{@model.ar_model.table_name} found"
+    .table-top__column-action
+      button.secondary-btn.column-btn data-bs-target="#columnActionModal" data-bs-toggle="modal"
+        span
+          i.fa.fa-columns.bolder
+        span
+          i.fa.fa-angle-down
+
+.new-admin-table.scrollable
+  table.cm-table
+    thead.cm-table__header
+      tr.header-row
+        th.check-box-space
+          span
+            input.cm-checkbox type="checkbox"
+        - @model.available_fields[:index].each do |column|
+          th = column.header
+    tbody.cm-table__body
+      - @ar_object.data.each do |ar_object|
+        tr.body-row
+          td.check-box-space
+            span
+              input.cm-checkbox type="checkbox"
+          - @model.available_fields[:index].each do |column|
+            td
+              span class="#{column.cm_css_class}" = show_field_value(ar_object, column)
+          td.row-action-cell
+            .row-action-tool
+              button.secondary-btn.tool-btn type="button"
+                span
+                  i.fa.fa-bars.bolder
+                span
+                  i.fa.fa-angle-down
+              .popup-card.table-export-popup.hidden
+                .popup-option
+                  a href="#{page_url('edit', ar_object)}"
+                    | Edit
+/ .cm-pagination
+/   .cm-pagination__lhs Showing 1 to 15 out of 104
+/   .cm-pagination__rhs
+/     span.page-move-btn.disabled
+/       i.fa.fa-angle-double-left.bolder.f14
+/     span.page-move-btn.disabled
+/       i.fa.fa-chevron-left.bolder
+/     span.page-num-btn.active 1
+/     span.page-num-btn 2
+/     span.page-num-btn 3
+/     span.page-num-btn 4
+/     span.page-num-btn 5
+/     span.page-move-btn
+/       i.fa.fa-chevron-right.bolder
+/     span.page-move-btn
+/       i.fa.fa-angle-double-right.bolder.f14
+
+.cm-pagination
+  .cm-pagination__lhs Showing #{@ar_object.pagy.from} to #{@ar_object.pagy.to} out of #{@ar_object.pagy.count}
+  .cm-pagination__rhs
+    == render partial: 'cm_admin/main/cm_pagy_nav', locals: { pagy: @ar_object.pagy }

data/app/views/cm_admin/main/_tabs.html.slim

@@ -0,0 +1,5 @@
+ul.nav.nav-pills
+  - @model.available_tabs.each do |nav_item|
+    li.nav-item
+	    - nav_item_action_name = nav_item.custom_action.present? ? nav_item.custom_action : 'show'
+	    = link_to nav_item.nav_item_name.to_s.titleize, "/cm_admin/#{@model.name.underscore.pluralize}/#{@ar_object.id}/#{nav_item.custom_action}", class: "nav-link #{ nav_item_action_name == action_name ? 'active' : ''}"

data/app/views/cm_admin/main/_top_navbar.html.slim

@@ -0,0 +1,25 @@
+.cm-navbar
+  .cm-navbar__lhs
+    .bread-crumb-area
+      = yield :bread_crumb
+    .nav-title-area
+      p.title-text = action_title
+      p.title-sub-text = action_description
+  - if @model.current_action.name == 'index'
+    .cm-navbar__rhs
+      .export-container
+        .dropdown
+          button.secondary-btn data-bs-toggle='dropdown'
+            span
+              i.fa.fa-arrow-down
+            span
+              | Export
+            span
+              i.fa.fa-angle-down
+          ul.dropdown-menu.export-popup
+            li
+              .popup-option.pointer data-bs-toggle='modal' data-bs-target='#exportmodal'
+                span Export
+
+      a.primary-btn.ml-2 href="#{page_url('new')}"
+        | Add

data/app/views/cm_admin/main/associated_index.html.slim

@@ -0,0 +1,6 @@
+.cm-index-page
+	.index-page
+		.index-page__table-container.pt-0
+			== render 'cm_admin/main/associated_table'
+
+		= column_pop_up(@associated_model)

data/app/views/cm_admin/main/associated_show.html.slim

@@ -0,0 +1,6 @@
+- @model.available_fields[@action.name.to_sym].each do |section|
+  .info-section
+    p.section-heading = section.section_name
+    .paper
+      - section.available_section_fields.each do |field|
+        = show_field(@associated_ar_object, field)

data/app/views/cm_admin/main/dashboard.html.slim

@@ -0,0 +1 @@
+| This is the dashboard page