rails_material_admin 0.1.5 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: def943b26235c0d7ebb1d59a251e0a28a97d1f7d1f28d3d2a4952601c09c32b4
-  data.tar.gz: 32c8887d4833da8c76537b56274ce0f5f778fdc86e3e65d542559fc5ce6caeb0
+  metadata.gz: e149cf1845f01081d80159c39143ed16a50d26bc5f91451f74258b2a107a415f
+  data.tar.gz: b40e938e32a9025500b2cd7934398ec428abdca35db677ccefa23292eef49e4c
 SHA512:
-  metadata.gz: 22a3201843be3115853032c33861676e6bfdcb7b601eeecc22ca7011624958ebc053a09e4e12d8dcef8068057dc5d934e1b2cf6d156ac1677a22e9d5ebd2a060
-  data.tar.gz: 49ae3a1a9b12ba766fc1ff23ef2a48deeaa2c8eff79ed69acd00bca0743d03d284e3dc8a8ba77547afce7cbe8ca99273cff9b535195904edac243e6855a7e891
+  metadata.gz: 50e463b925990f31db34e5034f977329a8be8d81ccd96bd9450f02140d0d052741958075aa858e2c00447ef0a0b9f225a259601c71024fab72c180df84f16017
+  data.tar.gz: ca4f286534ac41bb5350da901d240d93dfdb441cff226fcedd287a4bd256392f14cdf23240143d694d99f1d9ae02811f68fc1aeb13577a07369e75f0e2434378

data/README.md

@@ -1,35 +1,25 @@
 # 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
 
 ## Prerequisite
 - Need set up your db first
-- Used js libraries
-```json
+
+```
+// Gemfile
+gem 'webpacker', '~> 5.0'
+
+
+// package.json
 {
-  "name": "MyProject",
-  "private": true,
   "dependencies": {
-    "@rails/webpacker": "5.1.1",
-    "core-js": "3",
-    "file-loader": "^6.0.0",
-    "url-loader": "^4.1.0",
-    "expose-loader": "^0.7.5",
-    "resolve-url-loader": "^3.1.1",
-    "jquery": "^3.5.1",
-    "select2": "^4.0.13",
-    "popper.js": "^1.16.1",
-    "rails-ujs": "^5.2.4-2",
-    "stimulus": "^1.1.1",
-    "turbolinks": "^5.2.0",
-    "datatables.net-bs4": "^1.10.21",
-    "datatables.net-responsive-bs4": "^2.2.5"
+    "@rails/webpacker": "5.4.2",
   },
   "devDependencies": {
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.2"
   }
 }
 ```

data/app/helpers/admin_helper.rb

@@ -17,4 +17,38 @@ module ApplicationHelper
   def sort_opt(model, column)
     { model: model, column: column }.to_json
   end
+
+  def sub_item_active?(sub_c_names = [])
+    class_names = 'sidebar-item'
+
+    if controller_name.in?(sub_c_names)
+      class_names += ' active'
+    end
+
+    class_names
+  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/config/webpack/environment.js

@@ -10,7 +10,11 @@ environment.loaders.append('expose-loader', {
   test: require.resolve('jquery'),
   use: [{
     loader: 'expose-loader',
-    options: '$'
+    options: {
+      exposes: {
+        globalName: '$',
+      }
+    }
   }]
 })
 

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

@@ -6,10 +6,14 @@ class MaterialAdminGenerator < Rails::Generators::NamedBase
   GEM_NAME = 'rails_material_admin'
   GEM_PATH = Gem.loaded_specs[GEM_NAME].full_gem_path
   JS_PKGS  =
-    'datatables.net-bs4 datatables.net-responsive-bs4'\
+    'datatables.net-bs5 datatables.net-responsive-bs5'\
     ' expose-loader file-loader url-loader resolve-url-loader'\
-    ' rails-ujs stimulus turbolinks'\
-    ' jquery popper.js select2'
+    ' @rails/ujs @rails/activestorage'\
+    ' stimulus turbolinks'\
+    ' jquery popper.js select2 @popperjs/core webpack-cli'
+  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.
 
@@ -38,9 +42,9 @@ class MaterialAdminGenerator < Rails::Generators::NamedBase
 
     FileUtils.copy_entry("#{GEM_PATH}/vendor/#{GEM_NAME}", "#{webpacker_dir}/vendor/#{GEM_NAME}/")
 
-    p 'Import package.json...'
+    # p 'Import package.json...'
 
-    FileUtils.cp "#{GEM_PATH}/package.json", "#{Rails.root}/package.json"
+    # FileUtils.cp "#{GEM_PATH}/package.json", "#{Rails.root}/package.json"
 
     p 'Import js source files...'
 
@@ -59,6 +63,11 @@ class MaterialAdminGenerator < Rails::Generators::NamedBase
     )
   end
 
+  def yarn_install
+    system("yarn add #{JS_PKGS}")
+    system("yarn add #{ESLINT_JS_PKGS} --dev")
+  end
+
   def create_helper
     p "Create #{layout_name} layout helper..."
 
@@ -129,10 +138,6 @@ class MaterialAdminGenerator < Rails::Generators::NamedBase
     FileUtils.copy_entry("#{GEM_PATH}/app/views/shared", dest)
   end
 
-  def yarn_install
-    system("yarn add #{JS_PKGS}")
-  end
-
   def create_base_controller
     p "Create base controller'"
 
@@ -143,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.5'
+  VERSION = '0.1.9'
 end

data/vendor/javascript/packs/admin.js

@@ -1,23 +1,29 @@
 import 'core-js/stable'
 import 'regenerator-runtime/runtime'
 
-import { Application } from "stimulus";
-import { definitionsFromContext } from "stimulus/webpack-helpers"
+import { Application } from 'stimulus'
+import { definitionsFromContext } from 'stimulus/webpack-helpers'
 
-import Rails from 'rails-ujs';
-import Turbolinks from 'turbolinks';
+import Rails from '@rails/ujs'
+import Turbolinks from 'turbolinks'
 
-import 'datatables.net';
-import 'datatables.net-responsive-bs4';
-import 'select2';
+import 'datatables.net'
+import 'datatables.net-responsive-bs5'
+import 'select2'
 
-import '../vendor/material_admin/material_admin';
+import '../vendor/rails_material_admin/material_admin'
 
-import '../src/javascripts/lib/utils_datatables.js';
-import '../src/javascripts/admin/common/scaffold.js';
+import bootstrap from '../vendor/rails_material_admin/js/bootstrap.min'
+window.bootstrap = bootstrap
 
-Rails.start();
-Turbolinks.start();
+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'
+
+Rails.start()
+Turbolinks.start()
 
 const application = Application.start()
 // const context = require.context("../src/javascripts/admin/controllers/", true, /\.js$/)

data/vendor/javascript/packs/admin_style.js

@@ -1,5 +1,7 @@
-import '../../../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css';
-import '../vendor/material_admin/material_admin.scss';
+import 'select2/dist/css/select2.css'
+
+import '../../../node_modules/datatables.net-bs5/css/dataTables.bootstrap5.css';
+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,11 +13,11 @@ ul#sidebarnav > li > a {
 }
 
 /* form */
-[type=checkbox] + label {
+[type='checkbox'] + label {
   margin-right: 15px;
 }
 
-[type=radio] + label {
+[type='radio'] + label {
   margin-right: 15px;
 }
 
@@ -32,3 +32,40 @@ form .form-body .form-group > label {
   margin-bottom: 14px;
   border-bottom: none;
 }
+
+
+input[type='text'].form-control,
+textarea.form-control {
+  &::-webkit-input-placeholder {
+    font-weight: 300;
+  }
+  &::-moz-placeholder {
+    font-weight: 300;
+  }
+  &:-ms-input-placeholder {
+    font-weight: 300;
+  }
+  &:-moz-placeholder {
+    font-weight: 300;
+  }
+}
+
+#error_explanation ul {
+  margin-bottom: 0;
+}
+
+.input-group-text {
+  .form-check {
+    margin-bottom: 0;
+  }
+
+  .form-check-label {
+    margin-bottom: 0;
+  }
+}
+
+
+/* table */
+table.editable-table td.select-cell {
+  padding: 0;
+}

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

@@ -0,0 +1,62 @@
+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;
+}
+
+
+/* DataTable */
+div.dataTables_wrapper div.dataTables_paginate {
+  margin-top: 8px;
+}
+
+.page-wrapper {
+  transition: none;
+}

data/vendor/javascript/src/stylesheets/shared/override.scss

@@ -1,7 +1,3 @@
 html, body {
   height: 100%;
 }
-
-.topbar .top-navbar .navbar-header .navbar-brand {
-  color: white;
-}