@igea/oac_frontend 1.0.60 → 1.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igea/oac_frontend",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "description": "Frontend service for the OAC project",
   "main": "src/index.js",
   "bin": {

package/src/public/js/app/vue-investigation.js

@@ -27,9 +27,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 enabled: el.dataset.editing == "true",
                 serializedForm: "",
                 validForm: false,
-                labels: {
-                
-                },
+                saving: false,
+                lastUpdateTs: 0,
+                lastSaveTs: 0,
+                isNew: true,
+                labels: {},
                 search: {
                     offset: 0,
                     limit: 10,
@@ -43,6 +45,7 @@ document.addEventListener('DOMContentLoaded', () => {
         },
         mounted() {
             this.initShaclForm();
+            setInterval(this.autoSave.bind(this), 30*1000);
         },
         computed:{
             outputStyle(){
@@ -59,6 +62,16 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         },
         methods: {
+            autoSave(){
+                // Form must be valid and change time after the last save time
+                if(this.lastUpdateTs > this.lastSaveTs && this.validForm){
+                    // A new "indagine" must have to be saved manually 
+                    // from the user the first time
+                    if(this.isNew && this.lastSaveTs==0)
+                        return;
+                    this.save(true);
+                }
+            },
             download(outFormat){
                 this.openPostInNewTab("/backend/ontology/convert/ttl/" + outFormat, {
                     file: this.serializedForm
@@ -94,6 +107,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         // check if form data validates according to the SHACL shapes
                         _this.validForm = event.detail?.valid;
                         _this.serializedForm = _this.form.serialize();
+                        _this.lastUpdateTs = (new Date()).getTime();
                     });
                     
                     _this.form.addEventListener("ready", () => {
@@ -321,18 +335,26 @@ document.addEventListener('DOMContentLoaded', () => {
                 callback()
             },
 
-            save() {
+            save(automatic) {
+                if(this.saving) return;
+                this.lastSaveTs = (new Date()).getTime();
+                automatic = automatic || false;
+                this.saving = true;
                 var request = axios.post("/backend/ontology/form/save", {
                     turtle: this.serializedForm,
                     uuid: this.uuid
                 });
                 request.then(response => {
                     var obj = response.data;
-                    if(obj.success)
-                        alert("Saved: OK")
-                    else
-                        alert("Error: " + obj.message)
+                    if(!automatic){
+                        if(obj.success)
+                            alert("Saved: OK");
+                        else
+                            alert("Error: " + obj.message);
+                    }
+                    this.saving = false;
                 }).catch(error => {
+                    this.saving = false;
                     console.log(error);
                 });
             },

package/src/public/js/app/vue-rdf.js

@@ -2,12 +2,34 @@ const { createApp, ref } = Vue;
 
 const appId = 'rdf-viewer-app';
 
-const classColors = {
-    'E55_Type': 'rgba(0,255,0,0.70)',
-    'E7_Activity': 'rgba(174, 93, 56, 0.5)',
-    'E42_Identifier': 'rgba(0,0,255,0.5)',
+//----------------------------------------------------------
+
+const classConfig = {
+    'E7_Activity': {
+        'color': 'rgba(174, 93, 56, 0.5)',
+        'label': 'Attività'
+    },
+    'E42_Identifier': {
+        'color': 'rgba(0,0,255,0.5)',
+        'label': 'Identificatore'
+    },
+    'E54_Dimension': {
+        'label':'Dimensione'
+    },
+    'E55_Type': {
+        'color': 'rgba(0,255,0,0.70)', 
+        'label': 'Tipo'
+    },
+    'P90_has_value': {
+        'label': 'Ha valore'
+    },
+    'S13_Sample': {
+        'label': 'Campione'
+    }
 };
 
+//----------------------------------------------------------
+
 const splitName = function(name){
     name = name.split("/").pop();
     name = name.split(":").pop();
@@ -44,7 +66,11 @@ document.addEventListener('DOMContentLoaded', function() {
                     style="width:32px; height:32px;"
                 >
                 <i v-else style="margin-left:10px;"></i>
-                {{ node.label + ' ' + classesLabelFor(node) }}
+                <i v-if="node.loadStatus == 'done' && node.predicates.length==0" 
+                    class="fa-solid fa-link-slash"
+                    style="margin-right:10px;"
+                ></i>
+                {{ classesLabelFor(node) + ' ' + classesTagFor(node) }}
             </div>
             <div v-if="expanded">
                 <template v-if="node.predicates && node.predicates.length > 0">
@@ -96,9 +122,13 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (node.classes && node.classes.length > 0) {
                     for(var i=0; i<node.classes.length; i++){
                         var clazz = node.classes[i];
-                        if(classColors.hasOwnProperty(clazz)){
-                            color = classColors[clazz];
-                            break;
+                        if(classConfig.hasOwnProperty(clazz)){
+                            var _color = classConfig[clazz].color || null;
+                            if(_color){
+                                color = _color;
+                                break;
+                            }
+                            
                         }
                     }
                 }
@@ -106,7 +136,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     'background-color': `${color}`
                 };
             },
-            classesLabelFor(node){
+            classesTagFor(node){
                 var label = "";
                 if(node.classes && node.classes.length > 0){
                     var int_label = "";
@@ -121,6 +151,22 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
                 return label;
             },
+            classesLabelFor(node){
+                var label = node.label;
+                if(node.classes && node.classes.length > 0){
+                    for(var i=0; i<node.classes.length; i++){
+                        var part = splitName(node.classes[i]);
+                        if(classConfig.hasOwnProperty(part)){
+                            var _label = classConfig[part].label || null;
+                            if(_label){
+                                label = _label;
+                                break; 
+                            }
+                        }
+                    }
+                }
+                return label;
+            },
             toggleExpand() {
                 if ((this.node.predicates && this.node.predicates.length > 0) || 
                     (this.node.children && this.node.children.length > 0)) {

package/src/views/investigation/form.twig

@@ -83,12 +83,14 @@
         data-shapes-url="/backend/ontology/schema/ttl2"
         data-values-url="/backend/ontology/form/{{ uuid }}"
         data-shape-subject="http://example.org/shapes/E7ActivityShape"
-        data-values-subject="http://diagnostica/e2d49af0-6c52-4fc5-8290-936b87472adf"        
+        data-values-subject="http://diagnostica/e2d49af0-6c52-4fc5-8290-936b87472adf" 
+        data-generate-node-shape-reference=""       
       ></shacl-form>
     {% else %}
       <shacl-form id="shacl-form" data-collapse="open"
         data-values-namespace="pref:"
         data-shapes-url="/backend/ontology/schema/ttl2"
+        data-generate-node-shape-reference=""
       ></shacl-form>
     {% endif %}
 
@@ -112,9 +114,10 @@
             </button>
             -->
 
-            <button v-if="validForm" style="margin-left:30px;" title="{{ t('investigation.new.confirm') }}"
-              @click="save()" type="button" class="btn btn-primary">
-              <i class="fa-solid fa-save"></i>
+            <button v-if="validForm" :disabled="saving" style="margin-left:30px;" title="{{ t('investigation.new.confirm') }}"
+              @click="save(false)" type="button" :class="['btn', saving ? 'btn-secondary' : 'btn-primary']">
+              <i v-if="saving"class="fa-solid fa-spinner"></i>
+              <i v-else class="fa-solid fa-save"></i>
             </button>
 
             <button style="margin-left:30px;" title="{{ t('investigation.new.reset') }}"