feat: add slice variable block

src/background/workflowEngine/blocksHandler/handlerSliceVariable.js

@@ -0,0 +1,27 @@
+export async function logData({ id, data }) {
+  const variable = this.engine.referenceData.variables[data.variableName];
+  const payload = {
+    data: variable,
+    nextBlockId: this.getBlockConnections(id),
+  };
+
+  if (!variable || !variable?.slice) return payload;
+
+  let startIndex = 0;
+  let endIndex = variable.length;
+
+  if (data.startIdxEnabled) {
+    startIndex = data.startIndex;
+  }
+  if (data.endIdxEnabled) {
+    endIndex = data.endIndex;
+  }
+
+  const slicedVariable = variable.slice(startIndex, endIndex);
+  payload.data = slicedVariable;
+  this.engine.referenceData.variables[data.variableName] = slicedVariable;
+
+  return payload;
+}
+
+export default logData;

src/components/newtab/workflow/WorkflowDataTable.vue

@@ -35,9 +35,9 @@
   </template>
   <div
     v-else-if="state.connectedTable"
-    class="py-2 px-4 rounded-md bg-green-200 dark:bg-green-300 flex items-center mb-4"
+    class="py-2 px-4 rounded-md bg-green-200 dark:bg-green-300 flex items-center mb-4 text-black"
   >
-    <p class="mr-1 text-black">
+    <p class="mr-1">
       This workflow is connected to the
       <router-link
         :to="`/storage/tables/${state.connectedTable.id}`"

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

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <ui-textarea
+      :model-value="data.description"
+      :placeholder="t('common.description')"
+      class="w-full"
+      @change="updateData({ description: $event })"
+    />
+    <ui-input
+      :model-value="data.variableName"
+      :label="t('workflow.variables.name')"
+      :title="t('workflow.variables.name')"
+      class="mt-2 w-full"
+      @change="updateData({ variableName: $event })"
+    />
+    <ul class="mt-4 space-y-2">
+      <li v-for="param in params" :key="param.id">
+        <ui-checkbox
+          :model-value="data[param.toggleKey]"
+          @change="updateData({ [param.toggleKey]: $event })"
+        >
+          {{ t(`workflow.blocks.slice-variable.${param.text}`) }}
+        </ui-checkbox>
+        <ui-input
+          v-if="data[param.toggleKey]"
+          :model-value="data[param.id]"
+          placeholder="0"
+          type="number"
+          class="w-full mb-2"
+          @change="updateData({ [param.id]: +$event })"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data']);
+
+const { t } = useI18n();
+
+const params = [
+  { id: 'startIndex', text: 'start', toggleKey: 'startIdxEnabled' },
+  { id: 'endIndex', text: 'end', toggleKey: 'endIdxEnabled' },
+];
+
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
+</script>
+<style>
+.log-data .block-variable {
+  margin-top: 4px;
+}
+</style>

src/lib/vRemixicon.js

@@ -27,6 +27,7 @@ import {
   riChat3Line,
   riEarthLine,
   riLock2Line,
+  riSliceLine,
   riHome5Line,
   riShareLine,
   riBook3Line,
@@ -149,6 +150,7 @@ export const icons = {
   riChat3Line,
   riEarthLine,
   riLock2Line,
+  riSliceLine,
   riHome5Line,
   riShareLine,
   riBook3Line,

src/locales/en/blocks.json

@@ -95,6 +95,12 @@
         "specificFlow": "Only continue a specific flow",
         "selectFlow": "Select flow"
       },
+      "slice-variable": {
+        "name": "Slice variable",
+        "description": "Extracts a section of a variable value",
+        "start": "Start index",
+        "end": "End index"
+      },
       "notification": {
         "name": "notification",
         "description": "Display a notification",

src/utils/shared.js

@@ -1049,6 +1049,27 @@ export const tasks = {
       variableName: '',
     },
   },
+  'slice-variable': {
+    name: 'Slice variable',
+    description: 'Extracts a section of a variable value',
+    icon: 'riSliceLine',
+    editComponent: 'EditSliceVariable',
+    component: 'BlockBasic',
+    category: 'data',
+    inputs: 1,
+    outputs: 1,
+    allowedInputs: true,
+    maxConnection: 1,
+    data: {
+      disableBlock: false,
+      description: '',
+      endIdxEnabled: false,
+      startIdxEnabled: true,
+      endIndex: 0,
+      startIndex: 0,
+      variableName: '',
+    },
+  },
 };
 
 export const categories = {