Add dropdown and checklist form fields [SCI-11338][SCI-11339]

app/controllers/form_fields_controller.rb

@@ -72,6 +72,6 @@ class FormFieldsController < ApplicationController
   end
 
   def form_field_params
-    params.require(:form_field).permit(:name, :description, { data: [%i(type)] }, :required, :allow_not_applicable, :uid)
+    params.require(:form_field).permit(:name, :description, { data: [%i(type options)] }, :required, :allow_not_applicable, :uid)
   end
 end

app/javascript/vue/forms/edit_field.vue

@@ -40,7 +40,7 @@
         <input type="text" class="sci-input" v-model="editField.attributes.description" @change="updateField" :placeholder="i18n.t('forms.show.description_placeholder')" />
       </div>
     </div>
-    <hr class="my-4 w-full">
+    <component :is="camelCaseType" :field="editField" @updateField="updateField" @syncField="syncField" />
     <div class="bg-sn-super-light-grey rounded p-4">
       <div class="flex items-center gap-4">
         <h5>{{ i18n.t('forms.show.mark_as_na') }}</h5>
@@ -59,6 +59,11 @@
 
 <script>
 import GeneralDropdown from '../shared/general_dropdown.vue';
+import datetime from './edit_fields/datetime.vue';
+import number from './edit_fields/number.vue';
+import singleChoice from './edit_fields/single_choice.vue';
+import text from './edit_fields/text.vue';
+import multipleChoice from './edit_fields/multiple_choice.vue';
 
 export default {
   name: 'EditField',
@@ -66,7 +71,12 @@ export default {
     field: Object
   },
   components: {
-    GeneralDropdown
+    GeneralDropdown,
+    datetime,
+    number,
+    singleChoice,
+    text,
+    multipleChoice
   },
   data() {
     return {
@@ -78,6 +88,9 @@ export default {
   computed: {
     validField() {
       return this.editField.attributes.name.length > 0;
+    },
+    camelCaseType() {
+      return this.editField.attributes.type.replace(/_([a-z])/g, (g) => (g[1].toUpperCase()));
     }
   },
   methods: {
@@ -89,6 +102,9 @@ export default {
     },
     deleteField() {
       this.$emit('delete', this.editField);
+    },
+    syncField(field) {
+      this.editField = field;
     }
   }
 };

app/javascript/vue/forms/edit_fields/datetime.vue

@@ -0,0 +1,9 @@
+<template>
+  <hr class="my-4 w-full">
+</template>
+
+<script>
+export default {
+  name: 'DateTimeField'
+};
+</script>

app/javascript/vue/forms/edit_fields/multiple_choice.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <hr class="my-4 w-full">
+    <div>
+      <h5 class="mb-4">{{ i18n.t('forms.show.dropdown_options_label') }}</h5>
+      <div class="sci-input-container-v2 h-40" >
+        <textarea
+          class="sci-input"
+          v-model="editField.attributes.data.options"
+          @change="$emit('updateField')"
+          :placeholder="i18n.t('forms.show.dropdown_options_placeholder_html')" />
+      </div>
+    </div>
+    <hr class="my-4 w-full">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'MultipleChoiceField',
+  props: {
+    field: Object
+  },
+  watch: {
+    editField: {
+      handler() {
+        this.$emit('syncField', this.editField);
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      editField: { ...this.field }
+    };
+  }
+};
+</script>

app/javascript/vue/forms/edit_fields/number.vue

@@ -0,0 +1,9 @@
+<template>
+  <hr class="my-4 w-full">
+</template>
+
+<script>
+export default {
+  name: 'NumberField'
+};
+</script>

app/javascript/vue/forms/edit_fields/single_choice.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <hr class="my-4 w-full">
+    <div>
+      <h5 class="mb-4">{{ i18n.t('forms.show.dropdown_options_label') }}</h5>
+      <div class="sci-input-container-v2 h-40" >
+        <textarea
+          class="sci-input"
+          v-model="editField.attributes.data.options"
+          @change="$emit('updateField')"
+          :placeholder="i18n.t('forms.show.dropdown_options_placeholder_html')" />
+      </div>
+    </div>
+    <hr class="my-4 w-full">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SingleChoiceField',
+  props: {
+    field: Object
+  },
+  watch: {
+    editField: {
+      handler() {
+        this.$emit('syncField', this.editField);
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      editField: { ...this.field }
+    };
+  }
+};
+</script>

app/javascript/vue/forms/edit_fields/text.vue

@@ -0,0 +1,9 @@
+<template>
+  <hr class="my-4 w-full">
+</template>
+
+<script>
+export default {
+  name: 'TextField'
+};
+</script>

app/serializers/form_field_serializer.rb

@@ -5,7 +5,7 @@ class FormFieldSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
 
   attributes :id, :name, :description, :updated_at, :type, :required,
-             :allow_not_applicable, :uid, :position, :urls
+             :allow_not_applicable, :uid, :position, :urls, :data
 
   def type
     object.data['type']