Fix CSV export header repetition (#1532)

* fix csv export pages * show export status as percent --------- Co-authored-by: jbukhari <[email protected]>
dag-hammarskjold-library · Sep 23, 2024 · 1fc3f26 · 1fc3f26
1 parent 65c025e
commit 1fc3f26
Showing 1 changed file with 27 additions and 7 deletions.
diff --git a/dlx_rest/static/js/modals/export.js b/dlx_rest/static/js/modals/export.js
@@ -43,8 +43,8 @@ export let exportmodal = {
                   <div class="spinner-border" role="status" v-show="showSpinner">
                     <span class="sr-only">Loading...</span>
                   </div>
-                  <div style="display: inline-block; padding: 5" v-show="currentPage">
-                    <span>&nbsp;{{ currentPage }}</span>
+                  <div style="display: inline-block; padding: 5" v-show="currentStatus">
+                    <span>&nbsp;{{ currentStatus }}</span>
                   </div>
                 </div>
                 <button v-if="! showSpinner" type="button" class="btn btn-primary" @click="submitExport">Submit</button>
@@ -63,7 +63,7 @@ export let exportmodal = {
             selectedFormat: 'mrk',
             selectedFields: '',
             selectedExportUrl: null,
-            currentPage: null
+            currentStatus: null
         }
     },
     methods: {
@@ -94,7 +94,7 @@ export let exportmodal = {
             this.selectedExportUrl = url
         },
         async submitExport() {
-            this.currentPage = null;
+            this.currentStatus = null;
             this.showSpinner = true;
             const url = new URL(this.selectedExportUrl);
             const params = new URLSearchParams(url.search);
@@ -114,7 +114,20 @@ export let exportmodal = {
                 // cycle through pages synchronously until no more records are found
                 const response = await fetch(currentUrl);
                 const blob = await response.blob();
-                const text = await blob.text();
+                let text = await blob.text();
+
+                if (text && format === 'csv') {
+                  if (page > 0) {
+                    // remove the header
+                    let lines = text.split("\n");
+                    lines.shift();
+                    text = lines.join("\n");
+                  }
+
+                  // add newline to end of page
+                  text += "\n"
+                }
+
                 mimetype = response.headers.get("Content-Type");
 
                 if (mimetype.match('^text/xml')) {
@@ -137,18 +150,25 @@ export let exportmodal = {
                     break
                 }
 
+                // next page
                 let newUrl = new URL(currentUrl);
                 let params = new URLSearchParams(newUrl.search);
                 params.set("start", Number(params.get("start")) + Number(params.get("limit")));
                 newUrl.search = params;
                 currentUrl = newUrl;
-                this.currentPage = `page: ${++page} / ${Math.ceil(total / 100)}`;
+
+                // status
+                page++;
+                const results = page * 100;
+                let percent = (results / total) * 100;
+                percent = percent > 100 ? 100 : percent.toFixed(2);
+                this.currentStatus = `${percent}% of ${total} records`;
             }
 
             const blob = new File([format === 'xml' ? (new XMLSerializer()).serializeToString(xml) : buffer], {"type": mimetype});
             this.download(blob, `export.${this.selectedFormat}`);
             this.showSpinner = false;
-            this.currentPage = "Done!"
+            this.currentStatus = "Done!"
         },
         download(blob, filename) {
             const url = window.URL.createObjectURL(blob)