# Binco

This is a wrapper for adding bootstrap to your Rails 6 projects. By includinig this gem you'll add a series of helpers that work with the bootstrap CSS framework:

* [Bootstrap](https://github.com/twbs/bootstrap)
* [Bootstrap Datepicker](https://github.com/uxsolutions/bootstrap-datepicker)
* [Select2](https://github.com/select2/select2)
* [Will paginate](https://github.com/mislav/will_paginate) (Optional)
* Links with `data: { confirm: 'Sure?' }` opens in Bootstrap Modal by default.
* Bootstrap Helpers

## Installation

To install simply include into Gemfile:
```
gem 'binco'
```

and run:

```
bundle install
```

then add our css/js dependencies using yarn

```
 yarn add bootstrap select2 bootstrap-datepicker
```

### Automatic
Run `rails g binco:install`

This creates the `application.scss` with binco (and bootstrap) included, your `_bootstrap-overrides.scss`.

### Manual Installation
In your application.scss add:
```
// Install bootstrap using yarn
// $ yarn add bootstrap
@import "bootstrap_variables";
@import "bootstrap/scss/bootstrap";

// Install select2 with yarn
// $ yarn add select2
// @import "select2/dist/css/select2";

@import "binco";
```

And uncomment the select2 part if you wish to use it.

In your application.js add:
```
require("bootstrap")

// Uncomment this lines if you are going to use select2 and/or bootstrap datepicker
// import $ from 'jquery'
// require('select2')
// require("bootstrap-datepicker")
```

#### Optional
For customization of datepicker make sure to include your locale js and send it as data attribute when creating a datepicker.
```
# app/javascripts/packs/application.js

$.fn.datepicker.dates['es'] = {
	days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
	daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
	daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
	months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
	monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
	today: "Hoy",
	monthsTitle: "Meses",
	clear: "Borrar",
	weekStart: 1,
	format: "yyyy-mm-dd"
};

$.fn.datepicker.defaults.language = "es"
```

## Usage

```erb
<%= bootstrap_form_for(@object) do |f| %>
  <%= f.form_group do %>
    <%= f.label :product_id %>
    <%= f.collection_select :product_id, @products, :id, :name, class: 'special-select-class-if-needed' %>
  <% end %>

  <%= f.form_group do %>
    <%= f.label :name %>
    <%= f.number_field :name %>
  <% end %>

  <!-- select2 support -->
  <%= f.form_group do %>
    <%= f.label :product %>
    <%= f.collection_select2 :product_id, @products, :name, :id %>
  <% end %>

  <!-- select2 support for checkboxes -->
  <%= f.form_group do %>
    <%= f.label :products %>
    <%= f.collection_check_boxes2 :product_id, @products, :name, :id %>
  <% end %>

  <%= f.submit 'Great!' %>
<% end %>
```

### Modals
```erb
<%= modal 'filter-modal' do %>
  <%= modal_header 'One fine title'%>
  <%= modal_body do %>
    One fine body
  <% end %>
  <%= modal_footer do %>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
  <% end %> <!--  end modal_footer -->
<% end %> <!-- end modal -->
```

### Breadcrumbs
In your layout render the partial wherever your like
```erb
<%= render 'binco/breadcrumb' %>
```
In your views, add an element to breadcrumb with:
```erb
<% breadcrumb_add(title: 'new', url: pages_new_path) %>
```
Notice that first in first out. So be careful with the order.

Your can configure your placeholder and default url for the breadcrumb in an initializer:

```rb
Binco.configure do |binco|
  binco.breadcrumb_before = { title: 'You are here' }
  binco.breadcrumb_default = [
    { title: 'Index', url: '/' }
  ]
end
```

### Pagination

#### Will Paginate

Add Will Paginate to your Gemfile

```
gem "will_paginate", '~> 3.0'
```

```ruby
# controller
@posts = Post.all.page(params[:page])
```

```erb
<!-- View -->
<%= render 'binco/pagination', collection: @posts %>
```

This project rocks and uses MIT-LICENSE.