Browse Source

feat: add csv options in export data block

Ahmad Kholid 3 years ago
parent
commit
63aab7e760

+ 3 - 0
src/background/workflowEngine/blocksHandler/handlerExportData.js

@@ -27,6 +27,9 @@ async function exportData({ data, outputs }, { refData }) {
     });
     });
     const blobUrl = dataExporter(payload, {
     const blobUrl = dataExporter(payload, {
       ...data,
       ...data,
+      csvOptions: {
+        delimiter: data.csvDelimiter,
+      },
       returnUrl: hasDownloadAccess,
       returnUrl: hasDownloadAccess,
     });
     });
 
 

+ 28 - 6
src/components/newtab/workflow/edit/EditExportData.vue

@@ -63,14 +63,36 @@
         {{ type.name }}
         {{ type.name }}
       </option>
       </option>
     </ui-select>
     </ui-select>
-    <ui-checkbox
+    <ui-expand
       v-if="data.type === 'csv'"
       v-if="data.type === 'csv'"
-      :model-value="data.addBOMHeader"
-      class="mt-2"
-      @change="updateData({ addBOMHeader: $event })"
+      hide-header-icon
+      header-class="flex items-center focus:ring-0 w-full"
     >
     >
-      {{ t('workflow.blocks.export-data.bomHeader') }}
-    </ui-checkbox>
+      <template #header="{ show }">
+        <v-remixicon
+          :rotate="show ? 270 : 180"
+          name="riArrowLeftSLine"
+          class="transition-transform text-gray-600 dark:text-gray-300"
+        />
+        {{ t('common.options') }}
+      </template>
+      <div class="pl-6 mt-1">
+        <ui-checkbox
+          v-if="data.type === 'csv'"
+          :model-value="data.addBOMHeader"
+          @change="updateData({ addBOMHeader: $event })"
+        >
+          {{ t('workflow.blocks.export-data.bomHeader') }}
+        </ui-checkbox>
+        <ui-input
+          :model-value="data.csvDelimiter"
+          label="Delimiter"
+          class="mt-1"
+          placeholder="(auto-detect)"
+          @change="updateData({ csvDelimiter: $event })"
+        />
+      </div>
+    </ui-expand>
   </div>
   </div>
 </template>
 </template>
 <script setup>
 <script setup>

+ 2 - 2
src/utils/dataExporter.js

@@ -38,7 +38,7 @@ export function generateJSON(keys, data) {
 
 
 export default function (
 export default function (
   data,
   data,
-  { name, type, addBOMHeader, returnUrl },
+  { name, type, addBOMHeader, csvOptions, returnUrl },
   converted
   converted
 ) {
 ) {
   let result = data;
   let result = data;
@@ -48,7 +48,7 @@ export default function (
 
 
     result =
     result =
       type === 'csv'
       type === 'csv'
-        ? Papa.unparse(jsonData)
+        ? Papa.unparse(jsonData, csvOptions || {})
         : JSON.stringify(jsonData, null, 2);
         : JSON.stringify(jsonData, null, 2);
   } else if (type === 'plain-text') {
   } else if (type === 'plain-text') {
     const extractObj = (obj) => {
     const extractObj = (obj) => {

+ 1 - 0
src/utils/shared.js

@@ -367,6 +367,7 @@ export const tasks = {
       type: 'json',
       type: 'json',
       description: '',
       description: '',
       variableName: '',
       variableName: '',
+      csvDelimiter: '',
       addBOMHeader: true,
       addBOMHeader: true,
       onConflict: 'uniquify',
       onConflict: 'uniquify',
       dataToExport: 'data-columns',
       dataToExport: 'data-columns',