@visns-studio/visns-components 4.6.10 → 4.6.12

package/components/crm/DataGrid.jsx

@@ -43,6 +43,7 @@ import {
     Image,
     Inbox,
     LinkOut,
+    LockOn,
     Network,
     Ribbon,
     Search,
@@ -378,6 +379,34 @@ const DataGrid = forwardRef(
                         toast.success(result.message);
                     });
                     break;
+                case 'oauth2':
+                    let oauth2Payload = d;
+
+                    if (s.key?.detailKey?.length > 0) {
+                        for (const k of s.key.detailKey) {
+                            if (oauth2Payload?.[k]) {
+                                oauth2Payload = oauth2Payload[k];
+                            } else {
+                                oauth2Payload = undefined;
+                                break;
+                            }
+                        }
+                    }
+                    CustomFetch(
+                        s.key.redirect,
+                        'POST',
+                        { ...oauth2Payload, id: d.id },
+                        (result) => {
+                            if (result.url !== '') {
+                                window.location.href = result.url;
+                            } else {
+                                toast.error(
+                                    'An error occurred while processing the request.'
+                                );
+                            }
+                        }
+                    );
+                    break;
                 case 'delete':
                     const getDataId = () => {
                         for (const item of ajaxSetting.where) {
@@ -727,20 +756,25 @@ const DataGrid = forwardRef(
         };
 
         const sortTrigger = () => {
-            const url = form.url.replace('/ajax', '');
+            let baseUrl = form.url.replace('/ajax', '');
+            let sortUrl = paramValue
+                ? `${baseUrl}/${paramValue}/sort`
+                : `${baseUrl}/sort`;
+
+            if (form.sort?.url) {
+                sortUrl = form.sort.url;
+            }
 
             const newState = {
-                form: form,
+                form,
                 page: {
                     data: pageData,
                     setting: pageSetting,
                 },
-                paramValue: paramValue,
+                paramValue,
             };
 
-            navigate(`${url}/${paramValue}/sort`, {
-                state: newState,
-            });
+            navigate(sortUrl, { state: newState });
         };
 
         const renderCreateButton = () => {
@@ -1014,12 +1048,33 @@ const DataGrid = forwardRef(
                 }
             }
 
+            if (s.id === 'oauth2') {
+                let tmpCheckValue = d;
+
+                if (s.key?.check?.length > 0) {
+                    for (const k of s.key.check) {
+                        if (tmpCheckValue?.[k]) {
+                            tmpCheckValue = tmpCheckValue[k];
+                        } else {
+                            tmpCheckValue = undefined;
+                            break;
+                        }
+                    }
+                }
+
+                if (!tmpCheckValue) {
+                    allow = false;
+                }
+            }
+
             if (allow) {
                 switch (s.id) {
                     case 'activate':
                         return getIconComponent(CircleCheck);
                     case 'archive':
                         return getIconComponent(ShippingBoxV1);
+                    case 'oauth2':
+                        return getIconComponent(LockOn);
                     case 'complete':
                         return getIconComponent(Check);
                     case 'copy':
@@ -1851,8 +1906,6 @@ const DataGrid = forwardRef(
                                             }
                                         }, '');
 
-                                        console.info(value);
-
                                         if (value) {
                                             if (Array.isArray(value)) {
                                                 if (value[0]) {

package/components/crm/Field.jsx

@@ -59,7 +59,7 @@ function Field({
     const [counter, setCounter] = useState(0);
     const [dataOptions, setDataOptions] = useState([]);
     const [formItemStyle, setFormItemStyle] = useState({});
-    const [formItemClass, setFormItemClass] = useState('formItem');
+    const [formItemClass, setFormItemClass] = useState('');
     const [options, setOptions] = useState([]);
 
     const cover = {
@@ -140,10 +140,16 @@ function Field({
                 break;
         }
 
-        if (settings.size === 'full') {
-            setFormItemClass('formItem fwItem');
-        } else if (settings.size === 'quarter') {
-            setFormItemClass('formItem qtrItem');
+        switch (settings.size) {
+            case 'full':
+                setFormItemClass(`${styles.formItem} ${styles.fwItem}`);
+                break;
+            case 'quarter':
+                setFormItemClass(`${styles.formItem} ${styles.qtrItem}`);
+                break;
+            default:
+                setFormItemClass(`${styles.formItem}`);
+                break;
         }
     }, [settings, counter]);
 

package/components/crm/Loader.jsx

@@ -15,10 +15,10 @@ function VisnsLoader({}) {
     }, [promiseInProgress]);
 
     return (
-        <div className="preloader" style={loaderStyle}>
-            <div className="preloader__icn">
-                <div className="preloader__cut">
-                    <div className="preloader__donut"></div>
+        <div className={styles.preloader} style={loaderStyle}>
+            <div className={styles.preloader__icn}>
+                <div className={styles.preloader__cut}>
+                    <div className={styles.preloader__donut}></div>
                 </div>
             </div>
             <span>Processing Data</span>

package/components/crm/generic/GenericDetail.jsx

@@ -235,6 +235,7 @@ function GenericDetail({
                     {size === 'full' && truncatedValue
                         ? parse(`<br /><p>${truncatedValue}</p>`)
                         : truncatedValue}
+                    aaa
                     <CopyToClipboard
                         text={
                             truncatedValue && truncatedValue !== 'null'

package/components/crm/generic/GenericSort.jsx

@@ -1,12 +1,22 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { arrayMoveImmutable } from 'array-move';
 import { toast } from 'react-toastify';
-import { CircleChevronRight } from 'akar-icons';
 import CustomFetch from '../../crm/Fetch';
-import SortableList from '../../cms/sorting/List';
+import SortableList from '../sorting/List';
+import Breadcrumb from '../Breadcrumb';
 import styles from './styles/GenericSort.module.css';
 
+// Utility function to convert camelCase to space-separated words with uppercase first letters
+function camelCaseToUcFirst(str) {
+    return str
+        .replace(/([A-Z])/g, ' $1') // Add a space before each uppercase letter
+        .replace(/^./, function (str) {
+            return str.toUpperCase();
+        }) // Capitalize the first letter
+        .trim(); // Remove leading and trailing whitespace
+}
+
 const ChildSort = ({ item, url }) => {
     const [data, setData] = useState(item.child);
 
@@ -17,13 +27,14 @@ const ChildSort = ({ item, url }) => {
     useEffect(() => {
         if (data.length > 0) {
             CustomFetch(
-                url + '/sort_update',
+                `${url}/sort_update`,
                 'POST',
                 {
                     list: data,
                 },
                 function (result) {
                     if (result.error === '') {
+                        toast.success('Sort updated successfully');
                     } else {
                         toast.error(String(result.error));
                     }
@@ -47,15 +58,18 @@ const ChildSort = ({ item, url }) => {
     );
 };
 
-const GenericSort = ({ category = false }) => {
+const GenericSort = ({ category = false, layout = 'full' }) => {
     const location = useLocation();
+    const routeParams = useParams();
     const {
         form,
-        page: { data, setting },
+        page = {}, // Provide a default empty object for page
         paramValue,
-    } = location.state;
+    } = location.state || {}; // Safely access location.state
+
     const [sortData, setSortData] = useState([]);
-    const url = form.url;
+    const url = form?.url;
+    const data = page?.data || {}; // Safely access data from page, default to an empty object
 
     const onSortEnd = ({ oldIndex, newIndex }) => {
         setSortData((prevItem) =>
@@ -68,7 +82,7 @@ const GenericSort = ({ category = false }) => {
             let fetchUrl = url;
             let payload = {};
 
-            if (form.json) {
+            if (form?.json) {
                 fetchUrl = fetchUrl + '/jsonSortList';
                 payload.id = paramValue;
             } else {
@@ -76,7 +90,6 @@ const GenericSort = ({ category = false }) => {
             }
 
             const res = await CustomFetch(fetchUrl, 'POST', payload);
-
             setSortData(res.data);
         } catch (err) {
             console.log(err);
@@ -90,7 +103,7 @@ const GenericSort = ({ category = false }) => {
                 list: sortData,
             };
 
-            if (form.json) {
+            if (form?.json) {
                 fetchUrl = fetchUrl + '/jsonSortUpdate';
                 payload.id = paramValue;
             } else {
@@ -123,37 +136,23 @@ const GenericSort = ({ category = false }) => {
         <>
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
-                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
-                        <h1>
-                            <Link
-                                to={
-                                    setting && setting.previousUrl
-                                        ? setting.previousUrl
-                                        : null
-                                }
-                            >
-                                {setting && setting.title
-                                    ? setting.title
-                                    : null}
-                            </Link>{' '}
-                            {data && data[setting.titleKey] ? (
-                                <Link
-                                    to={
-                                        setting && setting.previousUrl
-                                            ? `${setting.previousUrl}/${paramValue}`
-                                            : null
-                                    }
-                                >
-                                    <CircleChevronRight
-                                        strokeWidth={2}
-                                        size={18}
-                                    />{' '}
-                                    {data[setting.titleKey]}{' '}
-                                </Link>
-                            ) : null}
-                            <CircleChevronRight strokeWidth={2} size={18} />{' '}
-                            {form?.sort?.title}
-                        </h1>
+                    <div
+                        className={`${styles.grid__full} ${
+                            layout === 'full'
+                                ? styles.crmtitle
+                                : styles.crmtitleSimple
+                        }`}
+                    >
+                        <Breadcrumb
+                            data={{
+                                label: camelCaseToUcFirst(routeParams.dataId),
+                            }} // Use utility function here
+                            page={{
+                                parentTitle: 'Settings',
+                                parentUrl: '/settings',
+                                titleKey: 'label',
+                            }}
+                        />
                     </div>
                 </div>
             </div>
@@ -165,7 +164,7 @@ const GenericSort = ({ category = false }) => {
                                 items={sortData}
                                 onSortEnd={onSortEnd}
                                 axis="xy"
-                                helperClass="dragitem"
+                                helperClass={styles.dragitem}
                                 transitionDuration={250}
                                 useDragHandle
                             />

package/components/crm/generic/styles/GenericSort.module.css

@@ -34,7 +34,7 @@
     min-height: auto;
     padding: 5px 20px;
     margin: 0;
-    background: var(--primary-color);
+    background: var(--tertiary-color);
     border-radius: var(--br);
     border: 1px solid rgba(var(--item-color-rgb), 1.15);
     position: relative;
@@ -42,7 +42,6 @@
     align-items: center;
 
     h1 {
-        color: var(--background-color);
         font-weight: 700;
         font-size: 1.15em;
         margin: 0;
@@ -53,11 +52,11 @@
 
         a {
             text-decoration: none;
-            color: var(--secondary-color);
+            color: rgba(var(--secondary-color-rgb), 1.1);
         }
 
         svg {
-            color: rgba(var(--tertiary-color-rgb), 0.5);
+            color: rgba(var(--primary-color-rgb), 0.25);
             position: relative;
             top: 0;
             margin: 0 0.5rem;
@@ -65,3 +64,60 @@
         }
     }
 }
+
+.dragitem {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    border-radius: 5px;
+    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+    box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.25);
+    padding: 1.25rem;
+    box-sizing: border-box;
+    cursor: grab;
+    list-style: none;
+    color: var(--paragraph-color);
+
+    svg {
+        width: 100%;
+        max-width: 18px;
+        position: absolute;
+        left: 5px;
+        top: 5px;
+    }
+
+    .pencil-edit {
+        width: 100%;
+        max-width: 18px;
+        position: absolute;
+        left: 5px;
+        top: 30px;
+    }
+
+    .trash-delete {
+        width: 100%;
+        max-width: 18px;
+        position: absolute;
+        left: 5px;
+        top: 60px;
+    }
+
+    .sortimg {
+        width: 50px;
+        position: relative;
+        height: 50px;
+        margin-left: auto;
+        border-radius: 5px;
+        overflow: hidden;
+
+        img {
+            display: block;
+            object-fit: cover;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+    }
+}

package/components/crm/sorting/Item.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { SortableElement, sortableHandle } from 'react-sortable-hoc';
+import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+
+import styles from './styles/Item.module.css';
+
+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={styles.sortimg}>
+                    <img src={imageUrl} alt="" />
+                </div>
+            ) : (
+                <div className={styles.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={styles['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={styles['trash-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/crm/sorting/List.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import VisnsSortableItem from './Item';
+import { SortableContainer } from 'react-sortable-hoc';
+
+import styles from './styles/List.module.css';
+
+const SortableList = ({
+    handleClick,
+    handleDelete,
+    handleEdit,
+    items,
+    showImage,
+}) => {
+    return (
+        <ul className={styles.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/sorting/styles/Item.module.css

@@ -0,0 +1,68 @@
+.sortlist {
+    width: 100%;
+    display: grid;
+    grid-gap: 0.5rem;
+    grid-template-columns: repeat(4, 1fr);
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        border-radius: 5px;
+        border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+        box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
+        padding: 1.25rem;
+        box-sizing: border-box;
+        cursor: pointer;
+        list-style: none;
+        position: relative;
+        color: var(--paragraph-color);
+        user-select: none;
+
+        svg {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 5px;
+        }
+
+        .pencil-edit {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 30px;
+        }
+
+        .trash-delete {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 60px;
+        }
+    }
+
+    .sortimg {
+        width: 50px;
+        position: relative;
+        height: 50px;
+        margin-left: auto;
+        border-radius: 5px;
+        overflow: hidden;
+
+        img {
+            display: block;
+            object-fit: cover;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+    }
+}

package/components/crm/sorting/styles/List.module.css

@@ -0,0 +1,68 @@
+.sortlist {
+    width: 100%;
+    display: grid;
+    grid-gap: 0.5rem;
+    grid-template-columns: repeat(4, 1fr);
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        border-radius: 5px;
+        border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+        box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
+        padding: 1.25rem;
+        box-sizing: border-box;
+        cursor: pointer;
+        list-style: none;
+        position: relative;
+        color: var(--paragraph-color);
+        user-select: none;
+
+        svg {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 5px;
+        }
+
+        .pencil-edit {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 30px;
+        }
+
+        .trash-delete {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 5px;
+            top: 60px;
+        }
+    }
+
+    .sortimg {
+        width: 50px;
+        position: relative;
+        height: 50px;
+        margin-left: auto;
+        border-radius: 5px;
+        overflow: hidden;
+
+        img {
+            display: block;
+            object-fit: cover;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+    }
+}

package/components/crm/styles/Field.module.css

@@ -36,9 +36,24 @@
     color: var(--primary-color);
 }
 
+.formItem {
+    width: 50%;
+    padding: 0.5em;
+    position: relative;
+    box-sizing: border-box;
+}
+
 .formItem .fi__label {
     position: relative;
     display: block;
+
+    > svg {
+        position: absolute;
+        right: 0.5em;
+        top: 1em;
+        color: var(--paragraph-color);
+        cursor: pointer;
+    }
 }
 
 .fi__span {
@@ -88,6 +103,16 @@ select:not(:placeholder-shown) + .fi__span {
     top: 0;
 }
 
+.fwItem {
+    flex-basis: 100%;
+}
+
+.lastItem {
+    .btn {
+        width: 100%;
+    }
+}
+
 .fi__button--right {
     position: absolute;
     right: 50px;
@@ -119,7 +144,6 @@ select:not(:placeholder-shown) + .fi__span {
     ) {
     background: var(--item-color);
     border-radius: var(--br);
-    border: 1px solid transparent;
     padding: 1rem;
     outline: none;
     width: 100%;

package/package.json

@@ -59,7 +59,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.6.10",
+    "version": "4.6.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {