feat: add loop data preview

AutomaApp · Nov 11, 2021 · 729270e · 729270e
1 parent d53302e
commit 729270e
Show file tree

Hide file tree

Showing 6 changed files with 343 additions and 10 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -2,4 +2,4 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "arrowParens": "always"
-}
+}
diff --git a/package.json b/package.json
@@ -21,6 +21,14 @@
     "*.{js,ts,vue}": "eslint --fix"
   },
   "dependencies": {
+    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/lang-javascript": "^0.19.2",
+    "@codemirror/lang-json": "^0.19.1",
+    "@codemirror/state": "^0.19.5",
+    "@codemirror/text": "^0.19.5",
+    "@codemirror/theme-one-dark": "^0.19.1",
+    "@codemirror/view": "^0.19.15",
     "@medv/finder": "^2.1.0",
     "@vuex-orm/core": "^0.36.4",
     "@webcomponents/custom-elements": "^1.5.0",
@@ -38,6 +46,7 @@
     "vue": "3.2.19",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "^4.0.11",
+    "vue-virtual-scroller": "^2.0.0-alpha.1",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2",
     "webextension-polyfill": "^0.8.0"

diff --git a/src/components/newtab/workflow/WorkflowEditBlock.vue b/src/components/newtab/workflow/WorkflowEditBlock.vue
@@ -25,6 +25,7 @@ const editComponents = require.context(
   false,
   /^(?:.*\/)?Edit[^/]*\.vue$/
 );
+
 /* eslint-disable-next-line */
 const components = editComponents.keys().reduce((acc, key) => {
   const name = key.replace(/(.\/)|\.vue$/g, '');

diff --git a/src/components/newtab/workflow/edit/EditLoopData.vue b/src/components/newtab/workflow/edit/EditLoopData.vue
@@ -63,17 +63,23 @@
         >
           <v-remixicon name="riSettings3Line" />
         </ui-button>
-        <p class="ml-4 flex-1 text-overflow">{{ file.name }}</p>
-        <p>Max file size: 1MB</p>
+        <p class="flex-1 text-overflow mx-4">{{ file.name }}</p>
+        <template v-if="data.loopData.length > maxStrLength">
+          <p class="mr-2">File too large to edit</p>
+          <ui-button @click="updateData({ loopData: '[]' })"
+            >Clear data</ui-button
+          >
+        </template>
       </div>
       <div style="height: calc(100vh - 11rem)">
-        <!-- <prism-editor
-          v-model="data"
+        <prism-editor
           v-show="!state.showOptions"
-          class="py-4"
+          v-model="state.tempLoopData"
           :highlight="highlighter('json')"
-          line-numbers
-        /> -->
+          :readonly="data.loopData.length > maxStrLength"
+          class="py-4"
+          @input="updateData({ loopData: $event.target.value })"
+        />
         <div v-show="state.showOptions">
           <p class="font-semibold mb-2">CSV</p>
           <ui-checkbox v-model="options.header">
@@ -87,7 +93,9 @@
 <script setup>
 import { onMounted, shallowReactive } from 'vue';
 import { nanoid } from 'nanoid';
+import { PrismEditor } from 'vue-prism-editor';
 import Papa from 'papaparse';
+import { highlighter } from '@/lib/prism';
 import { openFilePicker } from '@/utils/helper';
 
 const props = defineProps({
@@ -102,13 +110,19 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:data']);
 
+const maxStrLength = 5e4;
 const maxFileSize = 1024 * 1024;
 const loopTypes = [
   { id: 'data-columns', name: 'Data columns' },
   { id: 'custom-data', name: 'Custom data' },
 ];
+const tempLoopData =
+  props.data.loopData.length > maxStrLength
+    ? props.data.loopData.slice(0, maxStrLength)
+    : props.data.loopData;
 
 const state = shallowReactive({
+  tempLoopData,
   showOptions: false,
   showDataModal: false,
   workflowLoopData: {},
@@ -117,6 +131,7 @@ const options = shallowReactive({
   header: true,
 });
 const file = shallowReactive({
+  size: 0,
   name: '',
   type: '',
 });
@@ -159,7 +174,13 @@ function importFile() {
         }
 
         if (Array.isArray(loopData)) {
-          updateData({ loopData: JSON.stringify(loopData) });
+          const loopDataStr = JSON.stringify(loopData);
+
+          state.tempLoopData =
+            loopDataStr.length > maxStrLength
+              ? loopDataStr.slice(0, maxStrLength)
+              : loopDataStr;
+          updateData({ loopData: loopDataStr });
         }
       };
 

diff --git a/src/components/newtab/workflow/edit/EditTrigger.vue b/src/components/newtab/workflow/edit/EditTrigger.vue
@@ -27,7 +27,7 @@
         min="10"
         max="120"
         @change="
-          updateIntervalInput($event, { key: 'interval', min: 10, max: 120 })
+          updateIntervalInput($event, { key: 'interval', min: 1, max: 120 })
         "
       />
       <ui-input