@igea/oac_frontend 1.0.48 → 1.0.50

package/package.json

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

package/src/controllers/investigation.js

@@ -4,15 +4,25 @@ const DataModel = require('../models/DataModel');
 
 module.exports = function(serviceName) {
     /**
-     * @route   GET /users/manage: redirect to the users page with list of users
+     * @route   GET /investigation/form/:uuid? redirect to the investigation form
      */
-    router.get('/new', (req, res) => {
+
+    const renderForm = function(req, res, uuid){
         let data = new DataModel(req, {  
             root: serviceName, 
-            title: 'Ivestigation Creation',
+            title: 'Investigation Creation',
             currentPath:  req.baseUrl +req.path,
+            uuid
         });    
-        res.render('investigation/new.twig', data.toJson()); 
+        res.render('investigation/form.twig', data.toJson()); 
+    }
+
+    router.get('/form', (req, res) => {
+        renderForm(req, res, null);
+    });
+
+    router.get('/form/:uuid', (req, res) => {
+        renderForm(req, res, req.params.uuid);
     });
 
     return router

package/src/locales/en.json

@@ -86,6 +86,18 @@
             "max_size": "Each file must be less than 10MB"
         }
     },
+    "investigation":{
+        "new": {
+            "title": "New Investigation",
+            "description": "Compila il modulo sottostante per creare una nuova indagine.",
+            "form_invalid": "The form contains errors. Please correct them before submitting.",
+            "submit": "Save",
+            "reset": "Reset",
+            "show_more": "Show more",
+            "confirm": "Confirm",
+            "download": "Download"
+        }
+    },
     "search": {
         "fast": {
             "title": "Fast search"

package/src/locales/it.json

@@ -89,6 +89,18 @@
             "invalid_file": "Tipo di file non valido"
         }
     },
+    "investigation": {
+        "new": {
+            "title": "Nuova Indagine",
+            "description": "Compila il modulo sottostante per creare una nuova indagine.",
+            "form_invalid": "La scheda contiene errori. Correggerli per poterla salvare correttamente.",
+            "submit": "Invia",
+            "reset": "Reimposta",
+            "show_more": "Mostra di più",
+            "confirm": "Conferma",
+            "download": "Scarica"
+        }
+    },
     "search": {
         "title" : "Ricerca",
         "fast": {

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

@@ -0,0 +1,273 @@
+const {createApp} = Vue;
+
+const appId = 'investigation-app';
+const shaclId = 'shacl-form';
+const templateIRIToExcludeFromSearch = [
+    "http://diagnostica/indagine/$UUID$"
+];
+
+document.addEventListener('DOMContentLoaded', () => {
+    const el = document.getElementById(appId);
+
+    const app = createApp({
+        delimiters: ['{@', '@}'],
+        data() {
+            return {
+                cur_role: parseInt(el.dataset.cur_role),
+                uuid: parseInt(el.dataset.uuid) || null,
+                form: null,
+                enabled: el.dataset.editing == "true",
+                serializedForm: "",
+                validForm: false,
+                labels: {
+                
+                },
+                search: {
+                    offset: 0,
+                    limit: 10,
+                    prefix: "",
+                    results: [],
+                    end: false,
+                    input: null,
+                    selected: null
+                }
+            }    
+        },
+        mounted() {
+            this.initShaclForm();
+            this.load();
+        },
+        computed:{
+            outputStyle(){
+                var style = {
+                    "color": "red",
+                    "font-weight": "bold",
+                    "max-height": "400px",
+                    "overflow-y": "auto",
+                    "white-space": "pre-wrap"
+                }
+                if(this.validForm)
+                    style["color"] = "green";
+                return style;
+            }
+        },
+        methods: {
+            download(outFormat){
+                this.openPostInNewTab("/backend/ontology/convert/ttl/" + outFormat, {
+                    file: this.serializedForm
+                });    
+            },
+            openPostInNewTab(url, params) {
+                const form = document.createElement("form");
+                form.method = "POST";
+                form.action = url;
+                form.target = "_blank";
+                for (const key in params) {
+                    if (params.hasOwnProperty(key)) {
+                        const input = document.createElement("input");
+                        input.type = "hidden";
+                        input.name = key;
+                        input.value = params[key];
+                        form.appendChild(input);
+                    }
+                }
+                document.body.appendChild(form);
+                form.submit();
+                form.remove();
+            },
+            initShaclForm() {
+                var _this = this;
+                this.form = document.querySelector("shacl-form");
+                const output = document.getElementById("shacl-output")
+                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();
+                });
+                this.form.addEventListener("ready", () => {
+                    var intervalId = setInterval(() => {
+                        if(_this.form.shadowRoot){
+                            clearInterval(intervalId);
+                            _this.inputIdentifizier();
+                            if(!_this.enabled)
+                                _this.disableInteractions(_this.form);
+                        }
+                    }, 100);
+                });
+            },
+            searchByPrefixStart(rokitInput, prefix){
+                this.search.offset = 0;
+                this.search.prefix = prefix;
+                this.search.results = [];
+                this.search.end = false;
+                this.search.input = rokitInput;
+                this.search.selected = null;
+                if(prefix) this.searchByPrefix();
+            },
+            confirmSelection(){
+                if(this.search.selected && this.search.selected.instance)
+                    this.search.input.value = this.search.selected.instance;
+                this.searchByPrefixStart(null, null);
+            },
+            searchByPrefix(){
+                if(this.search.end) return;
+                var _this = this;
+                var request = axios.post("/backend/fuseki/search/by-prefix", {
+                    limit: this.search.limit, 
+                    offset: this.search.offset, 
+                    prefix: this.search.prefix
+                });
+                request.then(response => {
+                    var data = response.data;
+                    if(data.success){
+                        _this.search.results = _this.search.results.concat(data.data);
+                        _this.search.offset += data.data.length;
+                        if(data.data.length < _this.search.limit){
+                            _this.search.end = true;
+                        }
+                    }
+                }).catch(error => {
+                    console.log(error);
+                });
+            },
+            monitorChanges(root, callback) {
+                const observer = new MutationObserver(mutations => {
+                    mutations.forEach(mutation => {
+                        callback(mutation);
+                    });
+                });
+                observer.observe(root, {
+                    childList: true,       // nuove aggiunte / rimozioni di nodi
+                    subtree: true         // osserva rischiosamente tutto l’albero
+                    //attributes: true,      // monitora cambi di attributi
+                    //characterData: true    // monitora testo interno dei nodi
+                });
+                return observer;
+            },
+            inputIdentifizier(){
+                const form = this.form;
+                const _this = this;
+
+                const disableIDField = () => {
+                    const shadow = form.shadowRoot;
+                    if (!shadow) return false;  
+                    
+                    // Trova la label "ID"
+                    const labels = Array.from(shadow.querySelectorAll("label"))
+                        .filter(l => l.textContent.trim() === "ID");
+
+                    if (labels.length == 0) return false;
+                    for(var i=0; i<labels.length; i++){
+                        const label = labels[i];
+                        if (!label) continue;
+                        // Container della property
+                        const container = label.closest(".property-instance");
+                        if (!container) return false;
+                        
+                        // Disabilita rokit-input
+                        const rokitInput = container.querySelector("rokit-input");
+                        if (rokitInput) {
+                            if(rokitInput.value == ""){
+                                rokitInput.value = _this.generateIRI(rokitInput.placeholder);
+                            }
+                            rokitInput.setAttribute("disabled", "true");
+                            rokitInput.style.opacity   = "0.6";
+                            rokitInput.style.pointerEvents = "none";
+                           
+                            var escludeSearchButton = templateIRIToExcludeFromSearch.includes(rokitInput.placeholder);
+
+                            if(_this.enabled && !escludeSearchButton){
+                                // Aggiungo bottone IMG per la ricerca 
+                                let next = label.nextElementSibling;
+                                let imgClass = "search-identifier-icon";
+                                if (!(next && next.tagName === "IMG" 
+                                    && next.classList.contains(imgClass))) {
+                                    // creo immagine
+                                    const img = document.createElement("img");
+                                    img.src = "/frontend/images/search.png";
+                                    img.style.width = "24px"; img.style.height = "24px";
+                                    img.style["margin-left"] = "5px"; img.style["margin-right"] = "5px";
+                                    img.style.cursor = "pointer";
+                                    img.classList.add(imgClass);
+                                    img.onclick = function(){
+                                        var prefix = rokitInput.placeholder.replace("$uuid$", "").replace("$UUID$", "");   
+                                        prefix = "http://diagnostica/vocabularies/quesito-diagnostico/";
+                                        _this.searchByPrefixStart(rokitInput, prefix);
+                                    }
+                                    // inserisco subito dopo la label
+                                    label.insertAdjacentElement("afterend", img); 
+                                }
+                            }
+                        }
+                        // SHACL NODE superiore che contiene TUTTO il blocco ID
+                        const shaclNode = container.closest("shacl-node");
+                        // Rimuovi TUTTI i remove-button
+                        if (shaclNode) {
+                            shaclNode.querySelectorAll("div.remove-button-wrapper").forEach(el => {
+                                el.style.display = "none";
+                            });
+                            shaclNode.querySelectorAll("rokit-button.remove-button").forEach(btn => {
+                                btn.style.display = "none";
+                            });
+                            // Rimuovi TUTTI gli add-button all'interno del nodo ID
+                            shaclNode.querySelectorAll("rokit-select.add-button").forEach(btn => {
+                                btn.style.display = "none";
+                            });
+                        }
+                    }
+                    return true;
+                };
+
+                const observer = this.monitorChanges(form.shadowRoot, (mutation) => {
+                    disableIDField();
+                });
+                
+                disableIDField();
+            },
+            disableInteractions(root) {
+                root.style.pointerEvents = 'none';
+                
+                const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+
+                while (walker.nextNode()) {
+                    const el = walker.currentNode;
+
+                    // Blocca click e interazioni mouse
+                    el.style.pointerEvents = 'none';
+
+                    // Blocca editing su input / textarea / select
+                    if (el instanceof HTMLInputElement || 
+                        el instanceof HTMLTextAreaElement || 
+                        el instanceof HTMLSelectElement ||
+                        el instanceof HTMLButtonElement) {
+                        el.disabled = true;
+                    }
+
+                    // Blocca contenteditable
+                    if (el.isContentEditable) {
+                        el.contentEditable = "false";
+                    }
+
+                    // Ricorsione dentro Shadow DOM (se presente)
+                    if (el.shadowRoot) {
+                        disableInteractions(el.shadowRoot);
+                    }
+                }
+            },
+            generateIRI(template, uuid){
+                var _uuid = uuid || crypto.randomUUID();
+                return template.replace("$uuid$", _uuid).replace("$UUID$", _uuid);        
+            },
+            load() {
+                
+            },
+            save() {
+                
+            },
+            reset() {
+                window.location.reload();
+            }
+        }
+    });
+    app.mount(`#${appId}`);
+});

package/src/views/investigation/form.twig

@@ -0,0 +1,157 @@
+{% set showSidebar = true %}
+{% extends "../base.twig" %}
+
+{% block extendHead %}
+    <script src="/{{ root }}/js/lib/shacl-form.bundle.js" type="module"></script>
+    <script src="/{{ root }}/js/app/vue-investigation.js"></script>
+
+
+  <style>
+    /* Sfondo fullscreen semi-trasparente */
+    .modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6); /* nero ombreggiato */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+        visibility: visible;
+        transition: opacity 0.3s ease;
+    }
+
+    /* Box centrale della modale */
+    .modal-content {
+        background: #fff;
+        padding: 20px;
+        border-radius: 8px;
+        max-width: 650px;
+        width: 90%;
+        box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* Label */
+    .modal-content label {
+        font-weight: bold;
+    }
+
+    /* Dropdown a 2 colonne */
+    .modal-content select {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr; /* 2 colonne */
+        gap: 10px;
+        padding: 5px;
+        font-size: 16px;
+    }
+
+    /* Bottone chiusura */
+    .close-btn {
+        align-self: flex-end;
+        background: transparent;
+        border: none;
+        font-size: 40px;
+        cursor: pointer;
+        float: right;
+    }
+  </style>
+    
+{% endblock %}
+
+{% block content %}
+    
+    <div>
+        <h2 style="display:flex; justify-content:space-between; align-items:center;">    
+            <span>{{ t('investigation.new.title') }}:</span>
+        </h2>
+    </div>
+
+    <div id="investigation-app"
+      data-cur_role="{{ user.role }}"
+      data-uuid="{{ uuid }}"
+      data-editing="{{ user.role != 3 }}"
+    >
+
+      <shacl-form id="shacl-form" data-collapse="open"
+        data-shapes-url="/backend/ontology/schema/ttl2">
+      </shacl-form>
+
+      {% if user.role != 3 %}
+        <!-- Buttons -->
+        <div class="col-12 text-center mt-4">
+            <button v-if="validForm" @click="save()" type="submit" class="btn btn-primary me-2">{{ t('investigation.new.submit') }}</button>
+            <button style="margin-left:30px;" title="{{ t('investigation.new.download') }}"
+              @click="download('xml')" type="button" class="btn btn-secondary">
+                <span>RDF/XML</span><i class="fa-solid fa-file-arrow-down"></i>
+            </button>
+            <button style="margin-left:30px;" title="{{ t('investigation.new.download') }}"
+              @click="download('ttl')" type="button" class="btn btn-secondary">
+                <span>TURTLE</span><i class="fa-solid fa-file-arrow-down"></i>
+            </button>
+            <button style="margin-left:30px;" title="{{ t('investigation.new.reset') }}"
+              @click="reset()" type="button" class="btn btn-secondary">
+              <i class="fa-solid fa-broom"></i>
+            </button>
+        </div>
+        {% if user.role in [0, 1] %}
+          <fieldset id="shacl-output" style="margin-top:10px;
+              border: solid 1px gray;
+              border-radius: 10px;
+              padding: 10px;">
+            <legend>Generated output: [{@ validForm @}]</legend>
+            <pre :style="outputStyle">{@ serializedForm @}</pre>
+          </fieldset>
+        {% endif %}
+      {% else %}
+        <div class="col-12 text-center mt-4">
+          <button @click="download('xml')" type="button" class="btn btn-secondary">
+            <span>RDF/XML</span><i class="fa-solid fa-file-arrow-down"></i>
+          </button>  
+          <button style="margin-left:30px;" title="{{ t('investigation.new.download') }}"
+            @click="download('ttl')" type="button" class="btn btn-secondary">
+              <span>TURTLE</span><i class="fa-solid fa-file-arrow-down"></i>
+          </button>
+        </div>
+      {% endif %}
+
+      <div style="margin-top:200px;"></div>
+
+      <div class="modal-overlay" v-cloak v-if="search.input != null">
+        <div class="modal-content">
+            <div class="row" style="line-height:40px; margin-bottom:10px;">
+              <span style="font-weight:bold; float:left; max-width:570px;">
+                Seleziona istanza:
+              </span>
+              <span style="float:right; max-width:24px;" class="close-btn" @click="searchByPrefixStart(null, null);">&times;</span>            
+            </div>
+            <select size="10" v-model="search.selected">
+                <option v-for="item in search.results" :value="item">{@ (item.label && item.label.trim()) ? item.label : item.instance @}</option>
+            </select>
+            <div v-if="search.selected">
+              <span style="font-size:12px; color:gray;">{@ search.selected.instance @}</span>
+            </div>
+            <div style="margin-top:10px;">
+              <span @click="searchByPrefix()" v-if="!search.end" style="float:left;
+                cursor: pointer; color: blue;
+                border: solid 1px blue;
+                border-radius: 4px; padding: 4px;">
+                {{ t('investigation.new.show_more') }}...
+              </span>
+              <span v-if="search.selected" @click="confirmSelection()" style="float:right;
+                cursor: pointer; color: green;
+                border: solid 1px green;
+                border-radius: 4px; padding: 4px;">
+                {{ t('investigation.new.confirm') }}
+              </span>
+            </div>
+        </div>
+      </div>
+
+    </div>
+
+{% endblock %}

package/src/views/sidebar.twig

@@ -47,12 +47,16 @@
                     <i class="fa-solid fa-book-bookmark"></i>
                     <span>{{ t('users.vocabolaries.title') }}</span>
                 </a>
-                <a href="/{{ root }}/investigation/new" class="{% if '/investigation/new' in currentPath %}active{% endif %}">
-                    <i class="fa-solid fa-clipboard-list"></i>
-                    <span>Indagine</span>
-                </a>
             </div>
         </div>
+
+        <div class="menu-item">
+            <a href="/{{ root }}/investigation/form" class="{% if '/investigation/form' in currentPath %}active{% endif %}">
+                <i class="fa-solid fa-clipboard-list"></i>
+                <span>{{ t('investigation.new.title') }}</span>
+            </a>
+        </div>
+
     {% endif %}
 
     {# Ricerca #}

package/src/views/investigation/new.twig

@@ -1,32 +0,0 @@
-{% set showSidebar = true %}
-{% extends "../base.twig" %}
-
-{% block extendHead %}
-    <script src="/{{ root }}/js/lib/shacl-form.bundle.js" type="module"></script>
-{% endblock %}
-
-{% block content %}
-    
-    <div>
-        <h2 style="display:flex; justify-content:space-between; align-items:center;">    
-            <span>Nuova Indagine:</span>
-        </h2>
-    </div>
-
-    <shacl-form data-shapes-url="/backend/ontology/schema/ttl2"></shacl-form>
-
-    <script>
-      const form = document.querySelector("shacl-form")
-      form.addEventListener('change', event => {
-        // check if form data validates according to the SHACL shapes
-        if (event.detail?.valid) {
-          // get data graph as RDF triples and
-          // log them to the browser console
-          const triples = form.serialize() 
-          console.log('entered form data', triples)
-          // store the data somewhere, e.g. in a triple store
-        }
-      })
-    </script>
-
-{% endblock %}