@visns-studio/visns-components 5.24.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.24.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/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

@@ -731,9 +731,66 @@ export const renderMultiDropdownColumn = ({
                         ).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'
+                        );
+                    }
+                } catch (err) {
+                    console.error(err);
+                    toast.error('Could not create entry');
+                }
+            };
+
+            const SelectComponent = column.creatable
+                ? CreatableSelect
+                : Select;
+
             return (
                 <div>
-                    <Select
+                    <SelectComponent
                         isMulti
                         options={options}
                         value={value}
@@ -746,20 +803,13 @@ export const renderMultiDropdownColumn = ({
                         }
                         menuPlacement="auto"
                         styles={compactSelectStyles}
-                        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)
-                                );
-                            }
-                        }}
+                        {...(column.creatable && {
+                            onCreateOption: handleCreate,
+                            formatCreateLabel: (v) => `Add "${v}"`,
+                        })}
+                        onChange={(selected) =>
+                            save((selected || []).map((s) => s.value))
+                        }
                     />
                     {otherSelected && (
                         <OtherValueInput