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

app/components/feedback/container_component.html.erb

@@ -1,16 +1,18 @@
 <div class="p-2 border shadow-lg rounded-lg max-w-prose mx-auto flex-1">
-  <div class="flex justify-between items-center">
-    <%= heading(class: "text-lg") %>
-    <%= render Feedback::EditButtonComponent.new(feedback:, current_user: user) %>
-  </div>
-  <div>
-    <% if feedback.completed? %>
-      <div class="p-2">
-        <p><span class="font-bold">Rating:</span> <%= feedback.overall_rating %>/10</p>
-      </div>
-      <%= render Feedback::QuestionComponent.with_collection(questions) %>
-    <% else %>
-      <p class="p-4">Awaiting completion of feedback.</p>
-    <% end %>
-  </div>
+  <%= tag.turbo_frame(id: dom_id(feedback)) do %>
+    <div class="flex justify-between items-center">
+      <%= heading(class: "text-lg") %>
+      <%= render Feedback::EditButtonComponent.new(feedback:, current_user: user) %>
+    </div>
+    <div>
+      <% if feedback.completed? %>
+        <div class="p-2">
+          <p><span class="font-bold">Rating:</span> <%= feedback.overall_rating %>/5</p>
+        </div>
+        <%= render Feedback::QuestionComponent.with_collection(questions) %>
+      <% else %>
+        <p class="p-4">Awaiting completion of feedback.</p>
+      <% end %>
+    </div>
+  <% end %>
 </div>

app/components/feedback/edit_button_component.rb

@@ -6,27 +6,29 @@ 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
     variant = VARIANTS.fetch(style)
 
     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
   end
 
   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?

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

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;

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

app/views/feedbacks/edit.html.erb

@@ -1,33 +1,38 @@
+<h1 class="text-2xl font-bold mb-4 text-center">Edit Feedback</h1>
 
-<%= form_with model: @feedback, local: true, html: { class: 'max-w-prose mx-auto px-4' } do |form| %>
-  <% if @feedback.errors.any? %>
+<dl class="text-center mb-2">
+  <dl class="font-bold">For</dl>
+  <dt><%= @feedback.receiver.email %></dt>
+</dl>
 
-    <div class="mb-4">
-      <h2 class="text-red-700 text-lg">
-        Please fix <%= pluralize(@feedback.errors.count, "error") %>
-      </h2>
+<%= turbo_frame_tag @feedback, target: "_top" do %>
 
-      <ul>
-        <% @feedback.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
+  <%= form_with model: @feedback, local: true, html: { class: 'max-w-prose mx-auto px-4' } do |form| %>
+    <p class="font-bold mb-2">Rating:</p>
+    <div class="flex gap-x-2 mb-4">
+      <% (1..5).each do |n| %>
+        <div class="flex flex-col text-center">
+          <%= form.radio_button :overall_rating, n, class: "radio radio-primary" %>
+          <%= form.label :overall_rating, n %>
+        </div>
+      <% end %>
     </div>
-  <% end %>
 
-  <div>
-    <%= 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 %>
-  </div>
+    <% @feedback.data['feedback'].each_with_index do |object, index| %>
+      <div class="form-control mb-4">
+        <%= 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'
+        %>
+      </div>
+    <% end %>
 
-  <% @feedback.data['feedback'].each_with_index do |object, index| %>
-    <div class="form-control mb-4">
-      <%= 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" %>
+    <div class="form-control">
+      <%= form.submit "Update Feedback", class: "btn btn-primary btn-wide mx-auto" %>
     </div>
   <% end %>
-
-  <div class="form-control">
-    <%= form.submit "Update Feedback", class: "btn btn-primary btn-wide mx-auto" %>
-  </div>
 <% end %>

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 %>

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": {

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

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"