Provide an export option for search results

dlx_rest/static/js/modals/export.js

@@ -0,0 +1,101 @@
+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">
+              <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="showModal = false">&times;</span>
+                </button>
+              </div>
+              <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>
+
+              <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="inlineRadio1" value="option1" @click="setFormat('csv')">
+                    <label class="form-check-label" for="inlineRadio1">CSV</label>
+                  </div>
+                  <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>
+                  <br/>
+                  Output Fields: <input type="text" @keyup="setOutputFields($event)">
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-primary" @click="submitExport">Submit</button>
+                <button type="button" class="btn btn-danger" @click="showModal = false">Close</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>`,
+    data: function() {
+        return {
+            showModal: false,
+            showSpinner: false,
+            selectedFormat: 'mrk',
+            selectedFields: null,
+            selectedExportUrl: null
+        }
+    },
+    methods: {
+        show: async function() {
+            this.showModal = true
+            this.setFormat('mrk')
+        },
+        setFormat(format) {
+          this.selectedFormat = format
+          this.selectedExportUrl = this.links.format[format.toUpperCase()]
+        },
+        setOutputFields(e) {
+            this.selectedFields = e.target.value
+            let url = new URL(this.selectedExportUrl)
+            let search = new URLSearchParams(url.search)
+            search.set("of", e.target.value)
+            url.search = search
+            this.selectedExportUrl = url
+        },
+        submitExport() {
+            fetch(this.selectedExportUrl).then( response => {
+                response.blob().then( blob => {
+                    this.download(blob, `export.${this.selectedFormat}`)
+                })
+            })
+        },
+        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)
+        }
+    }
+}

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}}")"
@@ -155,6 +156,7 @@ export let searchcomponent = {
             <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">
@@ -218,6 +220,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];
@@ -815,10 +818,15 @@ export let searchcomponent = {
             let toggleButton = document.getElementById("preview-toggle-" + recordId);
             toggleButton.className = "fas fa-file preview-toggle";
             toggleButton.title = "preview record";
+        },
+        showExportModal() {
+            //console.log(this.links.format)
+            this.$refs.exportmodal.show()
         }
     },
     components: {
         'sortcomponent': sortcomponent, 
-        'countcomponent': countcomponent
+        'countcomponent': countcomponent,
+        'exportmodal': exportmodal
     }
 }