@visns-studio/visns-components 5.21.0 → 5.22.0

package/package.json

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

package/src/components/DataGrid.jsx

@@ -95,6 +95,7 @@ import {
     renderArrayCountColumn,
     renderColourColumn,
     renderDropdownColumn,
+    renderMultiDropdownColumn,
     renderImageColumn,
     renderFileColumn,
     renderIconsColumn,
@@ -2762,7 +2763,7 @@ const DataGrid = forwardRef(
             500
         );
 
-        const getDropdownData = async (ids, url, fields, where) => {
+        const getDropdownData = async (ids, url, fields, where, orderBy) => {
             // Concatenate id array into a single string if it's an array
             const uniqueId = Array.isArray(ids) ? ids.join('') : ids;
 
@@ -2772,6 +2773,9 @@ const DataGrid = forwardRef(
                     const res = await CustomFetch(url, 'POST', {
                         fields,
                         where,
+                        // e.g. orderBy: 'sort_order' so option order follows
+                        // the managed sort instead of the endpoint default
+                        ...(orderBy && { orderBy }),
                     });
                     resolve({ [uniqueId]: res.data.data }); // Correctly use uniqueId as the key
                 } catch (err) {
@@ -2783,13 +2787,16 @@ const DataGrid = forwardRef(
 
         useEffect(() => {
             const dropdownFetches = columns
-                .filter((column) => column.type === 'dropdown')
+                .filter((column) =>
+                    ['dropdown', 'multiDropdown'].includes(column.type)
+                )
                 .map((column) =>
                     getDropdownData(
                         column.id,
                         column.url,
                         column.fields,
-                        column.where
+                        column.where,
+                        column.orderBy
                     )
                 );
 
@@ -3079,6 +3086,15 @@ const DataGrid = forwardRef(
                                     dropdownData,
                                     handleDropdownUpdate,
                                 });
+                            case 'multiDropdown':
+                                return renderMultiDropdownColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                    dropdownData,
+                                    handleDropdownUpdate,
+                                });
                             case 'file':
                                 return renderFileColumn({
                                     column,

package/src/components/Form.jsx

@@ -1448,6 +1448,8 @@ function Form({
                         let fileUpload = false;
                         let fileKey = '';
                         let fileFieldSetting = '';
+                        const fileKeys = [];
+                        const fileFieldSettings = {};
 
                         if (
                             formSettings.customUrl &&
@@ -1518,11 +1520,14 @@ function Form({
                                 ) {
                                     fileUpload = true;
                                     fileKey = item;
+                                    fileKeys.push(item);
 
                                     if (formSettings.fields.length > 0) {
                                         formSettings.fields.forEach((field) => {
                                             if (field.id === item) {
                                                 fileFieldSetting = field;
+                                                fileFieldSettings[item] =
+                                                    field;
                                             }
                                         });
                                     }
@@ -1608,60 +1613,134 @@ function Form({
                                 updatedFormData['uploadedFiles'] =
                                     await Promise.all(uploadPromises);
                             } else {
-                                // Optimize image if it's an image file
-                                const optimizedFile =
-                                    await optimizeImageIfNeeded(
-                                        updatedFormData[fileKey]
+                                // Single-File fields. JSON forms can carry
+                                // several in one save (e.g. a bio's photo +
+                                // document); upload each and attach a
+                                // field-scoped descriptor so the backend
+                                // stores the file against that exact field.
+                                // Non-JSON forms keep the original
+                                // one-file-per-save behaviour, driven by the
+                                // request-level metadata below.
+                                const singleFileKeys = formSettings.json
+                                    ? fileKeys.filter(
+                                          (k) =>
+                                              updatedFormData[k] instanceof
+                                              File
+                                      )
+                                    : [fileKey];
+
+                                for (const fieldId of singleFileKeys) {
+                                    const originalName =
+                                        updatedFormData[fieldId].name;
+
+                                    // Optimize image if it's an image file
+                                    const optimizedFile =
+                                        await optimizeImageIfNeeded(
+                                            updatedFormData[fieldId]
+                                        );
+
+                                    const toastId = toast.info(
+                                        `Uploading ${originalName}`,
+                                        {
+                                            progress: 0,
+                                            autoClose: false,
+                                        }
                                     );
 
-                                const toastId = toast.info(
-                                    `Uploading ${updatedFormData[fileKey].name}`,
-                                    {
-                                        progress: 0,
-                                        autoClose: false,
-                                    }
-                                );
+                                    const fileRes = await Vapor.store(
+                                        optimizedFile,
+                                        {
+                                            progress: (progress) => {
+                                                setUploadProgress(
+                                                    progress * 100
+                                                );
+                                                toast.update(toastId, {
+                                                    progress,
+                                                });
+                                            },
+                                        }
+                                    );
 
-                                const fileRes = await Vapor.store(
-                                    optimizedFile,
-                                    {
-                                        progress: (progress) => {
-                                            setUploadProgress(progress * 100);
-                                            toast.update(toastId, {
-                                                progress,
-                                            });
-                                        },
+                                    toast.update(toastId, {
+                                        render: `${originalName} uploaded successfully!`,
+                                        type: 'success',
+                                        autoClose: 3000,
+                                    });
+
+                                    updatedFormData['uuid'] = fileRes.uuid;
+                                    updatedFormData['key'] = fileRes.key;
+                                    updatedFormData['bucket'] = fileRes.bucket;
+                                    updatedFormData['filename'] = originalName;
+                                    updatedFormData['filesize'] =
+                                        optimizedFile.size;
+                                    updatedFormData['extension'] =
+                                        fileRes.extension;
+                                    updatedFormData['file_relationship'] =
+                                        fieldId;
+                                    updatedFormData['fileable_field'] = (
+                                        fileFieldSettings[fieldId] ||
+                                        fileFieldSetting
+                                    ).fileable_field;
+
+                                    if (formSettings.json) {
+                                        // Replace the raw File (which would
+                                        // serialise to junk in the JSON
+                                        // payload) with an upload descriptor
+                                        // the backend materialises into a
+                                        // {file_path, file_name, ...} object.
+                                        updatedFormData[fieldId] = {
+                                            _vaporUpload: true,
+                                            uuid: fileRes.uuid,
+                                            key: fileRes.key,
+                                            bucket: fileRes.bucket,
+                                            filename: originalName,
+                                            filesize: optimizedFile.size,
+                                            extension: fileRes.extension,
+                                        };
                                     }
-                                );
-
-                                toast.update(toastId, {
-                                    render: `${updatedFormData[fileKey].name} uploaded successfully!`,
-                                    type: 'success',
-                                    autoClose: 3000,
-                                });
-
-                                updatedFormData['uuid'] = fileRes.uuid;
-                                updatedFormData['key'] = fileRes.key;
-                                updatedFormData['bucket'] = fileRes.bucket;
-                                updatedFormData['filename'] =
-                                    updatedFormData[fileKey].name;
-                                updatedFormData['filesize'] =
-                                    optimizedFile.size;
-                                updatedFormData['extension'] =
-                                    fileRes.extension;
-                                updatedFormData['file_relationship'] = fileKey;
-                                updatedFormData['fileable_field'] =
-                                    fileFieldSetting.fileable_field;
+                                }
                             }
                         }
 
-                        // Transform keys with dots into nested objects
+                        // Transform keys with dots into nested objects.
+                        // Walks every dot segment (not just two) so ids like
+                        // "transport.visit_before_after.yes_before_other" nest
+                        // correctly, and merges plain objects instead of
+                        // replacing them so sibling keys written by other
+                        // fields on the same path survive regardless of key
+                        // order.
+                        const isPlainObject = (value) =>
+                            value !== null &&
+                            typeof value === 'object' &&
+                            (value.constructor === Object ||
+                                value.constructor === undefined);
+
                         let payload = Object.keys(updatedFormData).reduce(
                             (acc, key) => {
                                 if (key.includes('.')) {
-                                    const [root, sub] = key.split('.');
-                                    if (!acc[root]) acc[root] = {};
-                                    acc[root][sub] = updatedFormData[key];
+                                    const segments = key.split('.');
+                                    let node = acc;
+
+                                    for (
+                                        let i = 0;
+                                        i < segments.length - 1;
+                                        i++
+                                    ) {
+                                        if (!isPlainObject(node[segments[i]])) {
+                                            node[segments[i]] = {};
+                                        }
+                                        node = node[segments[i]];
+                                    }
+
+                                    const last =
+                                        segments[segments.length - 1];
+                                    const value = updatedFormData[key];
+
+                                    node[last] =
+                                        isPlainObject(value) &&
+                                        isPlainObject(node[last])
+                                            ? { ...node[last], ...value }
+                                            : value;
                                 } else {
                                     acc[key] = updatedFormData[key];
                                 }
@@ -2115,10 +2194,12 @@ function Form({
                             let value = data;
 
                             for (let key of keys) {
-                                value = value?.[key] || null;
+                                // ?? (not ||) so falsy-but-real values like
+                                // false, 0 and '' survive the walk
+                                value = value?.[key] ?? null;
 
                                 // If value becomes null, break out of the loop
-                                if (!value) break;
+                                if (value === null) break;
                             }
 
                             updatedFormData[item] = value;

package/src/components/columns/ColumnRenderers.jsx

@@ -1,6 +1,7 @@
 import numeral from 'numeral';
 import moment from 'moment';
 import parse from 'html-react-parser';
+import Select from 'react-select';
 import { Download, AlarmClock } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CellWithTooltip from '../cells/CellWithTooltip';
@@ -361,16 +362,54 @@ export const renderDropdownColumn = ({
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
         render: ({ data }) => {
+            let optionsList =
+                dropdownData[column.id] && dropdownData[column.id].length > 0
+                    ? dropdownData[column.id]
+                    : column.options || [];
+
+            // Keep historical selections visible/selectable: if the row's
+            // current related entry isn't in the options (e.g. it has been
+            // deactivated), prepend it so the select can still display it.
+            const currentRelated = data[column.id];
+            if (
+                currentRelated &&
+                typeof currentRelated === 'object' &&
+                currentRelated.id &&
+                !optionsList.some((o) => o.id === currentRelated.id)
+            ) {
+                const currentLabel =
+                    currentRelated.label ??
+                    currentRelated.name ??
+                    currentRelated.title;
+                if (currentLabel) {
+                    optionsList = [
+                        { id: currentRelated.id, label: currentLabel },
+                        ...optionsList,
+                    ];
+                }
+            }
+
             return (
                 <select
                     name={column.id}
                     value={data[column.id]?.id || data[column.id] || ''}
-                    style={{ 
-                        padding: '7px',
+                    style={{
+                        padding: '7px 22px 7px 7px',
                         width: '100%',
                         border: 'none',
                         backgroundColor: 'transparent',
                         outline: 'none',
+                        cursor: 'pointer',
+                        // Consistent affordance across browsers: strip the
+                        // native arrow and draw a subtle chevron so the
+                        // cell visibly reads as a dropdown
+                        appearance: 'none',
+                        WebkitAppearance: 'none',
+                        MozAppearance: 'none',
+                        backgroundImage:
+                            "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23999999' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>\")",
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'right 6px center',
                     }}
                     onChange={(e) => {
                         e.preventDefault();
@@ -390,23 +429,23 @@ export const renderDropdownColumn = ({
                     }}
                 >
                     <option value="">
-                        Select {/^[aeioAEIO]/.test(column.label) ? 'an' : 'a'}{' '}
-                        {column.label}
+                        {/* fallbackKey: surface a legacy free-text value
+                            (recorded before the relation existed) as the
+                            placeholder so it stays readable until a managed
+                            option is chosen */}
+                        {!(data[column.id]?.id || data[column.id]) &&
+                        column.fallbackKey &&
+                        data[column.fallbackKey]
+                            ? String(data[column.fallbackKey])
+                            : `Select ${
+                                  /^[aeioAEIO]/.test(column.label) ? 'an' : 'a'
+                              } ${column.label}`}
                     </option>
-                    {dropdownData[column.id] &&
-                    dropdownData[column.id].length > 0
-                        ? dropdownData[column.id].map((option, index) => (
-                              <option value={option.id} key={index}>
-                                  {option.label}
-                              </option>
-                          ))
-                        : column.options && column.options.length > 0
-                        ? column.options.map((option, index) => (
-                              <option value={option.id} key={index}>
-                                  {option.label}
-                              </option>
-                          ))
-                        : null}
+                    {optionsList.map((option, index) => (
+                        <option value={option.id} key={index}>
+                            {option.label}
+                        </option>
+                    ))}
                 </select>
             );
         },
@@ -452,6 +491,120 @@ export const renderDropdownColumn = ({
     };
 };
 
+// MultiDropdown Column Renderer — inline editor for belongsToMany
+// relations. Chips come from the row's loaded relation (so historical
+// selections of deactivated entries keep displaying); options come from
+// the column's dropdown url; saving PUTs the selected id array to
+// column.update.key, which DynamicController syncs on the pivot.
+export const renderMultiDropdownColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+    dropdownData,
+    handleDropdownUpdate,
+}) => {
+    const columnId = Array.isArray(column.id) ? column.id.join('-') : column.id;
+    const nameFrom = column.nameFrom || 'label';
+
+    return {
+        ...commonProps,
+        name: columnId,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        render: ({ data }) => {
+            const relationKey = Array.isArray(column.id)
+                ? column.id[0]
+                : column.id;
+            const current = Array.isArray(data[relationKey])
+                ? data[relationKey]
+                : [];
+
+            const value = current.map((entry) => ({
+                value: entry.id,
+                label: entry[nameFrom] ?? entry.label ?? entry.name ?? '',
+            }));
+
+            const options = (
+                dropdownData[column.id]?.length
+                    ? dropdownData[column.id]
+                    : column.options || []
+            ).map((o) => ({ value: o.id, label: o.label }));
+
+            // fallbackKey: a legacy free-text value shows as the
+            // placeholder until managed entries are selected
+            const placeholder =
+                value.length === 0 &&
+                column.fallbackKey &&
+                data[column.fallbackKey]
+                    ? String(data[column.fallbackKey])
+                    : 'Select...';
+
+            return (
+                <Select
+                    isMulti
+                    options={options}
+                    value={value}
+                    placeholder={placeholder}
+                    isClearable={false}
+                    menuPortalTarget={
+                        typeof document !== 'undefined'
+                            ? document.body
+                            : undefined
+                    }
+                    menuPlacement="auto"
+                    styles={{
+                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                        control: (base) => ({
+                            ...base,
+                            border: 'none',
+                            boxShadow: 'none',
+                            backgroundColor: 'transparent',
+                            minHeight: 'unset',
+                        }),
+                        valueContainer: (base) => ({
+                            ...base,
+                            padding: '0 4px',
+                        }),
+                        multiValue: (base) => ({
+                            ...base,
+                            margin: '1px 2px',
+                        }),
+                        multiValueLabel: (base) => ({
+                            ...base,
+                            fontSize: '12px',
+                            padding: '1px 4px',
+                        }),
+                        placeholder: (base) => ({
+                            ...base,
+                            color: '#777',
+                        }),
+                        indicatorSeparator: () => ({ display: 'none' }),
+                        dropdownIndicator: (base) => ({
+                            ...base,
+                            padding: '0 4px',
+                        }),
+                    }}
+                    onChange={(selected) => {
+                        if (
+                            column.update?.key &&
+                            column.update?.url &&
+                            column.update?.method
+                        ) {
+                            handleDropdownUpdate(
+                                column.update.key,
+                                `${column.update.url}/${data.id}`,
+                                column.update.method,
+                                (selected || []).map((s) => s.value)
+                            );
+                        }
+                    }}
+                />
+            );
+        },
+    };
+};
+
 // Image Column Renderer
 export const renderImageColumn = ({ column, commonProps }) => {
     return {
@@ -1524,6 +1677,17 @@ export const renderRelationArrayColumn = ({
                             : '';
                 }
 
+                // fallbackKey: when the relation is empty, display a flat
+                // field from the row instead (e.g. legacy free-text values
+                // recorded before the relation existed)
+                if (
+                    result === '' &&
+                    column.fallbackKey &&
+                    data[column.fallbackKey]
+                ) {
+                    result = String(data[column.fallbackKey]);
+                }
+
                 return (
                     <CellWithTooltip
                         value={result}

package/src/components/generic/GenericDetail.jsx

@@ -885,11 +885,35 @@ function GenericDetail({
             size,
             truncateLength,
         } = item;
-        const value =
+        let value =
             relation && relation.length > 0 && type !== 'total'
                 ? getValueFromData(data, [...relation], id, type)
                 : getValueFromData(data, [], id, type);
 
+        // fallbackKey: when the resolved (relation) value is empty, fall
+        // back to a flat field on the record — keeps legacy free-text
+        // values visible after a field moves to a managed relation
+        if (
+            (value === '' || value === null || value === undefined) &&
+            item.fallbackKey &&
+            data[item.fallbackKey]
+        ) {
+            value = data[item.fallbackKey];
+        }
+        // suffixKey: append a companion flat field in parentheses (e.g.
+        // the "Other" free text alongside managed selections). Skipped
+        // when the value IS that field already (fallback case above).
+        else if (
+            value !== '' &&
+            value !== null &&
+            value !== undefined &&
+            item.suffixKey &&
+            data[item.suffixKey] &&
+            data[item.suffixKey] !== value
+        ) {
+            value = `${value} (${data[item.suffixKey]})`;
+        }
+
         const stringValue = String(value ?? ''); // Convert value to a string
 
         // Conditionally truncate the value if the 'truncate' key is present