rails_material_admin 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4b3364f18972b77b40153b8aa0ebd70bc58cddb61756e57989a2bebde6d8a5a
-  data.tar.gz: 8da212e4b2f996bd258c687dce0e7bcde0cbe214222fdfc6fd7c33cddaa9048c
+  metadata.gz: 30f45ca5e4d9f67587182dac5886ac98d0fb575be7e678abbaab1acea81cec81
+  data.tar.gz: 23df68a00ad1c35c9992837ab57e2f1e98b325556262a3aaae9a96062444d792
 SHA512:
-  metadata.gz: 8b8297f2577f2ffd71c83c072f1718ad7861d85b32b1efe24f081d096b24d43b6b9f30eebe552feb4b7d80d3e7045453f756f4173f75796d815d18f300d7992a
-  data.tar.gz: 80900e997b9f24df31e43c9c575cb6c7187b3c3202de4295ddf1a361d63dacd8679a1ab808094c38da7689bf8ac197fa7e0259d003c5ebde04f9808e42619471
+  metadata.gz: 3c3d54ae2f3aa56b688c62fab3cff22c787663b6086b6509d84912adfa946fe8566858d5141464919aa7ee2b784a255cfbbe6d95c4d844b79cb615485d853858
+  data.tar.gz: c78896ab2cbc88e3721e27c4e52d173caddc996777c3d80fede6715b8f66ce57fe5a684ff70295b6e7d8134c3c2e8ee5fceef3058ad0ebe085ba5d6c5a630029

data/README.md

@@ -1,7 +1,7 @@
 # MaterialAdmin
 Use rails webpacker to bundle the material admin template.
 
-https://www.wrappixel.com/demos/admin-templates/material-pro/Documentation/document.html
+https://wrappixel.com/demos/admin-templates/materialpro-bootstrap-latest/material-pro/src/material/ui-scrollspy.html#list-item-2
 
 Easily install and set up admin quickly
 

data/app/helpers/admin_helper.rb

@@ -17,4 +17,29 @@ module ApplicationHelper
   def sort_opt(model, column)
     { model: model, column: column }.to_json
   end
+
+  def sidebar_item_classes(c_names, *a_names)
+    class_names = 'sidebar-item'
+
+    if a_names.any?
+      class_names += ' selected' if controller_name.in?(c_names) && action_name.in?(a_names)
+    else
+      class_names += ' selected' if controller_name.in? c_names
+    end
+
+    class_names
+  end
+
+  def sidebar_item_link_classes(c_names, *a_names)
+    class_names = 'sidebar-link waves-effect waves-dark sidebar-link'
+
+    if a_names.any?
+      class_names += ' active' if controller_name.in?(c_names) && action_name.in?(a_names)
+    else
+      class_names += ' active' if controller_name.in? c_names
+    end
+
+    class_names
+  end
+
 end

data/app/views/admin/sessions/new.html.slim

@@ -1,30 +1,33 @@
-section#wrapper
-  .login-register
-    .login-box.card
-      .card-body
-        = form_for resource,
-          as: resource_name,
-          url: session_path(resource_name),
-          html: { class: 'form-horizontal form-material' } do |f|
+.auth-wrapper.d-flex.no-block.justify-content-center.align-items-center
+  .auth-box.p-4.bg-white.rounded
+    #loginform
+      .logo
+        h3.box-title.mb-3 Sign In
 
-          h3.box-title.m-b-20 Sign In
+      .row
+        .col-12
+          = form_for resource,
+            as: resource_name,
+            url: session_path(resource_name),
+            html: { class: 'form-horizontal mt-3 form-material', id: 'loginform' } do |f|
 
-          .form-group
-            .col-xs-12
-              = f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control'
+            .form-group.mb-3
+              .col-xs-12
+                = f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control', placeholder: 'Email'
 
-          .form-group
-            .col-xs-12
-              = f.password_field :password, autocomplete: "current-password", class: 'form-control'
+            .form-group.mb-4
+              .col-xs-12
+                = f.password_field :password, autocomplete: "current-password", class: 'form-control', placeholder: 'Password'
 
-          - if devise_mapping.rememberable?
-            .form-group
-              .d-flex.no-block.align-items-center
-                .checkbox.checkbox-primary.p-t-0
-                  = f.check_box :remember_me
-                  = f.label :remember_me
+            - if devise_mapping.rememberable?
+              .form-group
+                .d-flex
+                  div class="checkbox checkbox-info pt-0"
+                    input id="checkbox-signup" type="checkbox" class="material-inputs chk-col-indigo"
+                      label for="checkbox-signup" Remember me
+
+            .form-group.text-center.mt-4.mb-3
+              .col-xs-12
+                = f.submit "Log in", class: 'btn btn-info d-block w-100 waves-effect waves-light'
 
-          .form-group.text-center.m-t-20
-            .col-xs-12
-              = f.submit "Log in", class: 'btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light'
 

data/app/views/layouts/admin.html.slim

@@ -17,17 +17,28 @@ html xmlns:wb="http://open.weibo.com/wb"
     /! Preloader - style you can find in spinners.css
     // NOTE: Need fix for turbolinks.
     / .preloader
-    /   svg.circular viewbox=("25 25 50 50") 
+    /   svg.circular viewbox=("25 25 50 50")
     /     circle.path cx="50" cy="50" fill="none" r="20" stroke-miterlimit="10" stroke-width="2" /
 
     /! Main wrapper - style you can find in pages.scss
-    #main-wrapper
+    #main-wrapper[
+      data-theme="light"
+      data-layout="vertical"
+      data-navbarbg="skin1"
+      data-sidebartype="full"
+      data-sidebar-position="fixed"
+      data-header-position="fixed"
+      data-boxed-layout="full"
+    ]
       = render 'admin/shared/header'
       = render 'admin/shared/sidebar'
-      
-      .page-wrapper
+
+      .page-wrapper style="display: block;"
+        = yield :breadcrumb
+
         .container-fluid
-          = yield :breadcrumb
+          = yield :error_messages
+          
           .row
             = yield
 

data/app/views/shared/_error_messages.html.slim

@@ -1,8 +1,13 @@
-- if resource.errors.any?
+- targets = Array(target).select { |ele| ele.errors.any? }
+
+- if targets.any?
   #error_explanation
-    h2
-      = I18n.t("errors.messages.not_saved", count: resource.errors.count, resource: resource.class.model_name.human.downcase)
-    ul
-      - resource.errors.full_messages.each do |message|
-        li
-          = message
+    div [
+      class="alert customize-alert alert-dismissible alert-light-danger text-danger fade show"
+      role="alert" 
+    ]
+      button.btn-close aria-label="Close" data-bs-dismiss="alert" type="button" 
+
+      - targets.map(&:errors).map(&:messages).map(&:values).flatten.each do |message|
+        | #{message}
+

data/app/views/shared/_flash_messages.html.slim

@@ -0,0 +1,14 @@
+- if flash.any?
+  - flash.each do |name, msg|
+    - if [String, Array].include?(msg.class)
+      - message = msg.is_a?(Array) ? msg.join('<br>').html_safe : msg
+
+      div [
+        class="alert customize-alert alert-dismissible alert-light-#{name.to_s == 'notice' ? 'success' : 'danger'} text-danger fade show"
+        role="alert" 
+      ]
+        button.btn-close aria-label="Close" data-bs-dismiss="alert" type="button" 
+
+        .d-flex.align-items-center.font-weight-medium
+         i.text-danger.fill-white.feather-sm.me-2 data-feather="info" = message
+

data/app/views/shared/_header.html.slim

@@ -1,9 +1,11 @@
 /! Topbar header - style you can find in pages.scss
-header.topbar
-  nav.navbar.top-navbar.navbar-expand-md.navbar-light
-    /! Logo
-    .navbar-header
-      a.navbar-brand href="/" tppabs="https://wrappixel.com/demos/admin-templates/material-pro/material/index.html" 
+header.topbar data-navbarbg="skin1"
+  nav.navbar.top-navbar.navbar-expand-md.navbar-dark
+    .navbar-header data-logobg='skin1'
+      a.nav-link.nav-toggler.d-block.d-md-none.text-muted.waves-effect.waves-dark href="javascript:void(0)" 
+        i.mdi.mdi-menu
+
+      a.navbar-brand href="/admin" tppabs="https://wrappixel.com/demos/admin-templates/material-pro/material/index.html" 
         /! Logo icon
         b
           /! You can put here icon as well // <i class="wi wi-sunset"></i> //
@@ -11,14 +13,16 @@ header.topbar
           / img.dark-logo alt="homepage" src="../assets/images/logo-icon.png" /
           /! Light Logo icon
           / img.light-logo alt="homepage" src="../assets/images/logo-light-icon.png" /
-          / = image_tag nil, width: 45, class: 'light-logo'
-        span.inline-block.ml10 Logo
-    .navbar-collapse
-      ul.navbar-nav.mr-auto.mt-md-0
-        li.nav-item
-          a.nav-link.nav-toggler.hidden-md-up.text-muted.waves-effect.waves-dark href="javascript:void(0)" 
-            i.mdi.mdi-menu
+          = image_tag asset_pack_path('media/images/logo-light-icon.png'), class: 'light-logo'
+        span.logo-text
+          .inline-block.ml10 Logo
+
+      a.topbartoggler.d-block.d-md-none.waves-effect.waves-light href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
+        i.ti-more
+
+    .navbar-collapse.collapse data-navbarbg="skin1"
+      ul.navbar-nav.me-auto
         li.nav-item
-          a.nav-link.sidebartoggler.hidden-sm-down.text-muted.waves-effect.waves-dark href="javascript:void(0)" 
+          a.nav-link.sidebartoggler.d-none.d-md-block.waves-effect.waves-dark href="javascript:void(0)" 
             i.ti-menu
 

data/app/views/shared/_sidebar.html.slim

@@ -1,15 +1,14 @@
 /! ==============================================================
 /! Left Sidebar - style you can find in sidebar.scss
 /! ==============================================================
-aside.left-sidebar
-  /! Sidebar scroll
-  .scroll-sidebar
-    /! Sidebar navigation
+aside.left-sidebar data-sidebarbg='skin6'
+  .scroll-sidebar.ps-container.ps-theme-default.ps-active-y
+    /! Sidebar scroll
     nav.sidebar-nav
-      ul#sidebarnav
+      ul#sidebarnav.in
         / li.nav-small-cap Project title
-        li
-          = link_to '#' do
+        li class=sidebar_item_classes('users')
+          = link_to '#', class: sidebar_item_link_classes('users') do
             i.fa.fa-user
             span.hide-menu Menu
 
@@ -19,5 +18,7 @@ aside.left-sidebar
     /   i.ti-settings
     / a.link data-toggle="tooltip" href="" title="Email"
     /   i.mdi.mdi-gmail
-    a.link data-toggle="tooltip" href=destroy_admin_session_path title="Logout" data-method="DELETE"
+    = link_to destroy_admin_session_path, title: 'Logout', method: :delete, data: { toggle: 'tooltip' } do
       i.mdi.mdi-power
+    / a.link data-toggle="tooltip" href=destroy_admin_session_path title="Logout" data-method="DELETE"
+

data/lib/generators/crud/crud_generator.rb

@@ -71,6 +71,9 @@ class CrudGenerator < Rails::Generators::NamedBase
 
     create_file "#{Rails.root}/app/views/#{layout_name}/#{resource}/_form.html.slim" do
       <<~html
+        = content_for :error_messages do
+          = render 'admin/shared/error_messages', target: @#{name}
+
         .col-lg-12
           .card
             .card-body
@@ -108,9 +111,6 @@ class CrudGenerator < Rails::Generators::NamedBase
         # frozen_string_literal: true
 
         class #{layout_name.camelize}::#{resource.camelize}Controller < #{layout_name.camelize}::BaseController
-
-          include DatatableDecorator
-
           def index
             respond_to do |format|
               format.html
@@ -144,7 +144,7 @@ class CrudGenerator < Rails::Generators::NamedBase
 
             @total_rows = #{resource}.count
 
-            @rows = users.page(dt[:page]).per(dt[:per_page])
+            @rows = #{resource}.page(dt[:page]).per(dt[:per_page])
             @rows = @rows.order(search_obj[:order])
           end
         end

data/lib/generators/material_admin/material_admin_generator.rb

@@ -10,7 +10,10 @@ class MaterialAdminGenerator < Rails::Generators::NamedBase
     ' expose-loader file-loader url-loader resolve-url-loader'\
     ' @rails/ujs @rails/activestorage'\
     ' stimulus turbolinks'\
-    ' jquery popper.js select2'
+    ' jquery popper.js select2 @popperjs/core'
+  ESLINT_JS_PKGS =
+    'eslint prettier eslint-plugin-prettier eslint-config-prettier'\
+    ' stylelint stylelint-config-prettier stylelint-config-recommended stylelint-scss'
 
   # TODO: Warning! Add reset project.
 
@@ -62,6 +65,7 @@ class MaterialAdminGenerator < Rails::Generators::NamedBase
 
   def yarn_install
     system("yarn add #{JS_PKGS}")
+    system("yarn add #{ESLINT_JS_PKGS} --dev")
   end
 
   def create_helper
@@ -144,6 +148,8 @@ class MaterialAdminGenerator < Rails::Generators::NamedBase
         class #{layout_name.camelize}::BaseController < ActionController::Base
           layout '#{layout_name}'
 
+          include DatatableDecorator
+
           before_action :authenticate_#{layout_name}!
         end
       dashboard_controller

data/lib/material_admin/version.rb

@@ -1,3 +1,3 @@
 module MaterialAdmin
-  VERSION = '0.1.7'
+  VERSION = '0.1.8'
 end

data/vendor/javascript/packs/admin.js

@@ -13,6 +13,12 @@ import 'select2'
 
 import '../vendor/rails_material_admin/material_admin'
 
+import bootstrap from '../vendor/rails_material_admin/js/bootstrap.min'
+window.bootstrap = bootstrap
+
+import Swal from '../vendor/rails_material_admin/js/sweetalert2.min'
+window.Swal = Swal
+
 import '../src/javascripts/lib/utils_datatables.js'
 import '../src/javascripts/admin/common/scaffold.js'
 

data/vendor/javascript/packs/admin_style.js

@@ -1,5 +1,7 @@
+import 'select2/dist/css/select2.css'
+
 import '../../../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css';
-import '../../rails_material_admin/material_admin.scss';
+import '../vendor/rails_material_admin/material_admin.scss';
 import '../src/stylesheets/shared/atom.scss';
-import '../src/stylesheets/shared/override.scss';
+import '../src/stylesheets/admin/shared/override.scss';
 import '../src/stylesheets/admin/shared/common.scss';

data/vendor/javascript/src/stylesheets/admin/shared/common.scss

@@ -13,22 +13,48 @@ ul#sidebarnav > li > a {
 }
 
 /* form */
-[type=checkbox] + label {
-  margin-right: 15px;
-}
+form .form-body {
+  .form-group > label,
+  .form-group .field_with_errors > label {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-[type=radio] + label {
-  margin-right: 15px;
-}
+  .form-group {
+    padding-bottom: 0;
+    margin-bottom: 14px;
+    border-bottom: none;
+  }
 
-form .form-body .form-group > label {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
+  .field_with_errors {
+    display: contents;
 
-.form-body .form-group {
-  padding-bottom: 0;
-  margin-bottom: 14px;
-  border-bottom: none;
+    .form-control {
+      border-color: #fc4b6c;
+      padding-right: calc(1.5em + .75rem);
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fc4b6c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fc4b6c' stroke='none'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right calc(.375em + .1875rem) center;
+      background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+    }
+
+    span.select2.select2-container .selection .select2-selection {
+      border-color: #fc4b6c;
+      padding-right: calc(1.5em + .75rem);
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fc4b6c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fc4b6c' stroke='none'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right calc(.375em + 1rem) center;
+      background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+    }
+  }
+
+  [type=checkbox] + label {
+    margin-right: 15px;
+  }
+
+  [type=radio] + label {
+    margin-right: 15px;
+  }
 }
+

data/vendor/javascript/src/stylesheets/admin/shared/overide.scss

@@ -0,0 +1,84 @@
+html, body {
+  height: 100%;
+}
+
+.topbar .top-navbar .navbar-header .navbar-brand {
+  color: white;
+}
+
+// NOTE: If you want reduce the checkbox border
+// [type='checkbox'] + label:before,
+// [type='checkbox']:not(.filled-in) + label:after {
+//   border: 1px solid #ced4da;
+// }
+
+/* select2 */
+.select2-container {
+  width: 100% !important;
+}
+
+.select2-container--default .select2-selection--multiple {
+  border: 1px solid #ced4da;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple,
+.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
+.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+  border: 1px solid #ced4da;
+  color: #495057;
+  background-color: #fff;
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__rendered {
+  padding-left: 12px;
+}
+
+.select2-search__field {
+  color: #999;
+  font-weight: 300;
+}
+
+// Fix placeholder missing when select is initially hidden.
+.select2-search--inline {
+  /*this will make the container disappear, making the child the one who sets the width of the element*/
+  display: contents;
+}
+.select2-search__field:placeholder-shown {
+  /*makes the placeholder to be 100% of the width while there are no options selected*/
+  width: 100% !important;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__placeholder {
+  font-size: 16px;
+  color: #67757c;
+}
+
+.datepicker.datepicker-dropdown.dropdown-menu {
+  z-index: 9999 !important;
+}
+
+
+/* Admin template css update */
+.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.form-control, .form-control::placeholder {
+  font-weight: 200;
+}
+
+.btn.active.focus, .btn.active:focus,
+.btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
+  outline: none;
+}
+