jupiter-dynamic-forms 1.16.0 → 1.16.2

package/dist/index.mjs

@@ -1501,6 +1501,7 @@ const form$1 = {
   submit: "Validate",
   save: "Save",
   saveDraft: "Save Draft",
+  savingDraft: "Saving draft",
   errors: "Errors",
   modified: "Modified",
   valid: "Valid",
@@ -1509,7 +1510,12 @@ const form$1 = {
   noRoleSelected: "No Role Selected",
   pleaseSelectRole: "Please select a role from the list on the left.",
   expandPanel: "Expand side panel",
-  collapsePanel: "Collapse side panel"
+  collapsePanel: "Collapse side panel",
+  validate: "Validate",
+  preview: "Preview",
+  cancelValidation: "Cancel Validation",
+  lastValidationResults: "Last Validation Results",
+  validationInProgress: "Validation In Progress"
 };
 const filter$1 = {
   selectRoles: "Select Roles",
@@ -1641,6 +1647,7 @@ const form = {
   submit: "Valideren",
   save: "Opslaan",
   saveDraft: "Concept opslaan",
+  savingDraft: "Concept opslaan...",
   errors: "Fouten",
   modified: "Gewijzigd",
   valid: "Geldig",
@@ -1649,7 +1656,12 @@ const form = {
   noRoleSelected: "Geen rol geselecteerd",
   pleaseSelectRole: "Selecteer een rol uit de lijst aan de linkerkant.",
   expandPanel: "Zijpaneel uitvouwen",
-  collapsePanel: "Zijpaneel inklappen"
+  collapsePanel: "Zijpaneel inklappen",
+  validate: "Valideren",
+  preview: "Voorbeeld",
+  cancelValidation: "Validatie annuleren",
+  lastValidationResults: "Laatste validatieresultaten",
+  validationInProgress: "Validatie bezig"
 };
 const filter = {
   selectRoles: "Rollen selecteren",
@@ -7161,6 +7173,8 @@ let JupiterDynamicForm = class extends LitElement {
     this.display = "accordion";
     this.mode = "inputForm";
     this.roleFilterAxes = [];
+    this.showLastValidationResultBtn = false;
+    this.isDraftSaving = false;
     this.defaultUnits = [];
     this._formData = {};
     this._draftLoaded = false;
@@ -7193,8 +7207,12 @@ let JupiterDynamicForm = class extends LitElement {
     this._contextMenuX = 0;
     this._contextMenuY = 0;
     this._contextMenuRoleId = null;
+    this._validationStatus = "idle";
     this._skipDraftLoading = false;
     this._skipPeriodPreferencesRestore = false;
+    this._autoSaveTimer = null;
+    this._lastAutoSaveSnapshot = "";
+    this._lastSavedDraftSnapshot = "";
   }
   connectedCallback() {
     super.connectedCallback();
@@ -7221,8 +7239,29 @@ let JupiterDynamicForm = class extends LitElement {
         this.requestUpdate();
       }
     });
+    this._autoSaveTimer = setInterval(() => {
+      const currentSnapshot = JSON.stringify(this._formData);
+      if (this._lastAutoSaveSnapshot === "") {
+        this._lastAutoSaveSnapshot = currentSnapshot;
+        console.log("ℹ️ [Auto Save] Baseline initialized; no draft save emitted.");
+        return;
+      }
+      if (currentSnapshot !== this._lastAutoSaveSnapshot) {
+        this._lastAutoSaveSnapshot = currentSnapshot;
+        this._handleSaveDraft("auto");
+      } else {
+        console.log("ℹ️ [Auto Save] No form state change detected; skipping draft save emit.");
+      }
+    }, 3e4);
     this._initializeForm();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._autoSaveTimer !== null) {
+      clearInterval(this._autoSaveTimer);
+      this._autoSaveTimer = null;
+    }
+  }
   updated(changedProperties) {
     if (changedProperties.has("language")) {
       I18n.setLanguage(this.language);
@@ -8641,7 +8680,7 @@ let JupiterDynamicForm = class extends LitElement {
       this._submitDisabled = false;
     }, 1e3);
   }
-  _handleSaveDraft() {
+  _handleSaveDraft(source = "manual") {
     console.log(`🔵 [Save Draft] Checking for errors...`);
     console.log(`🔵 [Save Draft] _xbrlFormErrors.length: ${this._xbrlFormErrors.length}`);
     console.log(`🔵 [Save Draft] _xbrlFormErrors:`, this._xbrlFormErrors);
@@ -8673,6 +8712,15 @@ let JupiterDynamicForm = class extends LitElement {
       this._periodData,
       this._unitData
     );
+    const draftPayloadSnapshot = JSON.stringify({
+      draftData,
+      metadata
+    });
+    if (draftPayloadSnapshot === this._lastSavedDraftSnapshot) {
+      console.log(`ℹ️ [Save Draft] No draft content change detected (${source}); skipping event emit.`);
+      return;
+    }
+    this._lastSavedDraftSnapshot = draftPayloadSnapshot;
     const saved = this._draftStorageService.saveDraft(draftData, metadata);
     console.log("💾 [Save Draft] Metadata saved with enhanced selectedRoleIds:", metadata.selectedRoleIds);
     this.dynaformsFacts = draftData;
@@ -8687,7 +8735,8 @@ let JupiterDynamicForm = class extends LitElement {
         errors: this._errors,
         // JSON data ready for external database storage
         dynaformsFacts: draftData,
-        dynaformsMetadata: metadata
+        dynaformsMetadata: metadata,
+        source: source == "auto" ? "auto" : "manual"
       },
       bubbles: true,
       composed: true
@@ -10419,6 +10468,20 @@ let JupiterDynamicForm = class extends LitElement {
     this._validateForm();
     return this._valid;
   }
+  /**
+   * Updates the validation status and footer UI accordingly.
+   * Called by the hosting application after triggering external validation.
+   * @param status 'inProgress' | 'cancel' | 'complete'
+   */
+  setValidation(status) {
+    console.log(`🔍 Validation status updated: ${status}`);
+    if (status === "cancel") {
+      this._validationStatus = "idle";
+    } else {
+      this._validationStatus = status;
+    }
+    this.requestUpdate();
+  }
   reset() {
     this._handleReset();
   }
@@ -10471,16 +10534,39 @@ let JupiterDynamicForm = class extends LitElement {
             <button 
               class="btn-secondary"
               @click="${this._handleSaveDraft}"
-              ?disabled="${this.disabled || this.readonly}"
+              ?disabled="${this.disabled || this.readonly || this.isDraftSaving}"
             >
-              ${I18n.t("form.saveDraft")}
+              ${this.isDraftSaving ? I18n.t("form.savingDraft") : I18n.t("form.saveDraft")}
             </button>
           ` : ""}
           
+
+          <!-- Validation state buttons -->
+          ${this._validationStatus === "inProgress" ? html`
+            <button
+              class="btn-preview"
+              @click="${() => this.dispatchEvent(new CustomEvent("showPreview", { bubbles: true, composed: true }))}"
+              ?disabled="${this.disabled || this.readonly}"
+            >
+              ${I18n.t("form.preview")}
+            </button>
+          ` : ""}
+
+          ${this._validationStatus === "complete" || this.showLastValidationResultBtn ? html`
+            <button
+              class="btn-last-results"
+              @click="${() => this.dispatchEvent(new CustomEvent("show-validation-results", { bubbles: true, composed: true }))}"
+              ?disabled="${this.disabled || this.readonly}"
+            >
+              ${I18n.t("form.lastValidationResults")}
+            </button>
+          ` : ""}
+
+
           <button
             class="btn-primary"
             @click="${this._handleSubmit}"
-            ?disabled="${this.disabled || this.readonly || this._submitDisabled}"
+            ?disabled="${this.disabled || this.readonly || this._submitDisabled || this._validationStatus === "inProgress"}"
           >
             ${this.submitButtonLabel || (this.mode === "admin" ? I18n.t("form.save") : I18n.t("form.submit"))}
           </button>
@@ -10702,6 +10788,50 @@ JupiterDynamicForm.styles = css`
       cursor: not-allowed;
     }
 
+    .btn-validate {
+      background: var(--jupiter-validate-color, #388e3c);
+      color: white;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .btn-validate:hover:not(:disabled) {
+      background: var(--jupiter-validate-color-dark, #2e7d32);
+    }
+
+    .btn-preview {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+    .btn-preview:hover:not(:disabled) {
+      background: var(--jupiter-primary-color-dark, #1565c0);
+    }
+
+    .btn-last-results {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+    .btn-last-results:hover:not(:disabled) {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .validation-spinner {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border: 2px solid rgba(255, 255, 255, 0.4);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      flex-shrink: 0;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
     .form-meta {
       display: flex;
       gap: 16px;
@@ -11324,6 +11454,12 @@ __decorateClass([
 __decorateClass([
   n2({ type: Array })
 ], JupiterDynamicForm.prototype, "roleFilterAxes", 2);
+__decorateClass([
+  n2({ type: Boolean, attribute: "show-last-validation-result-btn" })
+], JupiterDynamicForm.prototype, "showLastValidationResultBtn", 2);
+__decorateClass([
+  n2({ type: Boolean, attribute: "is-draft-saving" })
+], JupiterDynamicForm.prototype, "isDraftSaving", 2);
 __decorateClass([
   n2({ type: Array })
 ], JupiterDynamicForm.prototype, "defaultUnits", 2);
@@ -11435,6 +11571,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_contextMenuRoleId", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_validationStatus", 2);
 JupiterDynamicForm = __decorateClass([
   t$1("jupiter-dynamic-form")
 ], JupiterDynamicForm);