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

package/src/components/crm/Field.jsx

@@ -2,7 +2,7 @@ import '../styles/global.css';
 
 import React, { useEffect, useRef, useState } from 'react';
 import DatePicker from 'react-datepicker';
-import _, { forEach } from 'lodash';
+import _ from 'lodash';
 import Toggle from 'react-toggle';
 import moment from 'moment';
 import parse from 'html-react-parser';
@@ -11,18 +11,7 @@ import { BlockPicker } from 'react-color';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import { Editor } from '@tinymce/tinymce-react';
-import {
-    Edit,
-    ChevronRight,
-    Circle,
-    CircleFill,
-    CirclePlus,
-    CloudDownload,
-    Minus,
-    ArrowBack,
-    TrashCan,
-    CircleX,
-} from 'akar-icons';
+import { CirclePlus, CloudDownload, Copy, TrashCan } from 'akar-icons';
 import { toast } from 'react-toastify';
 import styles from './styles/Field.module.scss';
 
@@ -30,15 +19,13 @@ import CustomFetch from './Fetch';
 import Form from './Form';
 import MultiSelect from './MultiSelect';
 import Select from './Select';
-import SketchConfig from './sketch/json/config.json';
-import SketchField from './sketch/SketchField';
-import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from '../cms/DropZone';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
+import Item from '../cms/sorting/Item';
 
 function Field({
     api,
@@ -51,7 +38,6 @@ function Field({
     inputClass,
     mapbox,
     onChange,
-    onChangeCanvas,
     onChangeCheckbox,
     onChangeCheckboxManual,
     onChangeColour,
@@ -79,30 +65,6 @@ function Field({
     const [formItemClass, setFormItemClass] = useState('');
     const [options, setOptions] = useState([]);
 
-    /** Canvas States */
-    const [canvasPopupOpen, setCanvasPopupOpen] = useState(false);
-    const [canvasUrl, setCanvasUrl] = useState('');
-    const [sketchTool, setSketchTool] = useState(Tools.Pencil);
-    const [toolClass, setToolClass] = useState('pencil');
-    const [lineWidth, setLineWidth] = useState(2);
-    const [lineColor, setLineColor] = useState('rgba(0, 0, 0, 1)');
-    const sketchRef = useRef(null);
-
-    /** Canvas Functions */
-    const handleCanvasSave = async () => {
-        // Save the current canvas state
-        const canvasState = sketchRef.current.saveCanvasState();
-
-        // Export the canvas image data as a Base64 string
-        const imageData = await sketchRef.current.exportCanvasImage(); // Use await here
-
-        // Call the onChangeCanvas function with both values
-        onChangeCanvas(settings, canvasState, imageData);
-
-        // Close the canvas popup
-        setCanvasPopupOpen(false);
-    };
-
     const cover = {
         position: 'fixed',
         top: '0px',
@@ -120,6 +82,7 @@ function Field({
     useEffect(() => {
         const fetchOptions = () => {
             let filter = {};
+
             if (settings.where?.length > 0) {
                 filter = {
                     where: settings.where,
@@ -192,13 +155,6 @@ function Field({
                 setFormItemClass(`${styles.formItem}`);
                 break;
         }
-
-        if (settings.type === 'canvas') {
-            const canvasType = SketchConfig.canvasTypes.find(
-                (a) => a.id === settings.canvasType
-            );
-            setCanvasUrl(canvasType.url);
-        }
     }, [settings, counter]);
 
     const fetchChildDropdownData = (s, v) => {
@@ -227,12 +183,6 @@ function Field({
                             filter.orderBy = a.orderBy;
                         }
 
-                        if (a.where) {
-                            forEach(a.where, (w) => {
-                                filter.where.push(w);
-                            });
-                        }
-
                         CustomFetch(a.url, 'POST', filter, function (result) {
                             childDropdownCallback({
                                 id: a.id,
@@ -258,8 +208,8 @@ function Field({
                         filter.orderBy = s.orderBy;
                     }
 
-                    if (s.where) {
-                        forEach(s.where, (w) => {
+                    if (a.where) {
+                        forEach(a.where, (w) => {
                             filter.where.push(w);
                         });
                     }
@@ -310,66 +260,70 @@ function Field({
     }, [settings.options, settings, counter]);
 
     const renderLabel = () => {
-        if (
-            [
-                'address',
-                'async-dropdown-ajax',
-                'checkbox',
-                'canvas',
-                'colour',
-                'copytoclipboard',
-                'date',
-                'datetime',
-                'dropdown',
-                'dropdown-ajax',
-                'dynamicdata',
-                'file',
-                'gallery',
-                'image',
-                'multi-dropdown',
-                'multi-dropdown-ajax',
-                'plaindate',
-                'plaindatetime',
-                'plainrelation',
-                'plainrelationarray',
-                'radio',
-                'radio-ajax',
-                'richeditor',
-                'signature',
-                'table_radio',
-                'table_text',
-                'time',
-            ].includes(settings.type)
-        ) {
-            return (
-                <span className={`${styles.fi__span} ${styles.prefocus}`}>
-                    {settings.label} {settings.required ? '*' : ''}
-                </span>
-            );
-        } else if (['plaintext'].includes(settings.type)) {
-            if (settings.description) {
-                return (
-                    <span>
-                        {settings.description
-                            ? parse(settings.description)
-                            : ''}
-                    </span>
-                );
-            } else {
+        if (settings.label && settings.label !== '') {
+            if (
+                [
+                    'address',
+                    'async-dropdown-ajax',
+                    'checkbox',
+                    'colour',
+                    'copytoclipboard',
+                    'date',
+                    'datetime',
+                    'dropdown',
+                    'dropdown-ajax',
+                    'dynamicdata',
+                    'file',
+                    'gallery',
+                    'image',
+                    'multi-dropdown',
+                    'multi-dropdown-ajax',
+                    'plaindate',
+                    'plaindatetime',
+                    'plainrelation',
+                    'plainrelationarray',
+                    'radio',
+                    'radio-ajax',
+                    'signature',
+                    'table_radio',
+                    'table_text',
+                    'time',
+                ].includes(settings.type)
+            ) {
                 return (
                     <span className={`${styles.fi__span} ${styles.prefocus}`}>
                         {settings.label} {settings.required ? '*' : ''}
                     </span>
                 );
+            } else if (['plaintext'].includes(settings.type)) {
+                if (settings.description) {
+                    return (
+                        <span>
+                            {settings.description
+                                ? parse(settings.description)
+                                : ''}
+                        </span>
+                    );
+                } else {
+                    return (
+                        <span
+                            className={`${styles.fi__span} ${styles.prefocus}`}
+                        >
+                            {settings.label} {settings.required ? '*' : ''}
+                        </span>
+                    );
+                }
+            } else if (['plaintextheading'].includes(settings.type)) {
+                return <h2>{settings.label ? settings.label : ''}</h2>;
+            } else if (['section'].includes(settings.type)) {
+                return (
+                    <div className={styles.gridtxt__header}>
+                        <span>{settings.label}</span>
+                    </div>
+                );
+            } else if (['richeditor', 'textarea'].includes(settings.type)) {
+                return settings.label;
             }
-        } else if (['plaintextheading'].includes(settings.type)) {
-            return <h2>{settings.label ? settings.label : ''}</h2>;
-        } else if (['section'].includes(settings.type)) {
-            return (
-                <div className={styles.gridtxt__header}>
-                    <span>{settings.label}</span>
-                </div>
-            );
         }
     };
 
@@ -426,35 +380,27 @@ function Field({
                 );
             case 'async-dropdown-ajax':
                 return (
-                    <VisnsAsyncSelect
-                        settings={settings}
-                        className={inputClass[settings.id]}
-                        multi={
-                            settings.hasOwnProperty('multi')
-                                ? settings.multi
-                                : false
-                        }
-                        onChange={onChangeSelect}
-                        inputValue={
-                            inputValue === null || inputValue === undefined
-                                ? ''
-                                : inputValue
-                        }
-                        options={options}
-                        dataOptions={dataOptions}
-                    />
-                );
-            case 'canvas':
-                console.info('a');
-                return canvasUrl ? (
-                    <div
-                        onClick={() => setCanvasPopupOpen(true)}
-                        style={{ cursor: 'pointer' }}
-                    >
-                        <img src={canvasUrl} width="200" alt="Canvas Preview" />
+                    <div className={styles.dropdownContainer}>
+                        <VisnsAsyncSelect
+                            settings={settings}
+                            className={inputClass[settings.id]}
+                            multi={
+                                settings.hasOwnProperty('multi')
+                                    ? settings.multi
+                                    : false
+                            }
+                            onChange={onChangeSelect}
+                            inputValue={
+                                inputValue === null || inputValue === undefined
+                                    ? ''
+                                    : inputValue
+                            }
+                            options={options}
+                            dataOptions={dataOptions}
+                            isCreatable={settings.isCreatable || false}
+                        />
                     </div>
-                ) : null;
-
+                );
             case 'checkbox':
                 return (
                     <div
@@ -743,7 +689,7 @@ function Field({
                                 onChange={onChange}
                             />
                             {inputValue && inputValue.length > 0 && (
-                                <ul className={styles['file-list']}>
+                                <ul className="file-list">
                                     {inputValue.map((file, index) => (
                                         <li
                                             key={`file-${settings.id}-${index}`}
@@ -754,9 +700,7 @@ function Field({
                                                 ? file.file_name
                                                 : ''}
                                             <button
-                                                className={
-                                                    styles['trash-button']
-                                                }
+                                                className="trash-button"
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
@@ -877,6 +821,13 @@ function Field({
 
                 return htmlContainer;
             case 'html5_date':
+                // Convert inputValue to 'YYYY-MM-DD' if necessary
+                const formattedDate =
+                    inputValue &&
+                    moment(inputValue, moment.ISO_8601, true).isValid()
+                        ? moment(inputValue).format('YYYY-MM-DD')
+                        : inputValue; // Use as-is if it's already in the correct format or invalid
+
                 return (
                     <input
                         type="date"
@@ -884,11 +835,7 @@ function Field({
                         className={inputClass[settings.id]}
                         placeholder=" "
                         onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
+                        value={formattedDate || ''}
                         autoComplete="off"
                     />
                 );
@@ -1040,18 +987,9 @@ function Field({
                                     ? settings.options
                                     : options
                             }
+                            isCreatable={settings.isCreatable || false}
                             dataOptions={dataOptions}
                             style={style}
-                            isCreatable={
-                                settings.hasOwnProperty('isCreatable')
-                                    ? settings.isCreatable
-                                    : false
-                            }
-                            creatableConfig={
-                                settings.hasOwnProperty('creatableConfig')
-                                    ? settings.creatableConfig
-                                    : {}
-                            }
                         />
                         {settings.create && (
                             <button
@@ -1252,77 +1190,6 @@ function Field({
                         ))}
                     </div>
                 ) : null;
-            case 'richeditor':
-                return (
-                    <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: settings.height ? settings.height : 500,
-                            menubar: false,
-                            plugins: [
-                                'advlist',
-                                'autolink',
-                                'lists',
-                                'link',
-                                'image',
-                                'charmap',
-                                'preview',
-                                'anchor',
-                                'searchreplace',
-                                'visualblocks',
-                                'code',
-                                'fullscreen',
-                                'insertdatetime',
-                                'media',
-                                'table',
-                                'code',
-                            ],
-                            toolbar:
-                                'insertTextDropdown | 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 }',
-                            setup: (editor) => {
-                                // Check if insertText exists and is an array of objects
-                                if (
-                                    settings.insertText &&
-                                    Array.isArray(settings.insertText) &&
-                                    settings.insertText.length > 0
-                                ) {
-                                    editor.ui.registry.addMenuButton(
-                                        'insertTextDropdown',
-                                        {
-                                            text: 'Insert Text',
-                                            fetch: (callback) => {
-                                                const items =
-                                                    settings.insertText.map(
-                                                        (textObj) => ({
-                                                            type: 'menuitem',
-                                                            text: textObj.text,
-                                                            onAction: () =>
-                                                                editor.insertContent(
-                                                                    textObj.content
-                                                                ),
-                                                        })
-                                                    );
-                                                callback(items);
-                                            },
-                                        }
-                                    );
-                                }
-                            },
-                        }}
-                    />
-                );
             case 'signature':
                 return (
                     <>
@@ -1513,9 +1380,7 @@ function Field({
                                 <th></th>
                                 {tableRadioColumns.map((column, columnKey) => (
                                     <th
-                                        key={`${settings.id}-${
-                                            column.id
-                                        }-${Math.random()}`}
+                                        key={`${settings.id}-${column.id}`}
                                         style={{
                                             width: '250px',
                                             whiteSpace: 'nowrap',
@@ -1536,17 +1401,21 @@ function Field({
                             </tr>
                         </thead>
                         <tbody>
-                            {tableRadioRows.map((row, rowKey) => (
+                            {tableRadioRows.map((row) => (
                                 <tr
                                     key={`table-radio-row-${settings.id}-${row.id}`}
                                 >
-                                    <td>{row.label}</td>
+                                    <td
+                                        style={{
+                                            whiteSpace: 'nowrap',
+                                        }}
+                                    >
+                                        {row.label}
+                                    </td>
                                     {tableRadioColumns.map((cell, cellKey) => (
                                         <td
-                                            key={`table-radio-cell-${settings.id}-${row.id}-${cell.id}-${cellKey}-${rowKey}`}
+                                            key={`table-radio-cell-${settings.id}-${row.id}-${cell.id}`}
                                             style={{
-                                                width: '250px',
-                                                whiteSpace: 'nowrap',
                                                 textAlign:
                                                     tableRadioColumns[cellKey]
                                                         .type === '' ||
@@ -1776,7 +1645,6 @@ function Field({
                 'address',
                 'async-dropdown-ajax',
                 'checkbox',
-                'canvas',
                 'colour',
                 'copytoclipboard',
                 'date',
@@ -1803,6 +1671,7 @@ function Field({
                 'signature',
                 'table_radio',
                 'table_text',
+                'textarea',
                 'time',
                 'toggle',
             ].includes(settings.type)
@@ -1846,6 +1715,78 @@ function Field({
                         shouldCloseOnSelect={true}
                     />
                 );
+            case 'richeditor':
+                return (
+                    <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: settings.height ? settings.height : 500,
+                            menubar: false,
+                            plugins: [
+                                'advlist',
+                                'autolink',
+                                'lists',
+                                'link',
+                                'image',
+                                'charmap',
+                                'preview',
+                                'anchor',
+                                'searchreplace',
+                                'visualblocks',
+                                'code',
+                                'fullscreen',
+                                'insertdatetime',
+                                'media',
+                                'table',
+                                'code',
+                                'hr',
+                            ],
+                            toolbar:
+                                'insertTextDropdown | undo redo | blocks | ' +
+                                'bold italic forecolor | alignleft aligncenter ' +
+                                'alignright alignjustify | bullist numlist outdent indent | ' +
+                                'hr | removeformat | table | code',
+                            content_style:
+                                'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+                            setup: (editor) => {
+                                // Check if insertText exists and is an array of objects
+                                if (
+                                    settings.insertText &&
+                                    Array.isArray(settings.insertText) &&
+                                    settings.insertText.length > 0
+                                ) {
+                                    editor.ui.registry.addMenuButton(
+                                        'insertTextDropdown',
+                                        {
+                                            text: 'Insert Text',
+                                            fetch: (callback) => {
+                                                const items =
+                                                    settings.insertText.map(
+                                                        (textObj) => ({
+                                                            type: 'menuitem',
+                                                            text: textObj.text,
+                                                            onAction: () =>
+                                                                editor.insertContent(
+                                                                    textObj.content
+                                                                ),
+                                                        })
+                                                    );
+                                                callback(items);
+                                            },
+                                        }
+                                    );
+                                }
+                            },
+                        }}
+                    />
+                );
             case 'time':
                 return (
                     <DatePicker
@@ -1947,7 +1888,13 @@ function Field({
 
     return (
         <div className={formItemClass} style={formItemStyle}>
-            <label className={styles.fi__label}>
+            <label
+                className={
+                    ['richeditor', 'textarea'].includes(settings.type)
+                        ? ''
+                        : styles.fi__label
+                }
+            >
                 {renderLabel()}
                 {renderInput()}
                 {renderFieldLabel()}
@@ -1974,126 +1921,6 @@ function Field({
                     updateForm={setChildForm}
                 />
             </Popup>
-            <Popup
-                open={canvasPopupOpen}
-                onClose={() => setCanvasPopupOpen(false)}
-                closeOnDocumentClick={false}
-            >
-                <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
-                    <div className={styles.modal}>
-                        <div className={styles.modal__header}>
-                            <h1>Edit Canvas</h1>
-                            <button
-                                className={styles.modal__close}
-                                onClick={() => setCanvasPopupOpen(false)}
-                            >
-                                <CircleX size={24} color="#FFF" />
-                            </button>
-                        </div>
-                        <div
-                            className={`${styles.modal__content} ${styles.drawDiv}`}
-                        >
-                            {/* Sketch Tools */}
-                            <ul className={styles.drawactions}>
-                                <li>
-                                    <button
-                                        onClick={() => {
-                                            handleCanvasSave();
-                                        }}
-                                        className={styles['drawactions--save']}
-                                    >
-                                        <CloudDownload size={16} /> Save
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() => {
-                                            setSketchTool(Tools.Pencil);
-                                            setToolClass('pencil');
-                                        }}
-                                        className={`${
-                                            styles['drawaction-pencil']
-                                        } ${
-                                            toolClass === 'pencil'
-                                                ? styles['drawactive']
-                                                : ''
-                                        }`}
-                                    >
-                                        <Edit size={16} /> Pencil
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() => {
-                                            setSketchTool(Tools.Line);
-
-                                            setToolClass('line');
-                                        }}
-                                        className={`${
-                                            styles['drawaction-line']
-                                        } ${
-                                            toolClass === 'line'
-                                                ? styles['drawactive']
-                                                : ''
-                                        }`}
-                                    >
-                                        <Minus size={16} /> Line
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() => {
-                                            setSketchTool(Tools.Circle);
-
-                                            setToolClass('circle');
-                                        }}
-                                        className={`${
-                                            styles['drawaction-circle']
-                                        } ${
-                                            toolClass === 'circle'
-                                                ? styles['drawactive']
-                                                : ''
-                                        }`}
-                                    >
-                                        <Circle size={16} /> Circle
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() => sketchRef.current.undo()}
-                                        className={styles['drawaction-undo']}
-                                    >
-                                        <ArrowBack size={16} /> Undo
-                                    </button>
-                                </li>
-                                <li>
-                                    <button
-                                        onClick={() =>
-                                            sketchRef.current.clearCanvas()
-                                        }
-                                        className={styles['drawactions--clear']}
-                                    >
-                                        <TrashCan size={16} /> Clear
-                                    </button>
-                                </li>
-                            </ul>
-                            {(canvasUrl || inputValue?.state) && (
-                                <SketchField
-                                    ref={sketchRef}
-                                    width={740}
-                                    height={800}
-                                    tool={sketchTool}
-                                    lineColor={lineColor}
-                                    lineWidth={lineWidth}
-                                    className={styles.drawcontainer}
-                                    backgroundImage={canvasUrl}
-                                    defaultValue={inputValue?.state || null}
-                                />
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </Popup>
         </div>
     );
 }