cm-admin 1.1.9 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e07101649ddc2392e7d61139cbbd68d863b22703ec2537cd9e6d3195cc53f5c9
-  data.tar.gz: a11705aaa45d84749296de25055339207b33f202a467eac3b38d2c60aa667f59
+  metadata.gz: 255cb085f8e8d797c77241f882c2b6dc7894878572a230158b3376df9c9aa485
+  data.tar.gz: a4acd31793b97d16d1790ea61a24fd0a2411f756bcbd36226baea380f7b77959
 SHA512:
-  metadata.gz: da131f09f37cabf79ef6ce2c23604cb412053be927ea9c79666f3f356d7618ddfdc6faed36c657821e2c60757c67aa5fc1bfddf838705d861f76898ae0c235f8
-  data.tar.gz: 6f0354f7eac71e8f691152e23f0653a228fff5e9b2407d51cff6320cf07cf8de01a46a08835717c6e7d7ececf5655f2942a870b73ea48321f3797b4bc82dbced
+  metadata.gz: 69bd5e4f1753bb6d46028a604defe82dcae819e04c94482594197a984c6d6d648e04c530de0302e6714e6254df2c22bfc59a4ffad9fadfa51b64fe2e4125237b
+  data.tar.gz: f8eb530cd2e7c41dc04bc3c653dad14a433f38f53a7641fd5ca05c881e44c2b0a0c12594bdba8fc5e78c2e4e4af5e6da68b31cb51fe0bb13ef4f2ad162c06766

data/Gemfile.lock

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

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

@@ -43,4 +43,10 @@ $(document).on('click', '.menu-item', function(e) {
   $('.profile-popup').toggleClass('hidden');
 });
 
+$(document).on('click', '.destroy-attachment', function(e) {
+  var ar_id = $(this).data('ar-id')
+  $(this).addClass('hidden')
+  $(this).append('<input type="text" name="attachment_destroy_ids[]" value="' + ar_id + '"/>')
+})
+
 window.addEventListener('popstate', e => window.location.reload() );

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

@@ -1,136 +1,152 @@
 // This file is shared between rails 6 and 7 version
 
-$(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='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)) {
+$(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) {
+$(document).on("click", ".row-action-cell", function (e) {
   e.stopPropagation();
-  if ($(this).hasClass('opacity-1')) {
-    $('.row-action-cell').removeClass('opacity-1')
+  if ($(this).hasClass("opacity-1")) {
+    $(".row-action-cell").removeClass("opacity-1");
   } else {
-    $('.row-action-cell').removeClass('opacity-1')
-    $(this).addClass('opacity-1');
+    $(".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');
+  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');
+    return $(this).find(".table-export-popup").addClass("hidden");
   }
 });
 
-
-$(document).on('click', '.drawer-btn', function(e) {
+$(document).on("click", ".drawer-btn", function (e) {
   e.stopPropagation();
-  var drawer_el = $(this).parent().closest('.drawer').find('.cm-drawer')
-  if (drawer_el.hasClass('hidden')) {
-     drawer_el.removeClass('hidden');
-     drawer_container = drawer_el.find('.drawer-container')
-     if (drawer_container.hasClass('drawer-slide-out')) {
-        drawer_container.removeClass('drawer-slide-out');
-     }
-     drawer_container.addClass('drawer-slide-in');
+  var drawer_el = $(this).parent().closest(".drawer").find(".cm-drawer");
+  if (drawer_el.hasClass("hidden")) {
+    drawer_el.removeClass("hidden");
+    drawer_container = drawer_el.find(".drawer-container");
+    if (drawer_container.hasClass("drawer-slide-out")) {
+      drawer_container.removeClass("drawer-slide-out");
+    }
+    drawer_container.addClass("drawer-slide-in");
   } else {
-    return drawer_el.addClass('hidden');
+    return drawer_el.addClass("hidden");
   }
 });
 
-$(document).on('click', '.drawer-close', function(e) {
+$(document).on("click", ".drawer-close", function (e) {
   e.stopPropagation();
-  $('.drawer-container').removeClass('drawer-slide-in');
-  $('.drawer-container').addClass('drawer-slide-out');
+  $(".drawer-container").removeClass("drawer-slide-in");
+  $(".drawer-container").addClass("drawer-slide-out");
   setTimeout(() => {
-    $('.cm-drawer').addClass('hidden');
+    $(".cm-drawer").addClass("hidden");
   }, 300);
 });
 
-$(document).on('change', '[data-field-type="linked-field"]', function(e) {
+$(document).on("change", '[data-field-type="linked-field"]', function (e) {
   e.stopPropagation();
-  var params = {}
-  params[$(this).data('field-name')] = $(this).val()
-  var request_url = $(this).data('target-url') + '?' + $.param(params);
-  console.log(request_url)
+  var params = {};
+  params[$(this).data("field-name")] = $(this).val();
+  var request_url = $(this).data("target-url") + "?" + $.param(params);
+  console.log(request_url);
   $.ajax(request_url, {
-    type: 'GET',
-    success: function(data) {
-      apply_response_to_field(data)
+    type: "GET",
+    success: function (data) {
+      apply_response_to_field(data);
+    },
+    error: function (jqxhr, textStatus, errorThrown) {
+      alert("Something went wrong. Please try again later.\n" + errorThrown);
     },
-    error: function(jqxhr, textStatus, errorThrown) {
-      alert('Something went wrong. Please try again later.\n' + errorThrown);
-    }
   });
 });
 
 function apply_response_to_field(response) {
-  $.each(response['fields'], function(key, value) {
-    switch(value['target_type']) {
-      case 'select':
-        update_options_in_select(value['target_value'])
+  $.each(response["fields"], function (key, value) {
+    switch (value["target_type"]) {
+      case "select":
+        update_options_in_select(value["target_value"]);
         break;
-      case 'input':
-        update_options_input_value(value['target_value'])
+      case "input":
+        update_options_input_value(value["target_value"]);
         break;
-      case 'toggle_visibility':
-        toggle_field_visibility(value['target_value'])
+      case "toggle_visibility":
+        toggle_field_visibility(value["target_value"]);
     }
-  })
+  });
 }
 
 function update_options_input_value(field_obj) {
-  var input_tag = $('#' + field_obj['table'] + '_' + field_obj['field_name'])
-  input_tag.val(field_obj['field_value'])
+  var input_tag = $("#" + field_obj["table"] + "_" + field_obj["field_name"]);
+  input_tag.val(field_obj["field_value"]);
 }
 
 function update_options_in_select(field_obj) {
-  var select_tag = $('#' + field_obj['table'] + '_' + field_obj['field_name'])
+  var select_tag = $("#" + field_obj["table"] + "_" + field_obj["field_name"]);
   select_tag.empty();
-  $.each(field_obj['field_value'], function(key, value) {
-    select_tag.append($("<option></option>")
-      .attr("value", value[1]).text(value[0]));
+  $.each(field_obj["field_value"], function (key, value) {
+    select_tag.append(
+      $("<option></option>").attr("value", value[1]).text(value[0])
+    );
   });
 }
 
 function toggle_field_visibility(field_obj) {
-  var element = $('#' + field_obj['table'] + '_' + field_obj['field_name'])
-  element.closest('.input-wrapper').toggleClass('hidden')
+  var element = $("#" + field_obj["table"] + "_" + field_obj["field_name"]);
+  element.closest(".form-field").toggleClass("hidden");
 }
 
-$(document).on('cocoon:after-insert', '.nested-field-wrapper', function(e) {
+$(document).on("cocoon:after-insert", ".nested-field-wrapper", function (e) {
   e.stopPropagation();
-  replaceAccordionTitle($(this))
+  replaceAccordionTitle($(this));
 });
 
-$(document).on('cocoon:after-remove', '.nested-field-wrapper', function(e) {
+$(document).on("cocoon:after-remove", ".nested-field-wrapper", function (e) {
   e.stopPropagation();
-  replaceAccordionTitle($(this))
+  replaceAccordionTitle($(this));
 });
 
-$(document).ready( function () {
-  $('.nested-field-wrapper').each(function() {
-    replaceAccordionTitle($(this))
-  })
+$(document).ready(function () {
+  $(".nested-field-wrapper").each(function () {
+    replaceAccordionTitle($(this));
+  });
 });
 
-var replaceAccordionTitle = function(element) {
+var replaceAccordionTitle = function (element) {
   var i = 0;
-  var table_name = $(element).data('table-name')
-  var model_name = $(element).data('model-name')
-  $(element).find('.accordion-item:visible').each(function() {
-    i++;
-    var accordion_title = model_name + ' ' + i
-    var accordion_id = table_name + '-' + i
-    $(this).find('.accordion-button').text(accordion_title);
-    $(this).find('.accordion-button').attr('data-bs-target', '#' + accordion_id);
-    $(this).find('.accordion-collapse').attr('id', accordion_id);
-  });
-}
+  var table_name = $(element).data("table-name");
+  var model_name = $(element).data("model-name");
+  $(element)
+    .find(".accordion-item:visible")
+    .each(function () {
+      i++;
+      var accordion_title = model_name + " " + i;
+      var accordion_id = table_name + "-" + i;
+      $(this).find(".accordion-button").text(accordion_title);
+      $(this)
+        .find(".accordion-button")
+        .attr("data-bs-target", "#" + accordion_id);
+      $(this).find(".accordion-collapse").attr("id", accordion_id);
+    });
+};

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

@@ -1,4 +1,5 @@
 @import "../helpers/index.scss";
+@import "../dependency/bootstrap/scss/bootstrap";
 
 @function size($size) {
   @return map-get($font-size, $size);
@@ -9,85 +10,42 @@
 }
 
 .form-page {
-  padding: 24px;
   background-color: $white;
-  &__inner {
-    max-width: 752px;
+  &__header {
+    @extend .position-sticky, .top-0, .bg-white;
+    z-index: 5;
   }
-  .form-wrapper {
-    .form-container {
-      margin-top: 32px;
-      &:nth-child(1) {
-        margin-top: 0;
-      }
-      .form-title {
-        @include font($size: $t3-text, $color: $primary-text-clr, $weight: bold);
-        line-height: 24px;
-        margin: 0 0 16px;
-      }
-      &__inner {
-        padding: 24px;
-        border: 1px solid $grey-light-clr;
-        border-radius: $radius-4;
-        .form-field {
-          max-width: 320px;
-        }
-      }
-    }
+  &__body {
+    padding: 24px;
   }
-}
-
-//cocoon field styles
-.fields-group {
-  display: flex;
-  align-items: center;
-  margin: 16px 0;
-  .field-item {
-    margin: 0 5px;
-    label {
-      @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
-      margin-bottom: 4px;
+  .form-container {
+    margin-bottom: 24px;
+    .form-title {
+      @extend .h6, .fw-semibold;
+      color: $primary-text-clr;
     }
-    input {
-      width: 100%;
-      padding: 5px 10px;
-      border: 1px solid #c1c7d0;
-      border-radius: $radius-2;
-      &:focus {
-        border-color: #66afe9 !important;
-        outline: 0 !important;
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
-      }
-    }
-  }
-  .field-remove {
-    margin-top: 25px;
-    a {
-      @include font($size: $t1-text, $color: #ff5656);
-      @include transition-linear;
-      &:hover {
-        transform: scale(1.1);
-      }
+    &__inner {
+      @extend .card, .p-4;
+      background-color: var(--bs-gray-100);
     }
   }
 }
 
-.add-field-btn {
-  font-size: $t4-text;
-  margin: 10px 0;
+//form field styles
+.form-field {
+  @extend .mb-4;
+}
+
+.field-label {
+  @extend .form-label;
+}
+
+.field-control {
+  @extend .form-control;
 }
 
 // Nested form styles
 .nested-field-wrapper {
-  .nested-field-label {
-    @include font($size: $t4-text, $color: $primary-text-clr);
-    line-height: 22px;
-    margin: 0 0 4px;
-    span {
-      color: $ink-lightest-clr;
-      margin-left: 4px;
-    }
-  }
   .nested-single-field {
     display: grid;
     grid-template-columns: 1fr 32px;
@@ -107,163 +65,11 @@
   }
 }
 
-// Nested form Accordion styles
-.nested-form-accordion {
-  .accordion-item {
-    margin-bottom: 8px;
-    border: 1px solid $grey-light-clr;
-    border-radius: $radius-4;
-  }
-  .accordion-item:not(:first-of-type) {
-    border-top: 1px solid $grey-light-clr;
-  }
-  .accordion-item:first-of-type {
-    margin-top: 4px;
-    border-radius: $radius-4;
-  }
-  .accordion-item:last-of-type {
-    margin-bottom: 0;
-    border-radius: $radius-4;
-  }
-  .accordion-header {
-    position: relative;
-    display: flex;
-    .accordion-delete-btn {
-      position: absolute;
-      top: 14px;
-      right: 48px;
-      z-index: 9;
-    }
-  }
-  .accordion-button {
-    border-radius: $radius-4;
-    &:focus {
-      border-color: transparent;
-      box-shadow: none;
-    }
-    &:not(.collapsed) {
-      color: inherit;
-      background-color: transparent;
-      box-shadow: none;
-    }
-    &:not(.collapsed)::after {
-      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-    }
-  }
-}
-
-//Old form code
-.form-wrapper {
-  // margin-top: 60px;
-
-  &__top-bar {
-    position: fixed;
-    top: 60px;
-    left: 250px;
-    display: flex;
-    align-items: center;
-    width: calc(100% - 250px);
-    height: 60px;
-    padding: 0 20px;
-    background-color: $white;
-    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
-    z-index: 9;
-    .back-btn {
-      @include font($size: $t1-text, $color: #091e42);
-      cursor: pointer;
-      span {
-        color: #0099ff;
-        margin-right: 8px;
-      }
-    }
-  }
-
-  &__inner {
-    margin-top: 120px;
-    padding: 20px;
-    .paper {
-      padding: 20px;
-      background-color: $white;
-      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
-      border: 1px solid #ebecf0;
-      border-radius: $radius-4;
-    }
-  }
-
-  .cm-admin-form {
-    max-width: 600px;
-    .form-field {
-      margin-bottom: 20px;
-      .form-label {
-        @include font($size: $t4-text, $color: $primary-text-clr, $weight: 600);
-        margin-bottom: 0.5rem;
-      }
-      .form-input {
-        label {
-          @include font($size: $t4-text, $color: $primary-text-clr, $weight: bold);
-        }
-        input {
-          width: 100%;
-          padding: 5px 10px;
-          border: 1px solid #c1c7d0;
-          border-radius: $radius-2;
-          &:focus {
-            border-color: #66afe9 !important;
-            outline: 0 !important;
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
-          }
-        }
-      }
-
-      .file-upload {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 250px;
-        height: 80px;
-        border: 2px dashed #c1c7d0;
-        border-radius: $radius-4;
-        cursor: pointer;
-        input[type="file"] {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          opacity: 0;
-          cursor: pointer;
-        }
-        label {
-          color: #0099ff;
-          margin: 0;
-          cursor: pointer;
-        }
-        i {
-          color: #0099ff;
-          margin-left: 8px;
-        }
-      }
-
-      .radio-label {
-        @include font($size: $t3-text, $color: $primary-text-clr, $weight: 600);
-        margin-left: 8px;
-      }
-
-      .checkbox-label {
-        @include font($size: $t3-text, $color: $primary-text-clr, $weight: 600);
-        margin-left: 8px;
-      }
-    }
-
-    .form-actions {
-      input {
-        padding: 5px 10px;
-        color: $white;
-        background-color: #0099ff;
-        border: none;
-        border-radius: $radius-4;
-      }
-    }
+//Nested form table styles
+.nested-form-table {
+  @extend .table, .table-light, .table-hover, .table-bordered;
+  .item-delete-cell {
+    vertical-align: middle;
+    text-align: center;
   }
 }

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

@@ -1,5 +1,5 @@
 @import "../helpers/index.scss";
-@import "bootstrap/scss/bootstrap";
+@import "../dependency/bootstrap/scss/bootstrap";
 
 .entity-header {
   @extend .d-flex.justify-content-between.align-items-start.p-4;

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

@@ -9,7 +9,7 @@ body {
   width: 100%;
   margin: 0px;
   padding: 0px;
-  font-family: 'Open Sans', sans-serif !important;
+  font-family: "Open Sans", sans-serif !important;
   background-color: $grey-lightest-clr !important;
 }
 
@@ -35,7 +35,6 @@ body {
   }
 }
 
-
 a:hover,
 a {
   text-decoration: none !important;
@@ -79,9 +78,12 @@ a {
   overflow: auto;
 }
 
+// TODO: Check and remove the input-wrapper styles later
 .input-wrapper {
   margin-bottom: 24px;
-  input, select, .select2 {
+  input,
+  select,
+  .select2 {
     width: 320px;
   }
   textarea {
@@ -89,6 +91,7 @@ a {
   }
 }
 
+// TODO: Check and remove the input-wrapper styles later
 .input-wrapper.disabled {
   input:disabled {
     background-color: $grey-lightest-clr;
@@ -153,10 +156,10 @@ a {
       }
       .select2-results__option--highlighted.select2-results__option--selectable {
         background: $grey-lighter-clr;
-        color: $primary-text-clr;   
+        color: $primary-text-clr;
       }
       .select2-results__option--selected {
-        color: $brand-color !important;   
+        color: $brand-color !important;
         background-color: $grey-lighter-clr !important;
       }
     }

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

@@ -1,12 +1,15 @@
 @import "../helpers/index.scss";
-@import "bootstrap/scss/bootstrap";
+@import "../dependency/bootstrap/scss/bootstrap";
 
 .show-page {
+  height: 100vh;
   overflow: auto;
 
   &__header {
+    @extend .position-sticky, .top-0, .bg-white;
+    z-index: 5;
     .tabs {
-      @extend .nav.nav-pills.ml-2;
+      @extend .nav.nav-pills.ms-2;
       .nav-link {
         @include font($size: $t4-text, $color: $ink-lighter-clr);
         border-radius: 0px;
@@ -21,36 +24,26 @@
 
   &__inner {
     padding: 24px;
-    .info-section {
-      margin-bottom: 32px;
-
+    overflow: auto;
+    .section {
+      margin-bottom: 24px;
       .section-heading {
-        @include font($size: $t3-text, $color: $primary-text-clr, $weight: 600);
-        line-height: 24px;
-        margin: 0 0 16px;
-      }
-      .paper {
-        max-width: 752px;
-        padding: 24px;
-        background-color: $white;
-        border: 1px solid $grey-light-clr;
-        border-radius: $radius-4;
+        @extend .h6, .fw-semibold;
+        color: $primary-text-clr;
       }
-      .info-split {
+      .card-info {
         display: grid;
-        grid-template-columns: 140px 1fr;
+        grid-template-columns: 120px 1fr;
         grid-column-gap: 24px;
-        margin-bottom: 24px;
+        margin-bottom: 8px;
         &:nth-last-child(1) {
           margin-bottom: 0;
         }
-        &__lhs {
+        &__label {
           @include font($size: $t4-text, $color: $ink-lighter-clr);
-          line-height: 22px;
         }
-        &__rhs {
+        &__description {
           @include font($size: $t4-text, $color: $primary-text-clr);
-          line-height: 19px;
         }
       }
     }