Browse Source

feat(editor): add data column to 'get text' block

Ahmad Kholid 3 years ago
parent
commit
58e28beb9c

+ 1 - 1
src/components/block/BlockRepeatTask.vue

@@ -33,7 +33,7 @@
       <input
       <input
         :value="block.data.repeatFor || 0"
         :value="block.data.repeatFor || 0"
         min="0"
         min="0"
-        class="pl-4 py-2 bg-transparent rounded-l-lg w-28 mr-2"
+        class="pl-4 py-2 bg-transparent rounded-l-lg w-24 mr-2"
         type="number"
         type="number"
         required
         required
         @input="handleInput"
         @input="handleInput"

+ 23 - 19
src/components/newtab/workflow/edit/EditGetText.vue

@@ -6,20 +6,29 @@
       class="mt-2 w-full"
       class="mt-2 w-full"
       @change="updateData"
       @change="updateData"
     />
     />
-    <ui-input
-      :model-value="data.dataColumn"
-      list="data-columns"
-      placeholder="Data column"
-      class="mt-3 w-full"
-      @blur="updateDataColumn"
-    ></ui-input>
-    <datalist id="data-columns">
-      <option
-        v-for="column in workflow.data.dataColumns"
-        :key="column"
-        :value="column"
-      />
-    </datalist>
+    <div class="flex items-center mt-3">
+      <ui-select
+        :model-value="data.dataColumn"
+        placeholder="Data column"
+        class="mr-2 flex-1"
+        @change="updateData({ dataColumn: $event })"
+      >
+        <option
+          v-for="column in workflow.data.value.dataColumns"
+          :key="column.name"
+          :value="column.name"
+        >
+          {{ column.name }}
+        </option>
+      </ui-select>
+      <ui-button
+        icon
+        title="Data columns"
+        @click="workflow.showDataColumnsModal(true)"
+      >
+        <v-remixicon name="riKey2Line" />
+      </ui-button>
+    </div>
   </edit-interaction-base>
   </edit-interaction-base>
 </template>
 </template>
 <script setup>
 <script setup>
@@ -39,9 +48,4 @@ const workflow = inject('workflow');
 function updateData(value) {
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
   emit('update:data', { ...props.data, ...value });
 }
 }
-function updateDataColumn({ target: { value } }) {
-  if (!value.trim()) return;
-
-  console.log(value, workflow.data);
-}
 </script>
 </script>