consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract component to render question options table

Browse Source 
This way it's easier to know that the styles for the `break` HTML class
and the JavaScript for sortable elements (which we shouldn't use, by the
way, because of its accessibility issues) are only used here.
This commit is contained in:
Javi Martín
2025-11-05 18:39:19 +01:00
parent d6f6b94ae4
commit 2d72144048
8 changed files with 61 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/sortable.js → app/assets/javascripts/admin/poll/questions/options/table.js
View File

@@ -1,8 +1,8 @@
(function() {
"use strict";
App.Sortable = {
App.AdminPollQuestionOptionsTable = {
initialize: function() {
$(".sortable").sortable({
$(".poll-question-options-table tbody").sortable({
update: function() {
var new_order;
new_order = $(this).sortable("toArray", {

3
app/assets/javascripts/application.js
View File

@@ -105,7 +105,6 @@
//= require leaflet.markercluster/dist/leaflet.markercluster
//= require map
//= require polls
//= require sortable
//= require table_sortable
//= require investment_report_alert
//= require managers
@@ -160,7 +159,6 @@ var initialize_modules = function() {
App.TagAutocomplete.initialize();
App.Map.initialize();
App.Polls.initialize();
App.Sortable.initialize();
App.TableSortable.initialize();
App.InvestmentReportAlert.initialize();
App.Managers.initialize();
@@ -172,6 +170,7 @@ var initialize_modules = function() {
App.AdminBudgetsWizardCreationStep.initialize();
App.AdminDashboardActionsForm.initialize();
App.AdminMachineLearningScripts.initialize();
App.AdminPollQuestionOptionsTable.initialize();
App.AdminPollShiftsForm.initialize();
App.AdminTenantsForm.initialize();
App.AdminVotationTypesFields.initialize();

4
app/assets/stylesheets/admin.scss
View File

@@ -135,10 +135,6 @@ $table-header: #ecf1f6;
}
}
.break {
word-break: break-word;
}
&.fixed {
table-layout: fixed;
}

5
app/assets/stylesheets/admin/polls/questions/options/table.scss Normal file
View File

@@ -0,0 +1,5 @@
.admin .poll-question-options-table {
.break {
word-break: break-word;
}
}

43
app/components/admin/poll/questions/options/table_component.html.erb Normal file
View File

@@ -0,0 +1,43 @@
<table class="margin-top poll-question-options-table">
<caption><%= t("admin.questions.show.valid_answers") %></caption>
<thead>
<tr>
<th><%= t("admin.questions.show.answers.title") %></th>
<th scope="col" class="medium-7"><%= t("admin.questions.show.answers.description") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.images") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.documents") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.videos") %></th>
<th><%= t("admin.actions.actions") %></th>
</tr>
</thead>
<tbody data-js-url="<%= admin_question_options_order_options_path(question.id) %>">
<% question.question_options.each do |option| %>
<tr id="<%= dom_id(option) %>" class="poll_question_option" data-option-id="<%= option.id %>">
<td class="align-top"><%= option.title %></td>
<td class="align-top break"><%= wysiwyg(option.description) %></td>
<td class="align-top text-center">
(<%= option.images.count %>)
<br>
<%= link_to t("admin.questions.show.answers.images_list"),
admin_option_images_path(option) %>
</td>
<td class="align-top text-center">
(<%= option.documents.count rescue 0 %>)
<br>
<%= link_to t("admin.questions.show.answers.documents_list"),
admin_option_documents_path(option) %>
</td>
<td class="align-top text-center">
(<%= option.videos.count %>)
<br>
<%= link_to t("admin.questions.show.answers.video_list"),
admin_option_videos_path(option) %>
</td>
<td>
<%= render Admin::Poll::Questions::Options::TableActionsComponent.new(option) %>
</td>
</tr>
<% end %>
</tbody>
</table>

8
app/components/admin/poll/questions/options/table_component.rb Normal file
View File

@@ -0,0 +1,8 @@
class Admin::Poll::Questions::Options::TableComponent < ApplicationComponent
attr_reader :question
use_helpers :wysiwyg
def initialize(question)
@question = question
end
end

44
app/views/admin/poll/questions/show.html.erb
View File

@@ -58,47 +58,5 @@
<% end %>
</div>
<table class="margin-top">
<caption><%= t("admin.questions.show.valid_answers") %></caption>
<thead>
<tr>
<th><%= t("admin.questions.show.answers.title") %></th>
<th scope="col" class="medium-7"><%= t("admin.questions.show.answers.description") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.images") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.documents") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.videos") %></th>
<th><%= t("admin.actions.actions") %></th>
</tr>
</thead>
<tbody class="sortable" data-js-url="<%= admin_question_options_order_options_path(@question.id) %>">
<% @question.question_options.each do |option| %>
<tr id="<%= dom_id(option) %>" class="poll_question_option" data-option-id="<%= option.id %>">
<td class="align-top"><%= option.title %></td>
<td class="align-top break"><%= wysiwyg(option.description) %></td>
<td class="align-top text-center">
(<%= option.images.count %>)
<br>
<%= link_to t("admin.questions.show.answers.images_list"),
admin_option_images_path(option) %>
</td>
<td class="align-top text-center">
(<%= option.documents.count rescue 0 %>)
<br>
<%= link_to t("admin.questions.show.answers.documents_list"),
admin_option_documents_path(option) %>
</td>
<td class="align-top text-center">
(<%= option.videos.count %>)
<br>
<%= link_to t("admin.questions.show.answers.video_list"),
admin_option_videos_path(option) %>
</td>
<td>
<%= render Admin::Poll::Questions::Options::TableActionsComponent.new(option) %>
</td>
</tr>
<% end %>
</tbody>
</table>
<%= render Admin::Poll::Questions::Options::TableComponent.new(@question) %>
<% end %>

2
spec/system/admin/poll/questions/options/options_spec.rb
View File

@@ -94,7 +94,7 @@ describe "Poll question options", :admin do
visit admin_question_path(question)
within("tbody.sortable") do
within(".poll-question-options-table tbody") do
expect("First").to appear_before("Last")
find("tr", text: "Last").drag_to(find("tr", text: "First"))