From 179763453905cc9a26549ed195cf865b7c69026f Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Sun, 9 Jul 2023 15:58:44 -0700 Subject: [PATCH] Feedback edit (#149) * Add `textarea-autogrow` Stimulus component * Change overall_rating to report in 5 step increments * Create and style turbo frame edit form * Situationally force full page load for edit form Certain pages need this because the turbo frame wouldn't make for a good user experience. * Add content for showing who the feedback is for in edit template --- .../feedback/container_component.html.erb | 30 ++++++----- .../feedback/edit_button_component.rb | 8 +-- app/components/feedback/item_component.rb | 2 +- app/javascript/controllers/application.js | 2 + app/models/feedback.rb | 4 +- app/views/feedbacks/edit.html.erb | 53 ++++++++++--------- app/views/pair_requests/_table_row.html.erb | 3 +- package.json | 1 + .../feedback/container_component_spec.rb | 4 +- yarn.lock | 5 ++ 10 files changed, 65 insertions(+), 47 deletions(-) diff --git a/app/components/feedback/container_component.html.erb b/app/components/feedback/container_component.html.erb index 42554a0f..82dad7ff 100644 --- a/app/components/feedback/container_component.html.erb +++ b/app/components/feedback/container_component.html.erb @@ -1,16 +1,18 @@
-
- <%= heading(class: "text-lg") %> - <%= render Feedback::EditButtonComponent.new(feedback:, current_user: user) %> -
-
- <% if feedback.completed? %> -
-

Rating: <%= feedback.overall_rating %>/10

-
- <%= render Feedback::QuestionComponent.with_collection(questions) %> - <% else %> -

Awaiting completion of feedback.

- <% end %> -
+ <%= tag.turbo_frame(id: dom_id(feedback)) do %> +
+ <%= heading(class: "text-lg") %> + <%= render Feedback::EditButtonComponent.new(feedback:, current_user: user) %> +
+
+ <% if feedback.completed? %> +
+

Rating: <%= feedback.overall_rating %>/5

+
+ <%= render Feedback::QuestionComponent.with_collection(questions) %> + <% else %> +

Awaiting completion of feedback.

+ <% end %> +
+ <% end %>
diff --git a/app/components/feedback/edit_button_component.rb b/app/components/feedback/edit_button_component.rb index 25e6f731..d8bf7c1e 100644 --- a/app/components/feedback/edit_button_component.rb +++ b/app/components/feedback/edit_button_component.rb @@ -6,11 +6,12 @@ class Feedback::EditButtonComponent < ViewComponent::Base link: 'btn-link btn-xs sm:btn-sm hover:no-underline' }.freeze - def initialize(feedback:, current_user:, style: :button, class_names: '') + def initialize(feedback:, current_user:, style: :button, class_names: '', data: {}) @feedback = feedback @current_user = current_user @style = style @class_names = class_names + @data = data end def call @@ -18,7 +19,8 @@ def call link_to( edit_feedback_path(feedback), - class: "btn btn-sm capitalize #{variant} #{class_names}" + class: "btn btn-sm capitalize #{variant} #{class_names}", + data: ) do content || 'Edit' end @@ -26,7 +28,7 @@ def call private - attr_reader :feedback, :current_user, :style, :class_names + attr_reader :feedback, :current_user, :style, :class_names, :data def render? feedback.present? && Pundit.policy(current_user, feedback).edit? diff --git a/app/components/feedback/item_component.rb b/app/components/feedback/item_component.rb index 9d5a00c4..37a85408 100644 --- a/app/components/feedback/item_component.rb +++ b/app/components/feedback/item_component.rb @@ -44,6 +44,6 @@ def render_partner(label, partner) end def render_rating - content_tag(:span, 'Rating: ', class: 'font-bold') + "#{feedback.overall_rating}/10" + content_tag(:span, 'Rating: ', class: 'font-bold') + "#{feedback.overall_rating}/5" end end diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js index 9536bdaa..f383c96d 100644 --- a/app/javascript/controllers/application.js +++ b/app/javascript/controllers/application.js @@ -3,6 +3,7 @@ import '@hotwired/turbo-rails'; const application = Application.start(); import { Alert, Autosave, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components" +import TextareaAutogrow from 'stimulus-textarea-autogrow'; application.register('alert', Alert); application.register('autosave', Autosave); @@ -13,6 +14,7 @@ application.register('popover', Popover); application.register('toggle', Toggle); application.register('slideover', Slideover); +application.register('textarea-autogrow', TextareaAutogrow); // Configure Stimulus development experience; application.debug = true; diff --git a/app/models/feedback.rb b/app/models/feedback.rb index 4343d287..7181b56d 100644 --- a/app/models/feedback.rb +++ b/app/models/feedback.rb @@ -75,7 +75,7 @@ class Feedback < ApplicationRecord # rubocop:enable Layout/LineLength def overall_rating - super / 10 + super / 20 end def update_with_json_answers(params) @@ -86,7 +86,7 @@ def update_with_json_answers(params) end self.data = { feedback: merged_answers } - self.overall_rating = (params.dig(:feedback, :overall_rating).to_i * 10) || 0 + self.overall_rating = (params.dig(:feedback, :overall_rating).to_i * 20) || 0 self.locked_at ||= 7.days.from_now self.status = :completed save diff --git a/app/views/feedbacks/edit.html.erb b/app/views/feedbacks/edit.html.erb index 821d677a..84adf8f7 100644 --- a/app/views/feedbacks/edit.html.erb +++ b/app/views/feedbacks/edit.html.erb @@ -1,33 +1,38 @@ +

Edit Feedback

-<%= form_with model: @feedback, local: true, html: { class: 'max-w-prose mx-auto px-4' } do |form| %> - <% if @feedback.errors.any? %> +
+
For
+
<%= @feedback.receiver.email %>
+
-
-

- Please fix <%= pluralize(@feedback.errors.count, "error") %> -

+<%= turbo_frame_tag @feedback, target: "_top" do %> - + <%= form_with model: @feedback, local: true, html: { class: 'max-w-prose mx-auto px-4' } do |form| %> +

Rating:

+
+ <% (1..5).each do |n| %> +
+ <%= form.radio_button :overall_rating, n, class: "radio radio-primary" %> + <%= form.label :overall_rating, n %> +
+ <% end %>
- <% end %> -
- <%= form.label "overall_rating", class: "label label-text text-lg " %> - <%= form.number_field :overall_rating, class: "input input-bordered input-sm", min: 0, max: 10 %> -
+ <% @feedback.data['feedback'].each_with_index do |object, index| %> +
+ <%= form.label "data[feedback][#{index}][answer]", object['question'], class: "font-bold mb-2" %> + <%= form.text_area "data[feedback][#{index}][answer]", + value: object['answer'], + required: object['required'], + class: "textarea textarea-bordered", + data: { controller: 'textarea-autogrow'}, + rows: '1' + %> +
+ <% end %> - <% @feedback.data['feedback'].each_with_index do |object, index| %> -
- <%= form.label "data[feedback][#{index}][answer]", object['question'], class: "label label-text text-lg" %> - <%= form.text_area "data[feedback][#{index}][answer]", value: object['answer'], required: object['required'], class: "textarea textarea-bordered" %> +
+ <%= form.submit "Update Feedback", class: "btn btn-primary btn-wide mx-auto" %>
<% end %> - -
- <%= form.submit "Update Feedback", class: "btn btn-primary btn-wide mx-auto" %> -
<% end %> diff --git a/app/views/pair_requests/_table_row.html.erb b/app/views/pair_requests/_table_row.html.erb index fdd35566..8e881030 100644 --- a/app/views/pair_requests/_table_row.html.erb +++ b/app/views/pair_requests/_table_row.html.erb @@ -17,7 +17,8 @@ feedback: pair_request.authored_feedback_for(current_user), current_user:, style: :link, - class_names: "text-left flex flex-col flex-nowrap gap-y-0.5 items-start" + class_names: "text-left flex flex-col flex-nowrap gap-y-0.5 items-start", + data: { turbo_frame: "_top" } ) do %> <%= content_tag(:p, 'Edit') + content_tag(:p, 'Feedback') %> <% end %> diff --git a/package.json b/package.json index 95b6c7ff..d34a09f4 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "esbuild": "^0.17.19", "flatpickr": "^4.6.13", "stimulus-flatpickr": "^3.0.0-0", + "stimulus-textarea-autogrow": "^4.1.0", "tailwindcss-stimulus-components": "^3.0.4" }, "scripts": { diff --git a/spec/components/feedback/container_component_spec.rb b/spec/components/feedback/container_component_spec.rb index dce4e74b..c472dbf2 100644 --- a/spec/components/feedback/container_component_spec.rb +++ b/spec/components/feedback/container_component_spec.rb @@ -55,11 +55,11 @@ context 'when the feedback is completed' do let(:status) { :completed } - it 'renders the feedback rating out of 10' do + it 'renders the feedback rating out of 5' do render_inline(described_class.new(feedback: authored_feedback, current_user:)) expected_rating = authored_feedback.overall_rating - expect(page).to have_content("#{expected_rating}/10") + expect(page).to have_content("#{expected_rating}/5") end end end diff --git a/yarn.lock b/yarn.lock index bb1e87f1..ca07fe38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -705,6 +705,11 @@ stimulus-flatpickr@^3.0.0-0: dependencies: "@hotwired/stimulus" "^3.0.0" +stimulus-textarea-autogrow@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/stimulus-textarea-autogrow/-/stimulus-textarea-autogrow-4.1.0.tgz#faa2f7952062c4508b1566478dc203af7f24f632" + integrity sha512-hYz+xN3VZiO+eLl+zok4yvhH+mW5WkvOJEExyVP3J97dWQzc/qPDFdAM1EDJvfUIuRzJVq/WJynqqQwiied5iw== + sucrase@^3.32.0: version "3.32.0" resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"