@visns-studio/visns-components 5.22.0 → 5.25.0

package/package.json

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

package/src/components/Form.jsx

@@ -1,6 +1,6 @@
 import './styles/global.css';
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { toast } from 'react-toastify';
@@ -71,7 +71,7 @@ function Form({
     closeModal,
     columnId,
     formType,
-    formSettings,
+    formSettings: formSettingsProp,
     fetchTable,
     mapbox,
     modalOpen,
@@ -97,6 +97,35 @@ function Form({
     const dataRef = useRef([]);
     const groupClickTimeoutRef = useRef(null);
 
+    // Hide fields restricted to roles the user doesn't have (field.roles array)
+    const formSettings = useMemo(() => {
+        if (!formSettingsProp?.fields?.length) {
+            return formSettingsProp;
+        }
+
+        const fields = formSettingsProp.fields.filter((field) => {
+            if (
+                !field.roles ||
+                !Array.isArray(field.roles) ||
+                field.roles.length === 0
+            ) {
+                return true;
+            }
+
+            return field.roles.some((requiredRole) =>
+                userProfile?.roles?.some(
+                    (userRole) => userRole.name === requiredRole
+                )
+            );
+        });
+
+        if (fields.length === formSettingsProp.fields.length) {
+            return formSettingsProp;
+        }
+
+        return { ...formSettingsProp, fields };
+    }, [formSettingsProp, userProfile]);
+
     const childDropdownCallback = (data) => {
         let _form = { ...formSettings };
 
@@ -1179,6 +1208,31 @@ function Form({
                         } else {
                             _inputClass[item.id] = ''; // Clear error class if not required
                         }
+
+                        // Numeric bounds validation (min / greaterThan) for filled values
+                        const numericValue = formData[item.id];
+                        if (
+                            (item.min !== undefined ||
+                                item.greaterThan !== undefined) &&
+                            numericValue !== null &&
+                            numericValue !== undefined &&
+                            numericValue !== '' &&
+                            !isNaN(Number(numericValue))
+                        ) {
+                            if (
+                                item.min !== undefined &&
+                                Number(numericValue) < item.min
+                            ) {
+                                validation += `${item.label} must be at least ${item.min}.<br/>`;
+                                _inputClass[item.id] = styles.inputError;
+                            } else if (
+                                item.greaterThan !== undefined &&
+                                Number(numericValue) <= item.greaterThan
+                            ) {
+                                validation += `${item.label} must be greater than ${item.greaterThan}.<br/>`;
+                                _inputClass[item.id] = styles.inputError;
+                            }
+                        }
                     });
 
                     setInputClass(_inputClass);
@@ -1816,6 +1870,7 @@ function Form({
                                         // In bulk edit mode, call saveAnother for each row in the group
                                         if (bulkEditMode && bulkEditGroupData?.groupRowIds?.length) {
                                             let hasError = false;
+                                            const saveAnotherErrors = [];
                                             for (const rowId of bulkEditGroupData.groupRowIds) {
                                                 const saveAnotherUrl = `${saveAnother.url}/${rowId}`;
                                                 const resSaveAnother =
@@ -1826,12 +1881,27 @@ function Form({
                                                     );
                                                 if (resSaveAnother.data.error !== '') {
                                                     hasError = true;
+                                                    if (
+                                                        !saveAnotherErrors.includes(
+                                                            resSaveAnother.data
+                                                                .error
+                                                        )
+                                                    ) {
+                                                        saveAnotherErrors.push(
+                                                            resSaveAnother.data
+                                                                .error
+                                                        );
+                                                    }
                                                 }
                                             }
                                             if (!hasError) {
                                                 toast.success(saveAnother.message);
                                             } else {
                                                 saveAnotherFailed = true;
+                                                saveAnotherErrors.forEach(
+                                                    (error) =>
+                                                        toast.error(error)
+                                                );
                                             }
                                             if (fetchTable) {
                                                 const createdItem =
@@ -1858,6 +1928,9 @@ function Form({
                                                 }
                                             } else {
                                                 saveAnotherFailed = true;
+                                                toast.error(
+                                                    resSaveAnother.data.error
+                                                );
                                                 if (fetchTable) {
                                                     const createdItem =
                                                         res.data.data || res.data;

package/src/components/MultiSelect.jsx

@@ -249,23 +249,37 @@ function MultiSelect({
 
     const handleCreate = async (inputValue) => {
         if (creatableConfig.url && creatableConfig.method) {
+            // creatableConfig.payload lets the consumer send extra fields
+            // with the create (e.g. {is_active: 1}); creatableConfig.field
+            // overrides the body key for the typed value (default "label",
+            // e.g. "name" for entities whose label column is `name`).
+            const valueKey = creatableConfig.field || 'label';
             const res = await CustomFetch(
                 creatableConfig.url,
                 creatableConfig.method,
-                { label: inputValue }
+                { [valueKey]: inputValue, ...(creatableConfig.payload || {}) }
             );
 
-            if (res && res.data) {
+            const created = res?.data?.data ?? res?.data;
+            if (res && created && created.id) {
                 const newOption = {
-                    value: res.data.id,
-                    label: res.data.label || inputValue,
-                    // Make sure description is preserved if it exists in the response
-                    description: res.data.description || null,
-                    ...res.data,
+                    value: created.id,
+                    label: created.label || created.name || inputValue,
+                    description: created.description || null,
+                    ...created,
                 };
 
+                const nextValue = [...selectValue, newOption];
                 setSelectOptions((prevOptions) => [...prevOptions, newOption]);
-                setSelectValue((prevValues) => [...prevValues, newOption]);
+                setSelectValue(nextValue);
+                // Propagate to the parent form so the freshly-created option
+                // is part of the field value and is persisted on save —
+                // updating local state alone left it out of the submission.
+                onChange(
+                    nextValue,
+                    { action: 'create-option', option: newOption },
+                    settings.id
+                );
             }
         }
     };

package/src/components/columns/ColumnRenderers.jsx

@@ -1,7 +1,10 @@
+import { useEffect, useState } from 'react';
 import numeral from 'numeral';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Select from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import CustomFetch from '../Fetch';
 import { Download, AlarmClock } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CellWithTooltip from '../cells/CellWithTooltip';
@@ -346,6 +349,168 @@ export const renderColourColumn = ({ column, commonProps }) => {
 };
 
 // Dropdown Column Renderer
+// Compact react-select styling shared by the grid cell editors
+const compactSelectStyles = {
+    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' }),
+};
+
+// Inline editor for the free-text companion of a multiDropdown's "Other"
+// option (column.other = {matchLabel, key, placeholder}). Commits on
+// blur/Enter via the column's update endpoint.
+const OtherValueInput = ({ column, data, handleDropdownUpdate }) => {
+    const current = data[column.other.key] ?? '';
+    const [value, setValue] = useState(current);
+
+    useEffect(() => {
+        setValue(current);
+    }, [current]);
+
+    const commit = () => {
+        if (
+            value === current ||
+            !column.update?.key ||
+            !column.update?.url ||
+            !column.update?.method
+        ) {
+            return;
+        }
+
+        handleDropdownUpdate(
+            column.other.key,
+            `${column.update.url}/${data.id}`,
+            column.update.method,
+            value
+        );
+    };
+
+    return (
+        <input
+            type="text"
+            value={value}
+            placeholder={column.other.placeholder || 'Other…'}
+            onChange={(e) => setValue(e.target.value)}
+            onBlur={commit}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter') e.target.blur();
+            }}
+            onClick={(e) => e.stopPropagation()}
+            style={{
+                width: '100%',
+                marginTop: '2px',
+                padding: '3px 6px',
+                fontSize: '12px',
+                border: '1px dashed #b9b9b9',
+                borderRadius: '4px',
+                outline: 'none',
+                backgroundColor: '#fffdf2',
+            }}
+        />
+    );
+};
+
+// Single-select cell that can also create new entries on the fly
+// (column.creatable = {url, field, payload?}): typing a value not in
+// the options offers an "Add …" action that POSTs to the entity
+// endpoint and assigns the created id to the row.
+const CreatableDropdownCell = ({
+    column,
+    data,
+    optionsList,
+    handleDropdownUpdate,
+}) => {
+    const [creating, setCreating] = useState(false);
+
+    const options = optionsList.map((o) => ({ value: o.id, label: o.label }));
+    const currentId = data[column.id]?.id || data[column.id] || '';
+    const currentOption =
+        options.find((o) => o.value === currentId) || null;
+
+    const fallbackText =
+        !currentId && column.fallbackKey && data[column.fallbackKey]
+            ? String(data[column.fallbackKey])
+            : null;
+
+    const assign = (value) => {
+        if (column.update?.key && column.update?.url && column.update?.method) {
+            handleDropdownUpdate(
+                column.update.key,
+                `${column.update.url}/${data.id}`,
+                column.update.method,
+                value
+            );
+        }
+    };
+
+    const handleCreate = async (inputValue) => {
+        const label = String(inputValue ?? '').trim();
+        if (!label || !column.creatable?.url || !column.creatable?.field) {
+            return;
+        }
+
+        setCreating(true);
+        try {
+            const res = await CustomFetch(column.creatable.url, 'POST', {
+                [column.creatable.field]: label,
+                ...(column.creatable.payload || {}),
+            });
+
+            const created = res?.data?.data;
+            if (res?.data?.error === '' && created?.id) {
+                assign(created.id);
+            } else {
+                toast.error(res?.data?.error || 'Could not create entry');
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error('Could not create entry');
+        } finally {
+            setCreating(false);
+        }
+    };
+
+    return (
+        <CreatableSelect
+            options={options}
+            value={currentOption}
+            placeholder={
+                fallbackText ||
+                `Select ${/^[aeioAEIO]/.test(column.label) ? 'an' : 'a'} ${
+                    column.label
+                }`
+            }
+            isDisabled={creating}
+            isLoading={creating}
+            menuPortalTarget={
+                typeof document !== 'undefined' ? document.body : undefined
+            }
+            menuPlacement="auto"
+            formatCreateLabel={(v) => `Add "${v}"`}
+            styles={compactSelectStyles}
+            onChange={(selected) => {
+                if (selected) assign(selected.value);
+            }}
+            onCreateOption={handleCreate}
+        />
+    );
+};
+
 export const renderDropdownColumn = ({
     column,
     commonProps,
@@ -389,6 +554,19 @@ export const renderDropdownColumn = ({
                 }
             }
 
+            // creatable: swap the native select for a react-select that
+            // can add new entries to the source entity on the fly
+            if (column.creatable) {
+                return (
+                    <CreatableDropdownCell
+                        column={column}
+                        data={data}
+                        optionsList={optionsList}
+                        handleDropdownUpdate={handleDropdownUpdate}
+                    />
+                );
+            }
+
             return (
                 <select
                     name={column.id}
@@ -540,66 +718,107 @@ export const renderMultiDropdownColumn = ({
                     ? String(data[column.fallbackKey])
                     : 'Select...';
 
-            return (
-                <Select
-                    isMulti
-                    options={options}
-                    value={value}
-                    placeholder={placeholder}
-                    isClearable={false}
-                    menuPortalTarget={
-                        typeof document !== 'undefined'
-                            ? document.body
-                            : undefined
+            // other: when the option matching other.matchLabel is
+            // selected, show a free-text input for its companion value
+            // (e.g. the "Other" tour format text)
+            const otherSelected =
+                column.other &&
+                value.some(
+                    (v) =>
+                        String(v.label).toLowerCase() ===
+                        String(
+                            column.other.matchLabel ?? 'Other'
+                        ).toLowerCase()
+                );
+
+            const save = (ids) => {
+                if (
+                    column.update?.key &&
+                    column.update?.url &&
+                    column.update?.method
+                ) {
+                    handleDropdownUpdate(
+                        column.update.key,
+                        `${column.update.url}/${data.id}`,
+                        column.update.method,
+                        ids
+                    );
+                }
+            };
+
+            // creatable: typing a value not in the list offers "Add …"
+            // which POSTs a new entry to the source entity and adds it to
+            // this row's selection.
+            const handleCreate = async (inputValue) => {
+                const label = String(inputValue ?? '').trim();
+                if (
+                    !label ||
+                    !column.creatable?.url ||
+                    !column.creatable?.field
+                ) {
+                    return;
+                }
+                try {
+                    const res = await CustomFetch(
+                        column.creatable.url,
+                        'POST',
+                        {
+                            [column.creatable.field]: label,
+                            ...(column.creatable.payload || {}),
+                        }
+                    );
+                    const created = res?.data?.data;
+                    if (res?.data?.error === '' && created?.id) {
+                        save([
+                            ...value.map((v) => v.value),
+                            created.id,
+                        ]);
+                    } else {
+                        toast.error(
+                            res?.data?.error || 'Could not create entry'
+                        );
                     }
-                    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)
-                            );
+                } catch (err) {
+                    console.error(err);
+                    toast.error('Could not create entry');
+                }
+            };
+
+            const SelectComponent = column.creatable
+                ? CreatableSelect
+                : Select;
+
+            return (
+                <div>
+                    <SelectComponent
+                        isMulti
+                        options={options}
+                        value={value}
+                        placeholder={placeholder}
+                        isClearable={false}
+                        menuPortalTarget={
+                            typeof document !== 'undefined'
+                                ? document.body
+                                : undefined
                         }
-                    }}
-                />
+                        menuPlacement="auto"
+                        styles={compactSelectStyles}
+                        {...(column.creatable && {
+                            onCreateOption: handleCreate,
+                            formatCreateLabel: (v) => `Add "${v}"`,
+                        })}
+                        onChange={(selected) =>
+                            save((selected || []).map((s) => s.value))
+                        }
+                    />
+                    {otherSelected && (
+                        <OtherValueInput
+                            column={column}
+                            data={data}
+                            handleDropdownUpdate={handleDropdownUpdate}
+                        />
+                    )}
+                </div>
             );
         },
     };