feat: add default column setting

src/background/workflowEngine/engine.js

@@ -29,7 +29,14 @@ class WorkflowEngine {
     this.historyCtxData = {};
     this.eventListeners = {};
     this.preloadScripts = [];
-    this.columns = { column: { index: 0, name: 'column', type: 'any' } };
+    console.log(this.workflow.settings);
+    this.columns = {
+      column: {
+        index: 0,
+        type: 'any',
+        name: this.workflow.settings?.defaultColumnName || 'column',
+      },
+    };
 
     let variables = {};
     let { globalData } = workflow;

src/background/workflowEngine/worker.js

@@ -56,8 +56,13 @@ class Worker {
       return;
     }
 
+    const insertDefault = this.settings.insertDefaultColumn ?? true;
     const columnId =
       (this.engine.columns[key] ? key : this.engine.columnsId[key]) || 'column';
+
+    console.log(columnId);
+    if (columnId === 'column' && !insertDefault) return;
+
     const currentColumn = this.engine.columns[columnId];
     const columnName = currentColumn.name || 'column';
     const convertedValue = convertData(value, currentColumn.type);
@@ -273,7 +278,13 @@ class Worker {
 
     this.engine.history = [];
     this.engine.preloadScripts = [];
-    this.engine.columns = { column: { index: 0, name: 'column', type: 'any' } };
+    this.engine.columns = {
+      column: {
+        index: 0,
+        type: 'any',
+        name: this.settings?.defaultColumnName || 'column',
+      },
+    };
 
     this.activeTab = {
       url: '',

src/components/newtab/workflow/WorkflowDataTable.vue

@@ -12,35 +12,40 @@
       {{ t('common.add') }}
     </ui-button>
   </div>
-  <ul
-    class="space-y-2 overflow-y-auto scroll py-1"
-    style="max-height: calc(100vh - 11rem)"
+  <div
+    class="overflow-y-auto scroll"
+    style="max-height: 600px; height: calc(100vh - 13rem)"
   >
-    <li
-      v-for="(column, index) in columns"
-      :key="column.id"
-      class="flex items-center space-x-2"
-    >
-      <ui-input
-        :model-value="columns[index].name"
-        :placeholder="t('workflow.table.column.name')"
-        class="flex-1"
-        @blur="updateColumnName(index, $event.target)"
-      />
-      <ui-select
-        v-model="columns[index].type"
-        class="flex-1"
-        :placeholder="t('workflow.table.column.type')"
+    <p v-if="columns.length === 0" class="text-center mt-4">
+      {{ t('message.noData') }}
+    </p>
+    <ul v-else class="space-y-2 py-1">
+      <li
+        v-for="(column, index) in columns"
+        :key="column.id"
+        class="flex items-center space-x-2"
       >
-        <option v-for="type in dataTypes" :key="type.id" :value="type.id">
-          {{ type.name }}
-        </option>
-      </ui-select>
-      <button @click="state.columns.splice(index, 1)">
-        <v-remixicon name="riDeleteBin7Line" />
-      </button>
-    </li>
-  </ul>
+        <ui-input
+          :model-value="columns[index].name"
+          :placeholder="t('workflow.table.column.name')"
+          class="flex-1"
+          @blur="updateColumnName(index, $event.target)"
+        />
+        <ui-select
+          v-model="columns[index].type"
+          class="flex-1"
+          :placeholder="t('workflow.table.column.type')"
+        >
+          <option v-for="type in dataTypes" :key="type.id" :value="type.id">
+            {{ type.name }}
+          </option>
+        </ui-select>
+        <button @click="state.columns.splice(index, 1)">
+          <v-remixicon name="riDeleteBin7Line" />
+        </button>
+      </li>
+    </ul>
+  </div>
 </template>
 <script setup>
 import { computed, onMounted, watch, reactive } from 'vue';

src/components/newtab/workflow/WorkflowSettings.vue

@@ -1,94 +1,148 @@
 <template>
-  <div
-    class="workflow-settings space-y-4 divide-y dark:divide-gray-700 divide-gray-100"
-  >
-    <div class="flex items-center">
-      <div class="mr-4 flex-1">
-        <p>
-          {{ t('workflow.settings.onError.title') }}
-        </p>
-        <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
-          {{ t('workflow.settings.onError.description') }}
-        </p>
-      </div>
-      <ui-select v-model="settings.onError">
-        <option v-for="item in onError" :key="item.id" :value="item.id">
-          {{ t(`workflow.settings.onError.items.${item.name}`) }}
-        </option>
-      </ui-select>
-      <div
-        v-if="settings.onError === 'restart-workflow'"
-        :title="t('workflow.settings.restartWorkflow.description')"
-        class="flex items-center bg-input transition-colors rounded-lg ml-4"
-      >
-        <input
-          v-model.number="settings.restartTimes"
-          type="number"
-          class="py-2 pl-2 text-right appearance-none w-12 rounded-lg bg-transparent"
-        />
-        <span class="px-2 text-sm">
-          {{ t('workflow.settings.restartWorkflow.times') }}
-        </span>
-      </div>
+  <ui-card padding="p-0" class="workflow-settings w-full max-w-2xl">
+    <div class="flex items-center px-4 pt-4">
+      <p class="flex-1">
+        {{ t('common.settings') }}
+      </p>
+      <v-remixicon
+        name="riCloseLine"
+        class="cursor-pointer"
+        @click="$emit('close')"
+      />
     </div>
-    <div class="flex items-center pt-4">
-      <div class="mr-4 flex-1">
-        <p>
-          {{ t('workflow.settings.blockDelay.title') }}
-        </p>
-        <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
-          {{ t('workflow.settings.blockDelay.description') }}
-        </p>
-      </div>
-      <ui-input v-model.number="settings.blockDelay" type="number" />
+    <div class="space-x-2 px-4 pt-2">
+      <ui-tabs v-model="activeTab">
+        <ui-tab v-for="tab in tabs" :key="tab.value" :value="tab.value">
+          {{ tab.name }}
+        </ui-tab>
+      </ui-tabs>
     </div>
-    <div
-      v-for="item in settingItems"
-      :key="item.id"
-      class="flex items-center pt-4"
+    <ui-tab-panels
+      v-model="activeTab"
+      class="overflow-auto scroll pt-4 px-4 pb-4"
+      style="height: calc(100vh - 10rem); max-height: 600px"
     >
-      <div class="mr-4 flex-1">
-        <p>
-          {{ item.name }}
-        </p>
-        <p
-          v-if="item.notSupport?.includes(browserType)"
-          class="text-sm leading-tight text-red-400 dark:text-red-300"
-        >
-          {{
-            t('log.messages.browser-not-supported', { browser: browserType })
-          }}
-        </p>
-        <p
-          v-else
-          class="text-gray-600 dark:text-gray-200 text-sm leading-tight"
+      <ui-tab-panel
+        class="space-y-4 space-y-4 divide-y dark:divide-gray-700 divide-gray-100"
+        value="general"
+      >
+        <div class="flex items-center">
+          <div class="mr-4 flex-1">
+            <p>
+              {{ t('workflow.settings.onError.title') }}
+            </p>
+            <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
+              {{ t('workflow.settings.onError.description') }}
+            </p>
+          </div>
+          <ui-select v-model="settings.onError">
+            <option v-for="item in onError" :key="item.id" :value="item.id">
+              {{ t(`workflow.settings.onError.items.${item.name}`) }}
+            </option>
+          </ui-select>
+          <div
+            v-if="settings.onError === 'restart-workflow'"
+            :title="t('workflow.settings.restartWorkflow.description')"
+            class="flex items-center bg-input transition-colors rounded-lg ml-4"
+          >
+            <input
+              v-model.number="settings.restartTimes"
+              type="number"
+              class="py-2 pl-2 text-right appearance-none w-12 rounded-lg bg-transparent"
+            />
+            <span class="px-2 text-sm">
+              {{ t('workflow.settings.restartWorkflow.times') }}
+            </span>
+          </div>
+        </div>
+        <div class="flex items-center pt-4">
+          <div class="mr-4 flex-1">
+            <p>
+              {{ t('workflow.settings.blockDelay.title') }}
+            </p>
+            <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
+              {{ t('workflow.settings.blockDelay.description') }}
+            </p>
+          </div>
+          <ui-input v-model.number="settings.blockDelay" type="number" />
+        </div>
+        <div
+          v-for="item in settingItems"
+          :key="item.id"
+          class="flex items-center pt-4"
         >
-          {{ item.description }}
-        </p>
-      </div>
-      <ui-switch
-        v-if="!item.notSupport?.includes(browserType)"
-        v-model="settings[item.id]"
-        class="mr-4"
-      />
-    </div>
-    <div class="flex items-center pt-4">
-      <div class="mr-4 flex-1">
-        <p>
-          {{ t('workflow.settings.clearCache.title') }}
-        </p>
-        <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
-          {{ t('workflow.settings.clearCache.description') }}
-        </p>
-      </div>
-      <ui-button @click="onClearCacheClick">
-        {{ t('workflow.settings.clearCache.btn') }}
-      </ui-button>
-    </div>
-  </div>
+          <div class="mr-4 flex-1">
+            <p>
+              {{ item.name }}
+            </p>
+            <p
+              v-if="item.notSupport?.includes(browserType)"
+              class="text-sm leading-tight text-red-400 dark:text-red-300"
+            >
+              {{
+                t('log.messages.browser-not-supported', {
+                  browser: browserType,
+                })
+              }}
+            </p>
+            <p
+              v-else
+              class="text-gray-600 dark:text-gray-200 text-sm leading-tight"
+            >
+              {{ item.description }}
+            </p>
+          </div>
+          <ui-switch
+            v-if="!item.notSupport?.includes(browserType)"
+            v-model="settings[item.id]"
+          />
+        </div>
+        <div class="flex items-center pt-4">
+          <div class="mr-4 flex-1">
+            <p>
+              {{ t('workflow.settings.clearCache.title') }}
+            </p>
+            <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
+              {{ t('workflow.settings.clearCache.description') }}
+            </p>
+          </div>
+          <ui-button @click="onClearCacheClick">
+            {{ t('workflow.settings.clearCache.btn') }}
+          </ui-button>
+        </div>
+      </ui-tab-panel>
+      <ui-tab-panel
+        class="space-y-4 space-y-4 divide-y dark:divide-gray-700 divide-gray-100"
+        value="table"
+      >
+        <div class="flex items-center">
+          <div class="flex-grow">
+            <p>
+              {{ t('workflow.settings.defaultColumn.title') }}
+            </p>
+            <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
+              {{ t('workflow.settings.defaultColumn.description') }}
+            </p>
+          </div>
+          <ui-switch v-model="settings.insertDefaultColumn" />
+        </div>
+        <transition-expand>
+          <div v-if="settings.insertDefaultColumn" class="flex pt-4">
+            <p class="flex-1">
+              {{ t('workflow.settings.defaultColumn.name') }}
+            </p>
+            <ui-input
+              v-model="settings.defaultColumnName"
+              :title="t('workflow.settings.defaultColumn.name')"
+            />
+          </div>
+        </transition-expand>
+      </ui-tab-panel>
+    </ui-tab-panels>
+  </ui-card>
 </template>
 <script setup>
-import { onMounted, reactive, watch } from 'vue';
+import { onMounted, ref, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 import { clearCache, debounce } from '@/utils/helper';
@@ -147,10 +201,23 @@ const settingItems = [
     description: '',
   },
 ];
+const tabs = [
+  {
+    value: 'general',
+    name: t('settings.menu.general'),
+  },
+  {
+    value: 'table',
+    name: t('workflow.table.title'),
+  },
+];
 
+const activeTab = ref('general');
 const settings = reactive({
   restartTimes: 3,
   inputAutocomplete: true,
+  insertDefaultColumn: true,
+  defaultColumnName: 'column',
 });
 
 async function onClearCacheClick() {

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

@@ -57,7 +57,7 @@
           />
         </div>
         <div
-          class="overflow-auto p-4 mt-4 scroll"
+          class="overflow-auto p-4 scroll"
           style="height: calc(100vh - 8rem)"
         >
           <input

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

@@ -15,7 +15,7 @@
         class="p-4 rounded-lg bg-green-200 dark:bg-green-300 flex items-start text-black"
       >
         <v-remixicon name="riInformationLine" />
-        <p class="flex-1 ml-4 text-gray-100 dark:text-black">
+        <p class="flex-1 ml-4">
           {{ t('workflow.blocks.base.onError.info') }}
         </p>
       </div>

src/content/services/webService.js

@@ -51,7 +51,7 @@ function initWebListener() {
         );
 
         workflow.table = workflow.table || workflow.dataColumns;
-        delete workflow.dataColumns;
+        workflow.dataColumns = [];
 
         workflowsStorage.push({
           ...workflow,

src/locales/en/blocks.json

@@ -10,6 +10,7 @@
   "workflow": {
     "blocks": {
       "base": {
+        "title": "Blocks",
         "moveToGroup": "Move block to blocks group",
         "selector": "Element selector",
         "timeout": "Timeout (milliseconds)",

src/locales/en/newtab.json

@@ -191,6 +191,11 @@
     "settings": {
       "saveLog": "Save workflow log",
       "executedBlockOnWeb": "Show executed block on web page",
+      "defaultColumn": {
+        "title": "Insert into the default column",
+        "description": "Insert data to the default column when there's no column selected in the block",
+        "name": "Default column name"
+      },
       "autocomplete": {
         "title": "Autocomplete",
         "description": "Enable autocomplete in the input block (disable if it makes Automa unstable)"

src/models/workflow.js

@@ -39,6 +39,8 @@ class Workflow extends Model {
         inputAutocomplete: true,
         onError: 'stop-workflow',
         executedBlockOnWeb: false,
+        insertDefaultColumn: true,
+        defaultColumnName: 'column',
       }),
       logs: this.hasMany(Log, 'workflowId'),
       globalData: this.string('[{ "key": "value" }]'),

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

@@ -355,6 +355,15 @@ const workflowModals = {
     icon: 'riSettings3Line',
     component: WorkflowSettings,
     title: t('common.settings'),
+    attrs: {
+      customContent: true,
+    },
+    events: {
+      close() {
+        state.showModal = false;
+        state.modalName = '';
+      },
+    },
   },
 };