feat: add block settings inside group item

src/components/block/BlockGroup.vue

@@ -76,13 +76,19 @@
           <div class="invisible group-hover:visible">
             <v-remixicon
               name="riPencilLine"
-              size="20"
+              size="18"
               class="cursor-pointer inline-block mr-2"
               @click="editBlock(element)"
             />
+            <v-remixicon
+              name="riSettings3Line"
+              size="18"
+              class="cursor-pointer inline-block mr-2"
+              @click="editItemSettings(element)"
+            />
             <v-remixicon
               name="riDeleteBin7Line"
-              size="20"
+              size="18"
               class="cursor-pointer inline-block"
               @click="deleteItem(index, element.itemId)"
             />
@@ -149,6 +155,15 @@ const blocks = computed(() =>
     : Object.values(props.data.blocks)
 );
 
+function editItemSettings(element) {
+  console.log(element);
+  emit('settings', {
+    blockId: props.id,
+    data: element.data,
+    itemId: element.itemId,
+    details: { id: element.id },
+  });
+}
 function onDragStart(item, event) {
   event.dataTransfer.setData(
     'block',

src/components/newtab/workflow/WorkflowEditor.vue

@@ -72,7 +72,7 @@
     >
       <edit-block-settings
         :data="blockSettingsState.data"
-        @change="updateBlockData(blockSettingsState.data.blockId, $event)"
+        @change="updateBlockSettingsData"
       />
     </ui-modal>
   </vue-flow>
@@ -124,7 +124,13 @@ const props = defineProps({
   },
   disabled: Boolean,
 });
-const emit = defineEmits(['edit', 'init', 'update:node', 'delete:node']);
+const emit = defineEmits([
+  'edit',
+  'init',
+  'update:node',
+  'delete:node',
+  'update:settings',
+]);
 
 const fallbackBlocks = {
   BlockBasic: ['BlockExportData'],
@@ -190,8 +196,9 @@ const blockSettingsState = reactive({
   data: {},
 });
 
-function initEditBlockSettings({ blockId, details, data }) {
+function initEditBlockSettings({ blockId, details, data, itemId }) {
   blockSettingsState.data = {
+    itemId,
     blockId,
     id: details.id,
     data: cloneDeep(data),
@@ -218,6 +225,32 @@ function updateBlockData(nodeId, data = {}) {
 
   emit('update:node', node);
 }
+function updateBlockSettingsData(newSettings) {
+  if (isDisabled.value) return;
+
+  const nodeId = blockSettingsState.data.blockId;
+  const node = editor.getNode.value(nodeId);
+
+  if (blockSettingsState.data.itemId) {
+    const index = node.data.blocks.findIndex(
+      (item) => item.itemId === blockSettingsState.data.itemId
+    );
+    if (index === -1) return;
+
+    node.data.blocks[index].data = {
+      ...node.data.blocks[index].data,
+      ...newSettings,
+    };
+  } else {
+    node.data = { ...node.data, ...newSettings };
+  }
+
+  emit('update:settings', {
+    settings: newSettings,
+    itemId: blockSettingsState.data.itemId,
+    blockId: blockSettingsState.data.blockId,
+  });
+}
 function editBlock({ id, label, data }, additionalData = {}) {
   if (isDisabled.value) return;
 

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

@@ -62,11 +62,15 @@ const tabs = [
 const isDebugSupported =
   browserType !== 'firefox' && supportedBlocks.includes(props.data.id);
 
+if (props.data?.itemId) {
+  tabs.pop();
+}
+
 if (isDebugSupported) {
   currActiveTab = 'general';
   tabs.unshift({ id: 'general', name: t('settings.menu.general') });
 } else if (!isOnErrorSupported) {
-  currActiveTab = 'lines';
+  if (!props.data?.itemId) currActiveTab = 'lines';
   tabs.shift();
 }
 

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

@@ -167,6 +167,7 @@
             @edit="initEditBlock"
             @update:node="state.dataChanged = true"
             @delete:node="state.dataChanged = true"
+            @update:settings="onUpdateBlockSettings"
           >
             <template
               v-if="!isTeamWorkflow || haveEditAccess"
@@ -670,6 +671,15 @@ const onEdgesChange = debounce((changes) => {
   // if (command) commandManager.add(command);
 }, 250);
 
+function onUpdateBlockSettings({ blockId, itemId, settings }) {
+  state.dataChanged = true;
+
+  if (!editState.editing) return;
+  if (itemId && itemId !== editState.blockData.itemId) return;
+  if (editState.blockData.blockId !== blockId) return;
+
+  editState.blockData.data = { ...editState.blockData.data, ...settings };
+}
 function closeEditingCard() {
   editState.editing = false;
   editState.blockData = {};