@igea/oac_frontend 1.0.106 → 1.0.108

package/package.json

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

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

@@ -389,6 +389,148 @@ 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;
+    }
+
+/* 🔥 Disattiva spunta originale */
+.property-instance.valid::before {
+    content: none !important;
+}
+
+/* 🔥 Crea spunta a fine label */
+.property-instance.valid > label::after {
+    content: '';
+    display: inline-block;
+    width: 0.9em;
+    height: 0.9em;
+    margin-left: 6px;
+    vertical-align: middle;
+
+    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" fill="green" xmlns="http://www.w3.org/2000/svg"><path d="M866.133333 258.133333L362.666667 761.6l-204.8-204.8L98.133333 618.666667 362.666667 881.066667l563.2-563.2z"/></svg>');
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+
+
+
+
+
+  `;
+  shadow.appendChild(style);
+}
+
+
+function hideOnlyDuplicateRemoveButtons(shadowRoot) {
+  shadowRoot.querySelectorAll('.property-instance').forEach(pi => {
+
+    // consideriamo solo i wrapper "esterni" che contengono uno shacl-node
+    const shaclNode = pi.querySelector(':scope > shacl-node');
+    if (!shaclNode) return;
+
+    // remove wrapper diretto del wrapper esterno (quello che sospettiamo duplicato)
+    const directRemoveWrapper = pi.querySelector(':scope > .remove-button-wrapper');
+    if (!directRemoveWrapper) return;
+
+    const directRemoveBtn = directRemoveWrapper.querySelector('rokit-button.remove-button[title]');
+    if (!directRemoveBtn) return;
+
+    const title = directRemoveBtn.getAttribute('title');
+    if (!title) return;
+
+    // cerco un altro remove con lo stesso title *dentro* lo shacl-node
+    // (escludo quello esterno: infatti quello esterno NON è dentro shaclNode)
+    const duplicateInside = shaclNode.querySelector(`rokit-button.remove-button[title="${CSS.escape(title)}"]`);
+
+    // se esiste, quello esterno è duplicato => nascondo SOLO quello esterno
+    if (duplicateInside) {
+      directRemoveWrapper.style.display = 'none';
+    } else {
+      // se non c'è duplicato interno, quello esterno serve => lo lascio visibile
+      directRemoveWrapper.style.display = '';
+    }
+  });
+}
+
+// prima applicazione
+hideOnlyDuplicateRemoveButtons(shadow);
+
+// observer per elementi aggiunti con "+"
+const dupRemoveObserver = new MutationObserver(() => {
+  hideOnlyDuplicateRemoveButtons(shadow);
+});
+dupRemoveObserver.observe(shadow, { childList: true, subtree: true });
+
+
+
+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/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/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>