# Zuora Connect UI

## Installation

Add this line to your application's Gemfile:

```ruby
gem 'zuora_connect_ui'

# Peek
gem 'peek'
gem 'peek-git'
gem 'peek-pg'
gem 'peek-performance_bar'
gem 'peek-redis'
gem 'peek-resque'
```

And then execute:
```shell
$ bundle
```

Or install it yourself as:
```shell
$ gem install zuora_connect_ui
```

## Usage

### SCSS Imports

Add to `app/assets/stylesheets/application.scss`
```scss
//************ Peek ************
@import "peek";
@import "peek/views/performance_bar";
@import "peek/vendor/tipsy";

@import "zuora_connect_ui";
```

Any style you create for your app should be imported below this

### Javascript Imports

Add to `app/assets/javascripts/application.js`
```javascript
//************** Peek ****************
//= require peek
//= require peek/views/performance_bar
//
//= require zuora_connect_ui
```

Any scripts you create for your app should be imported below this

### Peek

Add the peek initializer in `config/initializers/peek.rb`:
```ruby
# List of Peek Views shown in the container
require 'peek'
Peek.into Peek::Views::Git if Rails.env.development?
Peek.into Peek::Views::PerformanceBar
Peek.into Peek::Views::PG
Peek.into Peek::Views::Redis
Peek.into Peek::Views::Resque
Peek.into Peek::Views::Connect

Peek::Railtie.configure do
  config.peek.adapter = :redis
end
```
and the peek route in `config/routes.rb` under the `app_admin` constraint
```ruby
constraints app_admin do
  ...
  mount Peek::Railtie => '/peek'
end
```

## Layout

### Admin Button

Partial: `partials/admin_menu`

```erb
<div id="breadcrumb-bar">
  <div id='breadcrumbs'>
    <%= yield :breadcrumbs %>
  </div>
  <%= render 'partials/admin_menu', peek_bar: true do %>
    <li><a href="/admin/resque_web">Resque Web</a></li>
    <li><a href="/admin/redis-browser" target="_blank">Redis Web</a></li>
    <li><%= link_to 'App Instances', admin_app_instances_path %></li>
  <% end %>
</div>
```

Additional links can be added by putting `<li>` tags in the block

If you added Peek, you can enable it by passing `peek_bar: true` to the partial

### Row Actions Dropdown Menu

Partial: `partials/row_actions'

```erb
<%= render 'shared/row_actions' do %>
  <li>
    <%= link_to 'Show', page, remote: true, data: { toggle: 'modal', target: '#z_hub_modal' } %>
  </li>
  <li>
    <%= link_to 'Edit', edit_page_path(page), remote: true, data: { toggle: 'modal', target: '#z_hub_modal' } %>
  </li>
  <li class='divider'></li>
  <li>
    <%= link_to 'Delete', page, :remote => true, method: :delete, data: { confirm: 'Are you sure?' } %>
  </li>
<% end %>
```

## Components

Component's labels must come directly after their input, and have `for` html attribute corresponding to their input.

### Textbox and Text Area

Textbox
```erb
<%= f.text_field :name, class: 'zuo-textbox' %>
<%= f.label :name, class: zuo_floating_label_class(@page.name) %>
```

Text Area

```erb
<%= f.text_area :description, class: 'zuo-textbox' %>
<%= f.label :description, class: zuo_floating_label_class(@page.description) %>
```

Label must come directly after input, and have `for` html attribute corresponding to input.

`zuo_floating_label_class` sets the initial floating state of the label. If the value passed in is not empty, then the label will start with the `floating` class.

### Buttons

```erb
<%= link_to "Cancel", "#", class: "zuo-btn secondary", data: {dismiss: "modal"} %>
<%= f.submit f.object.new_record? ? "Create" : "Update", class: "zuo-btn primary" %>
```

`<div>`, `<button>`, and `<a>` tags can all be buttons.

The style of the buttons can be changed with an additional class

| Class       | Style
|---          |---
| `primary`   | Solid blue, white text. Use for the primary action.
| `secondary` | Solid white, blue outline and text. Use for a secondary action.
| `danger`    | Solid white, red outlne and text. Use for destructive actions.
| `disabled`  | Greyed out. Use when button is disabled (usually done programmatically)

### Select

Single Select
```erb
<%= f.select(:type, [['Plaintext'], ['HTML', 'Html'], ['CSS','Css'], ['Javascript'], ['Image'], ['Video']], prompt: '') %>
<%= f.label :type, class: zuo_floating_label_class(@page.type) %>

...

<% content_for :scripts do %>
  $('#page_type').select2({
    theme: 'bootstrap',
    minimumResultsForSearch: Infinity,
    dropdownAutoWidth: true,
    width: '100%',
    placeholder: '',
  });
<% end %>
```

Multiple Select

**Multiple Select will not work with `include_blank: true`**

```erb
<%= f.collection_select(:page_ids, Page.all, :id, :name, { prompt: false }, { multiple: true }) %>
<%= f.label :page_ids, class: zuo_floating_label_class(@chapter.page_ids)%>

...

<% content_for :scripts do %>
  $('#chapter_page_ids').select2({
    theme: 'bootstrap',
    minimumResultsForSearch: Infinity,
    dropdownAutoWidth: true,
    width: '100%',
    placeholder: '',
  });
<% end %>
```

#### Select2 Options

| Option                  | Values
|---                      |---
| minimumResultsForSearch | Integer (`-1` or `Infinity` to disable search)
| theme                   | must be `'bootstrap'`
| dropdownAutoWidth       | must be `true`
| width                   | must be `'100%'`
| placeholder             | must be `''` (the label is the placeholder)

### Checkbox

Label does not need the `for` html attribute, however the `div.checkbox` is required

```erb
<div class='checkbox'>
  <%= f.check_box :enabled, { checked: @currently_enabled[chapter.id]}, chapter.id, false %>
  <label><%= chapter.name %></label>
</div>
```

### Radio Button

Label does not need the `for` html attribute, however the `div.radio` is required

```erb
<div class='radio'>
  <%= f.radio_button :toggle %>
  <label>Radio Button</label>
</div>
```

### Date Picker

```erb
<div class="zuo-datepicker date">
  <%= f.text_field :Start_Date, value: Date.yesterday, class: "zuo-textbox" %>
  <%= f.label :Start_Date, class: "zuo-floating-label floating" %>
  <span class="input-group-addon z-icon-calendar"></span>
</div>

...

<% content_for :scripts do %>
  $('.zuo-datepicker.date').datepicker({
    autoclose: true,
    format: 'yyyy-mm-dd',
    templates: {
      leftArrow: '<span class="z-icon-arrow-left"></span>',
      rightArrow: '<span class="z-icon-arrow-right"></span>'
    }
  });
<% end >
```


### File Upload

```erb
<%= f.file_field :file %>
<%= f.label :file, 'Upload File', class: 'zuo-btn secondary' %>
```


## License

The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).