Provide an export option for search results

dlx_rest/api/__init__.py

@@ -204,6 +204,11 @@ class RecordsList(Resource):
         'subtype',
         type=str,
         choices=['default', 'speech', 'vote', 'all', '']
+    )
+    args.add_argument(
+        'fields',
+        type=str,
+        help='Comma separated list of fields you want returned (e.g., for export)'
     )
      # This is so we can benchmark the two search formats
     args.add_argument(
@@ -287,10 +292,19 @@ def get(self, collection):
             project = dict.fromkeys(tags, True)
         elif fmt == 'brief_speech':
             tags = ['269', '596', '700', '710', '711', '791', '991', '992']
-
+            
             # make sure logical fields are available for sorting
             tags += (list(DlxConfig.bib_logical_fields.keys()) + list(DlxConfig.auth_logical_fields.keys()))
             project = dict.fromkeys(tags, True)
+        elif fmt in ['mrk', 'xml', 'csv']:
+            project = None
+            output_fields = args.get("fields")
+            if output_fields is not None:
+                tags = [f.strip().split('__')[0] for  f in output_fields.split(',')]
+                # make sure logical fields are available for sorting
+                tags += (list(DlxConfig.bib_logical_fields.keys()) + list(DlxConfig.auth_logical_fields.keys()))
+                project = dict.fromkeys(tags, True)
+
         elif fmt:
             project = None
         else:
@@ -434,6 +448,7 @@ def post(self, collection):
             else:
                 abort(500, 'POST request failed for unknown reasons')
 
+
 # Records list count
 @ns.route('/marc/<string:collection>/records/count')
 @ns.param('collection', '"bibs" or "auths"')

dlx_rest/static/js/modals/export.js

@@ -0,0 +1,169 @@
+import { Jmarc } from "../jmarc.mjs"
+
+export let exportmodal = {
+    props: {
+        links: {
+            type: Object
+        }
+    },
+    template: `<div v-if="showModal">
+    <transition name="modal">
+      <div class="modal-mask">
+        <div class="modal-wrapper">
+          <div class="modal-dialog modal-xl" role="document">
+            <div class="modal-content" style="width: 40%">
+              <div class="modal-header">
+                <h5 class="modal-title">Export Results</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true" @click="reloadPage()">&times;</span> <!-- this prevents the API page traversal from continuing after the user closes the modal -->
+                </button>
+              </div>
+              <div id="preview-text" class="modal-body">
+                <div class="container" id="format-select">
+                  Select format:
+                  <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" @click="setFormat('mrk')" checked>
+                    <label class="form-check-label" for="inlineRadio2">MRK</label>
+                  </div>
+                  <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" @click="setFormat('xml')">
+                    <label class="form-check-label" for="inlineRadio3">XML</label>
+                  </div>
+                  <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" @click="setFormat('csv')">
+                    <label class="form-check-label" for="inlineRadio1">CSV</label>
+                  </div>
+                  <br/>
+                  <span>Output Fields: </span>
+                  <input type="text" placeholder="comma separated list of fields (tags only)" @keyup="setOutputFields($event)">
+                </div>
+              </div>
+              <div class="modal-footer">
+                <div id="results-spinner" class="col d-flex justify-content-center">
+                  <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>
+                </div>
+                <button v-if="! showSpinner" type="button" class="btn btn-primary" @click="submitExport">Submit</button>
+                <button type="button" class="btn btn-danger" @click="reloadPage()">Cancel</button> <!-- this prevents the API page traversal from continuing after the user closes the modal -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>`,
+    data: function() {
+        return {
+            showModal: false,
+            showSpinner: false,
+            selectedFormat: 'mrk',
+            selectedFields: null,
+            selectedExportUrl: null,
+            currentPage: null
+        }
+    },
+    methods: {
+        show: async function() {
+            this.showModal = true
+            this.setFormat('mrk')
+        },
+        setFormat(format) {
+          this.selectedFormat = format
+          this.selectedExportUrl = this.links.format[format.toUpperCase()]
+          let url = new URL(this.selectedExportUrl)
+          let search = new URLSearchParams(url.search)
+          search.set("fields", this.selectedFields)
+          search.set("start", 1)
+          search.set("limit", 100)
+          //search.set("listtype", "export")
+          url.search = search
+          this.selectedExportUrl = url
+        },
+        setOutputFields(e) {
+            this.selectedFields = e.target.value
+            let url = new URL(this.selectedExportUrl)
+            let search = new URLSearchParams(url.search)
+            search.set("fields", e.target.value)
+            search.set("limit", 100)
+            search.set("listtype", "export")
+            url.search = search
+            this.selectedExportUrl = url
+        },
+        async submitExport() {
+            this.currentPage = null;
+            this.showSpinner = true;
+            const url = new URL(this.selectedExportUrl);
+            const params = new URLSearchParams(url.search);
+            const format = params.get("format");
+            const countUrl = this.selectedExportUrl.toString().replace('/records', '/records/count');
+            const total = await fetch(countUrl).then(response => response.json()).then(json => json['data']);
+            let currentUrl = this.selectedExportUrl;
+            let page = 0;
+            let mimetype = null;
+            let buffer = '';
+            let xml = format === 'xml' ?
+                // XMLDocument object will be used to combine xml from each page
+                (new DOMParser()).parseFromString("<collection></collection>", "text/xml") : 
+                null;
+
+            while (true) {
+                // 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();
+                mimetype = response.headers.get("Content-Type");
+
+                if (mimetype.match('^text/xml')) {
+                    const pageXml = (new DOMParser()).parseFromString(text, "text/xml")
+                    const recordNodes = pageXml.getElementsByTagName("record")
+
+                    if (recordNodes.length > 0) {
+                        for (const recordXml of [...recordNodes]) { // have to use the "..." operator on the node list to treat it as an array
+                            xml.getElementsByTagName("collection")[0].appendChild(recordXml);
+                        }
+                    } else {
+                        // end of results
+                        break
+                    }
+                } else if (text) {
+                    // mrk, csv are plain text
+                    buffer += text
+                } else {
+                    // end of results
+                    break
+                }
+
+                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)}`;
+            }
+
+            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!"
+        },
+        download(blob, filename) {
+            const url = window.URL.createObjectURL(blob)
+            const a = document.createElement("a")
+            a.style.display = "none"
+            a.href = url
+            a.download = filename
+            document.body.appendChild(a)
+            a.click()
+            document.body.removeChild(a)
+            window.URL.revokeObjectURL(url)
+        },
+        reloadPage() {
+            // this doesn't work when embedded in the template for some reason
+            location.reload()
+        }
+    }
+}

dlx_rest/static/js/search/search.js

@@ -3,6 +3,7 @@ import { countcomponent } from "./count.js";
 import basket from "../api/basket.js";
 import user from "../api/user.js";
 import { Jmarc } from "../jmarc.mjs";
+import { exportmodal } from "../modals/export.js";
 
 export let searchcomponent = {
     // onclick="addRemoveBasket("add","{{record['id']}}","{{coll}}","{{prefix}}")"
@@ -162,6 +163,8 @@ export let searchcomponent = {
             <a class="mx-1 result-link" href="#" @click="selectAll">All</a>
             <a class="mx-1 result-link" href="#" @click="selectNone">None</a>
             <a class="mx-1 result-link" href="#" @click="sendToBasket">Send Selected to Basket (limit: 100)</a>
+            <a v-if="collectionTitle=='speeches'" class="ml-auto result-link" :href="uibase + '/records/speeches/review'">Speech Review</a>
+            <a class="ml-auto result-link"><i class="fas fa-share-square" title="Export Results" @click="showExportModal"></i></a>
         </div>
         <div id="results-list" v-for="result in this.results" :key="result._id">
             <div class="row mt-1 bg-light border-bottom">
@@ -228,6 +231,7 @@ export let searchcomponent = {
                 <li v-else class="page-item disabled"><a class="page-link result-link" href="">Next</a></li>
             </ul>
         </nav>
+        <exportmodal ref="exportmodal" :links="this.links"></exportmodal>
     </div>`,
     data: function () {
         let myParams = this.search_url.split("?")[1];
@@ -831,15 +835,23 @@ export let searchcomponent = {
             toggleButton.className = "fas fa-file preview-toggle";
             toggleButton.title = "preview record";
         },
+
+        showExportModal() {
+            //console.log(this.links.format)
+            this.$refs.exportmodal.show()
+        },
+
         toggleEngine(e) {
             // toggle the search type
             console.log("Toggling search engine")
             this.params.engine = e.target.checked ? "atlas" : "community"
             this.rebuildUrl("engine", this.engine) 
+
         }
     },
     components: {
         'sortcomponent': sortcomponent, 
-        'countcomponent': countcomponent
+        'countcomponent': countcomponent,
+        'exportmodal': exportmodal
     }
 }