@visns-studio/visns-components 4.6.13 → 4.7.1

package/components/cms/generic/CmsSort.jsx

@@ -1,125 +0,0 @@
-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/components/cms/sorting/Item.jsx

@@ -1,115 +0,0 @@
-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/components/cms/sorting/List.jsx

@@ -1,30 +0,0 @@
-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/components/crm/AsyncSelect.jsx

@@ -1,125 +0,0 @@
-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.css';
-
-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/components/crm/Autocomplete.jsx

@@ -1,174 +0,0 @@
-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.css';
-
-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/components/crm/Breadcrumb.jsx

@@ -1,52 +0,0 @@
-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;