Not able to view the drop down options in rails UI - ruby-on-rails

Below code snippet is a case add form where it shows the select tag in UI but if it is clicked on its arrow button nothing is viewed, in-browser console it shows all the select options.
<div id="addCaseForm" style="display:none">
<%= form_tag("#{#view.addUrl}", method: "post") do %>
<div class="row padlef">
<div class="col-sm-8">
<div class="form-group">
<%= label_tag("Case Title:") %>
<%= text_field_tag(:name) %>
<div class="help-block with-errors"></div>
<div>
<div>
</div>
<div class="padlef">
<div class="form-group">
<div class="col-sm-3 f-n32 p7-lr">
<%= label_tag("Assign To") %>
<%= select_tag 'userId', option_for_select_assignee %>
<div class="help-block with-errors"></div>
</div>
<div class="col-md-3 f-n32 p7-lr">
<%= label_tag("Priority")%>
<%= select_tag 'priority', option_for_select_priority %>
<div class="help-block with-errors"></div>
</div>
<div class="col-md-2 f-n32 p7-lr">
<%= label_tag("Case Type") %>
<%= select_tag 'c_type', option_for_select_c_type %>
<div class="help-block with-errors"></div>
</div>
<div class="form-group margboth margbot col-md-12 clearfix">
<a class="btn btn-primary ftn16 hvr-shutter-out-horizontal cancelAddCase"><i class="fa fa-times-circle "></i> Cancel</a>
<button type="button" class="btn btn-primary submit ftn16 hvr-shutter-out-horizontal pull-left" ><i class="fa fa-plus-circle "></i> Add</button>
</div>
</div>
<div>
<% end %>
</div>
and the helper code is as follows
module CaseHelper
def option_for_select_priority
return([['Urgent','P0'],['P1','P1'],['P2','P2'],['P3','P3'],['P4','P4']])
end
def option_for_select_assignee
list = [['','Unassigned']]
#view.members.sort_by(&:show_name).each do |member|
list << ["#{member.id}", "#{member.show_name}"]
end
return(list)
end
def option_for_select_c_type
return ([['Issue','issue'],['Change Request','C-R']])
end
end

Not sure how you're able to view the correct HTML in developer tools, because this...
select_tag 'priority', option_for_select_priority
returns...
<select id="priority" name="priority">
[["Urgent", "P0"], ["P1", "P1"], ["P2", "P2"], ["P3", "P3"], ["P4", "P4"]]
</select>
So what you really want is to wrap the method option_for_select_priority inside the options_for_select call. Like this...
select_tag 'priority', options_for_select(option_for_select_priority)
which returns...
<select id="priority" name="priority">
<option value="P0">Urgent</option>
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>

Related

Rails stimulus one form change for many urls and turbo frames

I am building a dashboard with multiple elements like charts, tables, simple fields with calculated values etc and I want to use Rails7 with stimulus.
In the past I used jQuery so I just created empty elements and then called several ajax requests in paralel to get data for every elements and populate it. So initial page load was super fast and then it loaded all necessary data. Dashboard had few dropdowns options to change data and when I loaded page I just sent defaults. Every dropdown change reloaded all data for all elements by filter used in dropdown.
How to do similar approach with stimulus?
When I use turbo form what I can do is submit form on page load, but it looks ugly (page initially loads and instantly reloads). And if I have many elements it gets slow because it first needs to finish all calculations.
this is my simple filter with 2 dropdowns
<%= form_with url: "", method: :get, data: { controller: "home", home_target: "form", turbo_frame: "home_dashboard", turbo_action: "advance" } do |form| %>
<div class="row">
<div class="d-sm-flex align-items-center mb-3">
<div class="col-lg-2" >
<%= form.select :city, options_for_select(City.all.pluck(:name,:id)), {include_blank: (t 'all')}, {class: 'form-select', data: {action: "input->home#search"}} %>
</div>
<div class="col-lg-2" >
<%= form.select :year, options_for_select(#years.reverse, (params[:year] || Date.today.year)), {selected: params[:year], include_blank:false}, {class: 'form-select', data: {action: "input->home#search"}} %>
</div>
</div>
</div>
<% end %>
and this is my home controller in stimulus which is simple
import { Controller } from "#hotwired/stimulus"
// Connects to data-controller="home"
export default class extends Controller {
connect() {
}
static targets = ["form"]
connect() {
this.formTarget.requestSubmit()
}
search() {
this.formTarget.requestSubmit()
}
}
my rails controller gets ugly big because I am calculating lot of fields dynamically and showing them in turbo frame tag...this is just a part of data I want to show so there should be much more
<%= turbo_frame_tag "home_dashboard" do %>
<div class="row">
<div class="col-xl-6">
<div class="card border-0 mb-3 overflow-hidden ">
<div class="card-body">
<div class="row">
<div class="col-xl-7 col-lg-8">
<div class="mb-3 fs-13px">
<b><%= (t 'invoices.invoiced').upcase %></b>
</div>
<div class="d-flex mb-1">
<% if #invoices_sumed.present? %>
<h2 class="mb-0"><span data-animation="number" data-value="<%= #invoices_sumed[0][1] %>"><%= #invoices_sumed[0][1] %></span> <%= #invoices_sumed[0][0] %></h2>
<% else %>
<h2 class="mb-0"><span data-animation="number" data-value="0">0</span> EUR</h2>
<% end %>
</div>
<div class="mb-3">
<i class="fa fa-caret-up"></i> <span data-animation="number" data-value="<%= #invoices_sumed_compare %>"><%= #invoices_sumed_compare %></span>% <%= t 'invoices.compared_previous_year' %>
</div>
<hr>
<div class="row text-truncate">
<div class="col-6">
<div class=""><%= t 'invoices.total' %></div>
<div class="fs-18px mb-5px fw-bold" data-animation="number" data-value="<%= #invoices.size %>"><%= #invoices.size %></div>
<div class="progress h-5px rounded-3 mb-5px">
<div class="progress-bar progress-bar-striped rounded-right " data-animation="width" data-value="<%= calc_year_ratio(#invoices.size,#invoices_total_size) %>%" style="width: <%= calc_year_ratio(#invoices.size,#invoices_total_size) %>%;"></div>
</div>
</div>
<div class="col-6">
<div class=""><%= t 'invoices.average' %> <small>(<%= (t 'invoices.median').to_s + ":" %> <strong><%= "#{#invoices_median_value.round(2)} #{#invoices_top_currency}" %></strong>)</small></div>
<div class="fs-18px mb-5px fw-bold"><span data-animation="number" data-value="<%= #invoices_avg_value.round(2) %>"><%= #invoices_avg_value.round(2) %></span> <%= #invoices_top_currency %></div>
<div class="progress h-5px rounded-3 mb-5px">
<div class="progress-bar progress-bar-striped rounded-right bg-orange" data-animation="width" data-value="<%= calc_median_total_ratio(#invoices_avg_value,#invoices_max_value) %>%" style="width: <%= calc_median_total_ratio(#invoices_avg_value,#invoices_max_value) %>%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-4 align-items-center d-flex justify-content-center">
<canvas
data-controller="chart"
data-chart-data-value='<%= #chart_total.to_json %>'
data-chart-options-value="<%= #chart_options.to_json %>"
></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="table-responsive">
<table id="contractors" class="table table-hover align-middle" style="width:100%;">
<thead></thead>
<tbody>
<% #contractors.each do |contractor| %>
<tr>
<td><%= contractor[0]%></td>
<td><%= contractor[2]%></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<% end %>
is there any way how to split this in multiple turbo frames with multiple urls to call with one form select change?

Is it possible to put a modal inside a card?

I have a modal that's inside a Bootstrap Card for a confirmation if the user really wants to cancel a booking. The problem is that it doesn't show up when clicked. I see the fade effect and that's about it.
<% if Date.current.strftime('%Y-%m-%d') == data.formatted_date_time_for_comparison %>
<%= f.submit 'Cancel Booking', class: "btn btn-danger" %>
<% else %>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#myModal">Cancel Booking</button>
<div class="modal fade text-dark" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Confirm Cancellation</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
Are you sure you want to cancel this booking?
</div>
<div class="modal-footer">
<%= f.submit 'Cancel Booking', class: "btn btn-danger" %>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<% end %>
It compares the current date to the date of the booking's departure date and it gives a submit button straight to the controller, which in turn rejects it because cancelling on the same date isn't allowed. If that's not the case it gives a button for a modal to activate.
I'm mostly sure it's because of it buried beneath divs, specifically divs with bootstrap card classes.
Here are its parent divs:
<div class="margin-top" style="width: 600px;">
<div class="bg-dark p-3 rounded">
<h3>Reservations</h3>
</div>
<div id="accordion" class="mt-3 mb-4">
<div class="card bg-dark">
<% #reservations.reverse().each do |data| %>
<a class="btn text-light card-header" data-bs-toggle="collapse" href="#id-<%= data.id %>">
<div class="row" style="text-align: left;">
<div class="col">
<strong>Name: </strong><%= data.name %><br><br>
<!-- other records -->
</div>
<div class="col">
<strong>Departure: </strong><%= data.departure %><br>
<!-- other records -->
</div>
</div>
</a>
<div id="id-<%= data.id %>" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col">
<strong>Base Price: </strong><%= data.base_price %><br>
<!-- other records -->
</div>
<div class="col d-flex align-items-end justify-content-end">
<%= form_for #cancellation, url: del_rsrv_path do |f| %>
<%= f.hidden_field :id, value: data.id %>
<%= f.hidden_field :datetime, value: data.formatted_date_time_for_comparison %>
<!-- code posted above here -->
I checked and it does work just below the first div (didn't check on deeper divs), but the problem would be passing the form params there. I'm asking if there's a workaround in either situation.
EDIT: I renamed the data-bs-target name and its respective id name and it somehow works now.

Rails wrongly interpreting http method when adding new nested record

I've got a form with nested attributes fields, made with form_with model:
<%= form_with model: [ :admin, #event ], local: true, class: "event-form" do |form| %>
<%= form.hidden_field :event_category_id %>
<div class="row">
<div class='col-xs-12 col-sm-7'>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Wersja Polska
</li>
<li role="presentation">Wersja Angielska</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane panel panel-default fade in active" id="<%= dom_id #event %>-pl-tab">
<div class='panel-body'>
<div class='checkbox'>
<label>
<%= form.check_box :pl_active, class: 'panel-activator' %>
Aktywna
</label>
</div>
...
and in that form i'm using fields_for nested attributes:
<div class='panel panel-default'>
<div class='panel-heading'>
<div class='row'>
<div class='col-xs-6'>
<%= form.label :event_variants %>
</div>
<div class='col-xs-6 text-right'>
<%=link_to 'Dodaj', new_admin_event_variant_path( event_id: #event, index: #event.event_variants.size ), id: "add-event-variant", class: 'btn btn-sm btn-primary', remote: true %>
</div>
</div>
</div>
<div class='panel-body event-variants sortable'>
<%- #event.event_variants.each_with_index do |event_variant, index| %>
<%= render partial: 'admin/event_variants/form', locals: { event_variant: event_variant, index: index } %>
<% end %>
</div>
</div>
and a partial looks like:
<div id="event_variant-<%= index %>" class='panel panel-default'>
<%= fields_for "event[event_variants_attributes][]", event_variant, child_index: index do |fields| %>
<%= fields.hidden_field :id %>
<%= fields.hidden_field :position %>
<%= fields.hidden_field :_destroy %>
<div class='panel-heading'>
<div class='row'>
<div class='col-xs-6 variant-title'>
<%= event_variant.pl_title || 'Nowy element' %>
</div>
<div class='col-xs-6 text-right'>
<label class='btn btn-sm btn-primary'>
<%= event_variant.image&.file.present? ? 'Zmień zdjęcie' : 'Dodaj zdjęcie' %>
<%= fields.file_field :image, style: 'display:none', class: 'add-image' %>
</label>
<div class='btn btn-sm btn-danger remove-variant'>Usuń</div>
</div>
</div>
</div>
<div class='image-container' style="background-image:url('<%= event_variant.image&.file.present? ? event_variant.image.url : image_path('no-image-icon') %>')" >
</div>
<div class='panel-body'>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Wersja Polska
</li>
<li role="presentation">Wersja Angielska</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane panel panel-default fade in active" id="event_variant-<%= index %>-pl-tab">
<div class='panel-body'>
<div class='checkbox'>
<label>
<%= fields.check_box :pl_active, class: 'panel-activator' %>
Aktywna
</label>
</div>
<div class="form-group">
<%= fields.label :pl_title %>
<%= fields.text_field :pl_title, class: 'form-control', disabled: !event_variant.pl_active %>
</div>
<div class="form-group">
<%= fields.label :pl_description %>
<%= fields.text_field :pl_description, class: 'form-control', disabled: !event_variant.pl_active %>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane panel panel-default fade" id="event_variant-<%= index %>-en-tab">
<div class='panel-body'>
<div class='checkbox'>
<label>
<%= fields.check_box :en_active, class: 'panel-activator' %>
Aktywna
</label>
</div>
<div class="form-group">
<%= fields.label :en_title %>
<%= fields.text_field :en_title, class: 'form-control', disabled: !event_variant.en_active %>
</div>
<div class="form-group">
<%= fields.label :en_subtitle %>
<%= fields.text_field :en_description, class: 'form-control', disabled: !event_variant.en_active %>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
thats attributes are has_many related with main model, so beside fields to edit each of nested model, I can click to render new fields_for partial to create nem nested record - common thing I guess:
<%=link_to 'Dodaj', new_admin_event_variant_path( event_id: #event, index: #event.event_variants.size ), id: "add-event-variant", class: 'btn btn-sm btn-primary', remote: true %>
going to:
def new
#event = Event.find params[:event_id]
#event_variant = #event.event_variants.build( pl_active: false, en_active: false )
#index = params[:index]
end
and rendering js.erb:
$('.event-variants').append("<%= j render( partial: 'form', locals: { event_variant: #event_variant, index: #index } ) %>")
the problem starts when i'm trying to edit main record. When I'm only changing values of fields, adding images, etc. no matter if in main or nested fields its working ok, sending PATCH, updating record and nested ones.
BUT:
when I'm trying to add new nested record, by those fields rendered via js.erb, form is send with POST instead of PATCH to route: /events/:id and of course its generating RoutingError:
Invalid or incomplete POST params
Started POST "/admin/events/14" for 127.0.0.1 at 2019-09-16 11:19:11 +0200
ActionController::RoutingError (No route matches [POST] "/admin/events/14"):
form attributes are not changing. HTML still looks like:
<div class="panel-body">
<form class="event-form" enctype="multipart/form-data" action="/admin/events/14" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="_method" value="patch">
<input type="hidden" name="authenticity_token" value="Z3Uhd6EgZ+N16P5MKbqLDs3F1d94iEokD4O5q63V04q/ofFblB5sRCmEO2m+coHayDrQ/zDNVHSzfSzmDGrxog==">
<input type="hidden" value="2" name="event[event_category_id]">
<div class="row">
<div class="col-xs-12 col-sm-7">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Wersja Polska
</li>
<li role="presentation">Wersja Angielska</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane panel panel-default fade in active" id="event_14-pl-tab">
<div class="panel-body">
<div class="checkbox">
<label>
<input name="event[pl_active]" type="hidden" value="0">
<input class="panel-activator" type="checkbox" value="1" checked="checked" name="event[pl_active]">
Aktywna
</label>
...
even with _method field set to PATCH
even if I manualy set a method in form_with by method: #event.persisted? ? :patch : :post
Everything works correctly when no new nested record.
And last but not least, I'm not changing anything via js onSubmit nor onClick when submitting.
Any ideas what could went wrong here?
I got this problem when a form field wasn't valid.
name="blah[]" # this isn't valid
See ActionController::BadRequest (Invalid request parameters: expected Array (got Rack::QueryParser::Params) on ajax post
Putting a pry in this file helped me out
/2.7.4/lib/ruby/gems/2.7.0/gems/rack-2.2.3.1/lib/rack/method_override.rb
def method_override_param(req)
binding.pry
req.POST[METHOD_OVERRIDE_PARAM_KEY]

Bootstrap submit button not aligning within form on non-mobile devices

Within my rails form: I am using form-horizontal. I can't seem to figure out how to line my submit button up within my form.
The submit button does line up when accessing the form from a mobile devise:
But the submit button is not aligned when accessing the form from a tablet/computer:
Here is my code for the form:
Search Providers
<%= form_tag providers_index_search_results_path, {class: 'form-horizontal'} do |f| %>
<div class="form-group">
<%= label_tag :title, nil, class: "control-label col-sm-2" %>
<div class="col-sm-5">
<%= text_field_tag :title, nil, class: "form-control col-sm-5" %>
</div>
</div>
<div class="form-group">
<%= label_tag :name, nil, class: "control-label col-sm-2" %>
<div class="col-sm-5">
<%= text_field_tag :name, nil, class: "form-control col-sm-5" %>
</div>
<div class="col-sm-5"></div>
</div>
<%= button_tag('Submit', class: "btn btn-primary") %>
<% end %>
How can I make it so that the submit button lines up?
You have to put your button inside of a div.form-group, and subsequently in the grid.
Here is the example from the bootstrap docs:
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Always check the docs first: http://getbootstrap.com/css/#forms-horizontal

I have a customized form but whatever written on the form is not saved in database

I have a form that uses styles of twitter/bootstrap
however the content of the form is not saved.
May I please know what am I missing?
<%= form_for #customer_detail, url: { action: "create" } do |f| %>
<div class="form-group">
<div class="row">
<div class='col-sm-3'>
<label for="Check in">Check in:</label><br>
<div class='input-group date' id='datetimepicker1'>
<input class="form-control" type='text'>
<span class="input-group-addon"><span class=
"glyphicon glyphicon-calendar"></span></span>
</div>
</div><label for="Check out">Check out:</label><br>
<div class='col-sm-3'>
<div class='input-group date' id='datetimepicker2'>
<input class="form-control" type='text'>
<span class="input-group-addon"><span class=
"glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<% end %>
Seems like you should read this article. It describe to create form use Rails helpers and action for save to database.

Resources