@visns-studio/visns-components 3.0.2 → 3.0.4

package/components/crm/DataGrid.jsx

@@ -106,6 +106,9 @@ const DataGrid = forwardRef(
             form,
             gridHeight,
             mapbox,
+            pageData,
+            pageSetting,
+            paramValue,
             settings,
             setConfig,
             setFilterData,
@@ -567,6 +570,25 @@ const DataGrid = forwardRef(
             };
         }, []);
 
+        const sortTrigger = () => {
+            const url = form.url.replace('/ajax', '');
+
+            console.info(ajaxSetting, columns, form);
+
+            const newState = {
+                form: form,
+                page: {
+                    data: pageData,
+                    setting: pageSetting,
+                },
+                paramValue: paramValue,
+            };
+
+            navigate(`${url}/${paramValue}/sort`, {
+                state: newState,
+            });
+        };
+
         const renderCreateButton = () => {
             if (form.createDisable && form.createDisable === true) {
                 return null;
@@ -574,6 +596,11 @@ const DataGrid = forwardRef(
 
             return (
                 <div className="filterAction--alt">
+                    {form.sort && form.sort.title && (
+                        <button className="btn" onClick={sortTrigger}>
+                            <div className="icon-plus"></div> Sort Order
+                        </button>
+                    )}
                     <button
                         className="btn"
                         onClick={(e) => {

package/components/crm/Field.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
 import ReactQuill from 'react-quill';
@@ -7,6 +7,7 @@ import moment from 'moment';
 import { BlockPicker } from 'react-color';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { NumericFormat, PatternFormat } from 'react-number-format';
+import { Editor } from '@tinymce/tinymce-react';
 import { Copy } from 'akar-icons';
 
 import CustomFetch from './Fetch';
@@ -39,6 +40,7 @@ function Field({
     settings,
     style,
 }) {
+    const editorRef = useRef(null);
     const [colorPickerShow, setColorPickerShow] = useState(false);
     const [dataOptions, setDataOptions] = useState([]);
     const [formItemStyle, setFormItemStyle] = useState({});
@@ -703,13 +705,48 @@ function Field({
                 return htmlContainer;
             case 'richeditor':
                 return (
-                    <ReactQuill
-                        theme="snow"
-                        data-name={settings.id}
-                        onChange={(value, event) => {
-                            onChangeRicheditor(event, value, settings.id);
+                    <Editor
+                        apiKey="51mqcxkrrco6unmr6h8exc5mkhtjwi6fpyedy3r493px8cbq"
+                        onChange={(e) => {
+                            onChangeRicheditor(
+                                e,
+                                e.target.getContent(),
+                                settings.id
+                            );
+                        }}
+                        onInit={(evt, editor) => (editorRef.current = editor)}
+                        initialValue={inputValue || ''}
+                        init={{
+                            height: 500,
+                            menubar: false,
+                            plugins: [
+                                'advlist',
+                                'autolink',
+                                'lists',
+                                'link',
+                                'image',
+                                'charmap',
+                                'preview',
+                                'anchor',
+                                'searchreplace',
+                                'visualblocks',
+                                'code',
+                                'fullscreen',
+                                'insertdatetime',
+                                'media',
+                                'table',
+                                'code',
+                                'help',
+                                'wordcount',
+                            ],
+                            toolbar:
+                                'undo redo | blocks | ' +
+                                'bold italic forecolor | alignleft aligncenter ' +
+                                'alignright alignjustify | bullist numlist outdent indent | ' +
+                                'removeformat | table',
+                            content_style:
+                                'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
                         }}
-                        value={inputValue || ''}
                     />
                 );
             default:

package/components/crm/generic/GenericDetail.jsx

@@ -651,6 +651,13 @@ function GenericDetail({ setting, urlParam, userProfile }) {
                                     <Table
                                         {...config}
                                         gridHeight={windowHeight * 0.65}
+                                        pageData={data ? data : null}
+                                        pageSetting={page ? page : null}
+                                        paramValue={
+                                            routeParams[urlParam]
+                                                ? routeParams[urlParam]
+                                                : null
+                                        }
                                         setConfig={setConfig}
                                         setTotal={setTotal}
                                         style={

package/components/crm/generic/GenericSort.jsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } 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';
+
+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"
+                transitionDuration={250}
+                useDragHandle
+            />
+        </>
+    );
+};
+
+const GenericSort = ({ category = false }) => {
+    const location = useLocation();
+    const {
+        form,
+        page: { data, setting },
+        paramValue,
+    } = location.state;
+    const [sortData, setSortData] = useState([]);
+    const url = form.url;
+
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        setSortData((prevItem) =>
+            arrayMoveImmutable(prevItem, oldIndex, newIndex)
+        );
+    };
+
+    const sortList = async () => {
+        try {
+            let fetchUrl = url;
+            let payload = {};
+
+            if (form.json) {
+                fetchUrl = fetchUrl + '/jsonSortList';
+                payload.id = paramValue;
+            } else {
+                fetchUrl = fetchUrl + '/sort_list';
+            }
+
+            const res = await CustomFetch(fetchUrl, 'POST', payload);
+
+            setSortData(res.data);
+        } catch (err) {
+            console.log(err);
+        }
+    };
+
+    const sortUpdate = async () => {
+        try {
+            let fetchUrl = url;
+            let payload = {
+                list: sortData,
+            };
+
+            if (form.json) {
+                fetchUrl = fetchUrl + '/jsonSortUpdate';
+                payload.id = paramValue;
+            } else {
+                fetchUrl = fetchUrl + '/sort_update';
+            }
+
+            if (category === false) {
+                if (sortData.length > 0) {
+                    const res = await CustomFetch(fetchUrl, 'POST', payload);
+
+                    if (res.data.error !== '') {
+                        toast.error(String(res.data.error));
+                    }
+                }
+            }
+        } catch (err) {
+            console.log(err);
+        }
+    };
+
+    useEffect(() => {
+        sortUpdate();
+    }, [sortData]);
+
+    useEffect(() => {
+        sortList();
+    }, []);
+
+    return (
+        <>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full 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>
+                </div>
+            </div>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full">
+                        {category === false ? (
+                            <SortableList
+                                items={sortData}
+                                onSortEnd={onSortEnd}
+                                axis="xy"
+                                helperClass="dragitem"
+                                transitionDuration={250}
+                                useDragHandle
+                            />
+                        ) : (
+                            sortData.length > 0 &&
+                            sortData.map((item) => (
+                                <ChildSort
+                                    key={`category-${item.id}`}
+                                    item={item}
+                                    url={url}
+                                />
+                            ))
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default GenericSort;

package/index.js

@@ -35,6 +35,7 @@ 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 GenericSort from './components/crm/generic/GenericSort';
 import NotificationList from './components/crm/generic/NotificationList';
 
 export {
@@ -53,6 +54,7 @@ export {
     Form,
     GenericDetail,
     GenericIndex,
+    GenericSort,
     Loader,
     Login,
     MultiSelect,

package/package.json

@@ -1,6 +1,7 @@
 {
     "dependencies": {
         "@inovua/reactdatagrid-community": "^5.10.2",
+        "@tinymce/tinymce-react": "^4.3.2",
         "add": "^2.0.6",
         "akar-icons": "^1.9.30",
         "array-move": "^4.0.0",
@@ -45,7 +46,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "3.0.2",
+    "version": "3.0.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {