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

package/package.json

@@ -1,83 +1,83 @@
 {
     "dependencies": {
         "@emotion/is-prop-valid": "^1.3.1",
-        "@fontsource/barlow": "^5.1.1",
+        "@fontsource/barlow": "^5.1.0",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
-        "@nivo/bar": "^0.88.0",
-        "@nivo/core": "^0.88.0",
-        "@nivo/line": "^0.88.0",
-        "@nivo/pie": "^0.88.0",
+        "@nivo/bar": "^0.87.0",
+        "@nivo/core": "^0.87.0",
+        "@nivo/line": "^0.87.0",
+        "@nivo/pie": "^0.87.0",
         "@tinymce/tinymce-react": "^5.1.1",
-        "@vitejs/plugin-react": "^4.3.4",
+        "@vitejs/plugin-react": "^4.3.3",
         "add": "^2.0.6",
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.7.9",
-        "browser-image-compression": "^2.0.2",
+        "axios": "^1.7.7",
         "dayjs": "^1.11.13",
         "fabric": "^6.5.4",
         "file-saver": "^2.0.5",
-        "framer-motion": "^11.16.0",
-        "html-react-parser": "^5.2.2",
+        "framer-motion": "^11.11.9",
+        "html-react-parser": "^5.1.18",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.30.1",
-        "motion": "^11.16.0",
+        "motion": "^10.18.0",
         "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",
-        "react-datepicker": "^7.6.0",
-        "react-dropzone": "^14.3.5",
+        "react-datepicker": "^7.5.0",
+        "react-dropzone": "^14.2.10",
         "react-grid-gallery": "^1.0.1",
-        "react-number-format": "^5.4.3",
+        "react-number-format": "^5.4.2",
         "react-password-strength-bar": "^0.4.1",
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
         "react-reveal": "^1.2.2",
-        "react-router-dom": "^6.28.1",
-        "react-select": "^5.9.0",
-        "react-signature-pad-wrapper": "^4.1.0",
+        "react-router-dom": "^6.27.0",
+        "react-select": "^5.8.1",
+        "react-signature-pad-wrapper": "^4.0.4",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
-        "react-to-print": "^3.0.4",
+        "react-to-print": "^2.15.1",
         "react-toastify": "^10.0.6",
         "react-toggle": "^4.1.3",
         "react-tooltip": "^5.28.0",
-        "react-window": "^1.8.11",
+        "react-window": "^1.8.10",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "truncate": "^3.0.0",
-        "uuid": "^11.0.4",
+        "uuid": "^10.0.0",
         "validator": "^13.12.0",
-        "vite": "^5.4.11",
+        "vite": "^5.4.10",
         "yarn": "^1.22.22"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
+        "@babel/core": "^7.25.9",
         "@babel/plugin-transform-runtime": "^7.25.9",
-        "@babel/preset-env": "^7.26.0",
-        "@babel/preset-react": "^7.26.3",
+        "@babel/preset-env": "^7.25.9",
+        "@babel/preset-react": "^7.25.9",
         "babel-loader": "^9.2.1",
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
         "css-minimizer-webpack-plugin": "^7.0.0",
-        "mini-css-extract-plugin": "^2.9.2",
+        "mini-css-extract-plugin": "^2.9.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.83.1",
-        "sass-loader": "^16.0.4"
+        "sass": "^1.80.3",
+        "sass-loader": "^16.0.2"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.10.48",
+    "version": "5.0.18.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -98,5 +98,5 @@
         "url": "https://github.com/visnsstudio/visns-components/issues"
     },
     "homepage": "https://github.com/visnsstudio/visns-components#readme",
-    "packageManager": "yarn@4.5.1"
+    "packageManager": "yarn@4.4.0"
 }

package/src/components/cms/Field.jsx

@@ -667,71 +667,47 @@ const Field = ({
                         break;
                     case 'richeditor':
                         htmlContainer = (
-                            <>
-                                <ReactQuill
-                                    theme="snow"
-                                    name={settings.id}
-                                    onChange={(value) => {
-                                        onChangeRicheditor(value, settings.id);
-                                    }}
-                                    value={inputValue || ''}
-                                    modules={modules}
-                                    formats={[
-                                        'header',
-                                        'bold',
-                                        'italic',
-                                        'underline',
-                                        'strike',
-                                        'blockquote',
-                                        'list',
-                                        'bullet',
+                            <Editor
+                                tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
+                                licenseKey="gpl"
+                                onEditorChange={(value, e) => {
+                                    onChangeRicheditor(e, value, settings.id);
+                                }}
+                                onInit={(evt, editor) =>
+                                    (editorRef.current = editor)
+                                }
+                                value={inputValue || ''}
+                                init={{
+                                    branding: false,
+                                    height: 500,
+                                    menubar: false,
+                                    plugins: [
+                                        'advlist',
+                                        'autolink',
+                                        'lists',
                                         'link',
                                         'image',
-                                    ]}
-                                />
-                            </>
-
-                            // <Editor
-                            //     tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
-                            //     licenseKey="gpl"
-                            //     onEditorChange={(value, e) => {
-                            //         onChangeRicheditor(e, value, settings.id);
-                            //     }}
-                            //     onInit={(evt, editor) =>
-                            //         (editorRef.current = editor)
-                            //     }
-                            //     value={inputValue || ''}
-                            //     init={{
-                            //         branding: false,
-                            //         height: 500,
-                            //         menubar: false,
-                            //         plugins: [
-                            //             'advlist',
-                            //             'autolink',
-                            //             'lists',
-                            //             'link',
-                            //             'image',
-                            //             'charmap',
-                            //             'preview',
-                            //             'anchor',
-                            //             'searchreplace',
-                            //             'visualblocks',
-                            //             'code',
-                            //             'fullscreen',
-                            //             'insertdatetime',
-                            //             'media',
-                            //             'table',
-                            //             'code',
-                            //         ],
-                            //         toolbar:
-                            //             'undo redo | blocks | ' +
-                            //             'bold italic forecolor | alignleft aligncenter ' +
-                            //             'alignright alignjustify | bullist numlist outdent indent | ' +
-                            //             'removeformat | table',
-                            //         content_style:
-                            //             'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
-                            //     }}
-                            // />
+                                        'charmap',
+                                        'preview',
+                                        'anchor',
+                                        'searchreplace',
+                                        'visualblocks',
+                                        'code',
+                                        'fullscreen',
+                                        'insertdatetime',
+                                        'media',
+                                        'table',
+                                        'code',
+                                    ],
+                                    toolbar:
+                                        'undo redo | blocks | ' +
+                                        'bold italic forecolor | alignleft aligncenter ' +
+                                        'alignright alignjustify | bullist numlist outdent indent | ' +
+                                        'removeformat | table',
+                                    content_style:
+                                        'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+                                }}
+                            />
                         );
                         break;
                     case 'image':

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/Breadcrumb.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { CircleChevronRight } from 'akar-icons';
-import moment from 'moment';
 
 function Breadcrumb({ data, page }) {
     // Function to get nested data, handling array of keys
@@ -20,15 +19,6 @@ function Breadcrumb({ data, page }) {
             ? getNestedData(data, page.parentTitleKey)
             : null;
 
-    // Function to handle titleKey when it's a nested path like 'event_detail.name'
-    const getTitleData = (data, titleKey) => {
-        if (typeof titleKey === 'string' && titleKey.includes('.')) {
-            const keys = titleKey.split('.'); // Split the nested path by "."
-            return getNestedData(data, keys); // Use getNestedData to fetch the nested value
-        }
-        return data[titleKey]; // If not nested, return the direct data
-    };
-
     return (
         <h1>
             {page?.parentTitle && page?.parentUrl && (
@@ -66,19 +56,13 @@ function Breadcrumb({ data, page }) {
                         // If titleKey is an array, iterate and display each nested value
                         page.titleKey.map((key, index) => (
                             <span key={index}>
-                                {getTitleData(data, key)}
+                                {data[key]}
                                 {index < page.titleKey.length - 1 && ' '}
                             </span>
                         ))
                     ) : (
                         // If titleKey is a single string, display the corresponding data
-                        <>
-                            {page.titleType === 'date'
-                                ? moment(
-                                      getTitleData(data, page.titleKey)
-                                  ).format('DD-MM-YYYY')
-                                : getTitleData(data, page.titleKey)}
-                        </>
+                        <>{data[page.titleKey]}</>
                     )}
                 </>
             )}