feat(editor): add data type to column

src/background/workflow-engine.js

@@ -30,6 +30,7 @@ class WorkflowEngine {
     this.blocksArr = [];
     this.data = [];
     this.isDestroyed = false;
+    this.isPaused = false;
     this.logs = [];
 
     this.tabMessageListeners = {};
@@ -77,6 +78,13 @@ class WorkflowEngine {
       );
       return;
     }
+    if (this.isPaused) {
+      setTimeout(() => {
+        this._blockHandler(block, prevBlockData);
+      }, 1000);
+
+      return;
+    }
 
     const isInteraction = tasks[block.name].category === 'interaction';
     const handlerName = isInteraction
@@ -107,9 +115,7 @@ class WorkflowEngine {
       name: `${this.workflow.id}--${this.workflow.name.slice(0, 10)}`,
     });
 
-    if (!this.connectedTab) {
-      browser.tabs.onRemoved.addListener(tabRemovedListener);
-    } else {
+    if (this.connectedTab) {
       this.connectedTab.onMessage.removeListener(
         this.tabMessageListenerHandler
       );

src/components/newtab/workflow/WorkflowDataColumns.vue

@@ -19,8 +19,26 @@
       :key="column.name"
       class="flex items-center space-x-2"
     >
-      <ui-input v-model="columns[index].name" placeholder="Column name" />
-      <ui-input v-model="columns[index].default" placeholder="Default value" />
+      <ui-input
+        :model-value="columns[index].name"
+        disabled
+        class="flex-1"
+        placeholder="Column name"
+      />
+      <ui-input
+        v-model="columns[index].default"
+        class="flex-1"
+        placeholder="Default value"
+      />
+      <ui-select
+        v-model="columns[index].type"
+        class="flex-1"
+        placeholder="Data 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>
@@ -39,6 +57,11 @@ const props = defineProps({
 });
 const emit = defineEmits(['update', 'close']);
 
+const dataTypes = [
+  { id: 'string', name: 'Text' },
+  { id: 'integer', name: 'Number' },
+];
+
 const state = reactive({
   query: '',
   columns: [],
@@ -52,7 +75,7 @@ function addColumn() {
 
   if (isColumnExists || state.query.trim() === '') return;
 
-  state.columns.push({ name: state.query, default: '' });
+  state.columns.push({ name: state.query, default: '', type: 'string' });
   state.query = '';
 }
 

src/content/blocks-handler.js

@@ -11,8 +11,15 @@ function handleElement(data, callback) {
   if (typeof callback === 'boolean' && callback) return element;
 
   if (data.multiple) {
-    element.forEach(callback);
-  } else if (element) {
+    element.forEach((el) => {
+      if (el.hasAttribute('ext-auto')) return;
+
+      el.setAttribute('ext-auto', '');
+      callback(el);
+    });
+  } else if (element && !element.hasAttribute('ext-auto')) {
+    element.setAttribute('ext-auto', '');
+
     callback(element);
   }
 }
@@ -121,9 +128,15 @@ export function textInput({ data }) {
     if (data.multiple) {
       const promises = Array.from(elements).map((element) => {
         return new Promise((eventResolve) => {
-          if (textFields.includes(element.tagName))
+          if (
+            textFields.includes(element.tagName) ||
+            !element.hasAttribute('ext-auto')
+          ) {
             inputText({ data, element, callback: eventResolve });
-          else eventResolve();
+          } else {
+            element.setAttribute('ext-auto', '');
+            eventResolve();
+          }
         });
       });
 
@@ -131,8 +144,15 @@ export function textInput({ data }) {
         console.log('hola amigo');
         resolve('');
       });
-    } else if (textFields.includes(elements.tagName)) {
+    } else if (
+      elements &&
+      textFields.includes(elements.tagName) &&
+      !elements.hasAttribute('ext-auto')
+    ) {
+      elements.setAttribute('ext-auto', '');
+
       inputText({
+        data,
         element: elements,
         callback: () => {
           console.log('hola amigo 2');

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

@@ -28,7 +28,7 @@
       @deleteBlock="deleteBlock"
     />
   </div>
-  <ui-modal v-model="state.showDataColumnsModal">
+  <ui-modal v-model="state.showDataColumnsModal" content-class="max-w-xl">
     <template #header>Data columns</template>
     <workflow-data-columns
       v-bind="{ workflow }"

src/utils/shared.js

@@ -163,18 +163,18 @@ export const tasks = {
       repeatFor: 1,
     },
   },
-  'reload-page': {
-    name: 'Reload page',
-    icon: 'riRestartLine',
-    component: 'BlockBasic',
-    category: 'interaction',
-    inputs: 1,
-    outputs: 1,
-    allowedInputs: true,
-    maxConnection: 1,
-    disableEdit: true,
-    data: {},
-  },
+  // 'reload-page': {
+  //   name: 'Reload page',
+  //   icon: 'riRestartLine',
+  //   component: 'BlockBasic',
+  //   category: 'interaction',
+  //   inputs: 1,
+  //   outputs: 1,
+  //   allowedInputs: true,
+  //   maxConnection: 1,
+  //   disableEdit: true,
+  //   data: {},
+  // },
   'trigger-event': {
     name: 'Trigger event',
     icon: 'riLightbulbFlashLine',
@@ -251,6 +251,6 @@ export const eventList = [
   { id: 'keydown', name: 'Keydown', type: 'keyboard-event' },
   { id: 'keyup', name: 'Keyup', type: 'keyboard-event' },
   { id: 'keypress', name: 'Keypress', type: 'keyboard-event' },
-  { id: 'wheel', name: 'Wheel', type: 'wheel-event' },
   { id: 'submit', name: 'Submit', type: 'submit-event' },
+  { id: 'wheel', name: 'Wheel', type: 'wheel-event' },
 ];