From acd36c6ad64d670524870863a0e8128857b3896b Mon Sep 17 00:00:00 2001
From: Stephan Heunis <s.heunis@fz-juelich.de>
Date: Wed, 19 Feb 2025 14:24:15 +0100
Subject: [PATCH] Update record in 'onUpdated' in order to show saved additions

---
 src/components/BlankNodeViewer.vue | 25 +++++++++++--------------
 src/components/NodeShapeViewer.vue | 24 ++++++++++--------------
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/components/BlankNodeViewer.vue b/src/components/BlankNodeViewer.vue
index 04ac17f..9bd47f7 100644
--- a/src/components/BlankNodeViewer.vue
+++ b/src/components/BlankNodeViewer.vue
@@ -36,9 +36,9 @@
 </template>
 
 <script setup>
-    import { ref, onMounted, computed, reactive, onBeforeMount, inject, toRaw} from 'vue'
+    import { reactive, onBeforeMount, inject, onUpdated} from 'vue'
     import { toCURIE, getSubjectTriples, makeReadable, getPrefLabel} from '../modules/utils';
-    import { RDF, DLTHINGS } from '@/modules/namespaces';
+    import { RDF } from '@/modules/namespaces';
     // Define component properties
     const props = defineProps({
         node: Object,
@@ -50,6 +50,14 @@
     const record = reactive({})
 
     onBeforeMount(() => {
+        updateRecord()
+    })
+
+    onUpdated(() => {
+        updateRecord()
+    })
+
+    function updateRecord() {
         record.relatedQuads = getSubjectTriples(graphData, props.node)
         record.prefLabel = getPrefLabel(props.node, graphData, allPrefixes)
         record.triples = {
@@ -60,14 +68,8 @@
         record.relatedQuads.forEach((rQ) => {
             addRecordProperty(rQ)
         })
-    })
-
-    onMounted(() => {
-    })
-
+    }
 
-    // const shapeAttributes = computed(() => {
-    // })
 
     function addRecordProperty(quad) {
         var termType = quad.object.termType
@@ -75,11 +77,6 @@
             record.triples[termType][quad.predicate.value] = []
         }
         record.triples[termType][quad.predicate.value].push(quad.object)
-        // if (termType === "BlankNode") {
-        //     record.triples[termType][quad.predicate.value].push(quad.object)
-        // } else {
-        //     record.triples[termType][quad.predicate.value].push(quad.object.value)
-        // }
     }
     
 
diff --git a/src/components/NodeShapeViewer.vue b/src/components/NodeShapeViewer.vue
index 9a978b8..76e71fc 100644
--- a/src/components/NodeShapeViewer.vue
+++ b/src/components/NodeShapeViewer.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script setup>
-    import { ref, onMounted, computed, reactive, onBeforeMount, inject} from 'vue'
+    import { reactive, onBeforeMount, inject, onUpdated} from 'vue'
     import { toCURIE, getSubjectTriples, makeReadable, getPrefLabel} from '../modules/utils';
     import { RDF } from '@/modules/namespaces';
     // Define component properties
@@ -61,6 +61,14 @@
     const record = reactive({})
 
     onBeforeMount(() => {
+        updateRecord()
+    })
+
+    onUpdated(() => {
+        updateRecord()
+    })
+
+    function updateRecord() {
         record.title = props.quad.subject.value
         record.quad = props.quad
         record.value = props.quad.subject.value
@@ -75,14 +83,7 @@
         record.relatedQuads.forEach((rQ) => {
             addRecordProperty(rQ)
         })
-    })
-
-    onMounted(() => {
-    })
-
-
-    // const shapeAttributes = computed(() => {
-    // })
+    }
 
     function addRecordProperty(quad) {
         var termType = quad.object.termType
@@ -90,10 +91,5 @@
             record.triples[termType][quad.predicate.value] = []
         }
         record.triples[termType][quad.predicate.value].push(quad.object)
-        // if (termType === "BlankNode") {
-        //     record.triples[termType][quad.predicate.value].push(quad.object)
-        // } else {
-        //     record.triples[termType][quad.predicate.value].push(quad.object.value)
-        // }
     }
 </script>
\ No newline at end of file