decidim-forms 0.27.4 → 0.28.0.rc5

data/app/views/decidim/forms/admin/questionnaires/_question.html.erb

@@ -1,159 +1,171 @@
 <% question = form.object %>
 <% is_expanded = question.errors.any? %>
-
-<div class="card questionnaire-question" id="<%= id %>-field">
-  <div class="card-divider question-divider">
-    <h2 class="card-title">
-    <span>
-      <% if editable %>
-        <%== icon("move") %>
-      <% end %>
-      <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".question")) %>
-    </span>
-
-    <button type="button" class="button small secondary button--title question--collapse" data-toggle="<%= id %>-question-card button--collapse-question-<%= id %> button--expand-question-<%= id %>">
-      <span id="button--collapse-question-<%= id %>" data-toggler=".hide" class="icon-collapse <%= "hide" unless is_expanded %>">
-        <%== icon("caret-top", aria_label: t(".collapse"), role: "img") %>
-      </span>
-
-      <span id="button--expand-question-<%= id %>" data-toggler=".hide" class="icon-expand <%= "hide" if is_expanded %>">
-        <%== icon("caret-bottom", aria_label: t(".expand"), role: "img") %>
-      </span>
-    </button>
-
-    <% if editable %>
-      <button class="button small alert hollow move-up-question button--title">
-        <%== "#{icon("arrow-top")} #{t(".up")}" %>
-      </button>
-
-      <button class="button small alert hollow move-down-question button--title">
-        <%== "#{icon("arrow-bottom")} #{t(".down")}" %>
-      </button>
-
-      <button class="button small alert hollow remove-question button--title">
-        <%= t(".remove") %>
-      </button>
-    <% end %>
-    </h2>
-  </div>
-
-  <div class="card-section collapsible <%= "hide" unless is_expanded %>" data-toggler=".hide" id="<%= id %>-question-card">
-    <div class="row column">
-      <%=
-        form.translated(
-          :text_field,
-          :body,
-          tabs_id: id,
-          label: t(".statement"),
-          disabled: !editable
-        )
-      %>
+<div class="card questionnaire-question" id="accordion-<%= id %>-field">
+  <div class="form__wrapper" data-component="accordion">
+    <div class="card-divider question-divider">
+      <h2 class="card-title flex items-center">
+        <span>
+          <% if editable %>
+            <%== icon("drag-move-2-fill") %>
+          <% end %>
+          <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".question")) %>
+        </span>
+
+        <span class="ml-auto flex flex-row-reverse items-center gap-2">
+          <button type="button" class="question--collapse <%= "question-error" if is_expanded %>" data-controls="panel-<%= id %>-question-card">
+            <span class="icon-collapse">
+              <%== icon("arrow-up-s-line", aria_label: t(".collapse"), role: "img") %>
+            </span>
+
+            <span class="icon-expand">
+              <%== icon("arrow-down-s-line", aria_label: t(".expand"), role: "img") %>
+            </span>
+          </button>
+
+          <% if editable %>
+            <button class="button button__sm button__transparent-secondary small alert hollow move-up-question button--title">
+              <%= icon("arrow-up-line") %>
+              <%= t(".up") %>
+            </button>
+
+            <button class="button button__sm button__transparent-secondary small alert hollow move-down-question button--title">
+              <%= icon("arrow-down-line") %>
+              <%= t(".down") %>
+            </button>
+
+            <button class="button button__sm button__transparent-secondary small alert hollow remove-question button--title">
+              <%= icon("delete-bin-line") %>
+              <%= t(".remove") %>
+            </button>
+          <% end %>
+          </span>
+      </h2>
     </div>
 
-    <div class="row column">
-      <%=
-        form.translated(
-          :editor,
-          :description,
-          toolbar: :full,
-          tabs_id: id,
-          label: t(".description"),
-          disabled: !editable
-        )
-      %>
-    </div>
+    <div id="panel-<%= id %>-question-card" class="panel-question-card card-section collapsible <%= "panel-error" if is_expanded %>">
+      <div class="row column">
+        <%=
+          form.translated(
+            :text_field,
+            :body,
+            tabs_id: id,
+            label: t(".statement"),
+            disabled: !editable
+          )
+        %>
+      </div>
 
-    <div class="row column">
-      <%=
-        form.check_box(
-          :mandatory,
-          disabled: !editable,
-          label: t("activemodel.attributes.questionnaire_question.mandatory")
-        )
-      %>
-    </div>
+      <div class="row column">
+        <%=
+          form.translated(
+            :editor,
+            :description,
+            toolbar: :full,
+            tabs_id: id,
+            label: t(".description"),
+            disabled: !editable
+          )
+        %>
+      </div>
 
-    <div class="row column">
-      <%=
-        form.number_field(
-          :max_characters,
-          disabled: !editable,
-          min: 0,
-          label: t("activemodel.attributes.questionnaire_question.max_characters")
-        )
-      %>
-    </div>
+      <div class="row column">
+        <%=
+          form.check_box(
+            :mandatory,
+            disabled: !editable,
+            label: t("activemodel.attributes.questionnaire_question.mandatory")
+          )
+        %>
+      </div>
 
-    <div class="row column">
-      <%=
-        form.select(
-          :question_type,
-          options_from_collection_for_select(question_types, :first, :last, question.question_type),
-          {},
-          disabled: !editable
-        )
-      %>
-    </div>
+      <div class="row column">
+        <%=
+          form.number_field(
+            :max_characters,
+            disabled: !editable,
+            min: 0,
+            label: t("activemodel.attributes.questionnaire_question.max_characters")
+          )
+        %>
+      </div>
 
-    <% if question.persisted? %>
-      <%= form.hidden_field :id, disabled: !editable %>
-    <% end %>
+      <div class="row column">
+        <%=
+          form.select(
+            :question_type,
+            options_from_collection_for_select(question_types, :first, :last, question.question_type),
+            {},
+            disabled: !editable
+          )
+        %>
+      </div>
 
-    <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
-    <%= form.hidden_field :deleted, disabled: !editable %>
+      <% if question.persisted? %>
+        <%= form.hidden_field :id, disabled: !editable %>
+      <% end %>
 
-    <div class="questionnaire-question-matrix-rows" data-template="<%= matrix_row_template_selector %>">
-      <div class="questionnaire-question-matrix-rows-list">
-        <% question.matrix_rows_by_position.each do |matrix_row| %>
-          <%= fields_for "questionnaire[questions][#{question.to_param}][matrix_rows][]", matrix_row do |matrix_row_form| %>
-            <%= render "decidim/forms/admin/questionnaires/matrix_row", form: matrix_row_form, question: question, editable: editable %>
+      <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
+      <%= form.hidden_field :deleted, disabled: !editable %>
+
+      <div class="row column">
+        <div class="questionnaire-question-matrix-rows" data-template="<%= matrix_row_template_selector %>">
+          <div class="questionnaire-question-matrix-rows-list">
+            <% question.matrix_rows_by_position.each do |matrix_row| %>
+              <%= fields_for "questionnaire[questions][#{question.to_param}][matrix_rows][]", matrix_row do |matrix_row_form| %>
+                <%= render "decidim/forms/admin/questionnaires/matrix_row", form: matrix_row_form, question:, editable: %>
+              <% end %>
+            <% end %>
+          </div>
+
+          <% if editable %>
+            <button class="button button__sm button__secondary add-matrix-row"><%= t(".add_matrix_row") %></button>
           <% end %>
-        <% end %>
+        </div>
       </div>
 
-      <% if editable %>
-        <button class="button add-matrix-row"><%= t(".add_matrix_row") %></button>
-      <% end %>
-    </div>
-
-    <div class="questionnaire-question-answer-options" data-template="<%= answer_option_template_selector %>">
-      <div class="questionnaire-question-answer-options-list">
-        <% question.answer_options.each do |answer_option| %>
-          <%= fields_for "questionnaire[questions][#{question.to_param}][answer_options][]", answer_option do |answer_option_form| %>
-            <%= render "decidim/forms/admin/questionnaires/answer_option", form: answer_option_form, question: question, editable: editable %>
+      <div class="questionnaire-question-answer-options" data-template="<%= answer_option_template_selector %>">
+        <div class="questionnaire-question-answer-options-list">
+          <% question.answer_options.each do |answer_option| %>
+            <%= fields_for "questionnaire[questions][#{question.to_param}][answer_options][]", answer_option do |answer_option_form| %>
+              <%= render "decidim/forms/admin/questionnaires/answer_option", form: answer_option_form, question:, editable: %>
+            <% end %>
           <% end %>
+        </div>
+
+        <% if editable %>
+          <div class="row column">
+            <button type="button" class="button button__sm button__secondary mt-4 add-answer-option"><%= t(".add_answer_option") %></button>
+          </div>
         <% end %>
       </div>
 
-      <% if editable %>
-        <button class="button add-answer-option"><%= t(".add_answer_option") %></button>
-      <% end %>
-    </div>
-
-    <div class="row column questionnaire-question-max-choices">
-      <%=
-        form.select(
-          :max_choices,
-          (2..question.number_of_options),
-          { include_blank: t(".any") },
-          disabled: !editable
-        )
-      %>
-    </div>
+      <div class="row column questionnaire-question-max-choices">
+        <%=
+          form.select(
+            :max_choices,
+            (2..question.number_of_options),
+            { include_blank: t(".any") },
+            disabled: !editable
+          )
+        %>
+      </div>
 
-    <div class="questionnaire-question-display-conditions" data-template="<%= display_condition_template_selector %>">
-      <div class="questionnaire-question-display-conditions-list">
-        <% question.display_conditions.each do |display_condition| %>
-          <%= fields_for "questionnaire[questions][#{question.to_param}][display_conditions][]", display_condition do |display_condition_form| %>
-            <%= render "decidim/forms/admin/questionnaires/display_condition", form: display_condition_form, question: question, editable: editable %>
+      <div class="questionnaire-question-display-conditions" data-template="<%= display_condition_template_selector %>">
+        <div class="questionnaire-question-display-conditions-list">
+          <% question.display_conditions.each do |display_condition| %>
+            <%= fields_for "questionnaire[questions][#{question.to_param}][display_conditions][]", display_condition do |display_condition_form| %>
+              <%= render "decidim/forms/admin/questionnaires/display_condition", form: display_condition_form, question:, editable: %>
+            <% end %>
           <% end %>
+        </div>
+
+        <% if editable %>
+          <% disabled = !question.persisted? %>
+          <div class="row column">
+            <button <%= "disabled" if disabled %> title="<%= disabled ? t(".add_display_condition_info") : t(".add_display_condition_info") %>" class="button button__sm button__secondary mt-4 add-display-condition"><%= t(".add_display_condition") %></button>
+          </div>
         <% end %>
       </div>
-
-      <% if editable %>
-        <% disabled = !question.persisted? %>
-        <button <%= "disabled" if disabled %> title="<%= disabled ? t(".add_display_condition_info") : t(".add_display_condition_info") %>" class="button add-display-condition"><%= t(".add_display_condition") %></button>
-      <% end %>
     </div>
   </div>
 </div>

data/app/views/decidim/forms/admin/questionnaires/_separator.html.erb

@@ -2,27 +2,29 @@
 
 <div class="card questionnaire-question" id="<%= id %>-field">
   <div class="card-divider question-divider">
-    <h2 class="card-title">
+    <h2 class="card-title flex items-center">
     <span>
       <% if editable %>
-        <%== icon("move") %>
+        <%== icon("drag-move-2-fill") %>
       <% end %>
       <%= dynamic_title(t(".separator"), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".separator")) %>
     </span>
 
-    <% if editable %>
-      <button class="button small alert hollow move-up-question button--title">
-        <%== "#{icon("arrow-top")} #{t(".up")}" %>
-      </button>
+      <div class="flex items-center gap-x-4 ml-auto">
+        <% if editable %>
+          <button class="button button__sm button__transparent button__transparent-secondary small alert hollow move-up-question button--title">
+            <%== "#{icon("arrow-up-line")} #{t(".up")}" %>
+          </button>
 
-      <button class="button small alert hollow move-down-question button--title">
-        <%== "#{icon("arrow-bottom")} #{t(".down")}" %>
-      </button>
+          <button class="button button__sm button__transparent button__transparent-secondary small alert hollow move-down-question button--title">
+            <%== "#{icon("arrow-down-line")} #{t(".down")}" %>
+          </button>
 
-      <button class="button small alert hollow remove-question button--title">
-        <%= t(".remove") %>
-      </button>
-    <% end %>
+          <button class="button button__sm button__transparent button__transparent-secondary small alert hollow remove-question button--title">
+            <%= t(".remove") %>
+          </button>
+        <% end %>
+      </div>
     </h2>
 
     <%=

data/app/views/decidim/forms/admin/questionnaires/_title_and_description.html.erb

@@ -1,80 +1,86 @@
 <% question = form.object %>
 <% is_expanded = question.errors.any? %>
 
-<div class="card questionnaire-question" id="<%= id %>-field">
-  <div class="card-divider question-divider">
-    <h2 class="card-title">
-    <span>
-      <% if editable %>
-        <%== icon("move") %>
-      <% end %>
-      <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".title_and_description")) %>
-    </span>
-
-      <button type="button" class="button small secondary button--title question--collapse" data-toggle="<%= id %>-question-card button--collapse-question-<%= id %> button--expand-question-<%= id %>">
-        <span id="button--collapse-question-<%= id %>" data-toggler=".hide" class="icon-collapse <%= "hide" unless is_expanded %>">
-          <%== icon("caret-top", aria_label: t(".collapse"), role: "img") %>
-        </span>
-
-        <span id="button--expand-question-<%= id %>" data-toggler=".hide" class="icon-expand <%= "hide" if is_expanded %>">
-          <%== icon("caret-bottom", aria_label: t(".expand"), role: "img") %>
+<div class="card questionnaire-question" id="accordion-<%= id %>-field">
+  <div data-component="accordion">
+    <div class="card-divider question-divider">
+      <h2 class="card-title flex items-center">
+        <span>
+          <% if editable %>
+            <%== icon("drag-move-2-fill") %>
+          <% end %>
+          <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".title_and_description")) %>
         </span>
-      </button>
+        <div class="ml-auto flex flex-row-reverse items-center gap-2">
+          <button type="button" class="question--collapse" data-controls="panel-<%= id %>-question-card">
+            <span class="icon-collapse">
+              <%== icon("arrow-up-s-line", aria_label: t(".collapse"), role: "img") %>
+            </span>
 
-      <% if editable %>
-        <button class="button small alert hollow move-up-question button--title">
-          <%== "#{icon("arrow-top")} #{t(".up")}" %>
-        </button>
+            <span class="icon-expand">
+              <%== icon("arrow-down-s-line", aria_label: t(".expand"), role: "img") %>
+            </span>
+          </button>
 
-        <button class="button small alert hollow move-down-question button--title">
-          <%== "#{icon("arrow-bottom")} #{t(".down")}" %>
-        </button>
+          <% if editable %>
+            <button class="button button__sm button__transparent button__transparent-secondary small alert hollow move-up-question button--title">
+              <%= icon("arrow-up-line") %>
+              <%= t(".up") %>
+            </button>
 
-        <button class="button small alert hollow remove-question button--title">
-          <%= t(".remove") %>
-        </button>
-      <% end %>
-    </h2>
-  </div>
+            <button class="button button__sm button__transparent button__transparent-secondary small alert hollow move-down-question button--title">
+              <%= icon("arrow-down-line") %>
+              <%= t(".down") %>
+            </button>
 
-  <div class="card-section collapsible <%= "hide" unless is_expanded %>" data-toggler=".hide" id="<%= id %>-question-card">
-    <div class="row column">
-      <%=
-        form.translated(
-          :text_field,
-          :body,
-          tabs_id: id,
-          label: t(".title"),
-          disabled: !editable
-        )
-      %>
+            <button class="button button__sm button__transparent button__transparent-secondary small alert hollow remove-question button--title">
+              <%= icon("delete-bin-line") %>
+              <%= t(".remove") %>
+            </button>
+          <% end %>
+        </div>
+      </h2>
     </div>
 
-    <div class="row column">
+    <div id="panel-<%= id %>-question-card" class="card-section collapsible" aria-hidden="true">
+      <div class="row column">
+        <%=
+          form.translated(
+            :text_field,
+            :body,
+            tabs_id: id,
+            label: t(".title"),
+            disabled: !editable
+          )
+        %>
+      </div>
+
+      <div class="row column">
+        <%=
+          form.translated(
+            :editor,
+            :description,
+            toolbar: :full,
+            tabs_id: id,
+            label: t(".description"),
+            disabled: !editable
+          )
+        %>
+      </div>
+
       <%=
-        form.translated(
-          :editor,
-          :description,
-          toolbar: :full,
-          tabs_id: id,
-          label: t(".description"),
-          disabled: !editable
+        form.hidden_field(
+          :question_type,
+          value: :title_and_description
         )
       %>
-    </div>
 
-    <%=
-      form.hidden_field(
-        :question_type,
-        value: :title_and_description
-      )
-    %>
-
-    <% if question.persisted? %>
-      <%= form.hidden_field :id, disabled: !editable %>
-    <% end %>
+      <% if question.persisted? %>
+        <%= form.hidden_field :id, disabled: !editable %>
+      <% end %>
 
-    <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
-    <%= form.hidden_field :deleted, disabled: !editable %>
+      <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
+      <%= form.hidden_field :deleted, disabled: !editable %>
+    </div>
   </div>
 </div>

data/app/views/decidim/forms/admin/questionnaires/answers/export/_answer.html.erb

@@ -5,10 +5,10 @@
     <thead>
       <tr>
         <th class='token'><%= t("session_token", scope: "decidim.forms.user_answers_serializer") %></th>
-        <th><%= t("user_status",   scope: "decidim.forms.user_answers_serializer") %></th>
-        <th><%= t("ip_hash",       scope: "decidim.forms.user_answers_serializer") %></th>
-        <th><%= t("completion",    scope: "decidim.forms.user_answers_serializer") %></th>
-        <th><%= t("created_at",    scope: "decidim.forms.user_answers_serializer") %></th>
+        <th><%= t("user_status", scope: "decidim.forms.user_answers_serializer") %></th>
+        <th><%= t("ip_hash", scope: "decidim.forms.user_answers_serializer") %></th>
+        <th><%= t("completion", scope: "decidim.forms.user_answers_serializer") %></th>
+        <th><%= t("created_at", scope: "decidim.forms.user_answers_serializer") %></th>
       </tr>
     </thead>
     <tbody>

data/app/views/decidim/forms/admin/questionnaires/answers/export/pdf.html.erb

@@ -9,5 +9,5 @@
     <% end %>
   </div>
 
-  <%= render partial: "decidim/forms/admin/questionnaires/answers/export/answer", collection: collection, locals: { questionnaire: questionnaire }, as: :participant %>
+  <%= render partial: "decidim/forms/admin/questionnaires/answers/export/answer", collection:, locals: { questionnaire: }, as: :participant %>
 </div>

data/app/views/decidim/forms/admin/questionnaires/answers/index.html.erb

@@ -1,53 +1,49 @@
 <div class="card" id="answers">
-  <div class="card-divider">
-    <h2 class="card-title">
+  <div class="item_show__header">
+    <h2 class="item_show__header-title">
       <%= t ".title", total: @total %>
-      <div class="button--title">
-        <%= link_to t("actions.back", scope: "decidim.forms.admin.questionnaires"), questionnaire_url, class: "button tiny button--title new" %>
-      </div>
+      <%= link_to t("actions.back", scope: "decidim.forms.admin.questionnaires"), questionnaire_url, class: "button button__sm button__secondary new" %>
     </h2>
   </div>
-  <div class="card-section">
-    <div class="table-scroll">
-      <table class="table-list">
-        <thead>
+  <div class="table-scroll">
+    <table class="table-list">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th><%= first_table_th(@participants.first) %></th>
+          <th><%= t("user_status", scope: "decidim.forms.user_answers_serializer") %></th>
+          <th><%= t("ip_hash", scope: "decidim.forms.user_answers_serializer") %></th>
+          <th><%= t("completion", scope: "decidim.forms.user_answers_serializer") %></th>
+          <th><%= t("created_at", scope: "decidim.forms.user_answers_serializer") %></th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @participants.each_with_index do |participant, idx| %>
           <tr>
-            <th>#</th>
-            <th><%= first_table_th(@participants.first) %></th>
-            <th><%= t("user_status",   scope: "decidim.forms.user_answers_serializer") %></th>
-            <th><%= t("ip_hash",       scope: "decidim.forms.user_answers_serializer") %></th>
-            <th><%= t("completion",    scope: "decidim.forms.user_answers_serializer") %></th>
-            <th><%= t("created_at",    scope: "decidim.forms.user_answers_serializer") %></th>
-            <th></th>
+            <td><%= idx + 1 + page_offset %></td>
+            <td>
+              <% if allowed_to? :show, :questionnaire_answers %>
+                <%= link_to first_table_td(participant), questionnaire_participant_answers_url(participant.session_token) %>
+              <% else %>
+                <%= first_table_td(participant) %></td>
+              <% end %>
+            <td><%= participant.status %></td>
+            <td><%= participant.ip_hash %></td>
+            <td><%= display_percentage(participant.completion) %></td>
+            <td><%= l participant.answered_at, format: :short %></td>
+            <td class="table-list__actions">
+              <% if allowed_to? :show, :questionnaire_answers %>
+                <%= icon_link_to "eye-line", questionnaire_participant_answers_url(participant.session_token), t("actions.show", scope: "decidim.forms.admin.questionnaires.answers"), class: "action-icon--eye", target: "_blank", data: { "external-link": false } %>
+              <% end %>
+              <% if allowed_to? :export_response, :questionnaire_answers %>
+                <%= icon_link_to "download-line", questionnaire_export_response_url(participant.session_token), t("actions.export", scope: "decidim.forms.admin.questionnaires.answers"), class: "action-icon--data-transfer-download" %>
+              <% end %>
+            </td>
           </tr>
-        </thead>
-        <tbody>
-          <% @participants.each_with_index do |participant, idx| %>
-            <tr>
-              <td><%= idx + 1 + page_offset %></td>
-              <td>
-                <% if allowed_to? :show, :questionnaire_answers %>
-                  <%= link_to first_table_td(participant), questionnaire_participant_answers_url(participant.session_token) %>
-                <% else %>
-                  <%= first_table_td(participant) %></td>
-                <% end %>
-              <td><%= participant.status %></td>
-              <td><%= participant.ip_hash %></td>
-              <td><%= display_percentage(participant.completion) %></td>
-              <td><%= l participant.answered_at, format: :short %></td>
-              <td class="table-list__actions">
-                <% if allowed_to? :show, :questionnaire_answers %>
-                  <%= icon_link_to "eye", questionnaire_participant_answers_url(participant.session_token), t("actions.show", scope: "decidim.forms.admin.questionnaires.answers"), class: "action-icon--eye" %>
-                <% end %>
-                <% if allowed_to? :export_response, :questionnaire_answers %>
-                  <%= icon_link_to "data-transfer-download", questionnaire_export_response_url(participant.session_token), t("actions.export", scope: "decidim.forms.admin.questionnaires.answers"), class: "action-icon--data-transfer-download" %>
-                <% end %>
-              </td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-      <%= paginate @query, theme: "decidim" %>
-    </div>
+        <% end %>
+      </tbody>
+    </table>
   </div>
 </div>
+<%= decidim_paginate @query %>