@visns-studio/visns-components 5.0.0 → 5.0.1-8.1

package/package.json

@@ -16,6 +16,7 @@
         "awesome-debounce-promise": "^2.1.0",
         "axios": "^1.7.7",
         "dayjs": "^1.11.13",
+        "fabric": "^6.5.4",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.11.9",
         "html-react-parser": "^5.1.18",
@@ -26,6 +27,7 @@
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "quill-image-uploader": "^1.3.0",
+        "react-big-calendar": "^1.17.1",
         "react-color": "^2.19.3",
         "react-confirm-alert": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
@@ -75,7 +77,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.0.0",
+    "version": "5.0.18.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/AsyncSelect.jsx

@@ -1,11 +1,28 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import CustomFetch from './Fetch';
 import SelectList from './SelectList';
 import AsyncSelect from 'react-select/async';
+import AsyncCreatableSelect from 'react-select/async-creatable';
 import { debounce } from 'lodash';
 import styles from './styles/AsyncSelect.module.scss';
+import { components } from 'react-select';
+
+// Custom Option component to add a second line of text
+const CustomOption = (props) => (
+    <components.Option {...props}>
+        <div>
+            {props.data.label}
+            {props.data.description && props.data.description !== '' && (
+                <div style={{ fontSize: '0.85em', color: '#888' }}>
+                    {props.data.description}
+                </div>
+            )}
+        </div>
+    </components.Option>
+);
 
 function VisnsAsyncSelect({
+    className,
     fields = [],
     inputValue,
     onChange,
@@ -14,6 +31,7 @@ function VisnsAsyncSelect({
     placeholder,
     settings,
     style,
+    isCreatable = false, // New prop to toggle creatable functionality
 }) {
     const loadSuggestedOptions = useCallback(
         debounce((inputValue, callback) => {
@@ -31,7 +49,6 @@ function VisnsAsyncSelect({
             return new Promise((resolve, reject) => {
                 let data = [];
 
-                // Prepare payload
                 let payload = {
                     where: [
                         {
@@ -41,38 +58,50 @@ function VisnsAsyncSelect({
                     ],
                 };
 
-                // Check and set fields from settings if fields prop is null or empty
                 if (fields && fields.length > 0) {
                     payload.fields = fields;
                 } else if (settings.fields && settings.fields.length > 0) {
                     payload.fields = settings.fields;
                 }
 
-                // Check and set orderBy from settings if orderBy prop is null or empty
                 if (orderBy) {
                     payload.orderBy = orderBy;
                 } else if (settings.orderBy) {
                     payload.orderBy = settings.orderBy;
                 }
 
-                // Fetch data
                 CustomFetch(
                     settings.url,
                     'POST',
                     payload,
                     function (result) {
                         result.data.forEach((a) => {
+                            let mainLabel = a.label || a[Object.keys(a)[0]];
+
+                            if (settings.fields && settings.fields.length > 2) {
+                                const additionalFields =
+                                    settings.fields.slice(2);
+                                const additionalLabels = additionalFields
+                                    .filter(
+                                        (field) =>
+                                            field !== settings.descriptionKey
+                                    )
+                                    .map((field) => a[field] || '')
+                                    .join(' ');
+                                mainLabel += ` ${additionalLabels}`;
+                            }
+
                             let _optionItem = {
                                 value: a.id,
-                                label: a.label,
+                                label: mainLabel,
+                                description: settings.descriptionKey
+                                    ? a[settings.descriptionKey]
+                                    : '',
                             };
 
                             Object.keys(a).forEach((b) => {
-                                if (b !== 'id') {
-                                    _optionItem = {
-                                        ..._optionItem,
-                                        [b]: a[b],
-                                    };
+                                if (b !== 'id' && b !== 'label') {
+                                    _optionItem[b] = a[b];
                                 }
                             });
 
@@ -87,17 +116,92 @@ function VisnsAsyncSelect({
                 );
             });
         } else {
-            return Promise.resolve([]); // Return empty array if input is less than 3 characters
+            return Promise.resolve([]);
         }
     };
 
+    const handleCreateOption = async (inputValue) => {
+        if (
+            settings.creatableConfig &&
+            settings.creatableConfig.url &&
+            settings.creatableConfig.method
+        ) {
+            let payload;
+            let firstNameField, lastNameField;
+
+            if (
+                settings.creatableConfig.type === 'name' &&
+                Array.isArray(settings.creatableConfig.fields)
+            ) {
+                [firstNameField, lastNameField] =
+                    settings.creatableConfig.fields;
+
+                const nameParts = inputValue.trim().split(' ');
+                let firstname = '';
+                let lastname = '';
+
+                if (nameParts.length === 1) {
+                    firstname = nameParts[0];
+                } else if (nameParts.length === 2) {
+                    firstname = nameParts[0];
+                    lastname = nameParts[1];
+                } else {
+                    firstname = nameParts[0];
+                    lastname = nameParts.slice(1).join(' ');
+                }
+
+                payload = {
+                    [firstNameField || 'firstname']: firstname,
+                    [lastNameField || 'lastname']: lastname,
+                };
+            } else {
+                payload = { label: inputValue };
+            }
+
+            const newOption = await CustomFetch(
+                settings.creatableConfig.url,
+                settings.creatableConfig.method,
+                payload
+            );
+
+            if (newOption && newOption.data && newOption.data.data) {
+                const newOptionData = newOption.data.data;
+                const option = {
+                    value: newOptionData.id,
+                    label:
+                        settings.creatableConfig.type === 'name'
+                            ? `${
+                                  newOptionData[firstNameField] ||
+                                  newOptionData.firstname
+                              } ${
+                                  newOptionData[lastNameField] ||
+                                  newOptionData.lastname
+                              }`
+                            : newOptionData.label || inputValue,
+                    description: settings.descriptionKey
+                        ? newOptionData[settings.descriptionKey]
+                        : 'Placeholder text for description',
+                    ...newOptionData,
+                };
+
+                onChange(option, { action: 'create-option' }, settings.id); // Directly call onChange with new option
+            }
+        }
+    };
+
+    const SelectComponent = isCreatable ? AsyncCreatableSelect : AsyncSelect;
+
     return (
-        <AsyncSelect
+        <SelectComponent
             isClearable
             cacheOptions
             loadOptions={loadSuggestedOptions}
             defaultOptions
-            className={styles.visns__ms}
+            className={
+                className
+                    ? `${styles.visns__ms} ${className}`
+                    : styles.visns__ms
+            }
             onChange={(inputValue, action) => {
                 onChange(inputValue, action, settings.id);
             }}
@@ -106,7 +210,9 @@ function VisnsAsyncSelect({
                     onKeyDown(e);
                 }
             }}
-            components={{ SelectList }}
+            classNamePrefix="visns-select"
+            onCreateOption={isCreatable ? handleCreateOption : undefined}
+            components={{ Option: CustomOption }}
             styles={{
                 menu: (styles) => ({
                     ...styles,

package/src/components/crm/DataGrid.jsx

@@ -14,6 +14,7 @@ import debounce from 'lodash.debounce';
 import moment from 'moment';
 import numeral from 'numeral';
 import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
 import parse from 'html-react-parser';
 import { saveAs } from 'file-saver';
 import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter';
@@ -2381,12 +2382,32 @@ const DataGrid = forwardRef(
                                             data[column.id] &&
                                             data[column.id] !== ''
                                         ) {
+                                            let content = String(
+                                                data[column.id]
+                                            );
+
+                                            // If removeFormat is true, strip HTML tags
+                                            if (column.removeFormat) {
+                                                content = content.replace(
+                                                    /<\/?[^>]+(>|$)/g,
+                                                    ''
+                                                ); // Simple regex to strip HTML tags
+                                            }
+
+                                            // If truncate has a value, limit content to specified number of characters
+                                            if (column.truncate) {
+                                                content =
+                                                    content.length >
+                                                    column.truncate
+                                                        ? content.substring(
+                                                              0,
+                                                              column.truncate
+                                                          ) + '...'
+                                                        : content;
+                                            }
+
                                             return (
-                                                <span>
-                                                    {parse(
-                                                        String(data[column.id])
-                                                    )}
-                                                </span>
+                                                <span>{parse(content)}</span>
                                             );
                                         } else {
                                             return null;