feat(editor): add data columns modal

src/components/newtab/workflow/WorkflowDataColumns.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex mb-4">
+    <ui-input
+      v-model.lowercase="state.query"
+      autofocus
+      placeholder="Search or add column"
+      class="mr-2 flex-1"
+      @keyup.enter="addColumn"
+      @keyup.esc="$emit('close')"
+    />
+    <ui-button variant="accent" @click="addColumn">Add</ui-button>
+  </div>
+  <ul
+    class="space-y-2 overflow-y-auto scroll py-1"
+    style="max-height: calc(100vh - 10rem)"
+  >
+    <li
+      v-for="(column, index) in columns"
+      :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" />
+      <button @click="state.columns.splice(index, 1)">
+        <v-remixicon name="riDeleteBin7Line" />
+      </button>
+    </li>
+  </ul>
+</template>
+<script setup>
+import { computed, onMounted, watch, reactive } from 'vue';
+import { debounce } from '@/utils/helper';
+
+const props = defineProps({
+  workflow: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update', 'close']);
+
+const state = reactive({
+  query: '',
+  columns: [],
+});
+const columns = computed(() =>
+  state.columns.filter(({ name }) => name.includes(state.query))
+);
+
+function addColumn() {
+  const isColumnExists = state.columns.some(({ name }) => name === state.query);
+
+  if (isColumnExists) return;
+
+  state.columns.push({ name: state.query, default: '' });
+  state.query = '';
+}
+
+watch(
+  () => state.columns,
+  debounce((newValue) => {
+    emit('update', { dataColumns: newValue });
+  }, 250),
+  { deep: true }
+);
+
+onMounted(() => {
+  const tempColumns = props.workflow.dataColumns;
+
+  state.columns = Array.isArray(tempColumns)
+    ? tempColumns
+    : Object.values(tempColumns);
+});
+</script>

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -14,9 +14,12 @@
       <v-remixicon name="riSaveLine" class="mr-2 -ml-1" />
       Save
     </ui-button>
+    <ui-button icon title="Data columns" @click="$emit('showDataColumns')">
+      <v-remixicon name="riKey2Line" />
+    </ui-button>
     <ui-popover>
       <template #trigger>
-        <ui-button icon>
+        <ui-button icon title="More">
           <v-remixicon name="riMore2Line" />
         </ui-button>
       </template>
@@ -83,7 +86,7 @@ defineProps({
     default: () => ({}),
   },
 });
-defineEmits(['update', 'execute', 'save']);
+defineEmits(['update', 'execute', 'save', 'showDataColumns']);
 
 const taskList = Object.keys(tasks).reduce((arr, key) => {
   const task = tasks[key];

src/lib/v-remixicon.js

@@ -1,6 +1,7 @@
 import vRemixicon from 'v-remixicon';
 import {
   riHome5Line,
+  riKey2Line,
   riRestartLine,
   riTBoxLine,
   riAB,
@@ -48,6 +49,7 @@ import {
 
 export const icons = {
   riHome5Line,
+  riKey2Line,
   riRestartLine,
   riTBoxLine,
   riAB,

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

@@ -15,6 +15,7 @@
         @save="saveWorkflow"
         @execute="executeWorkflow"
         @update="updateWorkflow"
+        @showDataColumns="state.showDataColumnsModal = true"
       />
     </div>
     <workflow-builder
@@ -26,6 +27,14 @@
       @export="updateWorkflow({ drawflow: $event })"
     />
   </div>
+  <ui-modal v-model="state.showDataColumnsModal">
+    <template #header>Data columns</template>
+    <workflow-data-columns
+      v-bind="{ workflow }"
+      @update="updateWorkflow"
+      @close="state.showDataColumnsModal = false"
+    />
+  </ui-modal>
 </template>
 <script setup>
 import {
@@ -44,6 +53,7 @@ import { debounce } from '@/utils/helper';
 import WorkflowBuilder from '@/components/newtab/workflow/WorkflowBuilder.vue';
 import WorkflowEditBlock from '@/components/newtab/workflow/WorkflowEditBlock.vue';
 import WorkflowDetailsCard from '@/components/newtab/workflow/WorkflowDetailsCard.vue';
+import WorkflowDataColumns from '@/components/newtab/workflow/WorkflowDataColumns.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -52,8 +62,9 @@ const workflowId = route.params.id;
 
 const editor = shallowRef(null);
 const state = reactive({
-  isEditBlock: false,
   blockData: {},
+  isEditBlock: false,
+  showDataColumnsModal: false,
 });
 const workflow = computed(() => Workflow.find(workflowId) || {});
 
@@ -100,6 +111,8 @@ function executeWorkflow() {
 provide('workflow', {
   data: workflow,
   updateWorkflow,
+  /* eslint-disable-next-line */
+  showDataColumnsModal: (show = true) => (state.showDataColumnsModal = show),
 });
 
 onMounted(() => {