# AdminlteAssets

Easy integration for Bootstrap AdminLTE template into Rails assests pipeline.

This gem was based on [adminlte2-rails](https://github.com/nicolas-besnard/adminlte2-rails) (we found that this gem isn't updated)

Current AdminLTE version: **AdminLTE 2.2.0**

***IMPORTANT ::*** If you update this gem is very important that don't download files from master, for **use the current AdminLTE version** supported by this gem. **Download from correspondent tag.**


AdminLTE resources:

- [AlmsaeedStudio](https://almsaeedstudio.com/)
- [Demo](https://almsaeedstudio.com/AdminLTE)
- [Docs](https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html)
- [GitHub](https://github.com/almasaeed2010/AdminLTE)

## TODO
- Treure les images que sobren, com per exemple les d'avatar, usuaris, ... **ULL** hi ha imatges que segurament fan falta, com les icones
- Add jquery and jqueryui to gempspec as requirements?

## Add to Gemfile
This add the version in master branch

~~~
gem 'adminlte_assets', :git => 'ssh://git@gitlab.coditdev.net:534/gems/adminlte_assets.git'
~~~

## Required things to add

### Javscripts
This template require JQuery, JQueryUI, Bootstrap and AdminLTE and slimScroll plugin.

This is an example with all default JS including `tree` and `self` (such as Rails do by default)

~~~
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require adminlte/plugins/slimScroll/jquery.slimscroll
//= require adminlte/app
//= require adminlte/plugin_options
//= require_tree .
//= require_self
~~~

### Stylesheets
This template require Boostrap, default AdminLTE and custom skin if you like. This is an example with blue skin:

~~~
/*
 *= require_self
 */

 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import "adminlte/app";
 @import "adminlte/skins/skin-blue"; // custom skin there are a lot of skins!!
~~~

## Plugins
This template include some plugins by default such there are all plugins included in this gem.

### Custom options for plugins
This is a javascript to rewrite default options for other plugins.
You can find this file in `javascripts/adminlte/plugin_options.js`
For example:
~~~
$.PluginsOptions.daterangepicker = {
    multiple: {
      showDropdowns: true
    }
}
~~~


### DateRangePicker
This is a date picker this can be used as **range date picker** or **single date picker**.

#### Javscripts
DateRangePicker require the `moment` JS library, we create `all.js` that automatically add this requirement and some other things.

This means that you only need add `all` and this will be include `daterangepicker` and `moment`:

~~~
//= require adminlte/plugins/daterangepicker/all
~~~

Also `all.js` include by default these few lines of JavaScript:

~~~
$('input[data-behaviour="daterange"]').daterangepicker($.PluginsOptions.daterangepicker.single);

$('input[data-behaviour="daterange-single"]').daterangepicker($.PluginsOptions.daterangepicker.single);
~~~

And this means that you can add `data-behaviour` attribute with `daterange` or `daterange-single` :

~~~
<%= f.text_field :test_created_at, 'data-behaviour'=> 'daterange' %>
<%= f.text_field :test_created_at, 'data-behaviour'=> 'daterange-single' %>
~~~

#### Stylesheets

~~~
/*
 *= require adminlte/plugins/daterangepicker/daterangepicker-bs3
 */
~~~

### Colorpicker

#### Javscripts
We create `all.js` that includes the `colorpicker` and some lines of JS.

This is an example of requirement:

~~~
//= require adminlte/plugins/colorpicker/all
~~~

This are the lines included:

~~~
$('input[data-behaviour="colorpicker"]').colorpicker($.PluginsOptions.colorpicker);
$('div[data-behaviour="colorpicker"]').colorpicker($.PluginsOptions.colorpicker);
~~~

And this means that you can add `data-behaviour` attribute with `colorpicker` in `input` or `div`. **This are from oficial docs** :

~~~
<!-- default -->
<input type="text" class="demo1" value="#5367ce" />

<!-- as component -->
<div class="input-group demo2">
    <input type="text" value="" class="form-control" />
    <span class="input-group-addon"><i></i></span>
</div>

<!-- with Rails form helper -->
<%= f.text_field :master_color, 'data-behaviour' => "colorpicker" %>
~~~

#### Stylesheets

~~~
/*
 *= require adminlte/plugins/colorpicker/bootstrap-colorpicker
 */
~~~