feat(nc-gui): add separator option in csv export extension

packages/nc-gui/extensions/data-exporter/index.vue

@@ -7,6 +7,25 @@ const jobStatusTooltip = {
   [JobStatus.FAILED]: 'Export failed',
 } as Record<string, string>
 
+const delimiters = [
+  {
+    label: 'Comma (,)',
+    value: ',',
+  },
+  {
+    label: 'Semicolon (;)',
+    value: ';',
+  },
+  {
+    label: 'Tab (\\t)',
+    value: '\\t',
+  },
+  {
+    label: 'Pipe (|)',
+    value: '|',
+  },
+]
+
 const { $api, $poller } = useNuxtApp()
 
 const { appInfo } = useGlobal()
@@ -60,7 +79,10 @@ const exportedFiles = computed(() => {
 const exportPayload = ref<{
   tableId?: string
   viewId?: string
-}>({})
+  delimiter?: string
+}>({
+  delimiter: ',',
+})
 
 const tableList = computed(() => {
   return tables.value.map((table) => {
@@ -123,7 +145,10 @@ async function exportDataAsync() {
 
     isExporting.value = true
 
-    const jobData = await $api.export.data(exportPayload.value.viewId, 'csv', { extension_id: extension.value.id })
+    const jobData = await $api.export.data(exportPayload.value.viewId, 'csv', {
+      extension_id: extension.value.id,
+      delimiter: exportPayload.value.delimiter,
+    })
     jobList.value.unshift(jobData)
 
     $poller.subscribe(
@@ -255,8 +280,9 @@ onMounted(async () => {
         'bg-nc-bg-gray-extralight': fullscreen,
       }"
     >
+      <div class="p-3 flex flex-col gap-2">
         <div
-        class="p-3 flex items-center justify-between gap-2.5 flex-wrap"
+          class="flex items-center justify-between gap-2.5 flex-wrap"
           :class="{
             'bg-white': fullscreen,
           }"
@@ -359,6 +385,37 @@ onMounted(async () => {
             </NcTooltip>
           </div>
         </div>
+
+        <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"
+              :filter-option="filterOption"
+              dropdown-class-name="w-[250px]"
+              show-search
+              size="large"
+            >
+              <a-select-option v-for="delimiter of delimiters" :key="delimiter.label" :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>
       <div
         class="data-exporter-body flex-1 flex flex-col"
         :class="{