feat: add save form value

src/background/workflow-engine/engine.js

@@ -269,7 +269,7 @@ class WorkflowEngine {
     const blockHandler = this.blocksHandler[toCamelCase(block?.name)];
     const handler =
       !blockHandler && tasks[block.name].category === 'interaction'
-        ? this.blocksHandler.interactionHandler
+        ? this.blocksHandler.interactionBlock
         : blockHandler;
 
     if (handler) {

src/components/newtab/workflow/edit/EditForms.vue

@@ -1,50 +1,92 @@
 <template>
   <edit-interaction-base v-bind="{ data, hide: hideBase }" @change="updateData">
-    <ui-select
-      :model-value="data.type"
-      class="block w-full mt-4 mb-3"
-      :placeholder="t('workflow.blocks.forms.type')"
-      @change="updateData({ type: $event })"
-    >
-      <option v-for="form in forms" :key="form" :value="form">
-        {{ t(`workflow.blocks.forms.${form}.name`) }}
-      </option>
-    </ui-select>
     <ui-checkbox
-      v-if="data.type === 'checkbox' || data.type === 'radio'"
-      :model-value="data.selected"
-      @change="updateData({ selected: $event })"
+      :model-value="data.getValue"
+      class="my-2"
+      @change="updateData({ getValue: $event })"
     >
-      {{ t('workflow.blocks.forms.selected') }}
+      {{ t('workflow.blocks.forms.getValue') }}
     </ui-checkbox>
-    <template v-if="data.type === 'text-field' || data.type === 'select'">
-      <ui-textarea
-        :model-value="data.value"
-        :placeholder="t('workflow.blocks.forms.text-field.value')"
-        class="w-full"
-        @change="updateData({ value: $event })"
-      />
+    <template v-if="data.getValue">
+      <ui-checkbox
+        :model-value="data.saveData"
+        class="mb-2 ml-2"
+        @change="updateData({ saveData: $event })"
+      >
+        Save data
+      </ui-checkbox>
+      <div class="flex items-center">
+        <ui-select
+          :model-value="data.dataColumn"
+          placeholder="Data column"
+          class="mr-2 flex-1"
+          @change="updateData({ dataColumn: $event })"
+        >
+          <option
+            v-for="column in workflow.data.value.dataColumns"
+            :key="column.name"
+            :value="column.name"
+          >
+            {{ column.name }}
+          </option>
+        </ui-select>
+        <ui-button
+          icon
+          title="Data columns"
+          @click="workflow.showDataColumnsModal(true)"
+        >
+          <v-remixicon name="riKey2Line" />
+        </ui-button>
+      </div>
+    </template>
+    <template v-else>
+      <ui-select
+        :model-value="data.type"
+        class="block w-full mb-3"
+        :placeholder="t('workflow.blocks.forms.type')"
+        @change="updateData({ type: $event })"
+      >
+        <option v-for="form in forms" :key="form" :value="form">
+          {{ t(`workflow.blocks.forms.${form}.name`) }}
+        </option>
+      </ui-select>
       <ui-checkbox
-        :model-value="data.clearValue"
-        class="mb-1 ml-1"
-        @change="updateData({ clearValue: $event })"
+        v-if="data.type === 'checkbox' || data.type === 'radio'"
+        :model-value="data.selected"
+        @change="updateData({ selected: $event })"
       >
-        {{ t('workflow.blocks.forms.text-field.clearValue') }}
+        {{ t('workflow.blocks.forms.selected') }}
       </ui-checkbox>
+      <template v-if="data.type === 'text-field' || data.type === 'select'">
+        <ui-textarea
+          :model-value="data.value"
+          :placeholder="t('workflow.blocks.forms.text-field.value')"
+          class="w-full"
+          @change="updateData({ value: $event })"
+        />
+        <ui-checkbox
+          :model-value="data.clearValue"
+          class="mb-1 ml-1"
+          @change="updateData({ clearValue: $event })"
+        >
+          {{ t('workflow.blocks.forms.text-field.clearValue') }}
+        </ui-checkbox>
+      </template>
+      <ui-input
+        v-if="data.type === 'text-field'"
+        :model-value="data.delay"
+        :label="t('workflow.blocks.forms.text-field.delay.label')"
+        :placeholder="t('workflow.blocks.forms.text-field.delay.placeholder')"
+        class="w-full"
+        min="0"
+        type="number"
+        @change="updateData({ delay: +$event })"
+      />
     </template>
-    <ui-input
-      v-if="data.type === 'text-field'"
-      :model-value="data.delay"
-      :label="t('workflow.blocks.forms.text-field.delay.label')"
-      :placeholder="t('workflow.blocks.forms.text-field.delay.placeholder')"
-      class="w-full"
-      min="0"
-      type="number"
-      @change="updateData({ delay: +$event })"
-    />
   </edit-interaction-base>
 </template>
 <script setup>
+import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import EditInteractionBase from './EditInteractionBase.vue';
 
@@ -61,6 +103,7 @@ const props = defineProps({
 const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
+const workflow = inject('workflow');
 
 const forms = ['text-field', 'select', 'checkbox', 'radio'];
 

src/components/newtab/workflow/edit/EditLoopData.vue

@@ -94,6 +94,7 @@
   </div>
 </template>
 <script setup>
+/* eslint-disable no-alert */
 import { onMounted, shallowReactive } from 'vue';
 import { nanoid } from 'nanoid';
 import { PrismEditor } from 'vue-prism-editor';

src/content/blocks-handler/handler-forms.js

@@ -5,6 +5,19 @@ function forms(block) {
   return new Promise((resolve) => {
     const { data } = block;
     const elements = handleElement(block, true);
+    console.log(data);
+    if (data.getValue) {
+      let result = '';
+
+      if (data.multiple) {
+        result = elements.map((element) => element.value || '');
+      } else {
+        result = elements.value || '';
+      }
+      console.log(result);
+      resolve(result);
+      return;
+    }
 
     if (data.multiple) {
       const promises = Array.from(elements).map((element) => {

src/locales/en/blocks.json

@@ -158,6 +158,7 @@
         "description": "",
         "selected": "Selected",
         "type": "Form type",
+        "getValue": "Get form value",
         "text-field": {
           "name": "Text field",
           "value": "Value",

src/utils/shared.js

@@ -286,6 +286,9 @@ export const tasks = {
       multiple: false,
       selected: true,
       clearValue: true,
+      getValue: true,
+      saveData: true,
+      dataColumn: '',
       type: 'text-field',
       value: '',
       delay: 0,