@visns-studio/visns-components 2.9.1 → 2.9.3

package/components/cms/DropZone.jsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { useDropzone } from 'react-dropzone';
 import { confirmAlert } from 'react-confirm-alert';
-import { File, TrashCan } from 'akar-icons';
+import { CircleX, File, TrashCan } from 'akar-icons';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
+import Popup from 'reactjs-popup';
 
 import 'react-confirm-alert/src/react-confirm-alert.css';
 
@@ -14,6 +15,23 @@ import SortableList from './sorting/List';
 function VisnsDropZone({ fetchData, files, settings }) {
     const [data, setData] = useState(files);
 
+    /** Modal States */
+    const [modalData, setModalData] = useState({
+        id: 0,
+        title: '',
+        description: '',
+    });
+    const [modalShow, setModalShow] = useState(false);
+
+    /** Modal Functions */
+    const modalOpen = () => {
+        setModalShow(true);
+    };
+
+    const modalClose = () => {
+        setModalShow(false);
+    };
+
     const [loadingProgress, setLoadingProgress] = useState(0);
 
     const onSortEnd = ({ oldIndex, newIndex }) => {
@@ -70,6 +88,36 @@ function VisnsDropZone({ fetchData, files, settings }) {
         }
     };
 
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+
+        setModalData((prevState) => ({
+            ...prevState,
+            [name]: value,
+        }));
+    };
+
+    const handleEdit = async (fileData) => {
+        try {
+            const res = await CustomFetch(
+                `/ajax/files/${fileData.id}`,
+                'GET',
+                {}
+            );
+
+            setModalData((prevState) => ({
+                ...prevState,
+                id: res.data.id,
+                title: res.data.file_title,
+                description: res.data.file_description,
+            }));
+
+            modalOpen();
+        } catch (error) {
+            console.info(error);
+        }
+    };
+
     const handleDelete = (id, name) => {
         console.info(id, name);
         if (id && id > 0) {
@@ -107,6 +155,32 @@ function VisnsDropZone({ fetchData, files, settings }) {
         }
     };
 
+    const handleSubmit = async (e) => {
+        try {
+            if (e) {
+                e.preventDefault();
+            }
+
+            const res = await CustomFetch(
+                `/ajax/files/${modalData.id}`,
+                'PUT',
+                {
+                    file_title: modalData.title,
+                    file_description: modalData.description,
+                }
+            );
+
+            if (res.data.error === '') {
+                toast.success('File metadata has been successfully updated.');
+                modalClose();
+            } else {
+                toast.error(res.data.error);
+            }
+        } catch (error) {
+            console.info(error);
+        }
+    };
+
     useEffect(() => {
         if (data.length > 0) {
             CustomFetch(
@@ -137,6 +211,7 @@ function VisnsDropZone({ fetchData, files, settings }) {
                             helperClass="dragitem"
                             transitionDuration={250}
                             handleDelete={handleDelete}
+                            handleEdit={handleEdit}
                             useDragHandle
                         />
                     ) : null}
@@ -195,6 +270,68 @@ function VisnsDropZone({ fetchData, files, settings }) {
                     </ul>
                 ) : null}
             </section>
+            <Popup
+                open={modalShow}
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+            >
+                <div className="modalwrap top--modal">
+                    <div className="modal">
+                        <div className="modal__header">
+                            <h1>Update File Metadata</h1>
+                            <button
+                                className="modal__close"
+                                onClick={modalClose}
+                            >
+                                <CircleX strokeWidth={1} size={24} />
+                            </button>
+                        </div>
+                        <div className="modal__content">
+                            <div className="formcontainer">
+                                <form
+                                    className="modalForm"
+                                    onSubmit={handleSubmit}
+                                >
+                                    <div className="formItem fwItem">
+                                        <label className="fi__label">
+                                            <input
+                                                type="text"
+                                                name="title"
+                                                onChange={handleChange}
+                                                value={modalData.title}
+                                            />
+                                            <span className="fi__span">
+                                                Title
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <div className="formItem fwItem">
+                                        <label className="fi__label">
+                                            <textarea
+                                                name="description"
+                                                rows="5"
+                                                onChange={handleChange}
+                                                value={modalData.description}
+                                            ></textarea>
+                                            <span className="fi__span">
+                                                Description
+                                            </span>
+                                        </label>
+                                    </div>
+                                    <div className="formItem fwItem lastItem">
+                                        <button
+                                            className="btn modalsave"
+                                            type="submit"
+                                        >
+                                            Save
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Popup>
         </>
     );
 }

package/components/cms/sorting/Item.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import { SortableElement, sortableHandle } from 'react-sortable-hoc';
-import { ChevronVertical, TrashCan } from 'akar-icons';
+import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
 
 const DragHandle = sortableHandle(() => (
     <ChevronVertical strokeWidth={1} size={26} />
 ));
 
-const SortableItem = ({ containerIndex, handleClick, handleDelete, value }) => {
+const SortableItem = ({
+    containerIndex,
+    handleClick,
+    handleEdit,
+    handleDelete,
+    value,
+}) => {
     return (
         <li
             onClick={(e) => {
@@ -31,6 +37,23 @@ const SortableItem = ({ containerIndex, handleClick, handleDelete, value }) => {
                     <img src={value.file_url} />
                 </div>
             ) : null}
+
+            {handleEdit &&
+                value.hasOwnProperty('file_title') &&
+                value.hasOwnProperty('file_description') && (
+                    <Pencil
+                        className="delete pencil-edit"
+                        strokeWidth={1}
+                        size={26}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            handleEdit(value);
+                        }}
+                    />
+                )}
+
             {handleDelete && (
                 <TrashCan
                     className="delete trash-delete"

package/components/cms/sorting/List.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import VisnsSortableItem from './Item';
 import { SortableContainer } from 'react-sortable-hoc';
 
-const SortableList = ({ handleClick, handleDelete, items }) => {
+const SortableList = ({ handleClick, handleDelete, handleEdit, items }) => {
     return (
         <ul className="sortlist">
             {items.map((value, index) => (
@@ -13,6 +13,7 @@ const SortableList = ({ handleClick, handleDelete, items }) => {
                     value={value}
                     handleClick={handleClick}
                     handleDelete={handleDelete}
+                    handleEdit={handleEdit}
                 />
             ))}
         </ul>

package/components/crm/QrCode.jsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from 'react';
+import ReactToPrint from 'react-to-print';
+
+import CustomFetch from './Fetch';
+
+const QrCode = ({ config, dataId }) => {
+    const printComponentRef = useRef();
+    const [qrCodeData, setQrCodeData] = useState({
+        logo: '',
+        qrCode: '',
+        title: '',
+    });
+
+    const fetchQrCode = async ({ url }) => {
+        try {
+            const res = await CustomFetch(`${url}/${dataId}`, 'POST', {});
+
+            setQrCodeData((prevState) => ({ ...prevState, ...res.data }));
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    useEffect(() => {
+        fetchQrCode(config);
+    }, []);
+
+    return (
+        <>
+            <div className="gridtxt" ref={printComponentRef}>
+                {qrCodeData.logo && qrCodeData.logo !== '' && (
+                    <ul className="customer__overview">
+                        <li
+                            className="fw-grid-item"
+                            style={{
+                                textAlign: 'center',
+                            }}
+                        >
+                            <img
+                                src={qrCodeData.logo}
+                                alt="Dawn Projects"
+                                width="40%"
+                            />
+                        </li>
+                    </ul>
+                )}
+                <ul className="customer__overview">
+                    <li
+                        className="fw-grid-item"
+                        style={{
+                            textAlign: 'center',
+                        }}
+                    >
+                        {qrCodeData.title}
+                    </li>
+                </ul>
+                <ul className="customer__overview">
+                    <li
+                        className="fw-grid-item"
+                        style={{ textAlign: 'center' }}
+                    >
+                        {qrCodeData.qrCode && qrCodeData.qrCode !== '' && (
+                            <img
+                                src={`data:image/svg+xml;base64, ${qrCodeData.qrCode}`}
+                                alt="SVG Image"
+                                width="80%"
+                            />
+                        )}
+                    </li>
+                </ul>
+            </div>
+            <div className="polActions">
+                <ReactToPrint
+                    trigger={() => <button className="btn">Print</button>}
+                    content={() => printComponentRef.current}
+                />
+            </div>
+        </>
+    );
+};
+
+export default QrCode;

package/components/crm/generic/GenericDetail.jsx

@@ -20,12 +20,14 @@ import 'react-confirm-alert/src/react-confirm-alert.css';
 
 import CustomFetch from '../Fetch';
 import Form from '../Form';
+import QrCode from '../QrCode';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 import { toast } from 'react-toastify';
 
 function GenericDetail({ setting, urlParam, userProfile }) {
     const routeParams = useParams();
+
     const { filters, page, stages, tabs } = setting;
 
     /** Fileupload states */
@@ -93,10 +95,6 @@ function GenericDetail({ setting, urlParam, userProfile }) {
             path.reduce((result, key) => (result ? result[key] : ''), data) ??
             '';
 
-        if (path[0] && path[0] === 'insurance_types') {
-            console.info(value);
-        }
-
         if (value) {
             if (Array.isArray(value)) {
                 return value
@@ -626,6 +624,13 @@ function GenericDetail({ setting, urlParam, userProfile }) {
                                     )}
                                 </>
                             );
+                        case 'qrCode':
+                            return (
+                                <QrCode
+                                    config={activeTabConfig}
+                                    dataId={routeParams[urlParam]}
+                                />
+                            );
                         case 'table':
                             if (
                                 config.ajaxSetting &&

package/package.json

@@ -26,6 +26,7 @@
         "react-select": "^5.8.0",
         "react-slugify": "^3.0.3",
         "react-sortable-hoc": "^2.0.0",
+        "react-to-print": "^2.14.15",
         "react-toastify": "^9.1.3",
         "react-toggle": "^4.1.3",
         "react-tooltip": "^5.24.0",
@@ -44,7 +45,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "2.9.1",
+    "version": "2.9.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {