Add recently used forms to step in insert form modal [SCI-11446]

app/controllers/forms_controller.rb

@@ -70,6 +70,20 @@ class FormsController < ApplicationController
     }
   end
 
+  def latest_attached_forms
+    forms = current_team.forms.active.readable_by_user(current_user).published
+                        .joins(:form_responses)
+                        .where(form_responses: { created_by: current_user })
+                        .select('forms.id, forms.name, MAX(form_responses.created_at) AS last_response_at')
+                        .group('forms.id')
+                        .order('last_response_at DESC')
+                        .limit(5)
+
+    render json: {
+      data: forms
+    }
+  end
+
   def publish
     render_403 and return unless can_publish_form?(@form)
 

app/javascript/vue/shared/content/modal/form_select.vue

@@ -24,12 +24,28 @@
             <div class="w-full">
               <SelectDropdown
                 @change="setForm"
+                :value="form"
                 :optionsUrl="formsUrl"
                 :placeholder="i18n.t(`protocols.steps.modals.form_modal.placeholder`)"
                 :searchable="true"
                 data-e2e="e2e-DD-insertFormModal-selectForm"
               />
             </div>
+
+            <div v-if="recentUsedForms.length > 0" class="flex flex-col gap-2 mt-6">
+              <h3 class="m-0">{{ i18n.t(`protocols.steps.modals.form_modal.recently_used`) }}</h3>
+              <div>
+                <div v-for="(option, i) in recentUsedForms" :key="option.id"
+                  @click.stop="setForm(option.id)"
+                  class="py-2.5 px-3 rounded cursor-pointer flex items-center gap-2 shrink-0 hover:bg-sn-super-light-grey"
+                  :class="[{
+                    '!bg-sn-super-light-blue': form === option.id
+                  }]"
+                >
+                  <div class="truncate text-base text-sn-blue" >{{ option.name }}</div>
+                </div>
+              </div>
+            </div>
           </template>
           <p v-else >
             {{ i18n.t(`protocols.steps.modals.form_modal.no_forms`) }}
@@ -55,6 +71,7 @@ import axios from '../../../../packs/custom_axios.js';
 
 import {
   published_forms_forms_path,
+  latest_attached_forms_forms_path,
   forms_path
 } from '../../../../routes.js';
 
@@ -63,7 +80,8 @@ export default {
   data() {
     return {
       form: null,
-      anyForms: false
+      anyForms: false,
+      recentUsedForms: []
     };
   },
   mixins: [modalMixin],
@@ -73,12 +91,22 @@ export default {
     },
     formsPageUrl() {
       return forms_path();
+    },
+    formsRecentUsedUrl() {
+      return latest_attached_forms_forms_path();
     }
   },
   created() {
     axios.get(this.formsUrl)
       .then((response) => {
         this.anyForms = response.data.data.length > 0;
+
+        if (this.anyForms) {
+          axios.get(this.formsRecentUsedUrl)
+            .then((responseData) => {
+              this.recentUsedForms = responseData.data.data;
+            });
+        }
       });
   },
   components: {

config/locales/en.yml

@@ -3907,6 +3907,7 @@ en:
           no_forms: "Create and publish one or request access from your team."
           add_form: "Add form"
           take_me_there: "Take me there"
+          recently_used: "Recently used"
         move_element:
           step:
             title: Move to different step

config/routes.rb

@@ -876,6 +876,7 @@ Rails.application.routes.draw do
         post :restore
         get :user_roles
         get :published_forms
+        get :latest_attached_forms
       end
 
       resources :form_fields, only: %i(create update destroy) do