@visns-studio/visns-components 2.3.3 → 2.3.5

package/components/cms/DataGrid.jsx

@@ -93,14 +93,12 @@ const loadData = async (
 
 const DataGrid = ({
     ajaxSetting,
-    form,
     columns,
+    form,
+    gridHeight,
     settings,
     setFilterData,
     style,
-    tableFilters,
-    historySearch,
-    historyUrl,
 }) => {
     const navigate = useNavigate();
 
@@ -325,7 +323,6 @@ const DataGrid = ({
 
     const sortTrigger = () => {
         const url = form.url.replace('/ajax', '');
-        console.info(url);
         const newState = {
             form: form,
         };
@@ -1294,7 +1291,9 @@ const DataGrid = ({
     const [dataCount, setDataCount] = useState(0);
     const [gridStyle, setGridStyle] = useState({
         minHeight:
-            dataCount > 5
+            gridHeight && gridHeight > 0
+                ? gridHeight
+                : dataCount > 5
                 ? dataCount > 8
                     ? windowHeight * 0.7 > 550
                         ? windowHeight * 0.7
@@ -1311,7 +1310,9 @@ const DataGrid = ({
         setGridStyle((prevState) => ({
             ...prevState,
             minHeight:
-                dataCount > 5
+                gridHeight && gridHeight > 0
+                    ? gridHeight
+                    : dataCount > 5
                     ? dataCount > 8
                         ? windowHeight * 0.7 > 550
                             ? windowHeight * 0.7
@@ -1321,7 +1322,9 @@ const DataGrid = ({
         }));
 
         let dgHeight =
-            dataCount > 5
+            gridHeight && gridHeight > 0
+                ? gridHeight
+                : dataCount > 5
                 ? dataCount > 8
                     ? windowHeight * 0.7 > 550
                         ? windowHeight * 0.7
@@ -1329,7 +1332,7 @@ const DataGrid = ({
                     : 450
                 : 400;
 
-        let rowCount = Math.floor((dgHeight - 50) / 50);
+        let rowCount = Math.floor((dgHeight - 100) / 40);
         setLimit(rowCount);
     }, [dataCount]);
 

package/components/cms/Form.jsx

@@ -1,25 +1,25 @@
-import React, { useState, useEffect } from "react";
-import CustomFetch from "../crm/Fetch";
-import Field from "./Field";
-import slugify from "react-slugify";
-import moment from "moment";
-import Reveal from "react-reveal/Reveal";
-import parse from "html-react-parser";
-import { confirmAlert } from "react-confirm-alert";
-import { toast } from "react-toastify";
-import { Copy, TrashBin } from "akar-icons";
-
-import "react-confirm-alert/src/react-confirm-alert.css";
+import React, { useState, useEffect } from 'react';
+import CustomFetch from '../crm/Fetch';
+import Field from './Field';
+import slugify from 'react-slugify';
+import moment from 'moment';
+import Reveal from 'react-reveal/Reveal';
+import parse from 'html-react-parser';
+import { confirmAlert } from 'react-confirm-alert';
+import { toast } from 'react-toastify';
+import { Copy, TrashBin } from 'akar-icons';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
 
 function Form(props) {
-    const { dataId, navigate, form, setActiveNav } = props;
+    const { dataId, navigate, form } = props;
     const [data, setData] = useState({});
     const [dataClass, setDataClass] = useState({});
     const [audit, setAudit] = useState({
         createdBy: {},
-        created: "",
+        created: '',
         updatedBy: {},
-        updated: "",
+        updated: '',
     });
     const [uploadProgress, setUploadProgress] = useState({});
 
@@ -28,7 +28,7 @@ function Form(props) {
             const { name, value } = e.target;
 
             switch (e.target.name) {
-                case "title":
+                case 'title':
                     setData((prevState) => ({
                         ...prevState,
                         [name]: value,
@@ -39,7 +39,7 @@ function Form(props) {
                         slug: slugify(value),
                     }));
                     break;
-                case "name":
+                case 'name':
                     setData((prevState) => ({
                         ...prevState,
                         [name]: value,
@@ -118,7 +118,7 @@ function Form(props) {
                     }));
                 },
             }).then((response) => {
-                if (data.hasOwnProperty("files")) {
+                if (data.hasOwnProperty('files')) {
                     let _files = data.files;
                     let _new = true;
 
@@ -184,32 +184,32 @@ function Form(props) {
         if (e) {
             e.preventDefault();
 
-            let error = "";
-            let url = "";
-            let method = "";
-            let message = "";
+            let error = '';
+            let url = '';
+            let method = '';
+            let message = '';
 
-            if (data.title === "") {
-                error += "Please enter a title.<br />";
+            if (data.title === '') {
+                error += 'Please enter a title.<br />';
             }
 
-            if (data.summary === "") {
-                error += "Please enter a summary.<br />";
+            if (data.summary === '') {
+                error += 'Please enter a summary.<br />';
             }
 
-            if (error === "") {
-                if (dataId === "create") {
+            if (error === '') {
+                if (dataId === 'create') {
                     url = form.url;
-                    method = "POST";
-                    message = "You have successfully created a new entry.";
+                    method = 'POST';
+                    message = 'You have successfully created a new entry.';
                 } else {
-                    url = form.url + "/" + dataId;
-                    method = "PUT";
-                    message = "You have successfully updated this entry.";
+                    url = form.url + '/' + dataId;
+                    method = 'PUT';
+                    message = 'You have successfully updated this entry.';
                 }
 
                 CustomFetch(url, method, data, function (result) {
-                    if (result.error === "") {
+                    if (result.error === '') {
                         let _uploadProgress = uploadProgress;
 
                         Object.keys(_uploadProgress).forEach((a, b) => {
@@ -221,10 +221,10 @@ function Form(props) {
 
                         toast.success(message);
 
-                        if (dataId === "create") {
+                        if (dataId === 'create') {
                             navigate(
-                                form.url.replace("/ajax", "") +
-                                    "/" +
+                                form.url.replace('/ajax', '') +
+                                    '/' +
                                     result.data.id,
                                 {
                                     state: {
@@ -246,21 +246,21 @@ function Form(props) {
     const handleDelete = (e) => {
         if (e) {
             confirmAlert({
-                title: "Delete this entry",
-                message: "Are you sure you want to delete it?",
+                title: 'Delete this entry',
+                message: 'Are you sure you want to delete it?',
                 buttons: [
                     {
-                        label: "Yes",
+                        label: 'Yes',
                         onClick: () =>
                             CustomFetch(
                                 `${form.url}/${dataId}`,
-                                "DELETE",
+                                'DELETE',
                                 {},
                                 function (result) {
-                                    if (result.error === "") {
-                                        navigate(form.url.replace("/ajax", ""));
+                                    if (result.error === '') {
+                                        navigate(form.url.replace('/ajax', ''));
                                         toast.success(
-                                            "You have successfully deleted this entry."
+                                            'You have successfully deleted this entry.'
                                         );
                                     } else {
                                         toast.error(result.error);
@@ -269,7 +269,7 @@ function Form(props) {
                             ),
                     },
                     {
-                        label: "No",
+                        label: 'No',
                         onClick: () => close(),
                     },
                 ],
@@ -281,14 +281,14 @@ function Form(props) {
         form.fields.forEach((a) => {
             setData((prevState) => ({
                 ...prevState,
-                [a.id]: "",
+                [a.id]: '',
             }));
         });
 
-        if (dataId !== "create") {
+        if (dataId !== 'create') {
             CustomFetch(
                 `${form.url}/${dataId}`,
-                "GET",
+                'GET',
                 {},
                 function (result) {
                     let now = moment();
@@ -306,32 +306,32 @@ function Form(props) {
                         created:
                             created.hours() > 24
                                 ? created.days() +
-                                  " Days " +
+                                  ' Days ' +
                                   created.hours() +
-                                  " Hour(s) " +
+                                  ' Hour(s) ' +
                                   created.minutes() +
-                                  " Minutes"
+                                  ' Minutes'
                                 : created.hours() +
-                                  " Hour(s) " +
+                                  ' Hour(s) ' +
                                   created.minutes() +
-                                  " Minutes",
+                                  ' Minutes',
                         updatedBy: result.audit_latest,
                         updated:
                             updated.hours() > 24
                                 ? updated.days() +
-                                  " Days " +
+                                  ' Days ' +
                                   updated.hours() +
-                                  " Hour(s) " +
+                                  ' Hour(s) ' +
                                   updated.minutes() +
-                                  " Minutes"
+                                  ' Minutes'
                                 : updated.hours() +
-                                  " Hour(s) " +
+                                  ' Hour(s) ' +
                                   updated.minutes() +
-                                  " Minutes",
+                                  ' Minutes',
                     }));
                 },
                 function (error) {
-                    navigate("/");
+                    navigate('/');
 
                     toast.error(String(error));
                 }
@@ -341,7 +341,7 @@ function Form(props) {
 
     useEffect(() => {
         form.fields.forEach((a) => {
-            if (a.type === "image") {
+            if (a.type === 'image') {
                 setUploadProgress((prevState) => ({
                     ...prevState,
                     [a.id]: 0,
@@ -350,17 +350,16 @@ function Form(props) {
 
             setData((prevState) => ({
                 ...prevState,
-                [a.id]: "",
+                [a.id]: '',
             }));
 
             setDataClass((prevState) => ({
                 ...prevState,
-                [a.id]: "",
+                [a.id]: '',
             }));
         });
 
         fetchData();
-        setActiveNav();
     }, [dataId]);
 
     return (
@@ -371,7 +370,7 @@ function Form(props) {
                         <h1>
                             {data.title
                                 ? data.title
-                                : dataId !== "create"
+                                : dataId !== 'create'
                                 ? form.update.title
                                 : form.create.title}
                         </h1>
@@ -380,8 +379,8 @@ function Form(props) {
                                 className="btn actionbtn"
                                 onClick={handleSubmit}
                             >
-                                <Copy size={18} strokeWidth={2} />{" "}
-                                {dataId !== "create" ? "Save" : "Create"}
+                                <Copy size={18} strokeWidth={2} />{' '}
+                                {dataId !== 'create' ? 'Save' : 'Create'}
                             </button>
                         </div>
                     </div>
@@ -396,19 +395,19 @@ function Form(props) {
                                     settings={a}
                                     key={
                                         b +
-                                        "-fields-" +
-                                        (a.hasOwnProperty("key")
-                                            ? a.id + "-" + a.key
+                                        '-fields-' +
+                                        (a.hasOwnProperty('key')
+                                            ? a.id + '-' + a.key
                                             : a.id)
                                     }
                                     inputValue={
-                                        a.hasOwnProperty("key")
+                                        a.hasOwnProperty('key')
                                             ? data[a.key]
                                             : Array.isArray(data[a.id]) &&
-                                              a.type === "image"
+                                              a.type === 'image'
                                             ? data[a.id].length > 0
                                                 ? data[a.id][0]
-                                                : ""
+                                                : ''
                                             : data[a.id]
                                     }
                                     inputClass={dataClass}
@@ -432,7 +431,7 @@ function Form(props) {
                             Created: <span>{audit.created} Ago</span>
                         </li>
                         <li>
-                            By:{" "}
+                            By:{' '}
                             <span>
                                 {audit &&
                                 audit.createdBy &&
@@ -445,7 +444,7 @@ function Form(props) {
                             Last Update: <span>{audit.updated} Ago</span>
                         </li>
                         <li>
-                            by:{" "}
+                            by:{' '}
                             <span>
                                 {audit &&
                                 audit.updatedBy &&
@@ -454,13 +453,13 @@ function Form(props) {
                                     : null}
                             </span>
                         </li>
-                        {dataId !== "create" ? (
+                        {dataId !== 'create' ? (
                             <li>
                                 <button
                                     className="btn actionbtn deletebtn"
                                     onClick={handleDelete}
                                 >
-                                    <TrashBin size={14} strokeWidth={2} />{" "}
+                                    <TrashBin size={14} strokeWidth={2} />{' '}
                                     Delete Entry
                                 </button>
                             </li>

package/components/cms/generic/CmsDetail.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import Reveal from 'react-reveal/Reveal';
+import CmsForm from '../Form';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
+
+function CmsDetail({}) {
+    const { dataId } = useParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { form } = location.state;
+
+    return (
+        <Reveal effect="fadeInUp">
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full">
+                        <CmsForm
+                            dataId={dataId}
+                            navigate={navigate}
+                            form={form}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Reveal>
+    );
+}
+
+export default CmsDetail;

package/components/cms/generic/CmsIndex.jsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import Reveal from 'react-reveal/Reveal';
+import DataGrid from '../DataGrid';
+
+function CmsIndex({ setting, userProfile }) {
+    const { ajaxSetting, columns, form, filters, page, settings } = setting;
+
+    const [config, setConfig] = useState({});
+    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+    const pageTitle = page?.title;
+
+    useEffect(() => {
+        setConfig(() => ({
+            ajaxSetting,
+            form,
+            columns,
+            settings,
+        }));
+    }, [setting]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // Clean up the event listener
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    return (
+        <>
+            <Reveal effect="fadeInUp">
+                <>
+                    <div className="grid">
+                        <div className="grid__row">
+                            <div className="grid__full cmstitle">
+                                <h1>{pageTitle}</h1>
+                            </div>
+                        </div>
+                    </div>
+                    {config.ajaxSetting &&
+                        config.form &&
+                        config.columns &&
+                        config.settings && (
+                            <div className="grid">
+                                <div className="grid__row">
+                                    <div className="grid__full">
+                                        <DataGrid
+                                            {...config}
+                                            gridHeight={windowHeight * 0.65}
+                                            style={
+                                                userProfile?.settings?.style ||
+                                                {}
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    <Outlet />
+                </>
+            </Reveal>
+        </>
+    );
+}
+
+export default CmsIndex;

package/components/cms/generic/CmsSort.jsx

@@ -0,0 +1,69 @@
+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';
+
+function CmsSort({}) {
+    const location = useLocation();
+    const { form } = location.state;
+    const [data, setData] = useState([]);
+    const url = form.url;
+
+    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]);
+
+    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">
+                        <SortableList
+                            items={data}
+                            onSortEnd={onSortEnd}
+                            axis="xy"
+                            helperClass="dragitem"
+                            transitionDuration={250}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Reveal>
+    );
+}
+
+export default CmsSort;

package/components/crm/Navigation.jsx

@@ -24,6 +24,7 @@ import {
     SignOut,
     Shield,
     StatisticUp,
+    TextAlignLeft,
     Ticket,
     Utensils,
 } from 'akar-icons';
@@ -122,8 +123,10 @@ function Navigation({
             peopleGroup: PeopleGroup,
             peopleMultiple: PeopleMultiple,
             settingsVertical: SettingsVertical,
+            signOut: SignOut,
             shippingboxv1: ShippingBoxV1,
             statisticUp: StatisticUp,
+            textAlignLeft: TextAlignLeft,
             ticket: Ticket,
             utensils: Utensils,
         };
@@ -250,9 +253,12 @@ function Navigation({
                 };
 
                 const currentUrl = cleanUrl(currentPage);
+                const navUrl = cleanUrl(nav.url)
+                    ? cleanUrl(nav.url)
+                    : 'dashboard';
 
                 if (
-                    cleanUrl(nav.url) === currentUrl ||
+                    navUrl === currentUrl ||
                     (nav.children &&
                         nav.children.some(
                             (child) => cleanUrl(child.url) === currentUrl
@@ -282,9 +288,15 @@ function Navigation({
         };
     }, []);
 
-    return layout === 'simple' ? (
+    return layout === 'simple' || layout === 'cms' ? (
         <div className="cwrap">
-            <aside className={'aside aside--open'}>
+            <aside
+                className={
+                    layout === 'cms'
+                        ? 'aside--cms aside--cms--open'
+                        : 'aside aside--open'
+                }
+            >
                 <div className="logo">
                     <Link to="/">
                         <img src={logo} alt="Visns Studio CRM" />

package/components/crm/generic/GenericDetail.jsx

@@ -110,6 +110,17 @@ function GenericDetail({ setting, urlParam, userProfile }) {
                 return value ? 'Yes' : 'No';
             case 'latest_notes':
                 return formatNoteValue();
+            case 'richtext':
+                if (value) {
+                    const lines = value.split('\n');
+                    return (
+                        <>
+                            {lines.map((line, index) => (
+                                <p key={index}>{line}</p>
+                            ))}
+                        </>
+                    );
+                }
             case 'total':
                 return formatTotalValue();
             default:

package/index.js

@@ -27,7 +27,12 @@ import Profile from './components/crm/auth/Profile';
 import Reset from './components/crm/auth/Reset';
 import Verify from './components/crm/auth/Verify';
 
-/** Generic Components */
+/** CMS Generic Components */
+import CmsDetail from './components/cms/generic/CmsDetail';
+import CmsIndex from './components/cms/generic/CmsIndex';
+import CmsSort from './components/cms/generic/CmsSort';
+
+/** CRM Generic Components */
 import GenericDetail from './components/crm/generic/GenericDetail';
 import GenericIndex from './components/crm/generic/GenericIndex';
 import NotificationList from './components/crm/generic/NotificationList';
@@ -36,7 +41,10 @@ export {
     AsyncSelect,
     Autocomplete,
     Call,
+    CmsDetail,
     CmsForm,
+    CmsIndex,
+    CmsSort,
     CustomFetch,
     DataGrid,
     Download,

package/package.json

@@ -3,6 +3,7 @@
         "@inovua/reactdatagrid-community": "^5.10.2",
         "add": "^2.0.6",
         "akar-icons": "^1.9.28",
+        "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "axios": "^1.4.0",
         "framer-motion": "^10.15.1",
@@ -41,7 +42,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "2.3.3",
+    "version": "2.3.5",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {