@visns-studio/visns-components 3.1.6 → 3.1.8

package/components/cms/DataGrid.jsx

@@ -454,7 +454,6 @@ const DataGrid = ({
             let date;
             let filterEditor = null;
             let filterEditorProps = null;
-            let fileUrl = null;
             let icons = [];
             let relationName;
             let selectedDataSource = null;

package/components/cms/DropZone.jsx

@@ -222,6 +222,7 @@ function VisnsDropZone({ fetchData, files, settings }) {
                             handleDelete={handleDelete}
                             handleEdit={handleEdit}
                             useDragHandle
+                            showImage={true}
                         />
                     ) : null}
                 </div>

package/components/crm/DataGrid.jsx

@@ -13,6 +13,8 @@ import moment from 'moment';
 import numeral from 'numeral';
 import Popup from 'reactjs-popup';
 import parse from 'html-react-parser';
+import { saveAs } from 'file-saver';
+import pluralize from 'pluralize';
 import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter';
 import SelectFilter from '@inovua/reactdatagrid-community/SelectFilter';
 import DateFilter from '@inovua/reactdatagrid-community/DateFilter';
@@ -28,6 +30,7 @@ import {
     CloudDownload,
     Copy,
     Edit,
+    Envelope,
     Folder,
     Inbox,
     Network,
@@ -42,6 +45,7 @@ import '@inovua/reactdatagrid-community/index.css';
 import 'react-confirm-alert/src/react-confirm-alert.css';
 
 import CustomFetch from './Fetch';
+import Download from './Download';
 import Form from './Form';
 import _ from 'lodash';
 
@@ -191,6 +195,33 @@ const DataGrid = forwardRef(
             },
         }));
 
+        const handleDownload = async (d) => {
+            try {
+                toast.success('Starting download please wait...');
+
+                const res = await Download(
+                    `/ajax/files/download/${d.id}/null`,
+                    'GET',
+                    {}
+                );
+
+                if (res.data.error) {
+                    toast.error(res.data.error);
+                } else {
+                    // Assuming the response contains a Blob or similar data
+                    if (res.data && res.data instanceof Blob) {
+                        const fileName = `${d.file_name}`;
+                        saveAs(res.data, fileName);
+                    } else {
+                        // Handle the case where the response is not a Blob
+                        toast.error('Invalid file format received.');
+                    }
+                }
+            } catch (error) {
+                console.info(error);
+            }
+        };
+
         const handleTimer = async (id, key) => {
             try {
                 const res = await CustomFetch(`${form.url}/${id}`, 'PUT', {
@@ -385,6 +416,11 @@ const DataGrid = forwardRef(
                         ],
                     });
                     break;
+                case 'envelope':
+                    CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
+                        toast.success(result.message);
+                    });
+                    break;
                 case 'sound':
                     const soundRelation = s.relation.reduce((acc, id) => {
                         if (acc === '') {
@@ -570,6 +606,29 @@ const DataGrid = forwardRef(
             };
         }, []);
 
+        const exportTrigger = async () => {
+            try {
+                toast.success('Starting export please wait...');
+
+                const res = await Download(form.export.url, 'POST', {});
+
+                if (res.data.error) {
+                    toast.error(res.data.error);
+                } else {
+                    // Assuming the response contains a Blob or similar data
+                    if (res.data && res.data instanceof Blob) {
+                        const fileName = `${form.export.filename}`;
+                        saveAs(res.data, fileName);
+                    } else {
+                        // Handle the case where the response is not a Blob
+                        toast.error('Invalid file format received.');
+                    }
+                }
+            } catch (error) {
+                console.info(error);
+            }
+        };
+
         const sortTrigger = () => {
             const url = form.url.replace('/ajax', '');
 
@@ -594,6 +653,11 @@ const DataGrid = forwardRef(
 
             return (
                 <div className="filterAction--alt">
+                    {form.export && form.export.url && (
+                        <button className="btn" onClick={exportTrigger}>
+                            Export
+                        </button>
+                    )}
                     {form.sort && form.sort.title && (
                         <button className="btn" onClick={sortTrigger}>
                             <div className="icon-plus"></div> Sort Order
@@ -838,6 +902,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(Copy);
                     case 'delete':
                         return getIconComponent(Backspace);
+                    case 'envelope':
+                        return getIconComponent(Envelope);
                     case 'family':
                         return getIconComponent(Network);
                     case 'primary':
@@ -909,6 +975,7 @@ const DataGrid = forwardRef(
                     link: column.link ?? {},
                     minWidth: column.minWidth ?? undefined,
                     maxWidth: column.maxWidth ?? undefined,
+                    textAlign: column.textAlign ?? undefined,
                     textVerticalAlign:
                         style && style.text_vertical_align
                             ? style.text_vertical_align
@@ -1295,7 +1362,14 @@ const DataGrid = forwardRef(
                             render: ({ data }) => {
                                 if (data && data[column.id]) {
                                     return (
-                                        <span>
+                                        <span
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                e.preventDefault();
+
+                                                handleDownload(data[column.id]);
+                                            }}
+                                        >
                                             <CloudDownload
                                                 data-tooltip-id="system-tooltip"
                                                 data-tooltip-content="Download File"

package/components/crm/Field.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
-import ReactQuill from 'react-quill';
 import Toggle from 'react-toggle';
 import moment from 'moment';
 import { BlockPicker } from 'react-color';

package/components/crm/Form.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { toast } from 'react-toastify';
+import { saveAs } from 'file-saver';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import _ from 'lodash';
@@ -11,6 +12,7 @@ import { CircleX } from 'akar-icons';
 import '@inovua/reactdatagrid-community/index.css';
 
 import CustomFetch from './Fetch';
+import Download from './Download';
 import Field from './Field';
 import Table from './DataGrid';
 
@@ -377,8 +379,34 @@ function Form({
         );
     };
 
+    const handleDownload = async (e) => {
+        try {
+            if (e) {
+                e.preventDefault();
+            }
+
+            const extension = formSettings.download.extension;
+            const filename = formSettings.download.filename;
+            const method = 'POST';
+            const url = formSettings.download.url;
+
+            const res = await Download(url, method, formData);
+
+            // Using file-saver to save the file
+            const blob = new Blob([res.data], {
+                type: 'application/octet-stream',
+            });
+            saveAs(blob, `${filename}.${extension}`);
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
     const handleSubmit = (e) => {
-        e.preventDefault();
+        if (e) {
+            e.preventDefault();
+        }
+
         let fields = formSettings.fields;
         let _inputClass = inputClass;
         let validation = '';
@@ -1098,6 +1126,12 @@ function Form({
                     )}
                 </form>
                 <div className="polActions">
+                    {formSettings?.download?.button?.label && (
+                        <button className="btn" onClick={handleDownload}>
+                            {formSettings.download.button.label}
+                        </button>
+                    )}
+
                     <button className="btn" onClick={handleSubmit}>
                         {formSettings?.save?.button?.label
                             ? formSettings.save.button.label

package/package.json

@@ -7,12 +7,14 @@
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "axios": "^1.6.5",
+        "file-saver": "^2.0.5",
         "framer-motion": "^10.18.0",
         "html-react-parser": "^5.1.1",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
         "motion": "^10.17.0",
         "numeral": "^2.0.6",
+        "pluralize": "^8.0.0",
         "quill-image-uploader": "^1.3.0",
         "react-color": "^2.19.3",
         "react-confirm-alert": "^3.0.6",
@@ -28,9 +30,9 @@
         "react-slugify": "^3.0.3",
         "react-sortable-hoc": "^2.0.0",
         "react-to-print": "^2.14.15",
-        "react-toastify": "^10.0.0",
+        "react-toastify": "^10.0.4",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.25.1",
+        "react-tooltip": "^5.26.0",
         "react-window": "^1.8.10",
         "reactjs-popup": "^2.0.6",
         "truncate": "^3.0.0",
@@ -46,7 +48,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "3.1.6",
+    "version": "3.1.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {