feat: add option to save to screenshot to column

src/background/workflow-engine/blocks-handler/handler-take-screenshot.js

@@ -22,7 +22,13 @@ function saveImage({ fileName, uri, ext }) {
 
 async function takeScreenshot(block) {
   const nextBlockId = getBlockConnection(block);
-  const { ext, quality, captureActiveTab, fileName } = block.data;
+  const { ext, quality, captureActiveTab, fileName, saveToColumn, dataColumn } =
+    block.data;
+
+  const saveToComputer =
+    typeof block.data.saveToComputer === 'undefined'
+      ? true
+      : block.data.saveToComputer;
 
   try {
     const options = {
@@ -52,11 +58,13 @@ async function takeScreenshot(block) {
         await browser.tabs.update(tab.id, { active: true });
       }
 
-      saveImage({ fileName, uri, ext });
+      if (saveToColumn) this.addData(dataColumn, uri);
+      if (saveToComputer) saveImage({ fileName, uri, ext });
     } else {
       const uri = await browser.tabs.captureVisibleTab(options);
 
-      saveImage({ fileName, uri, ext });
+      if (saveToColumn) this.addData(dataColumn, uri);
+      if (saveToComputer) saveImage({ fileName, uri, ext });
     }
 
     return { data: '', nextBlockId };

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

@@ -1,44 +1,78 @@
 <template>
-  <div class="flex items-center mb-2 mt-8">
-    <ui-input
-      :model-value="data.fileName"
-      :placeholder="t('common.fileName')"
-      class="flex-1 mr-2"
-      title="File name"
-      @change="updateData({ fileName: $event })"
-    />
-    <ui-select
-      :model-value="data.ext || 'png'"
-      placeholder="Type"
-      @change="updateData({ ext: $event })"
+  <div class="take-screenshot">
+    <ui-checkbox
+      :model-value="data.saveToComputer"
+      class="mb-2"
+      @change="updateData({ saveToComputer: $event })"
     >
-      <option value="png">PNG</option>
-      <option value="jpeg">JPEG</option>
-    </ui-select>
-  </div>
-  <p class="text-sm text-gray-600 ml-2">Image quality:</p>
-  <div class="bg-box-transparent px-4 mb-4 py-2 rounded-lg flex items-center">
-    <input
-      :value="data.quality"
-      :title="t('workflow.blocks.loop.take-screenshot.imageQuality')"
-      class="focus:outline-none flex-1"
-      type="range"
-      min="0"
-      max="100"
-      @change="updateQuality"
-    />
-    <span class="w-12 text-right">{{ data.quality }}%</span>
+      {{ t('workflow.blocks.take-screenshot.saveToComputer') }}
+    </ui-checkbox>
+    <div v-if="data.saveToComputer" class="flex items-center my-2">
+      <ui-input
+        :model-value="data.fileName"
+        :placeholder="t('common.fileName')"
+        class="flex-1 mr-2"
+        title="File name"
+        @change="updateData({ fileName: $event })"
+      />
+      <ui-select
+        :model-value="data.ext || 'png'"
+        placeholder="Type"
+        @change="updateData({ ext: $event })"
+      >
+        <option value="png">PNG</option>
+        <option value="jpeg">JPEG</option>
+      </ui-select>
+    </div>
+    <p class="text-sm text-gray-600 ml-2">Image quality:</p>
+    <div class="bg-box-transparent px-4 mb-2 py-2 rounded-lg flex items-center">
+      <input
+        :value="data.quality"
+        :title="t('workflow.blocks.take-screenshot.imageQuality')"
+        class="focus:outline-none flex-1"
+        type="range"
+        min="0"
+        max="100"
+        @change="updateQuality"
+      />
+      <span class="w-12 text-right">{{ data.quality }}%</span>
+    </div>
+    <ui-checkbox
+      :model-value="data.saveToColumn"
+      class="mt-3"
+      @change="updateData({ saveToColumn: $event })"
+    >
+      {{ t('workflow.blocks.take-screenshot.saveToColumn') }}
+    </ui-checkbox>
+    <div v-if="data.saveToColumn" class="flex items-center mt-1">
+      <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>
   </div>
-  <ui-checkbox
-    v-if="false"
-    :model-value="data.captureActiveTab"
-    @change="updateData({ captureActiveTab: $event })"
-  >
-    Take screenshoot of active tab
-  </ui-checkbox>
 </template>
 <script setup>
+import { inject, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { objectHasKey } from '@/utils/helper';
 
 const props = defineProps({
   data: {
@@ -49,6 +83,7 @@ const props = defineProps({
 const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
+const workflow = inject('workflow');
 
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
@@ -61,4 +96,10 @@ function updateQuality({ target }) {
 
   updateData({ quality });
 }
+
+onMounted(() => {
+  if (objectHasKey(props.data, 'saveToComputer')) return;
+
+  updateData({ saveToComputer: true, saveToColumn: false });
+});
 </script>

src/locales/en/blocks.json

@@ -326,7 +326,9 @@
       "take-screenshot": {
         "name": "Take screenshot",
         "description": "Take a screenshot of current active tab",
-        "imageQuality": "Image quality"
+        "imageQuality": "Image quality",
+        "saveToColumn": "Save screenshot to column",
+        "saveToComputer": "Save screenshot to computer"
       },
       "switch-to": {
         "name": "Switch frame",

src/utils/shared.js

@@ -168,6 +168,9 @@ export const tasks = {
       fileName: '',
       ext: 'png',
       quality: 100,
+      dataColumn: '',
+      saveToColumn: false,
+      saveToComputer: true,
       captureActiveTab: true,
     },
   },