Add insert form modal [SCI-11342]

app/controllers/forms_controller.rb

@@ -55,6 +55,18 @@ class FormsController < ApplicationController
     end
   end
 
+  def published_forms
+    forms = current_team.forms.readable_by_user(current_user).published
+    forms = forms.where('forms.name ILIKE ?', "%#{params[:query]}%") if params[:query].present?
+    forms = forms.page(params[:page])
+
+    render json: {
+      data: forms.map { |f| [f.id, f.name] },
+      paginated: true,
+      next_page: forms.next_page
+    }
+  end
+
   def publish
     ActiveRecord::Base.transaction do
       @form.update!(

app/javascript/vue/protocol/step.vue

@@ -68,6 +68,7 @@
           @create:table="(...args) => this.createElement('table', ...args)"
           @create:checklist="createElement('checklist')"
           @create:text="createElement('text')"
+          @create:form="openFormSelectModal = true"
           @create:file="openLoadFromComputer"
           @create:wopi_file="openWopiFileModal"
           @create:ove_file="openOVEditor"
@@ -151,6 +152,7 @@
         @create:table="(...args) => this.createElement('table', ...args)"
         @create:checklist="createElement('checklist')"
         @create:text="createElement('text')"
+        @create:form="openFormSelectModal = true"
         @create:file="openLoadFromComputer"
         @create:wopi_file="openWopiFileModal"
         @create:ove_file="openOVEditor"
@@ -166,6 +168,7 @@
       @reorder="updateElementOrder"
       @close="closeReorderModal"
     />
+    <SelectFormModal v-if="openFormSelectModal" @close="openFormSelectModal = false" />
   </div>
 </template>
 
@@ -189,6 +192,7 @@
   import UtilsMixin from '../mixins/utils.js'
   import AttachmentsMixin from '../shared/content/mixins/attachments.js'
   import WopiFileModal from '../shared/content/attachments/mixins/wopi_file_modal.js'
+  import SelectFormModal from '../shared/content/modal/form_select.vue'
   import OveMixin from '../shared/content/attachments/mixins/ove.js'
   import StorageUsage from '../shared/content/attachments/storage_usage.vue'
   import axios from '../../packs/custom_axios';
@@ -236,6 +240,7 @@
         isCollapsed: false,
         editingName: false,
         inlineEditError: null,
+        openFormSelectModal: false,
         wellPlateOptions: [
           { text: I18n.t('protocols.steps.insert.well_plate_options.32_x_48'),
             emit: 'create:table',
@@ -279,7 +284,8 @@
       StorageUsage,
       ReorderableItemsModal,
       MenuDropdown,
-      ContentToolbar
+      ContentToolbar,
+      SelectFormModal
     },
     created() {
       this.loadAttachments();
@@ -398,6 +404,11 @@
                     emit: 'create:checklist',
                     icon: 'sn-icon sn-icon-checkllist',
                     data_e2e: `e2e-BT-protocol-step${this.step.id}-insertChecklist`
+                  },{
+                    text: this.i18n.t('protocols.steps.insert.form'),
+                    emit: 'create:form',
+                    icon: 'sn-icon sn-icon-forms',
+                    data_e2e: `e2e-BT-protocol-step${this.step.id}-insertForm`
                   }]);
         }
 

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

@@ -0,0 +1,85 @@
+<template>
+  <div ref="modal" @keydown.esc="cancel" class="modal" id="selectFormContent" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
+          <h4 class="modal-title" id="modal-move-result-element">
+            {{ i18n.t(`protocols.steps.modals.form_modal.title`) }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <template v-if="anyForms">
+            <p>{{ i18n.t(`protocols.steps.modals.form_modal.description`) }}</p>
+            <label class="font-normal text-sn-dark-grey">
+              {{ i18n.t(`protocols.steps.modals.form_modal.label`) }}
+            </label>
+            <div class="w-full">
+              <SelectDropdown
+                @change="setForm"
+                :optionsUrl="formsUrl"
+                :placeholder="i18n.t(`protocols.steps.modals.form_modal.placeholder`)"
+                :searchable="true"
+              />
+            </div>
+          </template>
+          <p v-else>
+            {{ i18n.t(`protocols.steps.modals.form_modal.no_forms`) }}
+          </p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="close">{{ i18n.t('general.cancel') }}</button>
+          <button v-if="anyForms" :disabled="!form" @submit="$emit('submit', form)" class="btn btn-primary">
+            {{ i18n.t('protocols.steps.modals.form_modal.add_form') }}
+          </button>
+          <a v-else :href="formsPageUrl" class="btn btn-primary">
+            {{ i18n.t('protocols.steps.modals.form_modal.take_me_there') }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import modalMixin from '../../modal_mixin';
+import SelectDropdown from '../../select_dropdown.vue';
+import axios from '../../../../packs/custom_axios.js';
+
+import {
+  published_forms_forms_path,
+  forms_path
+} from '../../../../routes.js';
+
+export default {
+  name: 'formSelectModal',
+  data() {
+    return {
+      form: null,
+      anyForms: false
+    };
+  },
+  mixins: [modalMixin],
+  computed: {
+    formsUrl() {
+      return published_forms_forms_path();
+    },
+    formsPageUrl() {
+      return forms_path();
+    }
+  },
+  created() {
+    axios.get(this.formsUrl)
+      .then((response) => {
+        this.anyForms = response.data.data.length > 0;
+      });
+  },
+  components: {
+    SelectDropdown
+  },
+  methods: {
+    setForm(form) {
+      this.form = form;
+    }
+  }
+};
+</script>

app/models/form.rb

@@ -19,6 +19,8 @@ class Form < ApplicationRecord
   has_many :form_fields, inverse_of: :form, dependent: :destroy
   has_many :users, through: :user_assignments
 
+  scope :published, -> { where.not(published_on: nil) }
+
   validates :name, length: { minimum: Constants::NAME_MIN_LENGTH, maximum: Constants::NAME_MAX_LENGTH }
   validates :description, length: { maximum: Constants::NAME_MAX_LENGTH }
 

config/locales/en.yml

@@ -3822,6 +3822,7 @@ en:
         well_plate: 'Well plate'
         text: 'Text'
         checklist: 'Checklist'
+        form: 'Form'
         attachment: 'File'
         add_file: 'From your PC'
         checklist_item: 'Add new'
@@ -3860,6 +3861,14 @@ en:
           description_1: 'You’re about to delete a content block from your protocol. It might contain data you don’t want to lose. You won’t be able to get it back.'
           description_2: 'Are you sure you want to delete it?'
           confirm: 'Delete forever'
+        form_modal:
+          title: "Insert form"
+          description: "Select a form you want to add to your protocol"
+          label: "Form"
+          placeholder: "Select a form"
+          no_forms: "Create and publish one or request access from your team."
+          add_form: "Add form"
+          take_me_there: "Take me there"
         move_element:
           step:
             title: Move to different step

config/routes.rb

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