@visns-studio/visns-components 5.15.17 → 5.15.19

package/package.json

@@ -24,7 +24,7 @@
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "browser-image-compression": "^2.0.2",
-        "dayjs": "^1.11.14",
+        "dayjs": "^1.11.15",
         "fabric": "^6.7.1",
         "file-saver": "^2.0.5",
         "framer-motion": "^12.23.12",
@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.17",
+    "version": "5.15.19",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/generic/GenericReport.jsx

@@ -287,6 +287,45 @@ const formatName = (name) => {
         .join(' ');
 };
 
+// Enhanced function to format pivot field names with context from end table
+const formatPivotFieldName = (fieldName, pivotTableName, joins, definition = null) => {
+    if (!fieldName || !pivotTableName) return formatName(fieldName);
+    
+    // Find if this pivot table has an associated end table through joins
+    const pivotJoin = joins.find(join => 
+        join.targetTable === pivotTableName && join.autoIncludeEndTable
+    );
+    
+    if (pivotJoin && pivotJoin.endTable) {
+        // Get a user-friendly name for the end table
+        const endTableDisplay = getTableDisplayName(pivotJoin.endTable, definition);
+        
+        // Create contextual field names for common pivot fields
+        const contextualMappings = {
+            'area': `${endTableDisplay} Area`,
+            'duration': `${endTableDisplay} Duration`, 
+            'qty': `${endTableDisplay} Quantity`,
+            'quantity': `${endTableDisplay} Quantity`,
+            'start_date': `${endTableDisplay} Start Date`,
+            'end_date': `${endTableDisplay} End Date`,
+            'detail': `${endTableDisplay} Details`,
+            'notes': `${endTableDisplay} Notes`,
+            'status': `${endTableDisplay} Status`,
+        };
+        
+        const lowercaseField = fieldName.toLowerCase();
+        if (contextualMappings[lowercaseField]) {
+            return contextualMappings[lowercaseField];
+        }
+        
+        // For other fields, just prefix with end table name
+        return `${endTableDisplay} ${formatName(fieldName)}`;
+    }
+    
+    // Fallback to regular formatting
+    return formatName(fieldName);
+};
+
 // User-friendly terminology mapping
 const friendlyTerms = {
     // Database terms
@@ -711,8 +750,8 @@ const shouldHideField = (fieldName, fieldType) => {
     const name = fieldName.toLowerCase();
     const type = fieldType.toLowerCase();
 
-    // Hide foreign keys (except main 'id')
-    if (name.endsWith('_id') && name !== 'id') return true;
+    // Hide foreign keys and primary key IDs (confusing for non-dev users)
+    if (name.endsWith('_id') || name === 'id') return true;
 
     // Hide UUIDs
     if (name.includes('uuid') || type.includes('uuid')) return true;
@@ -1942,11 +1981,32 @@ const GenericReportImproved = ({
     // Add join relationship
     const addJoin = (joinData) => {
         const newJoin = { ...joinData, availableColumns: [] };
-        setJoins([...joins, newJoin]);
+        const joinsToAdd = [newJoin];
+        
+        // If this is a pivot relationship with auto-include end table, add both joins automatically
+        if (joinData.autoIncludeEndTable && joinData.secondJoin) {
+            const endTableJoin = { 
+                ...joinData.secondJoin, 
+                availableColumns: [],
+                isAutoIncludedEndTable: true 
+            };
+            joinsToAdd.push(endTableJoin);
+            
+            // Add end table to available tables list
+            if (!availableTables.includes(joinData.secondJoin.targetTable)) {
+                setAvailableTables(prev => [...prev, joinData.secondJoin.targetTable]);
+                // Fetch columns for the end table as well
+                setTimeout(() => {
+                    fetchJoinColumns(joinData.secondJoin.targetTable, joins.length + 1);
+                }, 100);
+            }
+        }
+        
+        setJoins([...joins, ...joinsToAdd]);
 
-        // Fetch columns for the joined table if not already available
+        // Fetch columns for the pivot table if not already available
         if (!availableTables.includes(joinData.targetTable)) {
-            setAvailableTables([...availableTables, joinData.targetTable]);
+            setAvailableTables(prev => [...prev, joinData.targetTable]);
             fetchJoinColumns(joinData.targetTable, joins.length); // Use current joins.length as index
         }
     };
@@ -4033,7 +4093,17 @@ const GenericReportImproved = ({
                 </div>
 
                 <div className={styles.tableColumnSections}>
-                    {allAvailableColumns.map((tableData) => (
+                    {allAvailableColumns
+                        .filter((tableData) => {
+                            // Hide table sections with 0 visible fields
+                            const visibleFieldsCount = tableData.columns.filter((col) =>
+                                tableData.isMainTable
+                                    ? !shouldHideField(col.name, col.type) || showHiddenFields
+                                    : !shouldHideField(col.name, col.type)
+                            ).length;
+                            return visibleFieldsCount > 0;
+                        })
+                        .map((tableData) => (
                         <div
                             key={tableData.tableName}
                             className={styles.tableSection}
@@ -5279,6 +5349,11 @@ const GenericReportImproved = ({
         joins.forEach((join) => {
             if (join.availableColumns) {
                 join.availableColumns.forEach((col) => {
+                    // Use enhanced pivot field naming for pivot tables
+                    const columnName = join.isPivotRelationship 
+                        ? formatPivotFieldName(col.name, join.targetTable, joins, definition)
+                        : formatName(col.name);
+                        
                     allColumns.push({
                         table: join.targetTable,
                         tableName: getTableDisplayName(
@@ -5286,7 +5361,7 @@ const GenericReportImproved = ({
                             definition
                         ),
                         column: col.name,
-                        columnName: formatName(col.name),
+                        columnName: columnName,
                         type: col.type,
                     });
                 });
@@ -5341,6 +5416,11 @@ const GenericReportImproved = ({
             if (join.availableColumns) {
                 join.availableColumns.forEach((col) => {
                     if (!shouldHideField(col.name, col.type)) {
+                        // Use enhanced pivot field naming for pivot tables
+                        const columnName = join.isPivotRelationship 
+                            ? formatPivotFieldName(col.name, join.targetTable, joins, definition)
+                            : formatName(col.name);
+                            
                         allColumns.push({
                             table: join.targetTable,
                             tableName: getTableDisplayName(
@@ -5348,7 +5428,7 @@ const GenericReportImproved = ({
                                 definition
                             ),
                             column: col.name,
-                            columnName: formatName(col.name),
+                            columnName: columnName,
                             type: col.type,
                         });
                     }

package/src/components/styles/GenericFormBuilder.module.scss

@@ -759,7 +759,7 @@ select:not(:placeholder-shown) + .fi__span {
     bottom: 20px;
     right: 20px;
     width: auto;
-    z-index: 5;
+    z-index: 50;
 
     button {
         display: block;