@igea/oac_frontend 1.0.53 → 1.0.55

package/package.json

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

package/src/locales/en.json

@@ -85,7 +85,7 @@
             "max_files": "You can upload up to 5 files at a time",
             "max_size": "Each file must be less than 10MB",
             "select_vocabolary": "Select a vocabolary to view its items",
-            "terms": "Terms"
+            "terms": "Vocabulary entries"
         }
     },
     "investigation":{

package/src/locales/it.json

@@ -88,7 +88,7 @@
             "upload_error": "Errore durante il caricamento dei file",
             "invalid_file": "Tipo di file non valido",
             "select_vocabolary": "Seleziona un vocabolario per visualizzarne gli elementi",
-            "terms": "Termini"
+            "terms": "Voci del vocabolario"
         }
     },
     "investigation": {

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

@@ -81,12 +81,15 @@ document.addEventListener('DOMContentLoaded', () => {
                 setTimeout(async ()=>{
                     _this.form = document.querySelector("shacl-form");
                     const output = document.getElementById("shacl-output")
+                    
+                    //await _this.load(this.uuid);
+
                     _this.form.addEventListener('change', event => {
                         // check if form data validates according to the SHACL shapes
                         _this.validForm = event.detail?.valid;
                         _this.serializedForm = _this.form.serialize();
                     });
-                    await _this.load(this.uuid);
+                    
                     _this.form.addEventListener("ready", () => {
                         var intervalId = setInterval(() => {
                             if(_this.form.shadowRoot){
@@ -97,6 +100,7 @@ document.addEventListener('DOMContentLoaded', () => {
                             }
                         }, 100);
                     });
+                    
                 })
             },
             searchByPrefixStart(rokitInput, prefix){
@@ -173,11 +177,9 @@ document.addEventListener('DOMContentLoaded', () => {
                         if (rokitInput) {
                             var isIndagineIdField = templateIRIOfIndagine === rokitInput.placeholder;
                             if(rokitInput.value == ""){
-                                rokitInput.value = _this.generateIRI(rokitInput.placeholder);
-                            }
-                            if(isIndagineIdField){
-                                this.uuid = rokitInput.value.split("/").pop();
+                                rokitInput.value = _this.generateIRI(rokitInput, isIndagineIdField);
                             }
+                            
                             rokitInput.setAttribute("disabled", "true");
                             rokitInput.style.opacity   = "0.6";
                             rokitInput.style.pointerEvents = "none";
@@ -262,24 +264,33 @@ document.addEventListener('DOMContentLoaded', () => {
                     }
                 }
             },
-            generateIRI(template, uuid){
-                var _uuid = uuid || crypto.randomUUID();
-                return template.replace("$uuid$", _uuid).replace("$UUID$", _uuid);        
+            generateIRI(input, isIndagne){
+                var template = input.placeholder;
+                setTimeout((async function(){
+                    var _uuid = crypto.randomUUID();
+                    template = template.replace("$uuid$", _uuid).replace("$UUID$", _uuid);
+                    for(var i=1; i<=9; i++){
+                        var seq = "seq" + i; 
+                        var searchStr = "$" + seq + "$";
+                        var searchStrUpp = searchStr.toUpperCase();
+                        if(template.toLowerCase().includes(searchStr)){ 
+                            var response = await fetch('/backend/ontology/counter/' + seq ).then(resp => resp.json());
+                            if(response.success && response.data){
+                                var counter = response.data;
+                                template = template.replace(searchStr, counter).replace(searchStrUpp, counter);
+                            }
+                        }  
+                    }
+                    input.value = template;
+                    if(isIndagne){
+                        this.uuid = input.value.split("/").pop();
+                    }
+                }).bind(this));
             },
             async load(uuid) {
                 if(uuid){
                     const dataTTL = await fetch("/backend/ontology/form/" + uuid).then(resp => resp.text())
                     this.form.dataset['values'] = dataTTL;
-                    /*        
-                    var request = axios.get("/backend/ontology/form/" + uuid);
-                    request.then(response => {
-                        var data = response.data;
-                        this.form.dataset['values'] = data;
-                        callback()
-                    }).catch(error => {
-                        console.log(error);
-                    });
-                    */
                 }
             },
 

package/src/public/js/lib/sparnatural-form-main.js

@@ -77,6 +77,14 @@ const yasr = new Yasr(document.getElementById("yasr"), {
   defaultPlugin: "TableX",
 });
 
+yasr.plugins["TableX"].config.uriHrefAdapter = function(uri) {
+	if(uri.startsWith("http://diagnostica/")) {
+		return "/frontend/investigation/form/" + uri.split("/").pop();
+	} else {
+		return uri;
+	}
+};
+
 // Link query response to YASR
 yasqe.on("queryResponse", (_yasqe, response, duration) => {
   yasr.setResponse(response, duration);
@@ -132,4 +140,5 @@ document.getElementById("switch-language").onclick = function () {
 
   // Force form to re-render with new language
   sparnaturalForm.display();
-};
+};
+

package/src/public/js/lib/sparnatural-main.js

@@ -26,11 +26,20 @@ Yasr.registerPlugin("TableX",SparnaturalYasguiPlugins.TableX);
 Yasr.registerPlugin("Grid",SparnaturalYasguiPlugins.GridPlugin);
 delete Yasr.plugins['table'];
 
+
 const yasr = new Yasr(document.getElementById("yasr"), {
 	pluginOrder: ["TableX", "Grid", "response"],
 	defaultPlugin: "TableX"
 });
 
+yasr.plugins["TableX"].config.uriHrefAdapter = function(uri) {
+	if(uri.startsWith("http://diagnostica/")) {
+		return "/frontend/investigation/form/" + uri.split("/").pop();
+	} else {
+		return uri;
+	}
+};
+
 // link yasqe and yasr
 yasqe.on("queryResponse", function(_yasqe, response, duration) {
 	yasr.setResponse(response, duration);
@@ -104,3 +113,5 @@ const treeValues = [
 
 const widget = new TreeSelectWidget("myWidgetContainer", treeValues);
 */
+
+

package/src/views/investigation/form.twig

@@ -77,12 +77,21 @@
       data-editing="{{ user.role != 3 }}"
     >
 
+    {% if uuid %}
       <shacl-form id="shacl-form" data-collapse="open"
+        data-values-namespace="pref:"
         data-shapes-url="/backend/ontology/schema/ttl2"
-        data-values-subject__="http://example.org/shapes/da4c29c4-f90e-41bf-8ac6-7714800fcc04"
-      >
-      </shacl-form>
-      
+        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"        
+      ></shacl-form>
+    {% else %}
+      <shacl-form id="shacl-form" data-collapse="open"
+        data-values-namespace="pref:"
+        data-shapes-url="/backend/ontology/schema/ttl2"
+      ></shacl-form>
+    {% endif %}
+
       {% if user.role != 3 %}
         <!-- Buttons -->
         <div class="col-12 text-center mt-4">

package/src/views/vocabolaries/edit.twig

@@ -31,7 +31,7 @@
         data-lang_terms="{{ t('users.vocabolaries.terms') }}" 
     >
         <div><span style="font-weight:bold;">{{ t('users.vocabolaries.select_vocabolary') }}:</span></div>
-        <select size="10" v-model="vocabolary" style="min-width:350px;">
+        <select size="10" v-model="vocabolary" style="min-width:500px;">
             <option v-for="item in vocabolaries" :value="item">{@ item.name @}</option>
         </select>
         <div v-if="vocabolary">