@visns-studio/visns-components 4.7.1 → 4.7.3

package/src/components/cms/generic/CmsSort.jsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import Reveal from 'react-reveal/Reveal';
+import { arrayMoveImmutable } from 'array-move';
+import { toast } from 'react-toastify';
+import CustomFetch from '../../crm/Fetch';
+import SortableList from '../sorting/List';
+
+const ChildSort = ({ item, url }) => {
+    const [data, setData] = useState(item.child);
+
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        setData((prevItem) => arrayMoveImmutable(prevItem, oldIndex, newIndex));
+    };
+
+    useEffect(() => {
+        if (data.length > 0) {
+            CustomFetch(
+                url + '/sort_update',
+                'POST',
+                {
+                    list: data,
+                },
+                function (result) {
+                    if (result.error === '') {
+                    } else {
+                        toast.error(String(result.error));
+                    }
+                }
+            );
+        }
+    }, [data]);
+
+    return (
+        <>
+            <h1>{item.label}</h1>
+            <SortableList
+                items={data}
+                onSortEnd={onSortEnd}
+                axis="xy"
+                helperClass="dragitem"
+                showImage={true}
+                transitionDuration={250}
+                useDragHandle
+            />
+        </>
+    );
+};
+
+const CmsSort = ({ setting, category = false }) => {
+    const location = useLocation();
+    const { form } = setting;
+    const [data, setData] = useState([]);
+    const url = form.url;
+
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        setData((prevItem) => arrayMoveImmutable(prevItem, oldIndex, newIndex));
+    };
+
+    useEffect(() => {
+        if (category === false) {
+            if (data.length > 0) {
+                CustomFetch(
+                    url + '/sort_update',
+                    'POST',
+                    {
+                        list: data,
+                    },
+                    function (result) {
+                        if (result.error === '') {
+                        } else {
+                            toast.error(String(result.error));
+                        }
+                    }
+                );
+            }
+        }
+    }, [data]);
+
+    useEffect(() => {
+        CustomFetch(url + '/sort_list', 'POST', {}, function (result) {
+            setData(result);
+        });
+    }, []);
+
+    return (
+        <Reveal effect="fadeInUp">
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full cmstitle">
+                        <h1>{form.sort.title}</h1>
+                    </div>
+                </div>
+            </div>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full">
+                        {category === false ? (
+                            <SortableList
+                                items={data}
+                                onSortEnd={onSortEnd}
+                                axis="xy"
+                                helperClass="dragitem"
+                                showImage={true}
+                                transitionDuration={250}
+                                useDragHandle
+                            />
+                        ) : (
+                            data.length > 0 &&
+                            data.map((item) => (
+                                <ChildSort
+                                    key={`category-${item.id}`}
+                                    item={item}
+                                    url={url}
+                                />
+                            ))
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Reveal>
+    );
+};
+
+export default CmsSort;

package/src/components/cms/sorting/Item.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { SortableElement, sortableHandle } from 'react-sortable-hoc';
+import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+
+const DragHandle = sortableHandle(() => (
+    <ChevronVertical className="drag-handle" strokeWidth={1} size={26} />
+));
+
+// Utility function to truncate text
+const truncateText = (text, maxLength) => {
+    if (text && text.length > maxLength) {
+        return `${text.substring(0, maxLength)}...`;
+    }
+    return text;
+};
+
+const SortableItem = ({
+    containerIndex,
+    handleClick,
+    handleEdit,
+    handleDelete,
+    showImage,
+    value,
+}) => {
+    const renderImage = (d) => {
+        let htmlContainer = '';
+
+        if (showImage) {
+            const imageUrl = d.image_url || d.file_url;
+            htmlContainer = imageUrl ? (
+                <div className="sortimg">
+                    <img src={imageUrl} alt="" />
+                </div>
+            ) : (
+                <div className="sortimg">
+                    {/* Placeholder image */}
+                    <img
+                        src="data:image/png;base64,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"
+                        alt="Placeholder"
+                    />
+                </div>
+            );
+        }
+
+        return htmlContainer;
+    };
+
+    const renderEditButton = () => {
+        if (!handleEdit) return null;
+
+        if (showImage) {
+            if (
+                value.hasOwnProperty('file_title') &&
+                value.hasOwnProperty('file_description')
+            ) {
+                return <EditButton />;
+            }
+            return null;
+        }
+
+        return <EditButton />;
+    };
+
+    const EditButton = () => (
+        <Pencil
+            className="delete pencil-edit"
+            strokeWidth={1}
+            size={26}
+            onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleEdit(value);
+            }}
+        />
+    );
+
+    return (
+        <li
+            onClick={(e) => {
+                e.preventDefault();
+                if (handleClick) {
+                    handleClick(containerIndex);
+                }
+            }}
+        >
+            <DragHandle />
+            {truncateText(
+                value.label || value.file_title || value.file_name,
+                30
+            )}
+
+            {renderImage(value)}
+
+            {renderEditButton()}
+
+            {handleDelete && (
+                <TrashCan
+                    className="delete"
+                    strokeWidth={1}
+                    size={26}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleDelete(
+                            value.id || containerIndex,
+                            value.label || value.file_name
+                        );
+                    }}
+                />
+            )}
+        </li>
+    );
+};
+
+export default SortableElement(SortableItem);

package/src/components/cms/sorting/List.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import VisnsSortableItem from './Item';
+import { SortableContainer } from 'react-sortable-hoc';
+
+const SortableList = ({
+    handleClick,
+    handleDelete,
+    handleEdit,
+    items,
+    showImage,
+}) => {
+    return (
+        <ul className="sortlist">
+            {items.map((value, index) => (
+                <VisnsSortableItem
+                    key={`item-${index}`}
+                    containerIndex={index}
+                    index={index}
+                    handleClick={handleClick}
+                    handleDelete={handleDelete}
+                    handleEdit={handleEdit}
+                    showImage={showImage}
+                    value={value}
+                />
+            ))}
+        </ul>
+    );
+};
+
+export default SortableContainer(SortableList);

package/src/components/crm/AsyncSelect.jsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import CustomFetch from './Fetch';
+import SelectList from './SelectList';
+import AsyncSelect from 'react-select/async';
+import { debounce } from 'lodash';
+import styles from './styles/AsyncSelect.module.scss';
+
+function VisnsAsyncSelect({
+    fields = [],
+    inputValue,
+    onChange,
+    orderBy,
+    onKeyDown,
+    placeholder,
+    settings,
+}) {
+    const loadSuggestedOptions = useCallback(
+        debounce((inputValue, callback) => {
+            if (inputValue.length >= 3) {
+                loadOptions(inputValue).then((options) => callback(options));
+            } else {
+                callback([]); // Return empty array if input is less than 3 characters
+            }
+        }, 500),
+        []
+    );
+
+    const loadOptions = (inputValue) => {
+        if (inputValue.length >= 3) {
+            return new Promise((resolve, reject) => {
+                let data = [];
+
+                // Prepare payload
+                let payload = {
+                    where: [
+                        {
+                            id: 'async',
+                            value: inputValue,
+                        },
+                    ],
+                };
+
+                // 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 _optionItem = {
+                                value: a.id,
+                                label: a.label,
+                            };
+
+                            Object.keys(a).forEach((b) => {
+                                if (b !== 'id') {
+                                    _optionItem = {
+                                        ..._optionItem,
+                                        [b]: a[b],
+                                    };
+                                }
+                            });
+
+                            data.push(_optionItem);
+                        });
+
+                        resolve(data);
+                    },
+                    function (error) {
+                        reject(String(error));
+                    }
+                );
+            });
+        } else {
+            return Promise.resolve([]); // Return empty array if input is less than 3 characters
+        }
+    };
+
+    return (
+        <AsyncSelect
+            isClearable
+            cacheOptions
+            loadOptions={loadSuggestedOptions}
+            defaultOptions
+            className={styles.visns__ms}
+            onChange={(inputValue, action) => {
+                onChange(inputValue, action, settings.id);
+            }}
+            onKeyDown={(e) => {
+                if (onKeyDown) {
+                    onKeyDown(e);
+                }
+            }}
+            components={{ SelectList }}
+            styles={{
+                menu: (styles) => ({
+                    ...styles,
+                    zIndex: 9999,
+                }),
+                input: (styles) => ({
+                    ...styles,
+                    padding: 0,
+                }),
+            }}
+            value={inputValue}
+            placeholder={placeholder ? placeholder : 'Select...'}
+        />
+    );
+}
+
+export default VisnsAsyncSelect;

package/src/components/crm/Autocomplete.jsx

@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import AwesomeDebouncePromise from 'awesome-debounce-promise';
+import { ToggleOffFill, ToggleOnFill } from 'akar-icons';
+import styles from './styles/Autocomplete.module.scss';
+
+const VisnsAutocomplete = (props) => {
+    const {
+        api,
+        country,
+        field,
+        inputValue,
+        mapbox,
+        onSelect,
+        setFormData,
+        style,
+    } = props;
+    const [search, setSearch] = useState('');
+    const [results, setResults] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [overwrite, setOverwrite] = useState(false);
+
+    const performSearch = (id, value) => {
+        if (id > 0) {
+            if (value === '') {
+                setResults([]);
+                setIsLoading(false);
+            } else {
+                let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
+
+                if (country) {
+                    url += `&country=${country}`;
+                }
+
+                if (mapbox) {
+                    if (mapbox.proximity) {
+                        url += `&proximity=${mapbox.proximity}`;
+                    }
+
+                    if (mapbox.bbox) {
+                        url += `&bbox=${mapbox.bbox}`;
+                    }
+                }
+
+                axios
+                    .get(url)
+                    .then((response) => {
+                        setResults(response.data.features);
+                        setIsLoading(false);
+                    })
+                    .catch(function (error) {
+                        console.log(error);
+                    });
+            }
+        }
+    };
+
+    const handleSearchChange = async (e) => {
+        if (e) {
+            setSearch(e.target.value);
+            setFormData((prevState) => ({
+                ...prevState,
+                [field]: e.target.value,
+            }));
+
+            if (overwrite === false) {
+                setIsLoading(true);
+            }
+
+            if (overwrite === false) {
+                await performSearchDebounced(1, e.target.value);
+            }
+        }
+    };
+
+    const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
+        key: (id, value) => id,
+    });
+
+    const handleItemClicked = (place) => {
+        const address =
+            place.address !== undefined && place.address !== null
+                ? place.address
+                : '';
+        const text =
+            place.text !== undefined && place.text !== null ? place.text : '';
+
+        const search = address && text ? `${address} ${text}` : text;
+        setSearch(search);
+        setResults([]);
+        onSelect(place, field);
+    };
+
+    const handleOverwrite = () => {
+        if (overwrite === false) {
+            setOverwrite(true);
+            setResults([]);
+        } else {
+            setOverwrite(false);
+        }
+    };
+
+    useEffect(() => {
+        if (overwrite === false) {
+            if (search !== '') {
+                performSearch();
+            }
+        }
+    }, [overwrite]);
+
+    useEffect(() => {
+        setSearch(inputValue);
+    }, [inputValue]);
+
+    return (
+        <>
+            <div className={styles.AutocompletePlace}>
+                <input
+                    className={styles['AutocompletePlace-input']}
+                    style={{
+                        height:
+                            style && style.multi_select_height
+                                ? style.multi_select_height
+                                : '52px',
+                    }}
+                    type="text"
+                    value={search || ''}
+                    onChange={handleSearchChange}
+                    placeholder="Type an address"
+                    autoComplete="off"
+                />
+                {overwrite === false ? (
+                    <ToggleOffFill
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Disable Autocomplete"
+                        strokeWidth={2}
+                        size={24}
+                        onClick={handleOverwrite}
+                    />
+                ) : (
+                    <ToggleOnFill
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Enable Autocomplete"
+                        strokeWidth={2}
+                        size={24}
+                        onClick={handleOverwrite}
+                        className={styles.toggleActive}
+                    />
+                )}
+                {results.length > 0 ? (
+                    <ul className="AutocompletePlace-results">
+                        {results.map((place) => (
+                            <li
+                                key={place.id}
+                                className={styles['AutocompletePlace-items']}
+                                onClick={() => handleItemClicked(place)}
+                            >
+                                {place.place_name}
+                            </li>
+                        ))}
+
+                        {isLoading && (
+                            <li className={styles['AutocompletePlace-items']}>
+                                Loading...
+                            </li>
+                        )}
+                    </ul>
+                ) : null}
+            </div>
+        </>
+    );
+};
+
+export default VisnsAutocomplete;

package/src/components/crm/Breadcrumb.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { CircleChevronRight } from 'akar-icons';
+
+function Breadcrumb({ data, page }) {
+    const getNestedData = (data, keys) =>
+        keys.reduce((acc, key) => (acc && acc[key] ? acc[key] : null), data);
+
+    const nestedData =
+        data && page.parentTitleKey
+            ? getNestedData(data, page.parentTitleKey)
+            : null;
+
+    return (
+        <h1>
+            {page?.parentTitle && page?.parentUrl && (
+                <>
+                    <Link to={page.parentUrl}>{page.parentTitle}</Link>
+                    <CircleChevronRight strokeWidth={2} size={18} />
+                </>
+            )}
+
+            {nestedData ? (
+                <>
+                    <Link
+                        to={`${page.parentUrl}/${getNestedData(
+                            data,
+                            page.parentUrlKey
+                        )}`}
+                    >
+                        {nestedData}
+                    </Link>
+                    <CircleChevronRight strokeWidth={2} size={18} />
+                </>
+            ) : (
+                page &&
+                page.title && (
+                    <>
+                        <Link to={page.previousUrl}>{page.title}</Link>
+                        <CircleChevronRight strokeWidth={2} size={18} />
+                    </>
+                )
+            )}
+
+            {page.titleKey && data && data[page.titleKey] && (
+                <>{data[page.titleKey]}</>
+            )}
+        </h1>
+    );
+}
+
+export default Breadcrumb;