From 33dcac86377e91e399947fb60b3f2daad209f584 Mon Sep 17 00:00:00 2001
From: Matthew Miller <thisismattmiller@gmail.com>
Date: Tue, 19 Nov 2024 12:50:57 -0500
Subject: [PATCH 1/4] inital modal popup

---
 src/App.vue                                   |  13 +-
 .../edit/fields/helpers/ActionButton.vue      |  30 +++
 .../panels/edit/modals/HubStubCreateModal.vue | 251 ++++++++++++++++++
 src/stores/profile.js                         |  27 +-
 4 files changed, 312 insertions(+), 9 deletions(-)
 create mode 100644 src/components/panels/edit/modals/HubStubCreateModal.vue

diff --git a/src/App.vue b/src/App.vue
index 506984af..90c2c812 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,8 @@ import TextMacroModal from "@/components/panels/edit/modals/TextMacroModal.vue";
 import NonLatinBulkModal from "@/components/panels/edit/modals/NonLatinBulkModal.vue";
 import NonLatinAgentModal from "@/components/panels/edit/modals/NonLatinAgentModal.vue";
 import FieldColorsModal from "@/components/panels/edit/modals/FieldColorsModal.vue";
+import HubStubCreateModal from "@/components/panels/edit/modals/HubStubCreateModal.vue";
+
 
 
 
@@ -42,7 +44,8 @@ export default {
     TextMacroModal,
     NonLatinBulkModal,
     NonLatinAgentModal,
-    FieldColorsModal
+    FieldColorsModal,
+    HubStubCreateModal
 
   },
   data() {
@@ -57,7 +60,7 @@ export default {
     ...mapStores(useConfigStore, useProfileStore, usePreferenceStore),
     // // gives read access to this.count and this.double
     ...mapState(useProfileStore, ['profilesLoaded', 'showValidateModal','profilesLoaded', 'showPostModal']),
-    ...mapWritableState(useProfileStore, ['showShelfListingModal']),
+    ...mapWritableState(useProfileStore, ['showShelfListingModal','showHubStubCreateModal']),
 
     ...mapState(usePreferenceStore, ['showPrefModal','catCode']),
     ...mapWritableState(usePreferenceStore, ['showLoginModal','showScriptshifterConfigModal','showDiacriticConfigModal','showTextMacroModal','showFieldColorsModal']),
@@ -160,10 +163,12 @@ export default {
   <template v-if="showFieldColorsModal==true">
     <FieldColorsModal v-model="showFieldColorsModal"  />
   </template>
-
+  <template v-if="showHubStubCreateModal==true">
+    <HubStubCreateModal v-model="showHubStubCreateModal"  />
+  </template>
+  
   
   
-
 </template>
 
 
diff --git a/src/components/panels/edit/fields/helpers/ActionButton.vue b/src/components/panels/edit/fields/helpers/ActionButton.vue
index e49a46a2..66d46e5d 100644
--- a/src/components/panels/edit/fields/helpers/ActionButton.vue
+++ b/src/components/panels/edit/fields/helpers/ActionButton.vue
@@ -71,6 +71,7 @@
 
         </template>
 
+        
         <template v-if="type=='lookupComplex'">
             <!-- template v-if="(structure.propertyURI == 'http://id.loc.gov/ontologies/bibframe/subject' || structure.parent.includes(':Agents:') || structure.parentId.includes(':Form') || structure.propertyURI == 'http://www.loc.gov/mads/rdf/v1#Topic') && showUpDownButtons()[0]" -->
             <template v-if="showUpDownButtons()[0]">
@@ -89,6 +90,13 @@
             </template>
         </template>
 
+        <template v-if="showBuildHubStub()">
+              <button style="width:100%" class="" :id="`action-button-command-${fieldGuid}-d`" @click="buildHubStub()">
+                Create Hub
+              </button>
+        </template>
+
+
         <button style="width:100%" :id="`action-button-command-${fieldGuid}-0`" class="" @click="showDebug()">
           <span class="button-shortcut-label">0</span>
           Debug
@@ -99,6 +107,7 @@
             View Documentation<span class="material-icons action-button-icon">open_in_new</span>
           </button>
         </template>
+        
 
         <template v-if="catInitals.toLowerCase().indexOf('matt') > -1">
           <button style="width:100%" class="" :id="`action-button-command-${fieldGuid}-2`" @click="breakRecord()">
@@ -228,6 +237,27 @@
 
     methods: {
 
+
+      showBuildHubStub(){
+
+
+        let pt = this.profileStore.returnStructureByComponentGuid(this.guid)
+        if (pt && pt.propertyURI && pt.propertyURI == "http://id.loc.gov/ontologies/bibframe/relation"){
+          return true
+        }
+        
+
+        return false
+      },
+
+
+      buildHubStub(){
+        console.log(this.guid)
+        let info = this.profileStore.returnLccInfo(this.guid)
+        this.profileStore.activeHubStubData = info
+        this.profileStore.showHubStubCreateModal = true
+      },
+
       shortCutPressed: function(){
 
 
diff --git a/src/components/panels/edit/modals/HubStubCreateModal.vue b/src/components/panels/edit/modals/HubStubCreateModal.vue
new file mode 100644
index 00000000..df9bde64
--- /dev/null
+++ b/src/components/panels/edit/modals/HubStubCreateModal.vue
@@ -0,0 +1,251 @@
+<script>
+  import { usePreferenceStore } from '@/stores/preference'
+  import { useConfigStore } from '@/stores/config'
+  import { useProfileStore } from '@/stores/profile'  
+
+  import { mapStores, mapState, mapWritableState } from 'pinia'
+  import { VueFinalModal } from 'vue-final-modal'
+  import VueDragResize from 'vue3-drag-resize'
+  
+
+  export default {
+    components: {
+      VueFinalModal,
+      VueDragResize,     
+    },
+
+    data() {
+      return {
+        width: 0,
+        height: 0,
+        top: 200,
+        left: 0,
+
+        initalHeight: 400,
+        initalLeft: 400,
+
+
+
+      }
+    },
+    computed: {
+      // other computed properties
+      // ...
+      // gives access to this.counterStore and this.userStore
+      ...mapStores(usePreferenceStore),
+      ...mapStores(useConfigStore),      
+      ...mapStores(useProfileStore),      
+
+      ...mapWritableState(useProfileStore, ['activeProfile','showHubStubCreateModal','activeHubStubData']),
+
+      
+      
+
+    },
+
+    watch: {
+      // showDebugModal(newVal, oldVal) {
+      //   console.log(newVal,oldVal)
+      //   // if (newVal === true){
+      //   //   this.loadPrefGroup()
+      //   // }
+      // }
+    },
+
+    methods: {
+        
+        dragResize: function(newRect){
+
+          this.width = newRect.width
+          this.height = newRect.height
+          this.top = newRect.top
+          this.left = newRect.left
+
+          this.$refs.nonLatinBulkContent.style.height = newRect.height + 'px'
+
+        },
+
+        xxxxx(){
+
+          // this.profileStore.setBulkLang(nl.ptObj['@guid'],nl.node['@guid'],lang)
+
+        },
+
+      
+
+           
+
+        
+        onSelectElement (event) {
+          const tagName = event.target.tagName
+
+          if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT' || tagName === 'SPAN'|| tagName === 'TD') {
+            event.stopPropagation()
+          }
+        },
+       
+
+
+    
+
+    },
+
+
+    created(){
+
+       // this.$nextTick(()=>{
+
+      // })
+
+    },
+
+    async mounted() {
+
+
+
+      // window.setTimeout(()=>{
+        
+        
+      //   this.nonLatinAgents = this.profileStore.returnAllNonLatinAgentOptions()
+        
+
+      //   for (let key in this.nonLatinAgents){
+        
+      //     if (this.nonLatinScriptAgents[key]){
+      //       this.localMap[key] = this.nonLatinScriptAgents[key]
+      //     }else{
+      //       this.localMap[key] = utilsProfile.pickBestNonLatinScriptOption(this.defaultScript, this.nonLatinAgents[key].scripts)   
+      //     }
+
+      //   }
+
+
+      // },100)
+
+
+
+    }
+  }
+
+
+
+</script>
+
+<template>
+
+
+    <VueFinalModal
+      display-directive="show"
+      :hide-overlay="false"
+      :overlay-transition="'vfm-fade'"
+
+      
+    >
+        <VueDragResize
+          :is-active="true"
+          :w="850"
+          :h="initalHeight"
+          :x="initalLeft"
+          :y="50"
+          class="debug-modal"
+          @resizing="dragResize"
+          @dragging="dragResize"
+          :sticks="['br']"
+          :stickSize="22"
+        >
+          <div id="non-latin-bulk-content" ref="nonLatinBulkContent" @mousedown="onSelectElement($event)" @touchstart="onSelectElement($event)">
+            
+            <div class="menu-buttons">
+              <button class="close-button" @pointerup="showHubStubCreateModal=false">X</button>
+            </div>
+            <h3>Create Quick Hub</h3>
+            <input type="title" placeholder="Title">
+
+            {{activeHubStubData}}
+          </div>
+
+
+        </VueDragResize>
+    </VueFinalModal>
+
+
+    
+
+</template>
+<style>
+
+  .content-container{
+
+    background-color: white;
+  }
+
+</style>
+
+<style scoped>
+
+
+  .checkbox-option{
+    width: 20px;
+    height: 20px;
+  }
+
+  input[type=checkbox]{
+    width: 25px;
+    height: 25px;
+  }
+  
+
+  .option{
+    display: flex;
+  }
+  .option-title{
+    flex:2;
+  }
+  .option-title-header{
+    font-weight: bold;
+  }
+  .option-title-desc{
+    font-size: 0.8em;
+    color:gray;
+  }
+  #non-latin-bulk-content{
+    padding: 1em;
+
+    overflow-y: scroll;
+
+  }
+  .menu-buttons{
+    margin-bottom: 2em;
+    position: relative;
+  }
+  .close-button{
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    background-color: white;
+    border-radius: 5px;
+    border: solid 1px black;
+    cursor: pointer;
+  }
+
+  .disable-voyager-container{
+    margin-top: 1em;
+    margin-bottom: 1em;
+    display: flex;
+    align-items: center;
+  }
+
+
+  .disable-voyager-container div{
+    flex: 1;
+  }
+  .disable-voyager-container-check{
+    flex: 0 !important;
+    padding-right: 1em;
+  }
+
+
+
+  
+
+</style>
diff --git a/src/stores/profile.js b/src/stores/profile.js
index 296b5022..ffd537f1 100644
--- a/src/stores/profile.js
+++ b/src/stores/profile.js
@@ -84,6 +84,10 @@ export const useProfileStore = defineStore('profile', {
     showPostModal: false,
     showRecoveryModal: false,
     showValidateModal: false,
+    showHubStubCreateModal: false,
+    activeHubStubData:{
+
+    },
     showShelfListingModal: false,
     activeShelfListData:{
       class:null,
@@ -2896,11 +2900,11 @@ export const useProfileStore = defineStore('profile', {
     * used in the interface rendering
     * @return {boolean}
     */
-    returnLccInfo: function(componentGuid, structure){
+    returnLccInfo: function(componentGuid){
 
 
       let pt = utilsProfile.returnPt(this.activeProfile,componentGuid)
-
+      console.log(pt)
       let classNumber = null
       let classGuid = null
 
@@ -2926,7 +2930,7 @@ export const useProfileStore = defineStore('profile', {
           if (work){ break }
         }
       }
-
+      console.log("work",work)
       if (work){
 
         for (let ptId in work.pt){
@@ -2993,7 +2997,20 @@ export const useProfileStore = defineStore('profile', {
                         {
                         let agent = contributorUserValue['http://id.loc.gov/ontologies/bibframe/agent'][0]
                         if (agent && agent['http://www.w3.org/2000/01/rdf-schema#label'] && agent['http://www.w3.org/2000/01/rdf-schema#label'].length > 0 && agent['http://www.w3.org/2000/01/rdf-schema#label'][0] && agent['http://www.w3.org/2000/01/rdf-schema#label'][0]['http://www.w3.org/2000/01/rdf-schema#label']){
-                            contributors.push({type:type,label:agent['http://www.w3.org/2000/01/rdf-schema#label'][0]['http://www.w3.org/2000/01/rdf-schema#label']})
+                          console.log("agentagentagentagent",agent)  
+                          let agentData = {type:type,label:agent['http://www.w3.org/2000/01/rdf-schema#label'][0]['http://www.w3.org/2000/01/rdf-schema#label']}
+                          if (agent['@id']){
+                            agentData['@id'] = agent['@id']
+                          }else{
+                            agentData['@id'] = null
+                          }
+                          if (agent['http://id.loc.gov/ontologies/bflc/marcKey']){
+                            agentData['http://id.loc.gov/ontologies/bflc/marcKey'] = agent['http://id.loc.gov/ontologies/bflc/marcKey']
+                          }else{
+                            agentData['http://id.loc.gov/ontologies/bflc/marcKey'] = null
+                          }
+
+                          contributors.push(agentData)
                         }
                     }
                 }
@@ -3098,7 +3115,7 @@ export const useProfileStore = defineStore('profile', {
       }else{
 
 
-        if (pt && pt.userValue && pt.propertyURI == 'http://id.loc.gov/ontologies/bibframe/classification' && Object.keys(pt.userValue).length == 1){
+        if (pt && (pt.userValue && pt.propertyURI == 'http://id.loc.gov/ontologies/bibframe/classification' || pt.userValue && pt.propertyURI == 'http://id.loc.gov/ontologies/bibframe/relation') && Object.keys(pt.userValue).length == 1){
 
           // it is a new record, so there is no info but the LCC classification is by default so populate the other stuff
           return {

From 5bc42653e79be817b11ebf16d3e28f766e7c096c Mon Sep 17 00:00:00 2001
From: Matthew Miller <thisismattmiller@gmail.com>
Date: Thu, 21 Nov 2024 10:11:26 -0500
Subject: [PATCH 2/4] modal work

---
 .../panels/edit/fields/LookupComplex.vue      |  1 -
 .../panels/edit/modals/ComplexLookupModal.vue |  1 +
 .../panels/edit/modals/HubStubCreateModal.vue | 78 +++++++++++++------
 src/stores/profile.js                         | 28 ++++++-
 4 files changed, 81 insertions(+), 27 deletions(-)

diff --git a/src/components/panels/edit/fields/LookupComplex.vue b/src/components/panels/edit/fields/LookupComplex.vue
index 32b0e3b1..5815bcce 100644
--- a/src/components/panels/edit/fields/LookupComplex.vue
+++ b/src/components/panels/edit/fields/LookupComplex.vue
@@ -178,7 +178,6 @@
 
 
   </template>
-
   <ComplexLookupModal ref="complexLookupModal" :searchValue="searchValue" :authorityLookup="authorityLookup" @emitComplexValue="setComplexValue" @hideComplexModal="searchValue='';displayModal=false;" :structure="structure" v-model="displayModal"/>
   <SubjectEditor ref="subjectEditorModal" :profileData="profileData" :searchValue="searchValue" :authorityLookup="authorityLookup" :isLiteral="isLiteral"  @subjectAdded="subjectAdded" @hideSubjectModal="hideSubjectModal()" :structure="structure" v-model="displaySubjectModal"/>
 
diff --git a/src/components/panels/edit/modals/ComplexLookupModal.vue b/src/components/panels/edit/modals/ComplexLookupModal.vue
index a1266dfa..3f130031 100644
--- a/src/components/panels/edit/modals/ComplexLookupModal.vue
+++ b/src/components/panels/edit/modals/ComplexLookupModal.vue
@@ -74,6 +74,7 @@
         let options = []
         // add in the the defaul search ALL of everything possible
         //options.push({label: 'All', urls:null, processor:null})
+        console.log("this.structure.valueConstraint",this.structure.valueConstraint)
         this.structure.valueConstraint.useValuesFrom.forEach((l)=>{
           if (this.lookupConfig[l]){
             this.lookupConfig[l].modes.forEach((mode)=>{
diff --git a/src/components/panels/edit/modals/HubStubCreateModal.vue b/src/components/panels/edit/modals/HubStubCreateModal.vue
index df9bde64..2fcc17e3 100644
--- a/src/components/panels/edit/modals/HubStubCreateModal.vue
+++ b/src/components/panels/edit/modals/HubStubCreateModal.vue
@@ -2,16 +2,21 @@
   import { usePreferenceStore } from '@/stores/preference'
   import { useConfigStore } from '@/stores/config'
   import { useProfileStore } from '@/stores/profile'  
+  import ComplexLookupModal from "@/components/panels/edit/modals/ComplexLookupModal.vue";
 
   import { mapStores, mapState, mapWritableState } from 'pinia'
   import { VueFinalModal } from 'vue-final-modal'
   import VueDragResize from 'vue3-drag-resize'
   
 
+  import utilsNetwork from '@/lib/utils_network';
+
+
   export default {
     components: {
       VueFinalModal,
       VueDragResize,     
+      ComplexLookupModal,
     },
 
     data() {
@@ -25,6 +30,15 @@
         initalLeft: 400,
 
 
+        hubTitle:"",
+        hubCreator:null,
+        hubLang: null,
+
+        langsLookup:[],
+
+        displayModal:false,
+
+
 
       }
     },
@@ -65,10 +79,11 @@
 
         },
 
-        xxxxx(){
-
-          // this.profileStore.setBulkLang(nl.ptObj['@guid'],nl.node['@guid'],lang)
+        setPContributor(value){
 
+          console.log(value)
+          this.displayModal=false
+          
         },
 
       
@@ -101,27 +116,18 @@
 
     async mounted() {
 
-
-
-      // window.setTimeout(()=>{
-        
-        
-      //   this.nonLatinAgents = this.profileStore.returnAllNonLatinAgentOptions()
-        
-
-      //   for (let key in this.nonLatinAgents){
-        
-      //     if (this.nonLatinScriptAgents[key]){
-      //       this.localMap[key] = this.nonLatinScriptAgents[key]
-      //     }else{
-      //       this.localMap[key] = utilsProfile.pickBestNonLatinScriptOption(this.defaultScript, this.nonLatinAgents[key].scripts)   
-      //     }
-
-      //   }
-
-
-      // },100)
-
+      // ask for the url to use from the active profile for the bf:language property then request it and load the results
+      let useLookupUrl = this.profileStore.returnProfileLookupUrl("bf:language") 
+      let langs = await utilsNetwork.loadSimpleLookup(useLookupUrl)
+      this.langsLookup=[]
+      for (let langUri in langs){
+        if (langUri != 'metadata'){
+          this.langsLookup.push({
+            uri:langUri,
+            label:langs[langUri][0]
+          })
+        }
+      }
 
 
     }
@@ -159,8 +165,19 @@
               <button class="close-button" @pointerup="showHubStubCreateModal=false">X</button>
             </div>
             <h3>Create Quick Hub</h3>
-            <input type="title" placeholder="Title">
+            <input type="text" v-model="hubTitle" class="title" placeholder="Title">
+            <template v-if="activeHubStubData && activeHubStubData.title && activeHubStubData.title.trim() != ''">
+              <button class="title-button" @click="hubTitle=activeHubStubData.title"><span class="material-icons">arrow_upward</span><span class="title-button-copy">Use "{{ activeHubStubData.title }}"</span></button>
+            </template>
+            
+            <button @click="displayModal=true">Add Primary Contributor</button>
+            <template v-if="displayModal">
+              <ComplexLookupModal ref="complexLookupModal" :searchValue="''" :authorityLookup="''" @emitComplexValue="setPContributor" @hideComplexModal="searchValue='';displayModal=false;" :structure="{valueConstraint:{useValuesFrom:['http://preprod.id.loc.gov/authorities/names']}}" v-model="displayModal"/>
+            </template>
+
 
+            
+            
             {{activeHubStubData}}
           </div>
 
@@ -184,6 +201,17 @@
 <style scoped>
 
 
+  .title{
+    font-size: 1.35em;
+    width:100%;
+  }
+  .title-button{
+    margin-left: 1em;
+  }
+  .title-button-copy{
+    vertical-align: super;
+  }
+
   .checkbox-option{
     width: 20px;
     height: 20px;
diff --git a/src/stores/profile.js b/src/stores/profile.js
index ffd537f1..86f8ec8a 100644
--- a/src/stores/profile.js
+++ b/src/stores/profile.js
@@ -4345,7 +4345,33 @@ export const useProfileStore = defineStore('profile', {
       }
 
       return this.mostCommonNonLatinScript
-    }
+    },
+
+    /**
+    * Return the URL to use for lookups for various types of lookups based on the active profile
+    * A way to get a URL to a lookup without having to hardcode it
+    * @param {string} property - the proerty short version name, like bf:language
+    * @return {String}
+    */
+    returnProfileLookupUrl(property){
+
+      for (let rt of this.activeProfile.rtOrder){
+        for (let pt of this.activeProfile.rt[rt].ptOrder){
+          let purl = utilsParse.namespaceUri(this.activeProfile.rt[rt].pt[pt].propertyURI)
+
+          if (purl == property){
+            console.log(this.activeProfile.rt[rt].pt[pt]) 
+            if (this.activeProfile.rt[rt].pt[pt].valueConstraint && this.activeProfile.rt[rt].pt[pt].valueConstraint.useValuesFrom && this.activeProfile.rt[rt].pt[pt].valueConstraint.useValuesFrom.length>0){
+              return this.activeProfile.rt[rt].pt[pt].valueConstraint.useValuesFrom[0]
+            }
+          }
+
+          
+        }
+      }
+      return false
+    },
+
 
 
 

From 475d9cda5042d4eaed159acedcfcfedbb922be90 Mon Sep 17 00:00:00 2001
From: Matthew Miller <thisismattmiller@gmail.com>
Date: Thu, 21 Nov 2024 16:39:12 -0500
Subject: [PATCH 3/4] modal work

---
 src/components/panels/edit/fields/Literal.vue |   6 +-
 .../panels/edit/modals/HubStubCreateModal.vue | 134 ++++++++++++++++--
 2 files changed, 122 insertions(+), 18 deletions(-)

diff --git a/src/components/panels/edit/fields/Literal.vue b/src/components/panels/edit/fields/Literal.vue
index 415a3c4e..92ecba78 100644
--- a/src/components/panels/edit/fields/Literal.vue
+++ b/src/components/panels/edit/fields/Literal.vue
@@ -582,7 +582,7 @@ export default {
           if (this.diacriticUse.length>0){
             for (let macro of this.diacriticUseValues){
               if (event.code == macro.code && event.ctrlKey == macro.ctrlKey && event.altKey == macro.altKey && event.shiftKey == macro.shiftKey){
-                console.log("run this macro", macro)
+                // console.log("run this macro", macro)
                 event.preventDefault()
 
                 this.runMacroExpressMacro(event)
@@ -783,7 +783,7 @@ export default {
         let data = this.profileStore.returnLccInfo(this.guid, this.structure)
         if (data.contributors && data.contributors.length>0){
           data.contributors[0].secondLetterLabel = data.contributors[0].label.substring(1)
-        }
+        }        
         return data
       }
       return false
@@ -824,7 +824,7 @@ export default {
     //     this.lccFeatureData = this.profileStore.returnLccInfo(this.guid, this.structure)
     //   }
     // }
-    dataChangedTimestamp(newVal, oldVal) {
+    dataChangedTimestamp(newVal, oldVal) {      
       this.lccFeatureDataCounter++
     }
 
diff --git a/src/components/panels/edit/modals/HubStubCreateModal.vue b/src/components/panels/edit/modals/HubStubCreateModal.vue
index 2fcc17e3..0adae052 100644
--- a/src/components/panels/edit/modals/HubStubCreateModal.vue
+++ b/src/components/panels/edit/modals/HubStubCreateModal.vue
@@ -31,15 +31,22 @@
 
 
         hubTitle:"",
-        hubCreator:null,
+        hubCreator:{
+          label: null,
+          marcKey: null,
+          uri: null
+        },
         hubLang: null,
 
         langsLookup:[],
+        selectedLang: 'na',
 
         displayModal:false,
 
 
 
+
+
       }
     },
     computed: {
@@ -79,10 +86,62 @@
 
         },
 
+
+        useWorkCreator(){
+          
+          if (this.activeHubStubData && this.activeHubStubData.contributors && this.activeHubStubData.contributors[0]){
+            let c = this.activeHubStubData.contributors[0]
+
+            this.hubCreator.label = c.label
+            if (c['http://id.loc.gov/ontologies/bflc/marcKey'] && c['http://id.loc.gov/ontologies/bflc/marcKey'][0]&& c['http://id.loc.gov/ontologies/bflc/marcKey'][0]['http://id.loc.gov/ontologies/bflc/marcKey']){
+              this.hubCreator.marcKey = c['http://id.loc.gov/ontologies/bflc/marcKey'][0]['http://id.loc.gov/ontologies/bflc/marcKey']
+            }
+            this.hubCreator.uri = c['@id']
+
+          }
+
+        },
+
         setPContributor(value){
 
           console.log(value)
           this.displayModal=false
+
+          this.hubCreator.label = null
+          this.hubCreator.marcKey = null
+          this.hubCreator.uri = null
+          
+          
+
+          if (value.title){
+            if (Array.isArray(value.title)){
+              this.hubCreator.label = value.title.filter((v)=> {return (!v['@language'])})[0]
+              if (typeof this.hubCreator.label == 'object' && this.hubCreator.label['@value']){
+                this.hubCreator.label = this.hubCreator.label['@value']
+              }
+            }else{
+              this.hubCreator.label = value.title
+            }
+          }
+          
+          if (value.marcKey){
+            if (Array.isArray(value.marcKey)){
+              this.hubCreator.marcKey = value.marcKey.filter((v)=> {return (!v['@language'])})[0]
+              if (typeof this.hubCreator.marcKey == 'object' && this.hubCreator.marcKey['@value']){
+                this.hubCreator.marcKey = this.hubCreator.marcKey['@value']
+              }
+
+            }else{
+              this.hubCreator.marcKey = value.marcKey
+            }
+          }
+            
+          
+          this.hubCreator.uri = value.uri
+
+
+          console.log(this.hubCreator)
+
           
         },
 
@@ -127,7 +186,15 @@
             label:langs[langUri][0]
           })
         }
-      }
+      } 
+
+      
+      this.$nextTick(()=>{
+
+        this.$refs['hub-title'].focus()
+        this.$refs['hub-title'].focus()
+      })
+      
 
 
     }
@@ -164,21 +231,42 @@
             <div class="menu-buttons">
               <button class="close-button" @pointerup="showHubStubCreateModal=false">X</button>
             </div>
-            <h3>Create Quick Hub</h3>
-            <input type="text" v-model="hubTitle" class="title" placeholder="Title">
-            <template v-if="activeHubStubData && activeHubStubData.title && activeHubStubData.title.trim() != ''">
-              <button class="title-button" @click="hubTitle=activeHubStubData.title"><span class="material-icons">arrow_upward</span><span class="title-button-copy">Use "{{ activeHubStubData.title }}"</span></button>
-            </template>
-            
-            <button @click="displayModal=true">Add Primary Contributor</button>
-            <template v-if="displayModal">
-              <ComplexLookupModal ref="complexLookupModal" :searchValue="''" :authorityLookup="''" @emitComplexValue="setPContributor" @hideComplexModal="searchValue='';displayModal=false;" :structure="{valueConstraint:{useValuesFrom:['http://preprod.id.loc.gov/authorities/names']}}" v-model="displayModal"/>
-            </template>
+            <h3 style="margin-bottom: 1em;">Create Quick Hub</h3>
+            <div style="display: flex; margin-bottom: 1em;">
+              <div style="flex-grow: 1;">
+                <input type="text" ref="hub-title" v-model="hubTitle" class="title" placeholder="Hub Title">
+              </div>
+              <div style="flex-shrink: 1;">
+               <button class="title-button" @click="hubTitle=activeHubStubData.title"><span class="material-icons" style="font-size: 20px;">arrow_back</span><span class="title-button-copy">Paste Work Title</span></button>
+  
+              </div>
+              <template v-if="activeHubStubData && activeHubStubData.title && activeHubStubData.title.trim() != ''">
+              </template>
+            </div>
 
+            <div style="margin-bottom: 1em;">
+              <span class="creator-label" v-if="!hubCreator.label">[No Hub Creator]</span>
+              <span class="creator-label" v-if="hubCreator.label">{{hubCreator.label  }}</span>
+              <button @click="displayModal=true" style="line-height: 1.75em;" v-if="!hubCreator.label">Select Creator</button>
+              <button @click="hubCreator.label=null;hubCreator.uri=null;hubCreator.marcKey=null;" style="line-height: 1.75em;" v-if="hubCreator.label">Remove</button>
 
-            
-            
-            {{activeHubStubData}}
+              <button v-if="!hubCreator.label" class="title-button" @click="useWorkCreator()" style="vertical-align: bottom"><span class="material-icons" style="font-size: 20px;">arrow_back</span><span class="title-button-copy">Paste Work Creator</span></button>
+
+              <template v-if="displayModal">
+                <ComplexLookupModal ref="complexLookupModal" :searchValue="''" :authorityLookup="''" @emitComplexValue="setPContributor" @hideComplexModal="searchValue='';displayModal=false;" :structure="{valueConstraint:{useValuesFrom:['http://preprod.id.loc.gov/authorities/names']}}" v-model="displayModal"/>
+              </template>
+              
+
+            </div>
+            <select v-model="selectedLang">
+              <option value="na">No Hub Language Selected</option>
+              <option v-for="l in langsLookup" :value="l.uri.split('/')[5]">{{ l.label }}</option>
+            </select>
+
+            <hr>
+            <div>
+              Fill out the above information to create a Hub Stub. You would create a Hub for resources that you would not normally create a MARC Authority record for. Once you click create you will be provided a link to further edit the Hub if you wish.
+            </div>
           </div>
 
 
@@ -201,6 +289,22 @@
 <style scoped>
 
 
+  hr{
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+select{
+  font-size: 1.35em;
+}
+
+
+  .creator-label{
+    background-color: whitesmoke;
+    font-family: monospace;
+    padding: 0.2em;
+    margin-right: 0.2em;
+  }
+
   .title{
     font-size: 1.35em;
     width:100%;

From f8054d9d010f119500a813e0356d8f490907c5ef Mon Sep 17 00:00:00 2001
From: Matthew Miller <thisismattmiller@gmail.com>
Date: Tue, 26 Nov 2024 10:18:48 -0500
Subject: [PATCH 4/4] more work, added md5 hash lib, xml creation, posting
 attempt

---
 package-lock.json                             |   7 +
 package.json                                  |   1 +
 .../panels/edit/modals/HubStubCreateModal.vue |  42 ++++-
 src/lib/utils_export.js                       | 145 +++++++++++++++++-
 src/lib/utils_profile.js                      |  27 ++++
 src/stores/profile.js                         |  32 ++++
 6 files changed, 245 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 807cdf08..a93d3f59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@jobinsjp/vue3-datatable": "^1.0.15",
         "edtf": "^4.6.0",
         "floating-vue": "^2.0.0-beta.20",
+        "hash-wasm": "^4.12.0",
         "html-escaper": "^3.0.3",
         "javascript-time-ago": "^2.5.10",
         "object-scan": "^18.5.1",
@@ -3509,6 +3510,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hash-wasm": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/hash-wasm/-/hash-wasm-4.12.0.tgz",
+      "integrity": "sha512-+/2B2rYLb48I/evdOIhP+K/DD2ca2fgBjp6O+GBEnCDk2e4rpeXIK8GvIyRPjTezgmWn9gmKwkQjjx6BtqDHVQ==",
+      "license": "MIT"
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
diff --git a/package.json b/package.json
index cd8e103f..610d7a6a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@jobinsjp/vue3-datatable": "^1.0.15",
     "edtf": "^4.6.0",
     "floating-vue": "^2.0.0-beta.20",
+    "hash-wasm": "^4.12.0",
     "html-escaper": "^3.0.3",
     "javascript-time-ago": "^2.5.10",
     "object-scan": "^18.5.1",
diff --git a/src/components/panels/edit/modals/HubStubCreateModal.vue b/src/components/panels/edit/modals/HubStubCreateModal.vue
index 0adae052..a192b9be 100644
--- a/src/components/panels/edit/modals/HubStubCreateModal.vue
+++ b/src/components/panels/edit/modals/HubStubCreateModal.vue
@@ -97,6 +97,7 @@
               this.hubCreator.marcKey = c['http://id.loc.gov/ontologies/bflc/marcKey'][0]['http://id.loc.gov/ontologies/bflc/marcKey']
             }
             this.hubCreator.uri = c['@id']
+            this.hubCreator.typeFull = c['@type']
 
           }
 
@@ -104,13 +105,13 @@
 
         setPContributor(value){
 
-          console.log(value)
+
           this.displayModal=false
 
           this.hubCreator.label = null
           this.hubCreator.marcKey = null
           this.hubCreator.uri = null
-          
+          this.hubCreator.typeFull = null
           
 
           if (value.title){
@@ -135,14 +136,24 @@
               this.hubCreator.marcKey = value.marcKey
             }
           }
-            
+          if (value.typeFull){
+            if (Array.isArray(value.typeFull)){
+              this.hubCreator.typeFull = value.typeFull.filter((v)=> {return (!v['@language'])})[0]
+              if (typeof this.hubCreator.typeFull == 'object' && this.hubCreator.typeFull['@value']){
+                this.hubCreator.typeFull = this.hubCreator.typeFull['@value']
+              }
+
+            }else{
+              this.hubCreator.typeFull = value.typeFull
+            }
+          }            
           
           this.hubCreator.uri = value.uri
 
 
-          console.log(this.hubCreator)
 
           
+          
         },
 
       
@@ -157,6 +168,14 @@
             event.stopPropagation()
           }
         },
+
+        buildHub(){
+
+          this.profileStore.buildPostHubStub(this.hubCreator,this.hubTitle,this.hubLang)
+
+
+
+        },
        
 
 
@@ -237,7 +256,7 @@
                 <input type="text" ref="hub-title" v-model="hubTitle" class="title" placeholder="Hub Title">
               </div>
               <div style="flex-shrink: 1;">
-               <button class="title-button" @click="hubTitle=activeHubStubData.title"><span class="material-icons" style="font-size: 20px;">arrow_back</span><span class="title-button-copy">Paste Work Title</span></button>
+               <button v-if="activeHubStubData && activeHubStubData.title" class="title-button" @click="hubTitle=activeHubStubData.title"><span class="material-icons" style="font-size: 20px;">arrow_back</span><span class="title-button-copy">Use Work Title</span></button>
   
               </div>
               <template v-if="activeHubStubData && activeHubStubData.title && activeHubStubData.title.trim() != ''">
@@ -250,7 +269,7 @@
               <button @click="displayModal=true" style="line-height: 1.75em;" v-if="!hubCreator.label">Select Creator</button>
               <button @click="hubCreator.label=null;hubCreator.uri=null;hubCreator.marcKey=null;" style="line-height: 1.75em;" v-if="hubCreator.label">Remove</button>
 
-              <button v-if="!hubCreator.label" class="title-button" @click="useWorkCreator()" style="vertical-align: bottom"><span class="material-icons" style="font-size: 20px;">arrow_back</span><span class="title-button-copy">Paste Work Creator</span></button>
+              <button v-if="!hubCreator.label && activeHubStubData && activeHubStubData.contributors && activeHubStubData.contributors[0]" class="title-button" @click="useWorkCreator()" style="vertical-align: bottom"><span class="material-icons" style="font-size: 20px;">arrow_back</span><span class="title-button-copy">Use Work Creator</span></button>
 
               <template v-if="displayModal">
                 <ComplexLookupModal ref="complexLookupModal" :searchValue="''" :authorityLookup="''" @emitComplexValue="setPContributor" @hideComplexModal="searchValue='';displayModal=false;" :structure="{valueConstraint:{useValuesFrom:['http://preprod.id.loc.gov/authorities/names']}}" v-model="displayModal"/>
@@ -258,15 +277,22 @@
               
 
             </div>
-            <select v-model="selectedLang">
+            <select v-model="hubLang">
               <option value="na">No Hub Language Selected</option>
-              <option v-for="l in langsLookup" :value="l.uri.split('/')[5]">{{ l.label }}</option>
+              <option v-for="l in langsLookup" :value="l.uri">{{ l.label }}</option>
             </select>
 
             <hr>
             <div>
               Fill out the above information to create a Hub Stub. You would create a Hub for resources that you would not normally create a MARC Authority record for. Once you click create you will be provided a link to further edit the Hub if you wish.
             </div>
+
+            <div style="display: flex; padding: 1.5em;">
+              <div style="flex:1; text-align: center;"><button style="line-height: 1.75em;font-weight: bold;font-size: 1.05em;" @click="buildHub">Create Hub</button></div>
+              <div style="flex:1; text-align: center"><button style="line-height: 1.75em;font-weight: bold;font-size: 1.05em;">Cancel</button></div>
+
+            </div>
+            
           </div>
 
 
diff --git a/src/lib/utils_export.js b/src/lib/utils_export.js
index 9c39443c..2aeda2cf 100644
--- a/src/lib/utils_export.js
+++ b/src/lib/utils_export.js
@@ -2,6 +2,7 @@ import {useConfigStore} from "../stores/config";
 import {useProfileStore} from "../stores/profile";
 import {usePreferenceStore} from "../stores/preference";
 
+
 // import short from 'short-uuid'
 import utilsRDF from './utils_rdf';
 import utilsMisc from './utils_misc';
@@ -10,6 +11,9 @@ import utilsProfile from './utils_profile';
 
 import { parse as parseEDTF } from 'edtf'
 
+import { md5 } from "hash-wasm";
+
+
 const escapeHTML = str => str.replace(/[&<>'"]/g,
   tag => ({
       '&': '&amp;',
@@ -1540,7 +1544,7 @@ const utilsExport = {
 
 		let strXmlBasic = (new XMLSerializer()).serializeToString(rdfBasic)
 		let strXml = (new XMLSerializer()).serializeToString(rdf)
-
+		console.log(strXml)
     /*
         kefo note
         In FF, only strXmlBasic has any real content.  The other two -
@@ -1732,6 +1736,145 @@ const utilsExport = {
         
         return xml
     },
+
+
+	/**
+	 * Builds the Hub Stub XML to be sent off to post
+	 *
+	* @param {object} hubCreatorObj - obj with creator label, uri,marcKey
+	* @param {string} title - title string
+	* @param {string} langUri - uri to language
+	 * @return {string}
+	 */
+	createHubStubXML: async function(hubCreatorObj,title,langUri){
+
+		
+		console.log(hubCreatorObj,title,langUri)
+
+
+		// we are creating the xml in two formats, create the root node for both
+		let rdf = document.createElementNS(this.namespace.rdf, "RDF");
+		let rdfBasic = document.createElementNS(this.namespace.rdf, "RDF");
+
+		// just add all the namespaces into the root element
+		for (let ns of Object.keys(this.namespace)){
+			rdf.setAttributeNS("http://www.w3.org/2000/xmlns/", `xmlns:${ns}`, this.namespace[ns])
+			rdfBasic.setAttributeNS("http://www.w3.org/2000/xmlns/", `xmlns:${ns}`, this.namespace[ns])
+		}
+
+		if (!hubCreatorObj) return false
+		if (!hubCreatorObj.label || !hubCreatorObj.marcKey ||!hubCreatorObj.uri) return false
+		if (!title) return false
+
+		console.log("hubCreatorObj",hubCreatorObj)
+
+		let aap = utilsProfile.returnAap(hubCreatorObj.label,title)
+		let aapHash = await md5(aap)
+		aapHash = `${aapHash.slice(0, 8)}-${aapHash.slice(8, 12)}-${aapHash.slice(12, 16)}-${aapHash.slice(16, 20)}-${aapHash.slice(20, 32)}`
+		let hubUri = `http://id.loc.gov/resources/hubs/${aapHash}`
+
+
+		// da hub
+		let elHub = document.createElementNS(this.namespace.bf ,'bf:Hub')
+		
+		// uri
+		elHub.setAttributeNS(this.namespace.rdf, 'rdf:about', hubUri)
+		let elTitleProperty = document.createElementNS(this.namespace.bf ,'bf:title')
+		let elTitleClass = document.createElementNS(this.namespace.bf ,'bf:Title')
+		let elMainTitle = document.createElementNS(this.namespace.bf ,'bf:mainTitle')
+		elMainTitle.innerHTML = title
+
+		// attach
+		elTitleClass.appendChild(elMainTitle)
+		elTitleProperty.appendChild(elTitleClass)
+		elHub.appendChild(elTitleProperty)
+
+
+
+		// the creator
+		let elContributionProperty = document.createElementNS(this.namespace.bf ,'bf:contribution')
+		let elContributionClass = document.createElementNS(this.namespace.bf ,'bf:Contribution')
+
+		let rdftype = this.createElByBestNS('rdf:type')
+		rdftype.setAttributeNS(this.namespace.rdf, 'rdf:resource', 'http://id.loc.gov/ontologies/bibframe/PrimaryContribution')
+
+		elContributionClass.appendChild(rdftype)
+		elContributionProperty.appendChild(elContributionClass)
+
+		let elAgentProperty = document.createElementNS(this.namespace.bf ,'bf:agent')
+		let elAgentClass = document.createElementNS(this.namespace.bf ,'bf:Agent')
+		elAgentProperty.appendChild(elAgentClass)
+
+		// let elAgentType = document.createElementNS(this.namespace.bf ,'bf:agent')
+		let AgentRdftype = this.createElByBestNS('rdf:type')
+		AgentRdftype.setAttributeNS(this.namespace.rdf, 'rdf:resource', hubCreatorObj.typeFull)
+
+		elAgentClass.appendChild(AgentRdftype)
+		let elAgentLabel = document.createElementNS(this.namespace.rdfs ,'rdfs:label')
+		elAgentLabel.innerHTML = hubCreatorObj.label
+		elAgentClass.appendChild(elAgentLabel)
+
+		let elAgentMarcKey = document.createElementNS(this.namespace.bflc ,'bflc:marcKey')
+		elAgentMarcKey.innerHTML = hubCreatorObj.marcKey
+		elAgentClass.appendChild(elAgentMarcKey)
+
+		elContributionClass.appendChild(elAgentProperty)
+
+		elHub.appendChild(elContributionProperty)
+		
+		
+		rdf.appendChild(elHub)
+
+
+
+
+
+		// <bf:Hub >
+		// 	<bflc:aap >Filosofia e scienza nell'età moderna</bflc:aap>
+		// 	<bflc:aap-normalized >filosofiaescienzanell'etàmoderna</bflc:aap-normalized>
+		// 	<rdf:type rdf:resource="http://id.loc.gov/ontologies/bibframe/Series" />
+		// 	<bf:title >
+		// 	<bf:Title >
+		// 	<bf:mainTitle >Filosofia e scienza nell'età moderna</bf:mainTitle>
+		// 	<bf:partNumber >1</bf:partNumber>
+		// 	<bf:partName >Studi</bf:partName>
+		// 	</bf:Title>
+		// 	</bf:title>
+		// 	<bflc:marcKey >440 0$aFilosofia e scienza nell'età moderna.$n1,$pStudi ;$v68</bflc:marcKey>
+		// 	</bf:Hub> 
+
+
+{/* <bf:contribution>
+<bf:Contribution>
+<rdf:type rdf:resource="http://id.loc.gov/ontologies/bibframe/PrimaryContribution"/>
+<bf:agent>
+<bf:Agent rdf:about="http://id.loc.gov/rwo/agents/n79021164">
+<rdf:type rdf:resource="http://id.loc.gov/ontologies/bibframe/Person"/>
+<rdfs:label>Twain, Mark, 1835-1910</rdfs:label>
+<bflc:marcKey>1001 $aTwain, Mark,$d1835-1910</bflc:marcKey>
+</bf:Agent>
+</bf:agent>
+<bf:role>
+<bf:Role rdf:about="http://id.loc.gov/vocabulary/relators/ctb">
+<rdfs:label>contributor</rdfs:label>
+<bf:code>ctb</bf:code>
+</bf:Role>
+</bf:role>
+</bf:Contribution>
+</bf:contribution> */}
+
+
+
+		
+		console.log(aap)
+		console.log(aapHash)
+		console.log(hubUri)
+		let xml = (new XMLSerializer()).serializeToString(rdf)
+
+		console.log(xml)
+		return xml
+
+	}
 }
 
 
diff --git a/src/lib/utils_profile.js b/src/lib/utils_profile.js
index 0765c164..c03b962e 100644
--- a/src/lib/utils_profile.js
+++ b/src/lib/utils_profile.js
@@ -785,6 +785,33 @@ const utilsProfile = {
   },
 
 
+  /**
+  * Small string normalization combining the title an contributor to build a AAP
+  *
+  * @param {string} contributor - contriubtor name to use
+  * @param {string} title - title to use
+  * @return {string} - the AAP
+  */
+  returnAap: function(contributor,title){
+    if (!contributor || !title){
+        return false
+    }
+
+    let aap = `${contributor}${title}`
+    // remove trailing spaces
+    aap = aap.trim()
+    // remove semicolin if it ends in one
+    if (aap.endsWith(';')){
+        aap=aap.slice(0, -1)
+    }
+    aap = aap.toLowerCase()
+    //remove all spaces
+    aap = aap.replace(/\s/g, '')
+    // remove commas periods hyphens
+    aap = aap.replace(/[.,-]/g, '')
+    return aap
+},
+
 
 
 
diff --git a/src/stores/profile.js b/src/stores/profile.js
index 86f8ec8a..d2d9caf3 100644
--- a/src/stores/profile.js
+++ b/src/stores/profile.js
@@ -3004,6 +3004,13 @@ export const useProfileStore = defineStore('profile', {
                           }else{
                             agentData['@id'] = null
                           }
+                          if (agent['@type']){
+                            agentData['@type'] = agent['@type']
+                          }else{
+                            agentData['@type'] = null
+                          }
+
+
                           if (agent['http://id.loc.gov/ontologies/bflc/marcKey']){
                             agentData['http://id.loc.gov/ontologies/bflc/marcKey'] = agent['http://id.loc.gov/ontologies/bflc/marcKey']
                           }else{
@@ -4372,7 +4379,32 @@ export const useProfileStore = defineStore('profile', {
       return false
     },
 
+    /**
+    * Builds and posts a Hub Stub
+    * 
+    * @param {object} hubCreatorObj - obj with creator label, uri,marcKey
+    * @param {string} title - title string
+    * @param {string} langUri - uri to language
+
+    * @return {String}
+    */
+    async buildPostHubStub(hubCreatorObj,title,langUri){
+
+      console.log("hubCreatorObj",hubCreatorObj)
+      let xml = utilsExport.createHubStubXML(hubCreatorObj,title,langUri)
+
+      console.log(xml)
+      let eid = 'e' + decimalTranslator.new()
+      eid = eid.substring(0,8)
+
+      // pass a fake activeprofile with id == Hub to trigger hub protocols 
+      let pubResuts = await utilsNetwork.publish(xml, eid, {id: 'Hub'})
+      console.log(pubResuts.status)
+      
+
+    },
 
+    
 
 
   },