@igea/oac_frontend 1.0.105 → 1.0.107

package/package.json

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

package/src/controllers/investigation.js

@@ -43,7 +43,7 @@ module.exports = function(serviceName) {
             activeSidebarItem: null
         });
 
-        res.render('investigation/view.twig', data.toJson());
+        res.render('v2/investigation/view.twig', data.toJson());
     });
 
     return router

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

@@ -389,6 +389,87 @@ document.addEventListener('DOMContentLoaded', () => {
                         var intervalId = setInterval(() => {
                             if(_this.form.shadowRoot){
                                 clearInterval(intervalId);
+                               // 🔥 Fix alignment for add-property blocks
+const shadow = _this.form.shadowRoot;
+
+if (!shadow.querySelector('#oac-final-layout')) {
+  const style = document.createElement('style');
+  style.id = 'oac-final-layout';
+  style.textContent = `
+
+    /* ============================= */
+    /* Layout moderno a 3 elementi   */
+    /* ============================= */
+
+    .property-instance {
+        display: flex !important;
+        align-items: center !important;
+        gap: 10px !important;
+    }
+
+    /* Label senza width fissa */
+    .property-instance label {
+        width: auto !important;
+        min-width: 220px !important;
+        white-space: nowrap !important;
+        flex-shrink: 0 !important;
+    }
+
+    /* Editor cresce */
+    .property-instance .editor {
+        flex: 1 1 auto !important;
+    }
+
+    /* 🔥 SPUNTA NON PIÙ ASSOLUTA */
+    .property-instance.valid::before {
+        position: static !important;
+        margin-right: 6px !important;
+    }
+
+  `;
+  shadow.appendChild(style);
+}
+
+if (!shadow.querySelector('#oac-fix-add-buttons')) {
+  const style = document.createElement('style');
+  style.id = 'oac-fix-add-buttons';
+  style.textContent = `
+
+    /* Sposta i blocchi add a sinistra */
+    shacl-property:not(:has(>.collapsible)),
+    shacl-property > .collapsible::part(content) {
+        align-items: flex-start !important;
+    }
+
+    /* Assicura che il + sia inline */
+    shacl-property .add-button {
+        align-self: flex-start !important;
+        margin-right: 0 !important;
+    }
+
+  `;
+  shadow.appendChild(style);
+}
+
+
+if (!shadow.querySelector('#oac-limit-editor-width')) {
+  const style = document.createElement('style');
+  style.id = 'oac-limit-editor-width';
+  style.textContent = `
+
+    .property-instance .editor {
+        flex-grow: 0 !important;
+        max-width: 500px !important;
+        width: 100% !important;
+    }
+
+  `;
+  shadow.appendChild(style);
+}
+                                
+
+
+
                                 if(_this.inEditing)
                                     _this.inputIdentifizier();
                                 else

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

@@ -248,7 +248,7 @@ sparnatural.addEventListener("queryUpdated", (event) => {
   const queryString = sparnatural.expandSparql(event.detail.queryString);
  
   const q = event.detail.queryJson;
-  lastLiteralPredicate = extractLiteralPredicate(q);
+ // lastLiteralPredicate = extractLiteralPredicate(q);
 
   yasqe.setValue(queryString);
   console.log("Sparnatural JSON query:");

package/src/views/v2/investigation/form_content.twig

@@ -112,8 +112,8 @@
           {% endif %}
 
           <div id="shacl-container" 
-            style="margin-top:10px; border:dashed 2px gray; padding:10px; border-radius:5px;">
-            <shacl-form id="shacl-form" data-collapse="open"
+            style="border:dashed 2px gray; padding:10px; border-radius:5px;  max-width: 60%;  margin: 0 auto; margin-top:20px;">
+            <shacl-form shadow="false" id="shacl-form" data-collapse="open"
                 data-values-namespace="indagine:"
                 data-shapes-url="/backend/ontology/schema/editing"
                 data-generate-node-shape-reference=""

package/src/views/v2/investigation/view.twig

@@ -1,52 +1,248 @@
 {% extends "/v2/layout.twig" %}
 
+{# --------------------------------------------------
+   Forziamo modalità viewer:
+   - niente sidebar
+   - header minimale
+-------------------------------------------------- #}
+{% set activeMenu = null %}
+{% set activeSidebar = null %}
+{% set activeSidebarItem = null %}
+
+{% block extendHead %}
+
+  {# SHACL FORM web component #}
+  <script src="/frontend/js/lib/shacl-form.bundle-2.0.7-11.js" type="module"></script>
+
+  {# Vue investigation (stessa usata per editing) #}
+  <script src="/frontend/js/app/vue-investigation.js"></script>
+
+  <style>
+    .viewer-container {
+      max-width: 1100px;
+      margin: 20px auto;
+    }
+
+    .viewer-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    .viewer-header h2 {
+      margin: 0;
+    }
+
+    .viewer-actions {
+      text-align: center;
+      margin-top: 20px;
+    }
+  </style>
+
+{% endblock %}
+
 {% block content %}
 
-<div class="container my-4">
-
-  <h2>Indagine</h2>
-  
-  <h2 class="d-flex justify-content-between align-items-center">
-  <span>Indagine</span>
-
-  <button id="btn-edit"
-          class="btn btn-primary btn-sm">
-    <i class="fa-solid fa-pen"></i> Modifica
-  </button>
-</h2>
-
-  <div id="shacl-container"
-       style="margin-top:10px;
-              border: solid 1px #ccc;
-              padding:15px;
-              border-radius:6px;">
-
-    <shacl-form
-      id="shacl-form"
-      data-collapse="open"
-      data-readonly="true"
-      data-values-namespace="indagine:"
-      data-node-iri="indagine:{{ uuid }}"
-      data-shapes-url="/backend/ontology/schema/view"
-    ></shacl-form>
+<div class="viewer-container">
+
+
+
+  {# --------------------------------------------------
+     Vue root (SENZA search)
+     UUID passato dal controller
+  -------------------------------------------------- #}
+<div v-cloak
+     id="investigation-app"
+     data-cur_role="{{ user.role }}"
+     data-uuid="{{ uuid }}"
+     data-form-id="{{ form_id }}"
+     data-editing="false"
+     data-show-form="true"
+     data-label_save_ok="{{ t('investigation.save_ok') }}"
+     data-label_save_err="{{ t('investigation.save_err') }}"
+>
+
+  <div class="viewer-header">
+  {% if user.role != 3 %}
+<!-- MODIFICA -->
+<button v-if="!inEditingViewer"
+        title="{{ t('investigation.edit_item') }}"
+        @click="startEdit"
+        type="button"
+        class="btn btn-info">
+  <i class="fa-solid fa-pen-to-square"></i>
+</button>
+
+<!-- STOP EDITING -->
+<button v-if="inEditingViewer"
+        title="{{ t('investigation.stop_edit') }}"
+        @click="stopEdit"
+        type="button"
+        class="btn btn-success">
+  <i class="fa-solid fa-circle-stop" style="color:red;"></i>
+</button>
+
+{% endif %}
+
+
+
+  </div>
+
+
+    <template v-if="isVisible">
+
+      {# ---------------- BUTTONS ---------------- #}
+      {% if user.role != 3 %}
+      <div class="col-12 text-center mt-4">
+
+        <button class="btn btn-secondary mx-2"
+                @click="download('xml')">
+          RDF/XML
+        </button>
+
+        <button class="btn btn-secondary mx-2"
+                @click="download('ttl')">
+          TURTLE
+        </button>
+
+        <button v-if="inEditingViewer  && validForm"
+                :disabled="saving"
+                class="btn btn-primary mx-2"
+                @click="save(false)">
+          <i v-if="saving" class="fa-solid fa-spinner"></i>
+          <i v-else class="fa-solid fa-save"></i>
+        </button>
 
+
+
+      </div>
+      {% endif %}
+
+      {# ---------------- SHACL FORM ---------------- #}
+      <div id="shacl-container"
+           style="margin-top:15px;
+                  border:dashed 2px gray;
+                  padding:15px;
+                  border-radius:6px;">
+
+        <shacl-form id="shacl-form"
+          data-collapse="open"
+          data-values-namespace="indagine:"
+          data-shapes-url="/backend/ontology/schema/editing"
+          data-generate-node-shape-reference=""
+        ></shacl-form>
+
+      </div>
+
+      {# ---------------- DEBUG OUTPUT (admin) ---------------- #}
+      {% if user.role in [0,1] %}
+      <fieldset v-if="inEditingViewer"
+        style="margin-top:15px;
+               border: solid 1px gray;
+               border-radius: 6px;
+               padding: 10px;">
+        <legend>
+          Output SHACL
+          [{@ validForm ? 'valido' : 'non valido' @}]
+        </legend>
+        <pre :style="outputStyle">{@ serializedForm @}</pre>
+      </fieldset>
+      {% endif %}
+
+    </template>
+
+  </div>
+
+  {# ---------------- CLOSE TAB ---------------- #}
+  <div class="viewer-actions">
+    <button class="btn btn-outline-secondary"
+            onclick="tryCloseViewer()">
+      Chiudi
+    </button>
+
+    <div id="close-hint"
+         style="display:none; margin-top:6px; color:#666; font-size:0.9em;">
+      Puoi chiudere questa scheda dal browser.
+    </div>
   </div>
 
 </div>
 
 <script>
-  document.getElementById('btn-edit')?.addEventListener('click', function () {
-    const form = document.getElementById('shacl-form');
-    if (!form) return;
+function tryCloseViewer() {
+  window.close();
+  setTimeout(() => {
+    const hint = document.getElementById('close-hint');
+    if (hint) hint.style.display = 'block';
+  }, 200);
+}
 
-    // rimuove readonly → entra in editing
-    form.removeAttribute('data-readonly');
 
-    // feedback UI
-    this.disabled = true;
-    this.innerHTML = '<i class="fa-solid fa-lock-open"></i> Modifica attiva';
-  });
-</script>
+async function startEditFromViewer(btn) {
+  if (btn) {
+    btn.disabled = true;
+    btn.classList.add('disabled');
+  }
 
+  const appEl = document.getElementById('investigation-app');
+  if (!appEl) return;
 
-{% endblock %}
+  const uuid = appEl.dataset.uuid;
+  if (!uuid) {
+    alert("UUID non disponibile");
+    if (btn) btn.disabled = false;
+    return;
+  }
+
+  try {
+    // 🔍 riuso search
+    const res = await fetch('/backend/ontology/form/search', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ query: uuid, limit: 1 })
+    });
+
+    const response = await res.json();
+
+    if (!response.success || !response.data?.length) {
+      alert("Indagine non trovata");
+      if (btn) btn.disabled = false;
+      return;
+    }
+
+    const item = response.data[0];
+
+    // 🔐 lock
+    const lockResp = await fetch(
+      `/backend/ontology/form/lock/${item.id}/${window.CLIENT_UUID}`
+    ).then(r => r.json());
+
+    if (!lockResp.success) {
+      alert("Indagine in modifica da un altro UTENTES");
+      if (btn) btn.disabled = false;
+      return;
+    }
+
+    // 🔥 entra in editing
+    window.dispatchEvent(
+      new CustomEvent('edit-item', {
+        detail: {
+          id: item.id,
+          uuid: item.uuid
+        }
+      })
+    );
+
+  } catch (e) {
+    console.error(e);
+    alert("Errore durante l'attivazione della modifica");
+    if (btn) btn.disabled = false;
+  }
+}
+
+
+
+</script>
+
+{% endblock %}

package/src/views/v2/layout.twig

@@ -11,6 +11,7 @@
     
 <link rel="stylesheet" href="/frontend/v2/css/v2.css">
 
+
     <script src="/frontend/js/lib/axios.min.js"></script>
     <script src="/frontend/js/lib/vue.global.js"></script>
     <script src="/frontend/js/lib/bootstrap.bundle.min.js"></script>