@visns-studio/visns-components 4.10.23 → 4.10.25

package/package.json

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

package/src/components/crm/Field.jsx

@@ -1030,6 +1030,16 @@ function Field({
                             }
                             dataOptions={dataOptions}
                             style={style}
+                            isCreatable={
+                                settings.hasOwnProperty('isCreatable')
+                                    ? settings.isCreatable
+                                    : false
+                            }
+                            creatableConfig={
+                                settings.hasOwnProperty('creatableConfig')
+                                    ? settings.creatableConfig
+                                    : {}
+                            }
                         />
                         {settings.create && (
                             <button

package/src/components/crm/MultiSelect.jsx

@@ -1,80 +1,73 @@
 import React, { useEffect, useState } from 'react';
+import CustomFetch from './Fetch';
 import SelectList from './SelectList';
 import Select, { createFilter } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 import styles from './styles/AsyncSelect.module.scss';
 
 function MultiSelect({
     className,
-    inputValue,
+    inputValue = [], // Default to an empty array
     multi,
     onChange,
-    options,
+    options = [], // Default to an empty array
     placeholder,
     settings,
     style,
+    isCreatable = false,
+    creatableConfig = {},
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
     const [selectValue, setSelectValue] = useState([]);
 
     useEffect(() => {
-        let _options = [];
-
-        if (options.length > 0) {
-            options.forEach((a) => {
-                let labelValue =
-                    a.label || a.name || a.description || 'Unknown';
-                let _optionItem = {
-                    value: a.id,
-                    label: labelValue,
-                };
-
-                Object.keys(a).forEach((b) => {
-                    if (b !== 'id' && b !== 'label') {
-                        _optionItem = {
-                            ..._optionItem,
-                            [b]: a[b],
-                        };
-                    }
-                });
-
-                _options.push(_optionItem);
-            });
-
-            setSelectOptions(_options);
-        }
+        const _options = Array.isArray(options)
+            ? options.map((a) => ({
+                  value: a.id,
+                  label: a.label || a.name || a.description || 'Unknown',
+                  ...a,
+              }))
+            : [];
+        setSelectOptions(_options);
     }, [options]);
 
     useEffect(() => {
-        let _values = [];
-
-        if (inputValue.length > 0) {
-            inputValue.forEach((a) => {
-                let labelValue =
-                    a.label || a.name || a.description || 'Unknown';
-                let _valueItems = {
-                    value: a.id,
-                    label: labelValue,
-                };
+        const _values = Array.isArray(inputValue)
+            ? inputValue.map((a) => ({
+                  value: a.id,
+                  label: a.label || a.name || a.description || 'Unknown',
+                  ...a,
+              }))
+            : [];
+        setSelectValue(_values);
+    }, [inputValue]);
 
-                Object.keys(a).forEach((b) => {
-                    if (b !== 'id' && b !== 'label') {
-                        _valueItems = {
-                            ..._valueItems,
-                            [b]: a[b],
-                        };
-                    }
-                });
+    const handleCreate = async (inputValue) => {
+        if (creatableConfig.url && creatableConfig.method) {
+            const res = await CustomFetch(
+                creatableConfig.url,
+                creatableConfig.method,
+                { label: inputValue }
+            );
 
-                _values.push(_valueItems);
-            });
+            if (res && res.data) {
+                const newOption = {
+                    value: res.data.id,
+                    label: res.data.label || inputValue,
+                    ...res.data,
+                };
 
-            setSelectValue(_values);
+                setSelectOptions((prevOptions) => [...prevOptions, newOption]);
+                setSelectValue((prevValues) => [...prevValues, newOption]);
+            }
         }
-    }, [inputValue]);
+    };
+
+    const SelectComponent = isCreatable ? CreatableSelect : Select;
 
     return (
-        <Select
-            closeMenuOnSelect={multi ? false : true}
+        <SelectComponent
+            closeMenuOnSelect={!multi}
             isClearable
             isSearchable
             isMulti={multi}
@@ -101,6 +94,7 @@ function MultiSelect({
                 }),
             }}
             value={selectValue}
+            onCreateOption={handleCreate}
             placeholder={placeholder ? placeholder : 'Select...'}
         />
     );

package/src/components/crm/sketch/SketchField.jsx

@@ -87,14 +87,47 @@ class SketchField extends PureComponent {
                 crossOrigin: 'anonymous', // Enable CORS
             });
 
+            const imgWidth = img.width;
+            const imgHeight = img.height;
+
+            // Get the aspect ratio of the image
+            const aspectRatio = imgWidth / imgHeight;
+
+            // Calculate the new canvas dimensions based on aspect ratio
+            const { width, height } = this.props; // Default width and height
+
+            let newWidth, newHeight;
+            if (aspectRatio > 1) {
+                // Landscape orientation: Set width to max and adjust height
+                newWidth = width;
+                newHeight = width / aspectRatio;
+            } else {
+                // Portrait orientation: Set height to max and adjust width
+                newHeight = height;
+                newWidth = height * aspectRatio;
+            }
+
+            // Set the new canvas dimensions
+            this._fc.setWidth(newWidth);
+            this._fc.setHeight(newHeight);
+
             // Scale the image to fit the canvas dimensions
-            img.scaleToWidth(this._fc.width);
-            img.scaleToHeight(this._fc.height);
-            img.set({ selectable: false, evented: false });
+            img.scaleToWidth(newWidth);
+            img.scaleToHeight(newHeight);
+
+            // Center the image both horizontally and vertically
+            img.set({
+                left: (newWidth - img.getScaledWidth()) / 2,
+                top: (newHeight - img.getScaledHeight()) / 2,
+                selectable: false,
+                evented: false,
+            });
 
-            // Set the image directly as the background
+            // Set the image as the background directly
             this._fc.backgroundImage = img;
-            this._fc.renderAll(); // Render the canvas immediately
+
+            // Render the canvas to apply changes
+            this._fc.requestRenderAll();
         } catch (error) {
             console.error('Failed to load background image:', error);
         }
@@ -193,6 +226,8 @@ class SketchField extends PureComponent {
                 }
             } else {
                 this._fc.clear(); // If no previous state, clear the canvas
+
+                this.setBackgroundImage(this.props.backgroundImage);
             }
             this._fc.renderAll(); // Re-render canvas
             this.props.onChange && this.props.onChange();
@@ -271,7 +306,6 @@ class SketchField extends PureComponent {
 
         // Load the defaultValue to set the initial state of the canvas
         if (defaultValue) {
-            console.info('test');
             // Show loading toast
             const toastId = toast.loading('Loading Canvas...');
             setTimeout(() => {
@@ -334,10 +368,6 @@ class SketchField extends PureComponent {
             this.fromJSON(this.props.defaultValue);
         } else {
             if (this.props.backgroundImage !== prevProps.backgroundImage) {
-                // console.log(
-                //     'Setting new background image:',
-                //     this.props.backgroundImage
-                // );
                 this.setBackgroundImage(this.props.backgroundImage);
             }
         }