From 2da47e476d180452c3fd50beff43636e2a253157 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 21 Nov 2024 11:55:45 +0000
Subject: [PATCH] fix(nc-gui): add encoding option in csv export

---
 .../nc-gui/extensions/data-exporter/index.vue | 93 +++++++++++++------
 packages/nocodb/src/interface/Jobs.ts         |  1 +
 .../jobs/data-export/data-export.processor.ts |  3 +-
 .../jobs/jobs/export-import/export.service.ts |  5 +-
 4 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui/extensions/data-exporter/index.vue b/packages/nc-gui/extensions/data-exporter/index.vue
index c383b4a8dd..43607d6949 100644
--- a/packages/nc-gui/extensions/data-exporter/index.vue
+++ b/packages/nc-gui/extensions/data-exporter/index.vue
@@ -94,8 +94,10 @@ const exportPayload = ref<{
   tableId?: string
   viewId?: string
   delimiter?: string
+  encoding?: BufferEncoding
 }>({
   delimiter: ',',
+  encoding: 'utf8',
 })
 
 const tableList = computed(() => {
@@ -166,6 +168,7 @@ async function exportDataAsync() {
     const jobData = await $api.export.data(exportPayload.value.viewId, 'csv', {
       extension_id: extension.value.id,
       delimiter: exportPayload.value.delimiter,
+      encoding: exportPayload.value.encoding,
     })
     jobList.value.unshift(jobData)
 
@@ -279,6 +282,7 @@ eventBus.on(async (event, payload) => {
 onMounted(async () => {
   exportPayload.value = extension.value.kvStore.get('exportPayload') || {}
   exportPayload.value.delimiter = exportPayload.value.delimiter || ','
+  exportPayload.value.encoding = exportPayload.value.encoding || 'utf8'
 
   deletedExports.value = extension.value.kvStore.get('deletedExports') || []
 
@@ -411,33 +415,68 @@ onMounted(async () => {
           </div>
         </div>
 
-        <div v-if="fullscreen" class="flex items-center gap-2">
-          <div class="min-w-[65px]">Separator</div>
-          <a-form-item class="!my-0 flex-1 max-w-[237px]">
-            <NcSelect
-              v-model:value="exportPayload.delimiter"
-              placeholder="-select separator-"
-              :disabled="isExporting"
-              class="nc-data-exporter-separator nc-select-shadow !w-[120px]"
-              dropdown-class-name="w-[180px]"
-              @change="saveChanges"
-            >
-              <a-select-option v-for="delimiter of delimiters" :key="delimiter.value" :value="delimiter.value">
-                <div class="w-full flex items-center gap-2">
-                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                    <template #title>{{ delimiter.label }}</template>
-                    <span>{{ delimiter.label }}</span>
-                  </NcTooltip>
-                  <component
-                    :is="iconMap.check"
-                    v-if="exportPayload.delimiter === delimiter.value"
-                    id="nc-selected-item-icon"
-                    class="flex-none text-primary w-4 h-4"
-                  />
-                </div>
-              </a-select-option>
-            </NcSelect>
-          </a-form-item>
+        <div
+          v-if="fullscreen"
+          class="flex items-center gap-3 flex-wrap"
+          :class="{
+            'max-w-[474px]': fullscreen,
+          }"
+        >
+          <div class="flex items-center gap-2 flex-1">
+            <div class="min-w-[65px]">Separator</div>
+            <a-form-item class="!my-0 flex-1">
+              <NcSelect
+                v-model:value="exportPayload.delimiter"
+                placeholder="-select separator-"
+                :disabled="isExporting"
+                class="nc-data-exporter-separator nc-select-shadow"
+                dropdown-class-name="w-[180px]"
+                @change="saveChanges"
+              >
+                <a-select-option v-for="delimiter of delimiters" :key="delimiter.value" :value="delimiter.value">
+                  <div class="w-full flex items-center gap-2">
+                    <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                      <template #title>{{ delimiter.label }}</template>
+                      <span>{{ delimiter.label }}</span>
+                    </NcTooltip>
+                    <component
+                      :is="iconMap.check"
+                      v-if="exportPayload.delimiter === delimiter.value"
+                      id="nc-selected-item-icon"
+                      class="flex-none text-primary w-4 h-4"
+                    />
+                  </div>
+                </a-select-option>
+              </NcSelect>
+            </a-form-item>
+          </div>
+          <div class="flex items-center gap-2 flex-1">
+            <div class="min-w-[65px]">Encoding</div>
+            <a-form-item class="!my-0 flex-1">
+              <NcSelect
+                v-model:value="exportPayload.encoding"
+                placeholder="-select separator-"
+                class="nc-csv-import-separator nc-select-shadow"
+                dropdown-class-name="w-[190px]"
+                @change="saveChanges"
+              >
+                <a-select-option v-for="encoding of encodings" :key="encoding.value" :value="encoding.value">
+                  <div class="w-full flex items-center gap-2">
+                    <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                      <template #title>{{ encoding.label }}</template>
+                      <span>{{ encoding.label }}</span>
+                    </NcTooltip>
+                    <component
+                      :is="iconMap.check"
+                      v-if="exportPayload.encoding === encoding.value"
+                      id="nc-selected-item-icon"
+                      class="flex-none text-primary w-4 h-4"
+                    />
+                  </div>
+                </a-select-option>
+              </NcSelect>
+            </a-form-item>
+          </div>
         </div>
       </div>
       <div
diff --git a/packages/nocodb/src/interface/Jobs.ts b/packages/nocodb/src/interface/Jobs.ts
index f258ab4985..b2279427dd 100644
--- a/packages/nocodb/src/interface/Jobs.ts
+++ b/packages/nocodb/src/interface/Jobs.ts
@@ -152,6 +152,7 @@ export interface DataExportJobData extends JobData {
   options?: {
     delimiter?: string;
     extension_id?: string;
+    encoding?: BufferEncoding;
   };
   modelId: string;
   viewId: string;
diff --git a/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts b/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
index 18801ded6a..c0abf1c38f 100644
--- a/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/data-export/data-export.processor.ts
@@ -59,7 +59,7 @@ export class DataExportProcessor {
         read() {},
       });
 
-      dataStream.setEncoding('utf8');
+      dataStream.setEncoding(options.encoding || 'utf8');
 
       let error = null;
 
@@ -79,6 +79,7 @@ export class DataExportProcessor {
           viewId: view.id,
           ncSiteUrl: ncSiteUrl,
           delimiter: options?.delimiter,
+          encoding: options?.encoding || 'utf8',
         })
         .catch((e) => {
           this.logger.debug(e);
diff --git a/packages/nocodb/src/modules/jobs/jobs/export-import/export.service.ts b/packages/nocodb/src/modules/jobs/jobs/export-import/export.service.ts
index 06214a8059..dc59f6d9b3 100644
--- a/packages/nocodb/src/modules/jobs/jobs/export-import/export.service.ts
+++ b/packages/nocodb/src/modules/jobs/jobs/export-import/export.service.ts
@@ -461,6 +461,7 @@ export class ExportService {
       _fieldIds?: string[];
       ncSiteUrl?: string;
       delimiter?: string;
+      encoding?: BufferEncoding;
     },
   ) {
     const { dataStream, linkStream, handledMmList } = param;
@@ -537,7 +538,7 @@ export class ExportService {
 
     const hasLink = !dataExportMode && mmColumns.length > 0;
 
-    dataStream.setEncoding('utf8');
+    dataStream.setEncoding(param.encoding || 'utf8');
 
     const formatData = (data: any) => {
       for (const row of data) {
@@ -640,7 +641,7 @@ export class ExportService {
     }
 
     if (hasLink) {
-      linkStream.setEncoding('utf8');
+      linkStream.setEncoding(param.encoding || 'utf8');
 
       let streamedHeaders = false;