Loldesign Publisher

About

Loldesign Publisher gem has the feature to make changes to views in order to leave it more enjoyable, also providing a laterally administrative menu.

This version suport Rails > 5.0, for older version use branch under_rails_5

Getting Started

Open Gemfile file and add gem to project:

gem "loldesign_publisher", github: 'loldesign/loldesign_publisher'

Run command:

$ bundle install

Installing

Loldesign Publisher gem depends of configuration files that are not automatically installed by default when you run the bundle install.

You must run the following command to enable gem:

rails generate loldesign_publisher:install

Run the command above to make available the function that allows to controllers inherit of LoldesignPublisher::PublisherController to views use.

Customize the Left Menu

Will be available in the config folder the file: loldesign_publisher.yml

This file contains the following code:

paths:
  logo:   'loldesign_publisher/logo.svg'
  logout: 'javascript://'

  menu_links:
    banners:
      name: 'Banner Home'
      path: users_path
    recipes:
      name: 'Recipes'
      path: recipes_path
    schedules:
      name: 'Schedule / Cources'
      path: schedules_path

page_title: 'Loldesign Publisher'

  • logo: ‘loldesign_publisher/logo.svg’, It is the path to image above the side menu

  • logout: ‘javascript://’, Is used to end the session by default is disabled, to enable it is necessary to use the devise gem for user authentication.

  • menu_links:, From menu_links are available blocks of code in which banners is the controller’s name, but without the rest of the name, example: banners_controller.rb, the name is fictitious banners in your project, you must enter the corresponding names to their controllers.

  • name: ‘Banner Home’, It’s receive one of any name your choice for the menu link.

  • path: users_path, Receives the route by which you want the link to answer.

  • page_title: ‘Loldesign Publisher’, The string specified here will be the name that is displayed in the browser tab.

Enable Loldesign Publisher

Add to controller:

class NameOfController < LoldesignPublisher::PublisherController

Helpers

Building Index Page

  • Title

<%= title_page "Title of Page" %>

It is a function that takes a string as a parameter, a string is automatically formatted and aligned as the title of the page in question.

  • Subtitle

subtitle: 'Subtitle of Page'

It’s a minor title. It should be added in the same line as the title page, and separated only by commas.

  • Add Resource

add_resource 'New Button', path_to_url

This helper create a button that lead the User to the desired path

  • Implementing Table #1

<table class='table-page'> content of table </table>

This HTML tag when added to any table, causes it to be automatically formatted, both the HTML and CSS.

  • Implementing Table #2

<%= display_list_for(@examples, fields: 5) %>

This ruby code list every registration, separate by lines, the part of the code @examples renders the partial _example.html.erb from the controller and need to have the same name as the controller. The parameter fields with the number 5, is the number of fields in the table, even when there is not any, it merges the 5 existing columns or not, and displays the message “No records found”.

  • Implement Table #3 (partial)

Using the example given above. Creates a button to edit the record

<%= edit_resource edit_example_path(example) %>

Creates a button to remove the record

<%= remove_resource(example_path(example), {})%>

Examples

These examples below uses the model user, and address the helper listed above previously.

---Index.html.erb---
<%= title_page 'Title Page', subtitle: 'Subtitle' %>

<%= add_resource 'Add New User', new_user_path %>

<%= render partial: 'filters_by_from_to' %>

<table class='table-page'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Active</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <%= display_list_for(@users, fields: 3) %>
  </tbody>
</table>

---_user.html.erb---
<tr>
  <td><%= user.name %></td>
  <td><%= activable_field_for(user) %></td>
  <td>
    <%= edit_resource   edit_user_path(user) %>
    <%= remove_resource(user_path(user), {})%>
    <%= show_resource_with_icon user_path(user) %>
  </td>
</tr>

Building _form.html.erb

In the _form.html.erb we create a formulary with one or two columns, as we put the fields to be filled.

  • simple_form_for

Within this ruby code goes all the contents of the form

<%= simple_form_for @user, html: {class: 'form-uppercase admin-user-form'} do |f| %>
  content of form
<% end %>

  • Section with one or two columns

Within this html tag goes article and fields necessary for the construction of _form.

<section class='two-columns'>
<!-- <section class='column'> -->
  content of section
</section>

  • Articles

You will need one or two article in you section

<article>
  fields of the form
</article>

  • Footer

The footer creates two buttons one to save and one to cancel the session. <footer>

<%= submit_button f %>
<%= cancel_action(path: users_path) %>

</footer>

Examples

Here is an code with the examples above:

<%= simple_form_for @user, html: ‘form-uppercase admin-user-form’ do |f| %>

<section class='fields-wrapper two-columns'>
  <header>
    <h2>User Info</h2>
  </header>
  <article>
    <%= f.input :name, wrapper_html: {class: 'col-9'} %>
    <%= f.input :name, label: "CPF", input_html: {class: 'cpf'} %>
    <%= f.input :email , wrapper_html: {class: 'col-9'} %>
    <%= f.input :password, wrapper_html: {class: 'col-9'} %>
    <%= f.input :name, label: "Date", input_html: {class: 'date'}%>
  </article>
  <article>
    <%= f.input :description%>
    <%= f.label :active, label: 'Status'%>
    <%= f.input :active %>
    <%= f.input :password, wrapper_html: {class: 'col-9'} %>
  </article>
</section>

<footer>
  <%= submit_button f %>
  <%= cancel_action(path: users_path) %>
</footer>

<% end -%>

You can find a real example working inside are engine (github.com/loldesign/loldesign_publisher/tree/master/spec/dummy) It’s a real project, you can clone loldesign_publishe and run with “‘rails s“`

contiuar: loldesign_publisher:install / loldesign_publisher:mailer_config / loldesign_publisher:views

endereços uteis: bitbucket.org/loldesign/loldesign_publisher/src/8aa1fd8d9650/app/?at=master

bitbucket.org/loldesign/lol_crud_generator/src

LoldesignPublisher

This project rocks and uses MIT-LICENSE.