@visns-studio/visns-components 5.1.24 → 5.1.26

package/package.json

@@ -77,7 +77,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.1.24",
+    "version": "5.1.26",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/generic/GenericEditableTable.jsx

@@ -124,14 +124,16 @@ const GenericEditableTable = ({
     schedulingConfig,
     data,
     dataId,
-    modalOpen,
     preloadedOptions,
     setData,
 }) => {
-    const { columns, rows, form } = schedulingConfig;
+    const { columns, rows, form, title } = schedulingConfig;
     const hasCategory = rows && rows.categoryKey; // Only group if defined
 
     const [localData, setLocalData] = useState([]);
+    // For new (unsaved) entries: if grouped, store per group; if not, a single object.
+    const [newEntries, setNewEntries] = useState({});
+    const [newEntry, setNewEntry] = useState({});
 
     // Determine if a total column exists and its index.
     const totalColumnIndex = columns.findIndex((col) => col.type === 'total');
@@ -152,7 +154,6 @@ const GenericEditableTable = ({
     const calculateTotal = (entry, keys) => {
         let total = 0;
         if (Array.isArray(keys)) {
-            // Legacy format: simply sum up the values.
             total = keys.reduce(
                 (sum, key) => sum + (parseFloat(entry[key]) || 0),
                 0
@@ -165,7 +166,6 @@ const GenericEditableTable = ({
         ) {
             const priceKeys = keys.price;
             const unitKeys = keys.unit;
-            // If there's one unit key, use its value for all price keys.
             if (unitKeys.length === 1) {
                 const unitValue = parseFloat(entry[unitKeys[0]]) || 0;
                 total = priceKeys.reduce(
@@ -173,9 +173,7 @@ const GenericEditableTable = ({
                         sum + (parseFloat(entry[key]) || 0) * unitValue,
                     0
                 );
-            }
-            // Otherwise, if both arrays have the same length, multiply pair‑wise.
-            else if (priceKeys.length === unitKeys.length) {
+            } else if (priceKeys.length === unitKeys.length) {
                 total = priceKeys.reduce(
                     (sum, key, index) =>
                         sum +
@@ -228,16 +226,27 @@ const GenericEditableTable = ({
 
         dataArray.forEach((entry, index) => {
             const categoryInfo = entry[rows.categoryKey.id];
-            const categoryType = categoryInfo
+            const categoryLabel = categoryInfo
                 ? categoryInfo[rows.categoryKey.label]
                 : null;
             const categoryId = categoryInfo ? categoryInfo.id : null;
             const groupKey = categoryId || 'no_category';
+            // Use the category's sort_order if provided; otherwise, default to a high number (e.g. 9999)
+
+            console.info(categoryInfo);
+
+            const catSortOrder =
+                categoryInfo && typeof categoryInfo.sort_order !== 'undefined'
+                    ? categoryInfo.sort_order
+                    : 9999;
 
             if (!grouped[groupKey]) {
                 grouped[groupKey] = {
-                    id: categoryId || 'no_category',
-                    category: categoryType || '',
+                    id: groupKey,
+                    category:
+                        categoryLabel ||
+                        (groupKey === 'no_category' ? 'No Category' : ''),
+                    catSortOrder, // assign the sort order (or fallback)
                     entries: [],
                 };
             }
@@ -247,15 +256,23 @@ const GenericEditableTable = ({
             });
         });
 
+        // Sort entries within each group by their universal sort_order
         Object.values(grouped).forEach((group) => {
             group.entries.sort((a, b) => a.sort_order - b.sort_order);
         });
 
-        // Ensure 'no_category' group is at the top
+        // Now sort the groups by the cost category's sort_order (catSortOrder)
         const groupedArray = Object.values(grouped);
-        return groupedArray.sort((a, b) =>
-            a.id === 'no_category' ? -1 : b.id === 'no_category' ? 1 : 0
-        );
+        groupedArray.sort((a, b) => {
+            // Optionally, place 'no_category' first (or adjust as needed)
+            if (a.id === 'no_category') return -1;
+            if (b.id === 'no_category') return 1;
+            return a.catSortOrder - b.catSortOrder;
+        });
+
+        console.info(groupedArray);
+
+        return groupedArray;
     };
 
     const groupedCategories = useMemo(() => {
@@ -293,7 +310,7 @@ const GenericEditableTable = ({
             .catch(() => toast.error('Failed to copy to clipboard'));
     };
 
-    // Update a field’s value (keyCounter corresponds to the row index in sorted data)
+    // Update an existing field’s value
     const handleFieldChange = (value, fieldId, keyCounter) => {
         setLocalData((prev) => {
             const updatedDetail = [...prev];
@@ -400,6 +417,7 @@ const GenericEditableTable = ({
         });
     };
 
+    // Render existing row field (same as before)
     const renderScheduledTableField = (entry, column, keyCounter) => {
         if (!entry || !column) return null;
 
@@ -524,6 +542,222 @@ const GenericEditableTable = ({
         }
     };
 
+    // --- New row functions for inline creation ---
+
+    // Update new entry fields (for grouped or ungrouped)
+    const handleNewFieldChange = (value, fieldId, groupId = null) => {
+        if (hasCategory) {
+            setNewEntries((prev) => ({
+                ...prev,
+                [groupId]: {
+                    ...prev[groupId],
+                    [fieldId]: value,
+                },
+            }));
+        } else {
+            setNewEntry((prev) => ({
+                ...prev,
+                [fieldId]: value,
+            }));
+        }
+    };
+
+    // Add the new row to localData and update the backend
+    const handleAddNewEntry = (groupId = null) => {
+        const newRowData = hasCategory ? newEntries[groupId] || {} : newEntry;
+        if (!newRowData || Object.keys(newRowData).length === 0) {
+            toast.error('Please fill in some data before adding.');
+            return;
+        }
+        // Determine a new sort_order
+        const maxSortOrder = localData.reduce(
+            (max, row) => Math.max(max, row.sort_order || 0),
+            0
+        );
+        const newRow = {
+            ...newRowData,
+            id: `new-${Date.now()}`, // temporary ID; adjust as needed
+            sort_order: maxSortOrder + 1,
+        };
+
+        // For grouped data, prepopulate the category field if needed
+        if (hasCategory && groupId !== 'no_category') {
+            newRow[rows.categoryKey.id] = {
+                id: groupId,
+                [rows.categoryKey.label]: groupId,
+            };
+        }
+
+        setLocalData((prev) => {
+            const updated = [...prev, newRow];
+            debouncedUpdate({ [rows.key]: updated });
+            return updated;
+        });
+        // Reset the new entry state for the corresponding group or overall
+        if (hasCategory) {
+            setNewEntries((prev) => ({ ...prev, [groupId]: {} }));
+        } else {
+            setNewEntry({});
+        }
+        toast.success('Row added');
+    };
+
+    // Render a new row field (similar to renderScheduledTableField)
+    const renderNewRowField = (newRowData, column, groupId = null) => {
+        const value = newRowData ? newRowData[column.id] : '';
+        switch (column.type) {
+            case 'colour':
+                return (
+                    <ColourPicker
+                        value={value}
+                        columnId={column.id}
+                        keyCounter={0}
+                        onChange={(val) =>
+                            handleNewFieldChange(val, column.id, groupId)
+                        }
+                    />
+                );
+            case 'currency':
+            case 'number':
+                return (
+                    <input
+                        type="text"
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                    />
+                );
+            case 'date':
+                return (
+                    <input
+                        type="date"
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                    />
+                );
+            case 'dropdown':
+                return (
+                    <select
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                    >
+                        {column.options.map((option) => (
+                            <option key={option.id} value={option.id}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                );
+            case 'dropdown-ajax': {
+                const options = preloadedOptions[column.id] || [];
+                return (
+                    <select
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                    >
+                        <option>Select an Option</option>
+                        {options.map((option) => (
+                            <option key={option.id} value={option.id}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                );
+            }
+            case 'multi-dropdown-ajax': {
+                const multiOptions = preloadedOptions[column.id] || [];
+                return (
+                    <MultiSelect
+                        settings={{ id: column.id, compact: true }}
+                        className={styles.selectFullWidth}
+                        multi={false}
+                        onChange={(value) =>
+                            handleNewFieldChange(value, column.id, groupId)
+                        }
+                        inputValue={value || ''}
+                        options={multiOptions}
+                    />
+                );
+            }
+            case 'total': {
+                const subtotal = calculateTotal(newRowData || {}, column.keys);
+                return new Intl.NumberFormat('en-AU', {
+                    style: 'currency',
+                    currency: 'AUD',
+                }).format(subtotal);
+            }
+            default:
+                return (
+                    <input
+                        type="text"
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                    />
+                );
+        }
+    };
+
+    // Render the new row form (for grouped or ungrouped data)
+    const renderNewRowForm = (groupId = null) => {
+        const newRowData = hasCategory ? newEntries[groupId] || {} : newEntry;
+        return (
+            <tr className={styles.newRow}>
+                {columns.map((column) => (
+                    <td
+                        key={column.id}
+                        style={{
+                            textAlign:
+                                column.type === 'currency' ? 'right' : 'left',
+                        }}
+                    >
+                        {renderNewRowField(newRowData, column, groupId)}
+                    </td>
+                ))}
+                <td>
+                    <div className={styles.tdactions}>
+                        <button
+                            className={styles.btn_compact}
+                            onClick={() => handleAddNewEntry(groupId)}
+                        >
+                            Add
+                        </button>
+                    </div>
+                </td>
+            </tr>
+        );
+    };
+
     // Render header cell with a label and copy icon
     const renderHeaderCell = (column, group = null) => (
         <th
@@ -556,7 +790,7 @@ const GenericEditableTable = ({
     return (
         <div className={styles.gridtxt}>
             <div className={styles.gridtxt__header}>
-                <span>{schedulingConfig.title || 'Estimation Schedule'}</span>
+                <span>{title || 'Estimation Schedule'}</span>
             </div>
             {hasCategory ? (
                 groupedCategories.length > 0 ? (
@@ -652,6 +886,8 @@ const GenericEditableTable = ({
                                             </td>
                                         </tr>
                                     ))}
+                                    {/* Render the inline new row for this category */}
+                                    {renderNewRowForm(group.id)}
                                     {/* Render subtotal row for group only if a total column exists */}
                                     {totalColumnIndex !== -1 && (
                                         <tr className={styles.subtotalRow}>
@@ -781,6 +1017,8 @@ const GenericEditableTable = ({
                                 </td>
                             </tr>
                         ))}
+                        {/* Render the inline new row at the bottom */}
+                        {renderNewRowForm()}
                         {/* Render overall subtotal row only if a total column exists */}
                         {totalColumnIndex !== -1 && (
                             <tr className={styles.subtotalRow}>
@@ -829,17 +1067,6 @@ const GenericEditableTable = ({
                     reloading the data.
                 </div>
             )}
-
-            <div className={styles.polActions}>
-                <button
-                    className={styles.btn}
-                    onClick={() => {
-                        modalOpen('create', 0);
-                    }}
-                >
-                    Add
-                </button>
-            </div>
         </div>
     );
 };

package/src/components/crm/generic/styles/GenericEditableTable.module.scss

@@ -144,12 +144,35 @@
     outline: none;
     transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
     font-size: 1.25em;
+
+    &:hover {
+        color: var(--primary-color);
+        background: var(--highlight-color);
+        border: 1px solid rgba(var(--highlight-rgb), 1.05);
+    }
 }
 
-.btn:hover {
-    color: var(--primary-color);
-    background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-rgb), 1.05);
+.btn_compact {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.4rem 0.75rem; /* Reduced padding for a compact look */
+    cursor: pointer;
+    font-size: 1rem; /* Slightly smaller font size */
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+
+    &:hover {
+        color: var(--primary-color);
+        background: var(--highlight-color);
+        border: 1px solid rgba(var(--highlight-rgb), 1.05);
+    }
 }
 
 .tdactions {
@@ -326,3 +349,12 @@
 .react-select__indicators {
     padding: 0 0.25rem;
 }
+
+.newRow {
+    background-color: rgba(
+        var(--primary-rgb),
+        0.15
+    ); /* Slightly lighter background */
+    border-top: 1px dashed rgba(var(--primary-rgb), 0.3);
+    border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3);
+}