feat: add set attribute value in Attribute Value block (#1327)

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

@@ -1,7 +1,17 @@
 <template>
   <edit-interaction-base v-bind="{ data }" @change="updateData">
     <hr />
-    <edit-autocomplete>
+    <ui-select
+      :label="t('common.action')"
+      :model-value="data.action || 'get'"
+      class="mt-2 w-full"
+      @change="updateData({ action: $event })"
+    >
+      <option v-for="action in ['get', 'set']" :key="action" :value="action">
+        {{ t(`workflow.blocks.attribute-value.forms.action.${action}`) }}
+      </option>
+    </ui-select>
+    <edit-autocomplete class="mt-2">
       <ui-input
         :model-value="data.attributeName"
         :label="t('workflow.blocks.attribute-value.forms.name')"
@@ -11,7 +21,18 @@
         @change="updateData({ attributeName: $event })"
       />
     </edit-autocomplete>
+    <edit-autocomplete v-if="data.action === 'set'" class="mt-2">
+      <ui-input
+        :model-value="data.attributeValue"
+        :label="t('workflow.blocks.attribute-value.forms.value')"
+        autocomplete="off"
+        placeholder="value"
+        class="w-full"
+        @change="updateData({ attributeValue: $event })"
+      />
+    </edit-autocomplete>
     <insert-workflow-data
+      v-else
       :data="data"
       extra-row
       variables

src/content/blocksHandler/handlerAttributeValue.js

@@ -1,9 +1,9 @@
 import handleSelector from '../handleSelector';
 
-function attributeValue(block) {
+function handleAttributeValue(block) {
   return new Promise((resolve, reject) => {
     let result = [];
-    const { attributeName, multiple } = block.data;
+    const { attributeName, multiple, attributeValue, action } = block.data;
     const isCheckboxOrRadio = (element) => {
       if (element.tagName !== 'INPUT') return false;
 
@@ -12,6 +12,11 @@ function attributeValue(block) {
 
     handleSelector(block, {
       onSelected(element) {
+        if (action === 'set') {
+          element.setAttribute(attributeName, attributeValue);
+          return;
+        }
+
         let value = element.getAttribute(attributeName);
 
         if (attributeName === 'checked' && isCheckboxOrRadio(element)) {
@@ -33,4 +38,4 @@ function attributeValue(block) {
   });
 }
 
-export default attributeValue;
+export default handleAttributeValue;

src/locales/en/blocks.json

@@ -586,6 +586,11 @@
           "name": "Attribute name",
           "checkbox": "Insert to table",
           "column": "Select column",
+          "value": "Attribute value",
+          "action": {
+            "get": "Get attribute value",
+            "set": "Set attribute value"
+          },
           "extraRow": {
             "checkbox": "Add extra row",
             "placeholder": "Value",

src/utils/shared.js

@@ -451,7 +451,13 @@ export const tasks = {
     outputs: 1,
     allowedInputs: true,
     maxConnection: 1,
-    refDataKeys: ['selector', 'variableName', 'attributeName', 'extraRowValue'],
+    refDataKeys: [
+      'selector',
+      'variableName',
+      'attributeName',
+      'extraRowValue',
+      'attributeValue',
+    ],
     autocomplete: ['variableName'],
     data: {
       disableBlock: false,
@@ -462,11 +468,13 @@ export const tasks = {
       selector: '',
       markEl: false,
       multiple: false,
+      attributeValue: '',
       attributeName: '',
       assignVariable: false,
       variableName: '',
       dataColumn: '',
       saveData: true,
+      action: 'get',
       addExtraRow: false,
       extraRowValue: '',
       extraRowDataColumn: '',