Merge pull request #123 from lcnetdev/bfp-265-additional-instances

[BFP 265] additional instances

src/components/general/PreferenceModal.vue

@@ -219,7 +219,6 @@
             <h3>Preferences -   <select @change="loadPrefGroup($event)"><option v-for="group in possilbleGroups" :selected="showPrefModalGroup==group">{{group}}</option></select></h3>
             <button class="close-button" @pointerup="preferenceStore.togglePrefModal()">X</button>
 
-
             <div v-for="option in renderProperties" :key="showPrefModalGroup+ '_' +option.id">
 
               <div class="option">

src/components/panels/edit/EditPanel.vue

@@ -17,9 +17,13 @@
     :key="profileName"
     :class="{'edit-panel-work': (profileName.split(':').slice(-1)[0] == 'Work'), 'edit-panel-instance': (profileName.split(':').slice(-1)[0] == 'Instance'), 'edit-panel-instance-secondary': (profileName.split(':').slice(-1)[0].indexOf('_') > -1), 'edit-panel-scroll-x-parent': preferenceStore.returnValue('--b-edit-main-splitpane-edit-scroll-x')}">
 
-
           <template v-if="instanceMode == true && profileName.indexOf(':Instance') > -1">
-
+          <template v-if="profileName.includes(':Instance')"> 
+                <div> 
+                    <span class="instanceIdentifer">{{ instanceLabel(profileName) }}: {{ activeProfile.rt[profileName].URI.split("/").at(-1) }}</span>
+                    <button class="instanceDeleteButton" v-if="showDeleteInstanceButton(profileName)" @click="showDeleteInstanceModal(profileName)">Delete Instance</button>
+                </div>
+          </template>
             <template v-if="((preferenceStore.returnValue('--b-edit-main-splitpane-edit-switch-between-resource-button') === false) || (preferenceStore.returnValue('--b-edit-main-splitpane-edit-switch-between-resource-button') === true && profileName == activeResourceName ))">
 
               <div v-for="(profileCompoent,idx) in activeProfile.rt[profileName].ptOrder"
@@ -52,7 +56,12 @@
 
           </template>
       <template v-if="instanceMode == false">
-
+        <template v-if="profileName.includes(':Instance')"> 
+            <div class="instanceInfoWrapper"> 
+                <span class="instanceIdentifer">{{ instanceLabel(profileName) }}: {{ activeProfile.rt[profileName].URI.split("/").at(-1) }}</span>
+                <button class="instanceDeleteButton" v-if="showDeleteInstanceButton(profileName)" @click="showDeleteInstanceModal(profileName)">Delete Instance</button>
+            </div>
+        </template>
         <template v-for="(profileCompoent,idx) in activeProfile.rt[profileName].ptOrder" :key="profileCompoent">
           <template v-if="layoutActive == false || (layoutActive == true && layoutActiveFilter.properties.indexOf(activeProfile.rt[profileName].pt[profileCompoent].propertyURI) > -1) ">
 
@@ -110,8 +119,6 @@
                         :parentId="activeProfile.rt[profileName].pt[profileCompoent].parentId"
                         :readOnly="isReadOnly(activeProfile.rt[profileName].pt[profileCompoent])" />
 
-
-
                           <template v-if="preferenceStore.returnValue('--b-edit-main-splitpane-edit-inline-mode')">
                             <InlineModeAddField :guid="activeProfile.rt[profileName].pt[profileCompoent]['@guid']" />
                           </template>
@@ -120,12 +127,9 @@
                     </template>
                   </template>
                 </template>
-
               </template>
             </template>
-
         </template>
-
       </template>
 
 
@@ -186,7 +190,7 @@
 
       // gives read access to this.count and this.double
       // ...mapState(usePreferenceStore, ['profilesLoaded']),
-      ...mapState(useProfileStore, ['profilesLoaded','activeProfile','activeComponent']),
+      ...mapState(useProfileStore, ['profilesLoaded','activeProfile','activeComponent', 'dataChanged']),
       ...mapWritableState(usePreferenceStore, ['debugModalData','showDebugModal']),
 
       activeResourceName(){
@@ -264,15 +268,37 @@
             if (bibId && eId != bibId){
                 document.title = `Marva | ${bibId}`;
             }
-              
-        }
-
-
+        },
 
+        //only able to delete the instances they create
+        showDeleteInstanceButton: function(profileName){
+            return this.activeProfile.rt[profileName].deletable
+        },
+        
+        showDeleteInstanceModal: function(profileName){
+            if (window.confirm("Do you really want to delete this instance?")){
+                // remove from rtOrder
+                const targetIndex = this.activeProfile.rtOrder.indexOf(profileName)                
+                this.activeProfile.rtOrder.splice(targetIndex, 1)
+                
+                // remove the profile
+                delete this.activeProfile.rt[profileName]
+                this.profileStore.dataChanged()
+            }
+        },
+        
+        instanceLabel: function(profileName){
+            try{
+                if (this.activeProfile.rt[profileName]["@type"].includes("Secondary")){
+                    return "Secondary Instance"
+                }
+                return "Instance"
+            } catch(err){
+                return "Instance"
+            }
+        }
     },
 
-
-
     watch:{
 
       activeComponent(newVal){
@@ -393,6 +419,18 @@
   font-size: 0.85em;
 }
 
+div.instanceInfoWrapper {
+    padding: 5px;
+}
+
+.instanceIdentifer {
+    font-weight: bold;
+}
+
+.instanceDeleteButton {
+    float: right;
+    margin-right: 5px;
+}
 
 
 </style>

src/components/panels/edit/fields/helpers/ActionButton.vue

@@ -390,6 +390,10 @@
 
         // if it's part of a group with members that have defaults, and that group isn't the whole thing
         let parentId = this.structure.parentId
+        
+        if (parentId.includes("_")){
+            parentId = parentId.split("_")[0]
+        }
 
         if (!parentId.endsWith("Work") && !parentId.endsWith("Instance") && !parentId.endsWith("Hub") && !parentId.endsWith("Item")){
           for (let sibling of this.profileStore.rtLookup[parentId].propertyTemplates){

src/components/panels/edit/modals/ShelfListing.vue

@@ -286,7 +286,6 @@
                   <tbody>
 
                     <template v-for="r in results">
-
                       <template  v-if="r.selected == undefined">
                         <tr :class="[{nuba: r.notused == 'nuba'}]">
                           <td>{{ r.term }}</td>

src/components/panels/nav/Nav.vue

@@ -131,12 +131,16 @@
         ]
 
 
-        if (this.$route.path.startsWith('/edit/')){      
+        if (this.$route.path.startsWith('/edit/')){
           menuButtonSubMenu.push({ is: 'separator'})            
           menuButtonSubMenu.push(
+            {
+              text: 'Add Additional Instance',
+              click: () => { this.profileStore.createInstance(false) }
+            },
             {
               text: 'Add Secondary Instance',
-              click: () => { this.profileStore.createSecondaryInstance() }
+              click: () => { this.profileStore.createInstance(true) }
             }
           )
         }
@@ -443,6 +447,7 @@
               }
           })
       },
+      
     },
 
     created() {

src/stores/config.js

@@ -7,7 +7,8 @@ export const useConfigStore = defineStore('config', {
 
     versionMajor: 0,
     versionMinor: 16,
-    versionPatch: 10,
+    versionPatch: 11,
+
 
 
 

src/stores/preference.js

@@ -319,7 +319,7 @@ export const usePreferenceStore = defineStore('preference', {
           group: 'Edit Panel',
           range: null
         },
-        '--c-edit-main-splitpane-edit-background-color-instance-secondary' : {
+      '--c-edit-main-splitpane-edit-background-color-instance-secondary' : {
           value:'#f671f696',
           desc: 'The background color of the secondary instance on edit screen panel.',
           descShort: 'Secondary Instance Background Color',

src/stores/profile.js

@@ -3521,7 +3521,8 @@ export const useProfileStore = defineStore('profile', {
         for (let r of this.activeProfile.rtOrder){
           propertyPosition = this.activeProfile.rt[r].ptOrder.indexOf(pt.id)
 
-          if (propertyPosition != -1 && (r.includes(actionTarget) || actionTarget == null)){
+          if (propertyPosition != -1 && (r.includes(rt) || actionTarget == null)){
+
             profile = r
             break
           }
@@ -3615,20 +3616,12 @@ export const useProfileStore = defineStore('profile', {
     * @param {object} incomingUserValue - the incoming userValue to set
     * @return {string} the id ofthe newPropertyId 
     */
-    duplicateComponentGetId: async function(componentGuid, structure){
+    duplicateComponentGetId: async function(componentGuid, structure, profileName){
       let createEmpty = true
 
       // locate the correct pt to work on in the activeProfile
       let pt = utilsProfile.returnPt(this.activeProfile,componentGuid)
 
-      //Ensure that the component is going to the right place by checking the structure.parentID
-      let actionTarget = null
-      if (structure.parentId.includes("Instance")) {
-        actionTarget = "Instance"
-      } else if (structure.parentId.includes("Work")) {
-        actionTarget = "Work"
-      }
-
       if (pt !== false){
         let profile
         let propertyPosition
@@ -3647,12 +3640,9 @@ export const useProfileStore = defineStore('profile', {
               if (item.includes(key)){
                   lastPosition = idx
               }
-          }
+          }          
+          profile = profileName
 
-          if (propertyPosition != -1 && (r.includes(actionTarget) || actionTarget == null)){
-            profile = r
-            break
-          }
         }
 
 
@@ -3809,7 +3799,6 @@ export const useProfileStore = defineStore('profile', {
         this.dataChangedTimestamp = Date.now()
         // console.log("CHANGED 1!!!")
       },500)
-
     },
 
 
@@ -3828,11 +3817,12 @@ export const useProfileStore = defineStore('profile', {
 
 
     /**
-    * Build a new seconary instance
+    * Build a new instance
     *
+    * @param lccn {string} the lccn for the new instance. If there isn't one, this is a secondary instance
     * @return {void}
     */
-    createSecondaryInstance:  function(){
+    createInstance:  function(secondary=false){
 
 
       // find the RT for the instance of this profile orginally
@@ -3884,12 +3874,6 @@ export const useProfileStore = defineStore('profile', {
         // update the parentId
         this.activeProfile.rt[newRdId].pt[pt].parentId = this.activeProfile.rt[newRdId].pt[pt].parentId.replace(instanceName,newRdId)
         this.activeProfile.rt[newRdId].pt[pt].parent = this.activeProfile.rt[newRdId].pt[pt].parent.replace(instanceName,newRdId)
-
-
-
-
-
-
       }
 
 
@@ -3899,9 +3883,13 @@ export const useProfileStore = defineStore('profile', {
 
       this.activeProfile.rt[newRdId].URI = utilsProfile.suggestURI(this.activeProfile,'bf:Instance',workUri)
       this.activeProfile.rt[newRdId].instanceOf = workUri
-
-      this.activeProfile.rt[newRdId]['@type'] = 'http://id.loc.gov/ontologies/bflc/SecondaryInstance'
-
+
+      if (secondary){
+        this.activeProfile.rt[newRdId]['@type'] = 'http://id.loc.gov/ontologies/bflc/SecondaryInstance'
+      }
+
+      this.activeProfile.rt[newRdId].deletable = true
+
       this.dataChanged()
 
     },
@@ -4210,9 +4198,22 @@ export const useProfileStore = defineStore('profile', {
 
     //parse the activeProfile and insert the copied data where appropriate
     parseActiveInsert: async function(newComponent){
-        const matchGuid = newComponent["@guid"]
         this.changeGuid(newComponent)
         let profile = this.activeProfile
+
+        // handle pasting into a profileRT that doesn't exist in the new profile
+        // This is for when the source is an additional Instance, that doesn't exist in
+        // in the title
+        let targetRt
+        if (!profile.rtOrder.includes(newComponent.parentId)){
+            if (newComponent.parentId.includes("_")){
+                targetRt = newComponent.parentId.split("_").at(0)
+            } else {
+                targetRt = newComponent.parentId
+            }
+        } else {
+            targetRt = newComponent.parentId
+        }
 
         for (let rt in profile["rt"]){
             let frozenPts = JSON.parse(JSON.stringify(profile["rt"][rt]["pt"]))
@@ -4222,21 +4223,21 @@ export const useProfileStore = defineStore('profile', {
             for (let pt in frozenPts){
                 let current = profile["rt"][rt]["pt"][pt]
 
-                if (rt == newComponent.parentId){
+                if (rt == targetRt){
                     let targetURI = newComponent.propertyURI
                     let targetLabel = newComponent.propertyLabel
-                    
+
                     if (!current.deleted && current.propertyURI.trim() == targetURI.trim() && current.propertyLabel.trim() == targetLabel.trim()){
                         if (Object.keys(current.userValue).length == 1){
                             current.userValue = newComponent.userValue
                             break
                         } else {
                             let guid = current["@guid"]
-                            let structure = this.returnStructureByComponentGuid(matchGuid)
-                            let newPt = await this.duplicateComponentGetId(matchGuid, structure)
+                            let structure = this.returnStructureByComponentGuid(guid)
+                            let newPt = await this.duplicateComponentGetId(guid, structure, rt)
 
-                            profile["rt"][rt]["pt"][newPt].userModified = true
                             profile["rt"][rt]["pt"][newPt].userValue = newComponent.userValue
+                            profile["rt"][rt]["pt"][newPt].userModified = true
                             break
                         }
                     }