xml preview, marc preview, urls config

Author: thisismattmiller

package-lock.json

@@ -27,6 +27,7 @@
     "vue3-colorpicker": "^2.1.3",
     "vue3-drag-resize": "^2.0.5",
     "vue3-rich-accordion": "^0.0.7",
+    "vue3-xml-viewer": "^0.0.14",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,203 @@
+<script>
+  import { useProfileStore } from '@/stores/profile'
+  import { usePreferenceStore } from '@/stores/preference'
+
+  import { mapStores, mapState, mapWritableState } from 'pinia'
+
+  export default {
+    components: {
+
+    },
+
+    data() {
+      return {
+        previewData : {default:null,versions:[]},
+        timeout: null,
+        firstLoad: true,
+        selected: null
+      }
+    },
+    computed: {
+      // other computed properties
+      // ...
+      // gives access to this.counterStore and this.userStore
+      ...mapStores(useProfileStore,usePreferenceStore),
+      // // gives read access to this.count and this.double
+      ...mapState(useProfileStore, ['activeProfile']),
+      ...mapState(usePreferenceStore, ['styleDefault']),
+
+      ...mapWritableState(useProfileStore, ['activeComponent']),
+
+
+    },
+    watch: {    
+
+      
+    },
+
+    methods: {
+
+      async refreshMarc() {
+
+        this.previewData = await this.profileStore.marcPreview()
+       
+
+      }
+      
+
+
+
+
+    },
+
+    created() {
+
+      this.profileStore.$subscribe(async (mutation, state)=>{
+
+        if (mutation && mutation.events && mutation.events.target && mutation.events.target['@guid'] ){
+          
+          window.clearTimeout(this.timeout)
+          this.timeout = window.setTimeout(()=>{
+
+            this.refreshMarc()
+
+          },500)
+
+
+          
+        }
+
+
+      }, { detached: false })
+
+      // build the XML on first load
+      this.$nextTick(()=>{
+        window.setTimeout(()=>{
+
+          this.refreshMarc()
+
+         },1000)
+      })
+    },
+
+    mounted() {
+     
+
+      
+    }
+  }
+
+
+
+</script>
+
+<template>
+
+  <div class="marc-preview-content">
+
+    <ul>
+      <li v-for="ver in previewData.versions">
+        <button @click="selected = ver.version">{{ ver.version }} <span v-if="ver.error">(err)</span></button>
+      </li>
+    </ul>
+
+
+    <template v-if="!selected">
+      <template v-for="ver in previewData.versions">
+        <div v-if="ver.default">
+          <div class="version-number">{{ ver.version  }}</div>
+          <pre>
+            <code>
+{{ ver.marcRecord }}
+            </code>
+          </pre>
+          <hr>
+          <pre>
+            <code>
+{{ ver.results.stdout.trim() }}
+            </code>
+          </pre>
+        </div>
+      </template>
+    
+    </template>
+    <template v-else>
+      <template v-for="ver in previewData.versions">
+        <div v-if="selected == ver.version">
+          <div class="version-number">{{ ver.version  }}</div>
+          <template v-if="ver.error">
+            
+            <pre>
+              <code>
+{{ ver.results }}
+              </code>
+            </pre>            
+          </template>
+          <template v-else>            
+            <pre>
+              <code>
+{{ ver.marcRecord }}
+              </code>
+            </pre>
+            <hr>
+            <pre>
+              <code>
+{{ ver.results.stdout.trim() }}
+              </code>
+            </pre>
+          </template>
+        </div>
+      </template>
+
+
+
+    </template>
+
+  </div>
+</template>
+
+<style scoped>
+
+ul{
+  padding: 0;
+}
+li{
+  display: inline-block;
+}
+
+.marc-preview-content{
+  padding: 0.25em;
+}
+.version-number{
+  font-size: 1.25em;
+  font-weight: bold;
+}
+
+
+.sidebar-header-text{  
+  font-size: v-bind("preferenceStore.returnValue('--n-edit-main-splitpane-opac-font-size', true) + 0.25  + 'em'");
+  font-family: v-bind("preferenceStore.returnValue('--c-edit-main-splitpane-opac-font-family')");
+  color: v-bind("preferenceStore.returnValue('--c-edit-main-splitpane-opac-font-color')") !important;
+
+}
+
+
+.sidebar-spacer{
+  padding-top: 1em;
+  margin-top: 1em;
+  padding-bottom: 1em;
+  border-top: solid 1px v-bind("preferenceStore.returnValue('--c-edit-main-splitpane-opac-font-color')");
+
+}
+
+
+.item-icon{
+  fill:v-bind("preferenceStore.returnValue('--c-general-icon-item-color')");
+  stroke-width:0.5;
+  stroke:rgb(0,0,0)
+}
+
+
+
+
+</style>