@visns-studio/visns-components 3.0.7 → 3.0.9

package/components/crm/Breadcrumb.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { CircleChevronRight } from 'akar-icons';
+
+function Breadcrumb({ data, page }) {
+    return (
+        <h1>
+            <Link to={page && page.previousUrl ? page.previousUrl : null}>
+                {page && page.title ? page.title : null}
+            </Link>{' '}
+            {data && data[page.titleKey] ? (
+                <>
+                    <CircleChevronRight strokeWidth={2} size={18} />{' '}
+                    {data[page.titleKey]}
+                </>
+            ) : null}
+        </h1>
+    );
+}
+
+export default Breadcrumb;

package/components/crm/DataGrid.jsx

@@ -573,8 +573,6 @@ const DataGrid = forwardRef(
         const sortTrigger = () => {
             const url = form.url.replace('/ajax', '');
 
-            console.info(ajaxSetting, columns, form);
-
             const newState = {
                 form: form,
                 page: {
@@ -979,7 +977,9 @@ const DataGrid = forwardRef(
                             filterEditorProps = (props, { index }) => {
                                 return {
                                     dateFormat: 'DD-MM-YYYY',
-                                    placeholder: 'All Dates',
+                                    placeholder: column.filter.placeholder
+                                        ? column.filter.placeholder
+                                        : 'Select Date',
                                 };
                             };
                             break;
@@ -1013,6 +1013,8 @@ const DataGrid = forwardRef(
                         return {
                             ...commonProps,
                             name: `${column.type}.${column.id}`,
+                            filterEditor: filterEditor,
+                            filterEditorProps: filterEditorProps,
                             render: ({ data }) => {
                                 const addressFields = [
                                     'address1',
@@ -1853,7 +1855,11 @@ const DataGrid = forwardRef(
                             ''
                         );
                     } else {
-                        filterName = column.id;
+                        if (column.type === 'address') {
+                            filterName = `address.${column.id}`;
+                        } else {
+                            filterName = column.id;
+                        }
                     }
 
                     if (column.nameFrom) {
@@ -1879,99 +1885,79 @@ const DataGrid = forwardRef(
             }
         }, [filterValue]);
 
+        const createFilterName = (column) => {
+            let filterName = Array.isArray(column.id)
+                ? column.id.join('.') + '.'
+                : column.id;
+
+            if (column.nameFrom) {
+                filterName += column.nameFrom;
+            }
+
+            if (column.jsonData) {
+                filterName += column.jsonData;
+            }
+
+            return filterName;
+        };
+
+        const updateFilterDataSource = (filterName, data) => {
+            const filterIndex = filterDataSource.findIndex(
+                (filter) => filter.id === filterName
+            );
+
+            if (filterIndex >= 0) {
+                const updatedFilter = {
+                    ...filterDataSource[filterIndex],
+                    dataset: data,
+                };
+                setFilterDataSource([
+                    ...filterDataSource.slice(0, filterIndex),
+                    updatedFilter,
+                    ...filterDataSource.slice(filterIndex + 1),
+                ]);
+            } else {
+                const newFilter = {
+                    id: filterName,
+                    dataset: data,
+                };
+                setFilterDataSource((prevState) => [...prevState, newFilter]);
+            }
+        };
+
         useEffect(() => {
             columns.forEach((column) => {
                 if (column.filter && column.filter.url) {
-                    let filterWhere = {};
-
-                    if (column.filter.where) {
-                        filterWhere = {
-                            ...filterWhere,
+                    const filterWhere = {
+                        ...(column.filter.where && {
                             where: column.filter.where,
-                        };
-                    }
-
-                    if (column.filter.fields) {
-                        filterWhere = {
-                            ...filterWhere,
+                        }),
+                        ...(column.filter.fields && {
                             fields: column.filter.fields,
-                        };
-                    }
+                        }),
+                        ...(column.filter.order && {
+                            order: column.filter.order,
+                        }),
+                        ...(column.filter.orderBy && {
+                            orderBy: column.filter.orderBy,
+                        }),
+                    };
 
                     CustomFetch(
                         column.filter.url,
                         'POST',
                         filterWhere,
                         (res) => {
-                            let filterName;
-                            if (Array.isArray(column.id)) {
-                                const concatenatedIds = column.id.reduce(
-                                    (acc, id) => acc + `${id}.`,
-                                    ''
-                                );
-                                filterName = column.nameFrom
-                                    ? concatenatedIds + column.nameFrom
-                                    : concatenatedIds;
-                            } else {
-                                filterName = column.nameFrom
-                                    ? column.id + column.nameFrom
-                                    : column.id;
-                            }
-
-                            if (column.jsonData) {
-                                filterName += column.jsonData;
-                            }
-
-                            const filterIndex = filterDataSource.findIndex(
-                                (filter) => filter.id === filterName
-                            );
-                            if (filterIndex >= 0) {
-                                const updatedFilter = {
-                                    ...filterDataSource[filterIndex],
-                                    dataset: res.data,
-                                };
-                                const updatedDataSource = [
-                                    ...filterDataSource.slice(0, filterIndex),
-                                    updatedFilter,
-                                    ...filterDataSource.slice(filterIndex + 1),
-                                ];
-                                setFilterDataSource(updatedDataSource);
-                            } else {
-                                const newFilter = {
-                                    id: filterName,
-                                    dataset: res.data,
-                                };
-                                setFilterDataSource((prevState) => [
-                                    ...prevState,
-                                    newFilter,
-                                ]);
-                            }
+                            const filterName = createFilterName(column);
+                            updateFilterDataSource(filterName, res.data);
                         }
                     );
                 } else if (column.filter && column.filter.options) {
-                    let filterName = Array.isArray(column.id)
-                        ? column.id.reduce((acc, id) => acc + `${id}.`, '')
-                        : column.id;
-
-                    if (column.nameFrom) {
-                        filterName += column.nameFrom;
-                    }
-
-                    if (column.jsonData) {
-                        filterName += column.jsonData;
-                    }
-
-                    const newFilter = {
-                        id: filterName,
-                        dataset: column.filter.options,
-                    };
-                    setFilterDataSource((prevState) => [
-                        ...prevState,
-                        newFilter,
-                    ]);
+                    const filterName = createFilterName(column);
+                    updateFilterDataSource(filterName, column.filter.options);
                 }
             });
-        }, []);
+        }, [columns]);
 
         // Data Grid Styling
         const [windowHeight, setWindowHeight] = useState(window.innerHeight);
@@ -1994,34 +1980,23 @@ const DataGrid = forwardRef(
         };
 
         useEffect(() => {
-            setGridStyle((prevState) => ({
-                ...prevState,
-                minHeight:
-                    gridHeight && gridHeight > 0
-                        ? gridHeight
-                        : dataCount > 5
-                        ? dataCount > 8
-                            ? windowHeight * 0.7 > 550
-                                ? windowHeight * 0.7
-                                : 550
-                            : 450
-                        : 400,
-            }));
-
-            let dgHeight =
-                gridHeight && gridHeight > 0
-                    ? gridHeight
-                    : dataCount > 5
-                    ? dataCount > 8
-                        ? windowHeight * 0.7 > 550
-                            ? windowHeight * 0.7
-                            : 550
-                        : 450
-                    : 400;
+            const getMinimumHeight = () => {
+                if (gridHeight > 0) return gridHeight;
+                if (dataCount > 0) {
+                    if (dataCount <= 5) return 400;
+                    if (dataCount <= 8) return 450;
+                }
+                return Math.max(window.innerHeight * 0.7, 550);
+            };
+
+            const calculateRows = (height) => Math.floor((height - 100) / 40);
+
+            const minHeight = getMinimumHeight();
+            setGridStyle((prevState) => ({ ...prevState, minHeight }));
 
-            let rowCount = Math.floor((dgHeight - 100) / 40);
+            const rowCount = calculateRows(minHeight);
             setLimit(rowCount);
-        }, [dataCount]);
+        }, [dataCount, gridHeight, window.innerHeight]);
 
         useEffect(() => {
             const handleResize = () => {

package/components/crm/Loader.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { usePromiseTracker } from 'react-promise-tracker';
 
-function VisnsLoader(props) {
+function VisnsLoader({}) {
     const { promiseInProgress } = usePromiseTracker();
     const [loaderStyle, setLoaderStyle] = useState({
         opacity: 0,

package/components/crm/generic/GenericDetail.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Popup from 'reactjs-popup';
@@ -8,16 +8,11 @@ import Dropzone from 'react-dropzone';
 import { confirmAlert } from 'react-confirm-alert';
 import truncate from 'truncate';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import {
-    CircleCheck,
-    CircleChevronRight,
-    Copy,
-    File,
-    TrashCan,
-} from 'akar-icons';
+import { CircleCheck, Copy, File, TrashCan } from 'akar-icons';
 
 import 'react-confirm-alert/src/react-confirm-alert.css';
 
+import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import Form from '../Form';
 import QrCode from '../QrCode';
@@ -876,26 +871,7 @@ function GenericDetail({ setting, urlParam, userProfile }) {
             <div className="grid">
                 <div className="grid__row">
                     <div className="grid__full crmtitle">
-                        <h1>
-                            <Link
-                                to={
-                                    page && page.previousUrl
-                                        ? page.previousUrl
-                                        : null
-                                }
-                            >
-                                {page && page.title ? page.title : null}
-                            </Link>{' '}
-                            {data && data[page.titleKey] ? (
-                                <>
-                                    <CircleChevronRight
-                                        strokeWidth={2}
-                                        size={18}
-                                    />{' '}
-                                    {data[page.titleKey]}
-                                </>
-                            ) : null}
-                        </h1>
+                        <Breadcrumb data={data} page={page} />
                         {total > 0 && (
                             <div className="titleInfo">
                                 <span>

package/index.js

@@ -7,6 +7,7 @@ import SortableList from './components/cms/sorting/List';
 /** CRM Components */
 import AsyncSelect from './components/crm/AsyncSelect';
 import Autocomplete from './components/crm/Autocomplete';
+import Breadcrumb from './components/crm/Breadcrumb';
 import Call from './components/crm/Call';
 import CustomFetch from './components/crm/Fetch';
 import Download from './components/crm/Download';
@@ -41,6 +42,7 @@ import NotificationList from './components/crm/generic/NotificationList';
 export {
     AsyncSelect,
     Autocomplete,
+    Breadcrumb,
     Call,
     CmsDetail,
     CmsForm,

package/package.json

@@ -6,12 +6,12 @@
         "akar-icons": "^1.9.30",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.6.3",
-        "framer-motion": "^10.16.16",
-        "html-react-parser": "^5.0.11",
+        "axios": "^1.6.5",
+        "framer-motion": "^10.18.0",
+        "html-react-parser": "^5.1.0",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
-        "motion": "^10.16.4",
+        "motion": "^10.17.0",
         "numeral": "^2.0.6",
         "quill-image-uploader": "^1.3.0",
         "react-color": "^2.19.3",
@@ -46,7 +46,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "3.0.7",
+    "version": "3.0.9",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {