add retro feature

app/controllers/pages_controller.rb

@@ -9,7 +9,7 @@ def home
     @upcoming_leaves = current_user.leaves.future.not_rejected.chronologic
     sprint_feedback = current_user.sprint_feedbacks.find_by(sprint: @sprint) if @sprint
     @daily_nerd_message = DailyNerdMessage.find_by(created_at: Time.zone.today.all_day, sprint_feedback:) || sprint_feedback.daily_nerd_messages.build if sprint_feedback
-    @needs_retro = current_user.sprint_feedbacks.sprint_past.retro_missing.first
+    @needs_retro_for = SprintFeedback.where(user: current_user).sprint_past.reverse_chronologic.limit(2).find { !_1.retro_completed? }
   end
 
   def offline

app/controllers/sprint_feedbacks_controller.rb

@@ -14,17 +14,11 @@ def create
     ui.replace feedback.sprint
   end
 
-  def edit
+  def edit_retro
   end
 
-  def update
-    if @feedback.update feedback_update_attributes
-      @user = @feedback.user
-      ui.close_popover
-      ui.replace @feedback.sprint
-    else
-      render :edit, status: :unprocessable_entity
-    end
+  def update_retro
+    @feedback.update! feedback_update_attributes
   end
 
   def destroy

app/frontend/components/checkbox/checkbox.scss

@@ -0,0 +1,15 @@
+.checkbox {
+  &__input {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border: 1px solid currentColor;
+
+    &:checked::before {
+      display: block;
+      content: 'X';
+      width: 10px;
+      height: 10px;
+    }
+  }
+}

app/frontend/components/checkbox/checkbox.tsx

@@ -0,0 +1,92 @@
+import React, { ReactNode } from 'react';
+
+import { Text } from '../text/text';
+import { FormField, useInputId } from '../form_field/form_field';
+import classnames from 'classnames';
+import './checkbox.scss';
+
+interface Props extends FormField<boolean> {
+  label?: ReactNode;
+}
+
+export function Checkbox({
+  name,
+  value,
+  ariaLabel,
+  placeholder,
+  required,
+  disabled,
+  readOnly,
+  inputId,
+  label,
+  touched,
+  errors,
+  onChange,
+  onBlur,
+  onFocus,
+}: Props): JSX.Element {
+  inputId = useInputId(inputId);
+  return (
+    <div className="checkbox__container">
+      <div
+        className={classnames(
+          'checkbox',
+          {
+            'checkbox--filled': !!value,
+            'checkbox--readonly': readOnly,
+            'checkbox--disabled': disabled,
+            'checkbox--placeholder': placeholder,
+          },
+          { disabled }
+        )}
+      >
+        <div className="checkbox__content">
+          {label !== undefined && (
+            <label
+              className={classnames('checkbox__label', {
+                'checkbox__label--disabled': disabled,
+              })}
+              htmlFor={inputId}
+            >
+              {label}
+            </label>
+          )}
+          <Text>
+            <input
+              id={inputId}
+              name={name}
+              className={classnames('checkbox__input')}
+              readOnly={readOnly}
+              checked={value}
+              type="checkbox"
+              onChange={(event) => {
+                if (readOnly) {
+                  event.preventDefault();
+                  return;
+                }
+                onChange?.(event.target.checked);
+              }}
+              onFocus={() => {
+                onFocus?.();
+              }}
+              onBlur={() => {
+                onBlur?.();
+              }}
+              placeholder={placeholder}
+              required={required}
+              disabled={disabled}
+              aria-label={ariaLabel}
+            />
+          </Text>
+        </div>
+        {touched && errors && (
+          <div className="checkbox__errors">
+            {errors.map((error) => (
+              <Text key={error}>{error}</Text>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/frontend/components/number_field/number_field.tsx

@@ -12,7 +12,7 @@ export function NumberField(props: Props): JSX.Element {
     <TextField
       {...props}
       value={props.value.toString()}
-      onChange={(value) => Number(value)}
+      onChange={(value) => props.onChange?.(Number(value))}
     />
   );
 }

app/frontend/locale/en.json

@@ -6,7 +6,10 @@
       "last_payments": "Last payments",
       "remaining_holidays": "Remaining holidays",
       "number_holidays_left": "You have %{count} days off left",
-      "payslip_archive": "archive"
+      "payslip_archive": "archive",
+      "missing_retro": "Retrospective Notes Missing",
+      "missing_retro_description": "You did not yet leave a rating for sprint %{title}.",
+      "leave_retro_notes": "Rate the sprint now"
     }
   },
   "sprints": {
@@ -18,6 +21,14 @@
       "save": "Save"
     }
   },
+  "sprint_feedbacks": {
+    "edit_retro": {
+      "skip": "Skip rating this sprint",
+      "rating": "Rating",
+      "text": "Text",
+      "save": "Save"
+    }
+  },
   "users": {
     "index": {
       "title": "Users",

app/models/sprint_feedback.rb

@@ -30,6 +30,7 @@ class SprintFeedback < ApplicationRecord
   validates :retro_rating, numericality: {only_integer: true, in: 1..5}, allow_nil: true
 
   scope :ordered, -> { joins(:user).order("users.email ASC") }
+  scope :reverse_chronologic, -> { joins(:sprint).order("LOWER(sprints.sprint_during) DESC") }
   scope :retro_missing, -> { where(retro_rating: nil, skip_retro: false) }
   scope :retro_not_skipped, -> { where(skip_retro: false) }
   scope :sprint_past, -> {

app/policies/sprint_feedback_policy.rb

@@ -9,6 +9,14 @@ def create?
     hr?
   end
 
+  def edit_retro?
+    update?
+  end
+
+  def update_retro?
+    update?
+  end
+
   def update?
     hr? || record.user == user
   end

app/views/pages/_daily_nerd_card.tsx

@@ -33,16 +33,24 @@ export function DailyNerdCard({ id, message }: Props): JSX.Element {
     },
   });
   return (
-    <Card title="Daily Nerd" icon="📝">
-      <TextArea
-        {...fields.message}
-        label="Message"
-        placeholder="How was your day? What did you learn?"
-      />
-      <Button
-        title={id ? 'Update daily nerd message' : 'Create daily nerd message'}
-        onClick={onSubmit}
-      />
-    </Card>
+    <Card
+      title="Daily Nerd"
+      icon="📝"
+      subtitle={
+        <>
+          <TextArea
+            {...fields.message}
+            label="Message"
+            placeholder="How was your day? What did you learn?"
+          />
+          <Button
+            title={
+              id ? 'Update daily nerd message' : 'Create daily nerd message'
+            }
+            onClick={onSubmit}
+          />
+        </>
+      }
+    />
   );
 }

app/views/pages/home.props.rb

@@ -21,3 +21,8 @@
   field :id, null: true
   field :message, null: true
 end
+
+field :needs_retro_for, null: true, value: -> { @needs_retro_for } do
+  field :id
+  field :title, value: -> { sprint.title }
+end

app/views/pages/home.tsx

@@ -16,6 +16,7 @@ export default function Home({
     payslips,
     remainingHolidays,
     dailyNerdMessage,
+    needsRetroFor,
   },
 }: PageProps<'pages/home'>): JSX.Element {
   const t = useTranslate();
@@ -26,8 +27,24 @@ export default function Home({
         <Text type="headline">
           {t('pages.home.hello', { name: currentUser.displayName })}
         </Text>
-        {dailyNerdMessage && <DailyNerdCard {...dailyNerdMessage} />}
         <Columns>
+          {needsRetroFor && (
+            <Card
+              icon="🚀"
+              title={t('pages.home.missing_retro')}
+              subtitle={
+                <Stack>
+                  {t('pages.home.missing_retro_description', {
+                    title: needsRetroFor.title,
+                  })}
+                  <Link href={`/en/sprint_feedbacks/${needsRetroFor.id}`}>
+                    {t('pages.home.leave_retro_notes')}
+                  </Link>
+                </Stack>
+              }
+            />
+          )}
+          {dailyNerdMessage && <DailyNerdCard {...dailyNerdMessage} />}
           {upcomingLeaves.length > 0 && (
             <Card
               icon="🏝️"

app/views/sprint_feedbacks/edit_retro.props.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+render "components/current_user"
+
+field :feedback, value: -> { @feedback } do
+  field :id
+  field :retro_rating, Integer, null: true
+  field :retro_text, null: true
+  field :skip_retro, Boolean
+end

app/views/sprint_feedbacks/edit_retro.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { PageProps } from '../../../data.d';
+import { useTranslate } from '../../frontend/util/dependencies';
+import { Stack } from '../../frontend/components/stack/stack';
+import { Button } from '../../frontend/components/button/button';
+import { useForm } from '@nerdgeschoss/react-use-form-library';
+import { TextField } from '../../frontend/components/text_field/text_field';
+import { useReaction } from '../../frontend/sprinkles/reaction';
+import { useModalInfo } from '../../frontend/components/modal/modal';
+import { NumberField } from '../../frontend/components/number_field/number_field';
+import { Checkbox } from '../../frontend/components/checkbox/checkbox';
+
+export default function ({
+  data: { feedback },
+}: PageProps<'sprint_feedbacks/edit_retro'>): JSX.Element {
+  const t = useTranslate();
+  const reaction = useReaction();
+  const modal = useModalInfo();
+  const { fields, valid, onSubmit } = useForm({
+    model: {
+      retroRating: feedback.retroRating ?? 5,
+      retroText: feedback.retroText ?? '',
+      skipRetro: feedback.skipRetro,
+    },
+    validations: {
+      retroRating: ({ model }) =>
+        model.skipRetro || model.retroRating ? [] : ['required'],
+      retroText: ({ model }) =>
+        model.skipRetro || model.retroText ? [] : ['required'],
+    },
+    onSubmit: async ({ model }) => {
+      const sprint_feedback = model.skipRetro
+        ? { skipRetro: true, retroText: null, retroRating: null }
+        : {
+            skipRetro: false,
+            retroText: model.retroText,
+            retroRating: model.retroRating,
+          };
+      await reaction.call({
+        path: `/sprint_feedbacks/${feedback.id}/update_retro`,
+        method: 'POST',
+        params: { sprint_feedback },
+        refresh: true,
+      });
+      modal.close();
+    },
+  });
+
+  return (
+    <Stack>
+      <Checkbox
+        {...fields.skipRetro}
+        label={t('sprint_feedbacks.edit_retro.skip')}
+      />
+      {!fields.skipRetro.value && (
+        <>
+          <NumberField
+            {...fields.retroRating}
+            label={t('sprint_feedbacks.edit_retro.rating')}
+          />
+          <TextField
+            {...fields.retroText}
+            label={t('sprint_feedbacks.edit_retro.text')}
+          />
+        </>
+      )}
+      <Button
+        title={t('sprint_feedbacks.edit_retro.save')}
+        disabled={!valid}
+        onClick={onSubmit}
+      />
+    </Stack>
+  );
+}

app/views/sprint_feedbacks/show.props.rb

@@ -12,6 +12,8 @@
   field :tracked_hours, Float
   field :billable_hours, Float
 
+  field :permit_edit_retro_notes, Boolean, value: -> { helpers.policy(self).update? }
+
   field :sprint do
     field :id
     field :title