feat: form wtapper

Author: marsz

app/assets/stylesheets/admin/gentelella-custom.scss

@@ -10,3 +10,7 @@
 .page-title .title_right {
   text-align: right;
 }
+
+form.form-horizontal .checkbox > label {
+  padding-left: 0px;
+}

app/form_builders/admin_form_builder.rb

@@ -0,0 +1,22 @@
+class AdminFormBuilder < SimpleForm::FormBuilder
+  def submit_cancel(*args, &block)
+    out = ActiveSupport::SafeBuffer.new
+    out << template.content_tag(:div, class: 'ln_solid') do
+    end
+    out << template.content_tag(:div, class: 'form-group') do
+      template.content_tag :div, class: 'col-md-9 col-sm-9 col-xs-12 col-md-offset-3' do
+        options = args.extract_options!
+        options[:class] = [options[:class], 'btn btn-primary'].compact
+        args << options
+        if cancel = options.delete(:cancel)
+          cancel_text = I18n.t('simple_form.buttons.cancel', default: 'Cancel')
+          link = template.link_to(cancel_text, cancel, class: 'btn btn-default')
+          submit(*args, &block) + '&nbsp;&nbsp;'.html_safe + link
+        else
+          submit(*args, &block)
+        end
+      end
+    end
+    out
+  end
+end

app/helpers/admin_helper.rb

@@ -55,6 +55,8 @@ def admin_stylesheet_links
       'https://colorlib.com/polygon/vendors/font-awesome/css/font-awesome.min.css',
       'https://colorlib.com/polygon/vendors/nprogress/nprogress.css',
       'https://colorlib.com/polygon/vendors/bootstrap-daterangepicker/daterangepicker.css',
+      'https://colorlib.com/polygon/vendors/switchery/dist/switchery.min.css',
+      'https://colorlib.com/polygon/vendors/iCheck/skins/flat/green.css',
       'https://colorlib.com/polygon/build/css/custom.min.css'
     ]
   end
@@ -74,9 +76,24 @@ def admin_javascript_links
       'https://colorlib.com/polygon/vendors/flot.orderbars/js/jquery.flot.orderBars.js',
       'https://colorlib.com/polygon/vendors/flot-spline/js/jquery.flot.spline.min.js',
       'https://colorlib.com/polygon/vendors/DateJS/build/date.js',
+      'https://colorlib.com/polygon/vendors/iCheck/icheck.min.js',
       'https://colorlib.com/polygon/vendors/moment/min/moment.min.js',
       'https://colorlib.com/polygon/vendors/bootstrap-daterangepicker/daterangepicker.js',
+      'https://colorlib.com/polygon/vendors/switchery/dist/switchery.min.js',
       'https://colorlib.com/polygon/build/js/custom.min.js'
+
     ]
   end
+
+  def admin_search_form_for(obj, options, &block)
+    options ||= {}
+    options.deep_merge!(builder: AdminFormBuilder, html: { class: 'form-horizontal' }, wrapper: :admin, defaults: { required: false })
+    search_form_for(obj, options, &block)
+  end
+
+  def admin_form_for(obj, options, &block)
+    options ||= {}
+    options.deep_merge!(builder: AdminFormBuilder, html: { class: 'form-horizontal' }, wrapper: :admin, defaults: { required: false })
+    simple_form_for(obj, options, &block)
+  end
 end

app/inputs/pic_preview_input.rb

@@ -4,13 +4,16 @@ def input(_wrapper_options = nil)
     # :version is a custom attribute from :input_html hash, so you can pick custom sizes
     version = input_html_options.delete(:version)
     out = ActiveSupport::SafeBuffer.new
+    input_html_classes.push('form-control')
     out << @builder.file_field(attribute_name, input_html_options)
     if object.send("#{attribute_name}?")
-      remove_chk = @builder.check_box("remove_#{attribute_name}") # carrierwave: remove_xxx
+      remove_chk = @builder.check_box("remove_#{attribute_name}", class: 'flat') # carrierwave: remove_xxx
       out << '<br />'.html_safe
-      out << "<label>#{remove_chk} remove</label>".html_safe # TRANSLATION: I18n here
+      remove_text = I18n.t('simple_form.buttons.remove', default: 'Remove')
+      out << "<label>#{remove_chk} #{remove_text}</label>".html_safe
       out << '<br />'.html_safe
-      out << template.image_tag(object.send(attribute_name).tap { |o| break o.send(version) if version }.send('url'))
+      img_path = object.send(attribute_name).tap { |o| break o.send(version) if version }.send('url')
+      out << template.image_tag(img_path)
     end
     out
   end

app/inputs/switch_input.rb

@@ -0,0 +1,5 @@
+class SwitchInput < SimpleForm::Inputs::BooleanInput
+  def input(wrapper_options = nil)
+    super(wrapper_options)
+  end
+end

app/views/admin/base/index.html.slim

@@ -1 +0,0 @@
-input data-datetimepicker="true"

app/views/admin/users/_filtering.html.slim

@@ -1,8 +1,7 @@
-= search_form_for @q, :builder => SimpleForm::FormBuilder, html: { class: "form-horizontal" }, wrapper: :admin, defaults: { required: false } do |f|
-  = f.input :has_avatar, as: :boolean, label: "has avatar"
+= admin_search_form_for @q, nil do |f|
+  = f.input :has_avatar, as: :switch, label: "has avatar"
   = f.input :name_cont, label: "name contains"
   = f.input :email_cont, label: "email contains"
   - if Rails.env.development?
     = f.input :created_at_eq, as: :string, input_html: { name: "", value: @q.result.to_sql }, label: "debug sql"
-  .form-actions
-    = f.submit "Search", class: "btn btn-primary"
+  = f.submit_cancel 'Search'

app/views/admin/users/_form.html.slim

@@ -3,5 +3,4 @@
 = f.input :password, as: :password if f.object.new_record?
 = f.input :admin, as: :boolean
 = f.input :avatar, as: :pic_preview, input_html: { version: :thumb }
-.form-actions
-  = f.submit class: "btn btn-primary"
+= f.submit_cancel cancel: admin_users_path

app/views/admin/users/edit.html.slim

@@ -2,5 +2,5 @@
   = render partial: "btns", object: @user, as: :user
 
 = admin_widget_box "Edit User" do
-  = simple_form_for @user, as: :user, wrapper: :admin do |f|
+  = admin_form_for @user, as: :user, wrapper: :admin do |f|
     = render partial: "form", object: f, as: :f

app/views/admin/users/index.html.slim

@@ -1,4 +1,4 @@
-- append_page_button('export to CSV', url_for(request.params.merge(format: :csv)), class: 'btn-success')
+- append_page_button('Export', url_for(request.params.merge(format: :csv)))
 
 .row
   = admin_widget_box "Filtering" do

app/views/admin/users/new.html.slim

@@ -1,4 +1,3 @@
-.row
-  = admin_widget_box "New User" do
-    = simple_form_for @user, as: :user, wrapper: :admin do |f|
-      = render partial: "form", object: f, as: :f
+= admin_widget_box "New User" do
+  = admin_form_for @user, as: :user, wrapper: :admin do |f|
+    = render partial: "form", object: f, as: :f

config/initializers/simple_form_admin.rb

@@ -0,0 +1,39 @@
+# Use this setup block to configure all options available in SimpleForm.
+SimpleForm.setup do |config|
+  config.error_notification_class = 'alert alert-danger'
+  config.button_class = 'btn btn-default'
+  config.boolean_label_class = nil
+
+  config.wrappers :admin, tag: :div, class: 'form-group' do |b|
+    b.use :placeholder
+    b.use :label, class: 'control-label col-md-3 col-sm-3 col-xs-12'
+    b.wrapper tag: :div, class: 'col-md-9 col-sm-9 col-xs-12' do |ba|
+      ba.use :input, class: 'form-control', wrap_with: nil
+      # ba.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
+      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
+    end
+  end
+
+  config.wrappers :admin_boolean, tag: :div, class: 'form-group' do |b|
+    b.use :label, class: 'control-label col-md-3 col-sm-3 col-xs-12'
+    b.wrapper tag: :div, class: 'col-md-9 col-sm-9 col-xs-12' do |ba|
+      ba.wrapper tag: :div, class: 'checkbox' do |bba|
+        bba.use :input, class: 'flat'
+      end
+    end
+  end
+
+  config.wrappers :admin_boolean_switch, tag: :div, class: 'form-group' do |b|
+    b.use :label, class: 'control-label col-md-3 col-sm-3 col-xs-12'
+    b.wrapper tag: :div, class: 'col-md-9 col-sm-9 col-xs-12' do |ba|
+      ba.wrapper tag: :div, class: 'checkbox' do |bba|
+        bba.use :input, class: 'js-switch'
+      end
+    end
+  end
+
+  config.wrapper_mappings = {
+    boolean: :admin_boolean,
+    switch: :admin_boolean_switch
+  }
+end