Add empty block for form builder and set correct order on loading of form fields [SCI-11422]

app/javascript/vue/forms/show.vue

@@ -89,6 +89,10 @@
             @update="updateField"
             @delete="deleteField"
           />
+          <div v-if="!activeField.id"
+               class="text-xl font-semibold text-sn-grey font-inter flex items-center justify-center w-full h-full">
+            {{ i18n.t('forms.show.no_block') }}
+          </div>
         </div>
       </div>
     </div>
@@ -216,7 +220,7 @@ export default {
       axios.delete(field.attributes.urls.show).then(() => {
         this.fields.splice(index, 1);
         if (this.fields.length > 0) {
-          [this.activeField] = this.fields;
+          this.activeField = this.fields[index - 1];
         } else {
           this.activeField = {};
         }

app/models/form.rb

@@ -20,7 +20,7 @@ class Form < ApplicationRecord
   belongs_to :restored_by, class_name: 'User', optional: true
   belongs_to :default_public_user_role, class_name: 'UserRole', optional: true
 
-  has_many :form_fields, inverse_of: :form, dependent: :destroy
+  has_many :form_fields, -> { order(:position) }, inverse_of: :form, dependent: :destroy
   has_many :form_responses, dependent: :destroy
   has_many :users, through: :user_assignments
 

config/locales/en.yml

@@ -1126,6 +1126,7 @@ en:
       unit_placeholder: 'Add a unit'
       time_label: 'Include time'
       range_label: 'Include range'
+      no_block: 'Add your first form block'
       validations:
         response_validation:
           title: 'Response validation'