Merge pull request #8338 from andrej-scinote/aj_SCI_11686

Add action to forms [SCI-11686]

app/javascript/vue/forms/edit_field.vue

@@ -85,6 +85,7 @@ import NumberField from './edit_fields/number.vue';
 import SingleChoiceField from './edit_fields/single_choice.vue';
 import TextField from './edit_fields/text.vue';
 import MultipleChoiceField from './edit_fields/multiple_choice.vue';
+import ActionField from './edit_fields/action.vue';
 
 export default {
   name: 'EditField',
@@ -98,7 +99,8 @@ export default {
     NumberField,
     SingleChoiceField,
     TextField,
-    MultipleChoiceField
+    MultipleChoiceField,
+    ActionField
   },
   data() {
     return {

app/javascript/vue/forms/edit_fields/action.vue

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

app/javascript/vue/forms/field.vue

@@ -46,6 +46,7 @@ import NumberField from './fields/number.vue';
 import SingleChoiceField from './fields/single_choice.vue';
 import TextField from './fields/text.vue';
 import MultipleChoiceField from './fields/multiple_choice.vue';
+import ActionField from './fields/action.vue';
 
 export default {
   name: 'ViewField',
@@ -62,7 +63,8 @@ export default {
     NumberField,
     SingleChoiceField,
     TextField,
-    MultipleChoiceField
+    MultipleChoiceField,
+    ActionField
   },
   data() {
     return {

app/javascript/vue/forms/fields/action.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :key="marked_as_na">
+    <button class="btn btn-secondary mb-0.5"
+            :disabled="fieldDisabled"
+            :class="{
+              '!bg-sn-super-light-blue !border-sn-blue': value && !fieldDisabled
+            }"
+            @click="saveValue">
+      <div class="w-4 h-4  border rounded-sm flex items-center justify-center"
+        :class="{
+          'bg-sn-blue': value && !fieldDisabled,
+          'bg-sn-grey-500': value && fieldDisabled,
+          '!border-sn-blue': !fieldDisabled,
+          'border-sn-grey-500': fieldDisabled
+        }">
+        <i class="sn-icon sn-icon-check text-white" style="font-size: 16px !important;"></i>
+      </div>
+      {{ i18n.t('forms.fields.mark_as_completed') }}
+    </button>
+  </div>
+</template>
+
+<script>
+import fieldMixin from './field_mixin';
+
+export default {
+  name: 'ActionField',
+  mixins: [fieldMixin],
+  watch: {
+    marked_as_na() {
+      if (this.marked_as_na) {
+        this.value = null;
+      }
+    }
+  },
+  data() {
+    return {
+      value: this.field.field_value?.value || false
+    };
+  },
+  methods: {
+    saveValue() {
+      this.value = !this.value;
+      this.$emit('save', this.value);
+    }
+  }
+};
+</script>

app/javascript/vue/forms/show.vue

@@ -154,7 +154,8 @@ export default {
         { name: this.i18n.t('forms.show.blocks.NumberField'), type: 'NumberField' },
         { name: this.i18n.t('forms.show.blocks.SingleChoiceField'), type: 'SingleChoiceField' },
         { name: this.i18n.t('forms.show.blocks.MultipleChoiceField'), type: 'MultipleChoiceField' },
-        { name: this.i18n.t('forms.show.blocks.DatetimeField'), type: 'DatetimeField' }
+        { name: this.i18n.t('forms.show.blocks.DatetimeField'), type: 'DatetimeField' },
+        { name: this.i18n.t('forms.show.blocks.ActionField'), type: 'ActionField' }
       ];
     },
     fieldIcon() {
@@ -163,7 +164,8 @@ export default {
         NumberField: 'sn-icon-value',
         SingleChoiceField: 'sn-icon-choice-single',
         MultipleChoiceField: 'sn-icon-choice-multiple',
-        DatetimeField: 'sn-icon-created'
+        DatetimeField: 'sn-icon-created',
+        ActionField: 'sn-icon-check'
       };
     }
   },

app/models/form_action_field_value.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class FormActionFieldValue < FormFieldValue
+  def value=(val)
+    self.flag = val
+  end
+
+  def value
+    flag
+  end
+
+  def formatted
+    flag ? I18n.t('forms.export.values.completed') : I18n.t('forms.export.values.not_completed')
+  end
+end

config/locales/en.yml

@@ -1091,6 +1091,8 @@ en:
         form_field_submitted_by: "User for %{name}"
       values:
         not_applicable: 'N/A'
+        completed: "Completed"
+        not_completed: "Not completed"
     publish:
       title: "Publish form"
       description_html: "<p>Publishing a form locks it for editing and makes it available for use in protocol steps. You can unpublish the form only if it isn't linked to any steps.</p><p>Are you sure you want to publish the form?</p>"
@@ -1105,6 +1107,7 @@ en:
       add_datetime: "Add date & time"
       not_valid_range: "Range is not valid"
       no_selection: "No options selected"
+      mark_as_completed: "Mark as completed"
     index:
       head_title: "Forms"
       head_title_archived: "Archived forms"
@@ -1165,6 +1168,7 @@ en:
         SingleChoiceField: 'Single choice'
         MultipleChoiceField: 'Multiple choice'
         DatetimeField: 'Date & Time'
+        ActionField: 'Action'
     response:
       submit: 'Submit form'
       submitted_on: 'Submitted on'

db/migrate/20250320142859_add_flag_to_form_field_values.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddFlagToFormFieldValues < ActiveRecord::Migration[7.0]
+  def change
+    add_column :form_field_values, :flag, :boolean
+  end
+end

spec/models/form_field_value_spec.rb

@@ -28,6 +28,7 @@ describe FormFieldValue, type: :model do
     it { should have_db_column :number_to }
     it { should have_db_column :text }
     it { should have_db_column :selection }
+    it { should have_db_column :flag }
   end
 
   describe 'Relations' do