jupiter-dynamic-forms 1.7.3 → 1.8.1

package/dist/index.mjs

@@ -2701,16 +2701,34 @@ let JupiterFormSection = class extends LitElement {
     this.disabled = false;
     this.collapsible = true;
     this.locale = "en-US";
+    this.isFirstSection = false;
     this.availableDimensions = [];
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
     this._expandedConcepts = /* @__PURE__ */ new Set();
+    this._allTreeExpanded = false;
   }
   connectedCallback() {
     super.connectedCallback();
     this._expanded = this.section.expanded !== false;
     this._determinePeriodType();
+    this._checkAndExpandFirstSection();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("isFirstSection") || changedProperties.has("section")) {
+      this._checkAndExpandFirstSection();
+    }
+  }
+  _checkAndExpandFirstSection() {
+    if (this.isFirstSection && this.section && this.section.concepts) {
+      this._expanded = true;
+      setTimeout(() => {
+        this._expandAllTrees();
+        console.log("🎯 First section detected - expanded section and tree by default");
+      }, 0);
+    }
   }
   _determinePeriodType() {
     const nonAbstractConcepts = this._getAllNonAbstractConcepts(this.section.concepts);
@@ -2843,6 +2861,50 @@ let JupiterFormSection = class extends LitElement {
     }
     return result;
   }
+  _getAllConceptIds(concepts) {
+    const result = [];
+    for (const concept of concepts) {
+      if (concept.children && concept.children.length > 0) {
+        result.push(concept.id);
+        result.push(...this._getAllConceptIds(concept.children));
+      }
+    }
+    return result;
+  }
+  _expandAllTrees() {
+    const allConceptIds = this._getAllConceptIds(this.section.concepts || []);
+    allConceptIds.forEach((id) => this._expandedConcepts.add(id));
+    this._allTreeExpanded = true;
+    this.requestUpdate();
+  }
+  _collapseAllTrees() {
+    this._expandedConcepts.clear();
+    this._allTreeExpanded = false;
+    this.requestUpdate();
+  }
+  _toggleAllTrees(event) {
+    event.stopPropagation();
+    if (!this._expanded) {
+      this._expanded = true;
+    }
+    if (this._allTreeExpanded) {
+      this._collapseAllTrees();
+    } else {
+      this._expandAllTrees();
+    }
+  }
+  _handleTreeCheckboxChange(event) {
+    event.stopPropagation();
+    const checkbox = event.target;
+    if (!this._expanded) {
+      this._expanded = true;
+    }
+    if (checkbox.checked) {
+      this._expandAllTrees();
+    } else {
+      this._collapseAllTrees();
+    }
+  }
   _handleConceptExpand(event) {
     event.stopPropagation();
     const { conceptId, expanded } = event.detail;
@@ -2851,6 +2913,8 @@ let JupiterFormSection = class extends LitElement {
     } else {
       this._expandedConcepts.delete(conceptId);
     }
+    const allConceptIds = this._getAllConceptIds(this.section.concepts || []);
+    this._allTreeExpanded = allConceptIds.length > 0 && allConceptIds.every((id) => this._expandedConcepts.has(id));
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("concept-expand", {
       detail: event.detail,
@@ -2885,8 +2949,10 @@ let JupiterFormSection = class extends LitElement {
               <p class="section-description">${this.section.description}</p>
             ` : ""}
           </div>
-          <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
-            ${this.collapsible ? "▶" : ""}
+          <div class="section-header-controls">
+            <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
+              ${this.collapsible ? "▶" : ""}
+            </div>
           </div>
         </div>
         
@@ -2906,8 +2972,19 @@ let JupiterFormSection = class extends LitElement {
             <p class="section-description">${this.section.description}</p>
           ` : ""}
         </div>
-        <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
-          ${this.collapsible ? "▶" : ""}
+        <div class="section-header-controls">
+          <div class="tree-control">
+            <input
+              type="checkbox"
+              class="tree-control-checkbox"
+              .checked="${this._allTreeExpanded}"
+              @change="${this._handleTreeCheckboxChange}"
+            />
+            <span class="tree-control-label" @click="${this._toggleAllTrees}">${this._allTreeExpanded ? "Collapse Tree" : "Expand Tree"}</span>
+          </div>
+          <div class="section-toggle ${this.collapsible ? this._expanded ? "expanded" : "" : "hidden"}">
+            ${this.collapsible ? "▶" : ""}
+          </div>
         </div>
       </div>
 
@@ -3063,6 +3140,43 @@ JupiterFormSection.styles = css`
       visibility: hidden;
     }
 
+    .section-header-controls {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .tree-control {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      background: var(--jupiter-button-background, #fff);
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      padding: 4px 8px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .tree-control:hover {
+      background: var(--jupiter-button-hover-background, #f5f5f5);
+      border-color: var(--jupiter-primary-color, #007bff);
+    }
+
+    .tree-control-checkbox {
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+    }
+
+    .tree-control-label {
+      cursor: pointer;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
     .section-content {
       display: block;
       transition: max-height 0.3s ease;
@@ -3242,6 +3356,9 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: String })
 ], JupiterFormSection.prototype, "locale", 2);
+__decorateClass$2([
+  n2({ type: Boolean })
+], JupiterFormSection.prototype, "isFirstSection", 2);
 __decorateClass$2([
   n2({ type: Array })
 ], JupiterFormSection.prototype, "availableDimensions", 2);
@@ -3257,6 +3374,9 @@ __decorateClass$2([
 __decorateClass$2([
   r()
 ], JupiterFormSection.prototype, "_expandedConcepts", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_allTreeExpanded", 2);
 JupiterFormSection = __decorateClass$2([
   t$1("jupiter-form-section")
 ], JupiterFormSection);
@@ -3511,12 +3631,6 @@ let JupiterFilterRolesDialog = class extends LitElement {
                     />
                     <div class="role-info">
                       <h4 class="role-title">${role.title}</h4>
-                      ${role.description ? html`
-                        <p class="role-description">${role.description}</p>
-                      ` : ""}
-                      ${role.id !== role.title ? html`
-                        <p class="role-description">ID: ${role.id}</p>
-                      ` : ""}
                       ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
                         <p class="role-description">URI: ${role.metadata.roleURI}</p>
                       ` : ""}
@@ -3917,10 +4031,17 @@ let JupiterDynamicForm = class extends LitElement {
         );
         console.log("✅ Generated schema with sections:", this._currentSchema.sections.length);
         this._allSections = [...this._currentSchema.sections];
-        if (this._allSections.length > 10 && this._selectedRoleIds.length === 0) {
-          this._selectedRoleIds = this._allSections.slice(0, 10).map((section) => section.id);
-        } else if (this._selectedRoleIds.length === 0) {
-          this._selectedRoleIds = this._allSections.map((section) => section.id);
+        if (this._selectedRoleIds.length === 0) {
+          if (this._allSections.length > 10) {
+            this._selectedRoleIds = [];
+            this._showFilterDialog = true;
+            this._currentSchema = {
+              ...this._currentSchema,
+              sections: []
+            };
+          } else {
+            this._selectedRoleIds = this._allSections.map((section) => section.id);
+          }
         }
         this._applyRoleFilter();
         this._columns = [
@@ -3981,6 +4102,15 @@ let JupiterDynamicForm = class extends LitElement {
   _applyRoleFilter() {
     if (!this._currentSchema || !this._allSections.length)
       return;
+    console.log(`🔍 Applying role filter: ${this._selectedRoleIds.length} selected out of ${this._allSections.length} total`);
+    if (this._selectedRoleIds.length === 0) {
+      console.log(`📝 No roles selected - showing empty form`);
+      this._currentSchema = {
+        ...this._currentSchema,
+        sections: []
+      };
+      return;
+    }
     this._preserveDataForHiddenSections();
     const filteredSections = this._allSections.filter(
       (section) => this._selectedRoleIds.includes(section.id)
@@ -4063,12 +4193,14 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleFilterDialogCancel() {
     this._showFilterDialog = false;
+    console.log(`🚫 Filter dialog cancelled. Current selection: ${this._selectedRoleIds.length}/${this._allSections.length}`);
   }
   _handleRoleFilterApply(event) {
     const { selectedRoleIds } = event.detail;
     this._selectedRoleIds = selectedRoleIds;
     this._applyRoleFilter();
     this._showFilterDialog = false;
+    console.log(`🎯 Applied role filter: ${selectedRoleIds.length}/${this._allSections.length} roles selected`);
     this.dispatchEvent(new CustomEvent("roles-filter-changed", {
       detail: {
         selectedRoleIds,
@@ -4907,8 +5039,14 @@ let JupiterDynamicForm = class extends LitElement {
             </div>
           ` : ""}
 
-          <!-- Form Sections -->
-          ${schema.sections.map((section) => html`
+          <!-- Form Sections or No Selection Message -->
+          ${schema.sections.length === 0 && this._allSections.length > 10 ? html`
+            <div class="no-roles-message">
+              <h3>No Roles Selected</h3>
+              <p>Please use the "Filter Roles" button below to select which sections you want to work with.</p>
+              <p>Available roles: ${this._allSections.length}</p>
+            </div>
+          ` : schema.sections.map((section, index) => html`
             <jupiter-form-section
               .section="${section}"
               .columns="${section.columns || this._columns}"
@@ -4917,6 +5055,7 @@ let JupiterDynamicForm = class extends LitElement {
               .disabled="${this.disabled || this.readonly}"
               .collapsible="${config.collapsibleSections !== false}"
               .locale="${config.locale || "en-US"}"
+              .isFirstSection="${index === 0}"
               .availableDimensions="${this._getAvailableDimensionsForSection(section.id)}"
               @field-change="${this._handleFieldChange}"
               @typed-member-change="${this._handleTypedMemberChange}"
@@ -4940,7 +5079,7 @@ let JupiterDynamicForm = class extends LitElement {
               <svg class="filter-icon" viewBox="0 0 24 24">
                 <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
               </svg>
-              Filter Roles
+              ${this._selectedRoleIds.length === 0 ? "Select Roles" : "Filter Roles"}
               <span class="roles-count">${this._selectedRoleIds.length}/${this._allSections.length}</span>
             </button>
           ` : ""}
@@ -5154,6 +5293,25 @@ JupiterDynamicForm.styles = css`
       min-width: 18px;
       justify-content: center;
     }
+
+    .no-roles-message {
+      padding: 40px;
+      text-align: center;
+      color: var(--jupiter-text-secondary, #666);
+      background: var(--jupiter-background-light, #f8f9fa);
+      border-radius: 8px;
+      margin: 20px 0;
+    }
+
+    .no-roles-message h3 {
+      margin: 0 0 16px 0;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .no-roles-message p {
+      margin: 8px 0;
+      line-height: 1.5;
+    }
   `;
 __decorateClass([
   n2({ type: Object })