@visns-studio/visns-components 2.9.1 → 2.9.2

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/package.json

@@ -44,7 +44,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "2.9.1",
+    "version": "2.9.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {