feat!: rename "Data columns" to "Table"

src/background/workflow-engine/blocks-handler/handler-execute-workflow.js

@@ -62,13 +62,14 @@ async function executeWorkflow({ outputs, data }) {
         },
         onDestroyed: (engine) => {
           if (data.executeId) {
-            const { dataColumns, globalData, googleSheets } =
+            const { dataColumns, globalData, googleSheets, table } =
               engine.referenceData;
 
             this.referenceData.workflow[data.executeId] = {
               globalData,
               dataColumns,
               googleSheets,
+              table: table || dataColumns,
             };
           }
         },

src/background/workflow-engine/blocks-handler/handler-export-data.js

@@ -4,7 +4,7 @@ import dataExporter from '@/utils/data-exporter';
 function exportData({ data, outputs }) {
   return new Promise((resolve) => {
     const dataToExport = data.dataToExport || 'data-columns';
-    let payload = this.referenceData.dataColumns;
+    let payload = this.referenceData.table;
 
     if (dataToExport === 'google-sheets') {
       payload = this.referenceData.googleSheets[data.refKey] || [];

src/background/workflow-engine/blocks-handler/handler-google-sheets.js

@@ -28,15 +28,15 @@ async function updateSpreadsheetValues(
     dataFrom,
     customData,
   },
-  dataColumns
+  columns
 ) {
   let values = [];
 
-  if (dataFrom === 'data-columns') {
+  if (['data-columns', 'table'].includes(dataFrom)) {
     if (keysAsFirstRow) {
-      values = convertArrObjTo2DArr(dataColumns);
+      values = convertArrObjTo2DArr(columns);
     } else {
-      values = dataColumns.map(Object.values);
+      values = columns.map(Object.values);
     }
   } else if (dataFrom === 'custom') {
     values = parseJSON(customData, customData);
@@ -75,10 +75,7 @@ export default async function ({ data, outputs }) {
         this.referenceData.googleSheets[data.refKey] = spreadsheetValues;
       }
     } else if (data.type === 'update') {
-      result = await updateSpreadsheetValues(
-        data,
-        this.referenceData.dataColumns
-      );
+      result = await updateSpreadsheetValues(data, this.referenceData.table);
     }
 
     return {

src/background/workflow-engine/blocks-handler/handler-loop-data.js

@@ -30,8 +30,9 @@ function loopData(block) {
         case 'numbers':
           currLoopData = data.fromNumber;
           break;
+        case 'table':
         case 'data-columns':
-          currLoopData = this.referenceData.dataColumns;
+          currLoopData = this.referenceData.table;
           break;
         case 'google-sheets':
           currLoopData = this.referenceData.googleSheets[data.referenceKey];

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

@@ -28,7 +28,7 @@ async function takeScreenshot({ data, outputs, name }) {
   try {
     let screenshot = null;
     const options = {
-      quality,
+      quality: data.quality,
       format: data.ext || 'png',
     };
     const saveScreenshot = (dataUrl) => {

src/background/workflow-engine/engine.js

@@ -44,10 +44,10 @@ class WorkflowEngine {
       groupId: null,
     };
     this.referenceData = {
+      table: [],
       loopData: {},
       workflow: {},
       variables: {},
-      dataColumns: [],
       googleSheets: {},
       globalData: parseJSON(globalDataValue, globalDataValue),
     };
@@ -85,9 +85,10 @@ class WorkflowEngine {
       return;
     }
 
-    const dataColumns = Array.isArray(this.workflow.dataColumns)
-      ? this.workflow.dataColumns
-      : Object.values(this.workflow.dataColumns);
+    const workflowTable = this.workflow.table || this.workflow.dataColumns;
+    const dataColumns = Array.isArray(workflowTable)
+      ? workflowTable
+      : Object.values(workflowTable);
 
     dataColumns.forEach(({ name, type }) => {
       this.columns[name] = { index: 0, type };
@@ -95,7 +96,7 @@ class WorkflowEngine {
 
     this.blocks = blocks;
     this.startedTimestamp = Date.now();
-    this.workflow.dataColumns = dataColumns;
+    this.workflow.table = dataColumns;
     this.currentBlock = currentBlock || triggerBlock;
 
     this.states.on('stop', this.onWorkflowStopped);
@@ -149,11 +150,11 @@ class WorkflowEngine {
     const currentColumn = this.columns[columnName];
     const convertedValue = convertData(value, currentColumn.type);
 
-    if (objectHasKey(this.referenceData.dataColumns, currentColumn.index)) {
-      this.referenceData.dataColumns[currentColumn.index][columnName] =
+    if (objectHasKey(this.referenceData.table, currentColumn.index)) {
+      this.referenceData.table[currentColumn.index][columnName] =
         convertedValue;
     } else {
-      this.referenceData.dataColumns.push({ [columnName]: convertedValue });
+      this.referenceData.table.push({ [columnName]: convertedValue });
     }
 
     currentColumn.index += 1;
@@ -192,7 +193,7 @@ class WorkflowEngine {
           parentLog: this.parentWorkflow,
           startedAt: this.startedTimestamp,
           data: {
-            table: this.referenceData.dataColumns,
+            table: this.referenceData.table,
             variables: this.referenceData.variables,
           },
         });

src/components/newtab/workflow/WorkflowActions.vue

@@ -128,9 +128,9 @@ const shortcuts = useShortcut(
 
 const modalActions = [
   {
-    id: 'data-columns',
-    name: t('workflow.dataColumns.title'),
-    icon: 'riKey2Line',
+    id: 'table',
+    name: t('workflow.table.title'),
+    icon: 'riTable2',
   },
   {
     id: 'global-data',

src/components/newtab/workflow/WorkflowDataColumns.vue → src/components/newtab/workflow/WorkflowDataTable.vue

@@ -3,7 +3,7 @@
     <ui-input
       v-model.lowercase="state.query"
       autofocus
-      :placeholder="t('workflow.dataColumns.placeholder')"
+      :placeholder="t('workflow.table.placeholder')"
       class="mr-2 flex-1"
       @keyup.enter="addColumn"
       @keyup.esc="$emit('close')"
@@ -25,12 +25,12 @@
         :model-value="columns[index].name"
         disabled
         class="flex-1"
-        :placeholder="t('workflow.dataColumns.column.name')"
+        :placeholder="t('workflow.table.column.name')"
       />
       <ui-select
         v-model="columns[index].type"
         class="flex-1"
-        :placeholder="t('workflow.dataColumns.column.type')"
+        :placeholder="t('workflow.table.column.type')"
       >
         <option v-for="type in dataTypes" :key="type.id" :value="type.id">
           {{ type.name }}
@@ -84,13 +84,13 @@ function addColumn() {
 watch(
   () => state.columns,
   debounce((newValue) => {
-    emit('update', { dataColumns: newValue });
+    emit('update', { table: newValue });
   }, 250),
   { deep: true }
 );
 
 onMounted(() => {
-  const tempColumns = props.workflow.dataColumns;
+  const tempColumns = props.workflow.table;
 
   state.columns = Array.isArray(tempColumns)
     ? tempColumns

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

@@ -38,7 +38,7 @@
       @change="updateData({ dataColumn: $event })"
     >
       <option
-        v-for="column in workflow.data.value.dataColumns"
+        v-for="column in workflow.data.value.table"
         :key="column.name"
         :value="column.name"
       >
@@ -71,7 +71,7 @@
       @change="updateData({ extraRowDataColumn: $event })"
     >
       <option
-        v-for="column in workflow.data.value.dataColumns"
+        v-for="column in workflow.data.value.table"
         :key="column.name"
         :value="column.name"
       >

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

@@ -20,7 +20,7 @@
       :model-value="data.name"
       label="File name"
       class="w-full mt-2"
-      placeholder="My file"
+      placeholder="unnamed"
       @change="updateData({ name: $event })"
     />
     <ui-input

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

@@ -14,7 +14,7 @@
         class="mt-4"
         @change="updateData({ saveData: $event })"
       >
-        Save data
+        Insert to table
       </ui-checkbox>
       <ui-select
         v-if="data.saveData"
@@ -24,7 +24,7 @@
         @change="updateData({ dataColumn: $event })"
       >
         <option
-          v-for="column in workflow.data.value.dataColumns"
+          v-for="column in workflow.data.value.table"
           :key="column.name"
           :value="column.name"
         >

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

@@ -83,7 +83,7 @@
         @change="updateData({ dataColumn: $event })"
       >
         <option
-          v-for="column in workflow.data.value.dataColumns"
+          v-for="column in workflow.data.value.table"
           :key="column.name"
           :value="column.name"
         >
@@ -114,7 +114,7 @@
         @change="updateData({ extraRowDataColumn: $event })"
       >
         <option
-          v-for="column in workflow.data.value.dataColumns"
+          v-for="column in workflow.data.value.table"
           :key="column.name"
           :value="column.name"
         >

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

@@ -174,6 +174,23 @@ function automaFuncsCompletion(context) {
           return container;
         },
       },
+      {
+        label: 'automaSetVariable',
+        type: 'function',
+        apply: snippet('automaSetVariable(${name}, ${value})'),
+        info: () => {
+          const container = document.createElement('div');
+
+          container.innerHTML = `
+            <code>automaRefData(<i>name</i>, <i>value</i>)</code>
+            <p class="mt-2">
+              Set the value of a variable
+            </p>
+          `;
+
+          return container;
+        },
+      },
       {
         label: 'automaRefData',
         type: 'function',

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

@@ -58,7 +58,7 @@
       @change="updateData({ dataColumn: $event })"
     >
       <option
-        v-for="column in workflow.data.value.dataColumns"
+        v-for="column in workflow.data.value.table"
         :key="column.name"
         :value="column.name"
       >

src/content/blocks-handler/handler-attribute-value.js

@@ -12,10 +12,13 @@ function attributeValue(block) {
 
     handleElement(block, {
       onSelected(element) {
-        const value =
-          attributeName === 'checked' && isCheckboxOrRadio(element)
-            ? element.checked
-            : element.getAttribute(attributeName);
+        let value = element.getAttribute(attributeName);
+
+        if (attributeName === 'checked' && isCheckboxOrRadio(element)) {
+          value = element.checked;
+        } else if (attributeName === 'href' && element.tagName === 'A') {
+          value = element.href;
+        }
 
         if (multiple) result.push(value);
         else result = value;

src/lib/v-remixicon.js

@@ -1,6 +1,7 @@
 import vRemixicon from 'v-remixicon';
 import {
   riHome5Line,
+  riTable2,
   riArrowLeftRightLine,
   riFileUploadLine,
   riLightbulbLine,
@@ -85,6 +86,7 @@ import {
 
 export const icons = {
   riHome5Line,
+  riTable2,
   riArrowLeftRightLine,
   riFileUploadLine,
   riLightbulbLine,

src/locales/en/blocks.json

@@ -111,7 +111,7 @@
         "dataFrom": {
           "label": "Data from",
           "options": {
-            "data-columns": "Data columns",
+            "data-columns": "Table",
             "custom": "Custom"
           }
         },
@@ -199,7 +199,7 @@
       "get-text": {
         "name": "Get text",
         "description": "Get text from an element",
-        "checkbox": "Save data",
+        "checkbox": "Insert to table",
         "includeTags": "Include HTML tags",
         "prefixText": {
           "placeholder": "Text prefix",
@@ -217,13 +217,13 @@
       },
       "export-data": {
         "name": "Export data",
-        "description": "Export workflow data columns",
+        "description": "Export workflow data",
         "exportAs": "Export as",
         "refKey": "Reference key",
         "dataToExport": {
           "placeholder": "Data to export",
           "options": {
-            "data-columns": "Data columns",
+            "data-columns": "Table",
             "google-sheets": "Google sheets",
           },
         }
@@ -265,7 +265,7 @@
         "description": "Get value of an element attribute",
         "forms": {
           "name": "Attribute name",
-          "checkbox": "Save data",
+          "checkbox": "Insert to table",
           "column": "Select column",
           "extraRow": {
             "checkbox": "Add extra row",
@@ -372,7 +372,7 @@
       },
       "loop-data": {
         "name": "Loop data",
-        "description": "Iterate through data columns or your custom data",
+        "description": "Iterate through table or your custom data",
         "loopId": "Loop id",
         "refKey": "Reference key",
         "modal": {
@@ -398,7 +398,8 @@
           "options": {
             "numbers": "Numbers",
             "variable": "Variable",
-            "data-columns": "Data columns",
+            "data-columns": "Table",
+            "table": "Table",
             "custom-data": "Custom data",
             "google-sheets": "Google sheets"
           }
@@ -413,7 +414,7 @@
         "fullPage": "Take full page screenshot",
         "description": "Take a screenshot of current active tab",
         "imageQuality": "Image quality",
-        "saveToColumn": "Save screenshot to column",
+        "saveToColumn": "Insert screenshot to table",
         "saveToComputer": "Save screenshot to computer"
       },
       "switch-to": {

src/locales/en/newtab.json

@@ -71,9 +71,6 @@
     },
     "table": {
       "title": "Table",
-    },
-    "dataColumns": {
-      "title": "Data columns",
       "placeholder": "Search or add column",
       "column": {
         "name": "Column name",

src/models/workflow.js

@@ -17,6 +17,7 @@ class Workflow extends Model {
       icon: this.string('riGlobalLine'),
       data: this.attr(null),
       drawflow: this.attr(''),
+      table: this.attr([]),
       dataColumns: this.attr([]),
       description: this.string(''),
       pass: this.string(''),
@@ -37,6 +38,15 @@ class Workflow extends Model {
     };
   }
 
+  static beforeCreate(model) {
+    if (model.dataColumns.length > 0) {
+      model.table = model.dataColumns;
+      model.dataColumns = [];
+    }
+
+    return model;
+  }
+
   static async insert(payload) {
     const res = await super.insert(payload);
 

src/newtab/pages/workflows/[id].vue

@@ -223,7 +223,7 @@ import WorkflowSettings from '@/components/newtab/workflow/WorkflowSettings.vue'
 import WorkflowEditBlock from '@/components/newtab/workflow/WorkflowEditBlock.vue';
 import WorkflowDetailsCard from '@/components/newtab/workflow/WorkflowDetailsCard.vue';
 import WorkflowGlobalData from '@/components/newtab/workflow/WorkflowGlobalData.vue';
-import WorkflowDataColumns from '@/components/newtab/workflow/WorkflowDataColumns.vue';
+import WorkflowDataTable from '@/components/newtab/workflow/WorkflowDataTable.vue';
 import SharedLogsTable from '@/components/newtab/shared/SharedLogsTable.vue';
 import SharedWorkflowState from '@/components/newtab/shared/SharedWorkflowState.vue';
 
@@ -237,10 +237,10 @@ const shortcut = useShortcut('editor:toggle-sidebar', toggleSidebar);
 
 const workflowId = route.params.id;
 const workflowModals = {
-  'data-columns': {
+  table: {
     icon: 'riKey2Line',
-    component: WorkflowDataColumns,
-    title: t('workflow.dataColumns.title'),
+    component: WorkflowDataTable,
+    title: t('workflow.table.title'),
   },
   'global-data': {
     icon: 'riDatabase2Line',
@@ -470,7 +470,7 @@ provide('workflow', {
   updateWorkflow,
   showDataColumnsModal: (show = true) => {
     state.showModal = show;
-    state.modalName = 'data-columns';
+    state.modalName = 'table';
   },
 });
 

src/utils/reference-data/key-parser.js

@@ -1,6 +1,7 @@
 const refKeys = {
-  dataColumn: 'dataColumns',
-  dataColumns: 'dataColumns',
+  table: 'table',
+  dataColumn: 'table',
+  dataColumns: 'table',
 };
 
 export default function (key) {
@@ -10,7 +11,7 @@ export default function (key) {
 
   if (!path) return { dataKey, path: '' };
 
-  if (dataKey !== 'dataColumns') {
+  if (dataKey !== 'table') {
     if (dataKey === 'loopData' && !path.endsWith('.$index')) {
       const pathArr = path.split('.');
       pathArr.splice(1, 0, 'data');
@@ -31,5 +32,5 @@ export default function (key) {
 
   if (path.endsWith('.')) path = path.slice(0, -1);
 
-  return { dataKey: 'dataColumns', path };
+  return { dataKey: 'table', path };
 }

src/utils/workflow-data.js

@@ -57,12 +57,12 @@ function convertWorkflow(workflow) {
   const keys = [
     'name',
     'icon',
+    'table',
     'version',
     'drawflow',
     'settings',
     'globalData',
     'description',
-    'dataColumns',
   ];
   const content = {
     extVersion: chrome.runtime.getManifest().version,