rails_material_admin 0.1.4 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a87bb41e4c2b4a725920f9e6d2ff1bbe7767c8ce16f90502ff101c28d9fc4b0b
-  data.tar.gz: 3c83b7ec816bef57067189e3d7118742275c7bd3a8719a27f31b9c84f2be6268
+  metadata.gz: 30f45ca5e4d9f67587182dac5886ac98d0fb575be7e678abbaab1acea81cec81
+  data.tar.gz: 23df68a00ad1c35c9992837ab57e2f1e98b325556262a3aaae9a96062444d792
 SHA512:
-  metadata.gz: 4aed7707c8cd6942b282d44becb6d29a9aff564ade494e7ddea1fb33b6ade479b31536dc28f8597c044b9b109be6e309365060123e088e68fceaaf3615d52b81
-  data.tar.gz: 598fc0f3b6175757f0f361c018b92310122ec2f94cc31ccc7ec8d15854d04e80233fe53f36e5b037368df7177f4713099d94b8b97ecca861c34067a45b9e0646
+  metadata.gz: 3c3d54ae2f3aa56b688c62fab3cff22c787663b6086b6509d84912adfa946fe8566858d5141464919aa7ee2b784a255cfbbe6d95c4d844b79cb615485d853858
+  data.tar.gz: c78896ab2cbc88e3721e27c4e52d173caddc996777c3d80fede6715b8f66ce57fe5a684ff70295b6e7d8134c3c2e8ee5fceef3058ad0ebe085ba5d6c5a630029

data/README.md

@@ -1,38 +1,12 @@
 # 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
-{
-  "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"
-  },
-  "devDependencies": {
-    "webpack-dev-server": "^3.11.0"
-  }
-}
-```
 
 
 ## Usage

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/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

@@ -8,8 +8,12 @@ class MaterialAdminGenerator < Rails::Generators::NamedBase
   JS_PKGS  =
     'datatables.net-bs4 datatables.net-responsive-bs4'\
     ' 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'
+  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.4'
+  VERSION = '0.1.8'
 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-bs4'
+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 'select2/dist/css/select2.css'
+
 import '../../../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css';
-import '../vendor/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';