@visns-studio/visns-components 5.2.13 → 5.2.14

package/package.json

@@ -78,7 +78,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.2.13",
+    "version": "5.2.14",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Field.jsx

@@ -242,7 +242,6 @@ function Field({
                         }
                     });
                 } else {
-                    console.info(s);
                     filter = {
                         where: [
                             {
@@ -266,8 +265,6 @@ function Field({
                         });
                     }
 
-                    console.info(filter, s.fields);
-
                     CustomFetch(s.child.url, 'POST', filter, function (result) {
                         childDropdownCallback({
                             id: s.child.id,

package/src/components/crm/generic/GenericDashboard.jsx

@@ -893,7 +893,9 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                                     </table>
                                 </div>
                             ) : (
-                                <div>No data available</div>
+                                <div className={styles.noData}>
+                                    No data available
+                                </div>
                             )}
                         </div>
                     );

package/src/components/crm/generic/GenericDetail.jsx

@@ -3,6 +3,7 @@ import '../../styles/global.css';
 import React, { useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { Calendar, momentLocalizer } from 'react-big-calendar';
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Popup from 'reactjs-popup';
@@ -25,6 +26,7 @@ import {
 
 import 'react-confirm-alert/src/react-confirm-alert.css';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
 
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
@@ -39,6 +41,7 @@ import TableFilter from '../TableFilter';
 import styles from './styles/GenericDetail.module.scss';
 
 const localizer = momentLocalizer(moment);
+const DnDCalendar = withDragAndDrop(Calendar);
 
 function GenericDetail({
     extraUrlParam,
@@ -884,11 +887,11 @@ function GenericDetail({
 
                 if (activeTabConfig && activeTabConfig.type) {
                     switch (activeTabConfig.type) {
-                        case 'calendar':
+                        case 'calendar': {
+                            // Prepare events from your data, converting moment objects to Date objects
                             const events =
                                 data?.[activeTabConfig?.dataKey]
                                     ?.map((event) => {
-                                        // Safely access keys using optional chaining and defaults
                                         const keys =
                                             activeTabConfig?.config?.keys || {};
                                         const eventStart = event?.[keys.start]
@@ -898,23 +901,100 @@ function GenericDetail({
                                             ? moment(event[keys.end])
                                             : null;
 
-                                        // Only include valid events
                                         if (eventStart && eventEnd) {
                                             return {
                                                 title:
                                                     event?.[keys.title] ||
-                                                    'Untitled Event', // Default title if not provided
-                                                start: eventStart,
-                                                end: eventEnd,
+                                                    'Untitled Event',
+                                                start: eventStart.toDate(),
+                                                end: eventEnd.toDate(),
+                                                entryId: event?.[keys.id],
                                             };
                                         }
-
-                                        return null; // Filter out invalid events
+                                        return null;
                                     })
                                     ?.filter(Boolean) || [];
 
+                            // Callback when an event is dragged and dropped to a new slot
+                            const onEventDrop = async ({
+                                event,
+                                start,
+                                end,
+                                allDay,
+                            }) => {
+                                try {
+                                    await CustomFetch(
+                                        activeTabConfig.config.urls.update,
+                                        'PUT',
+                                        {
+                                            dataId: routeParams[
+                                                activeTabConfig.urlParam
+                                            ],
+                                            key: activeTabConfig.dataKey,
+                                            id: event.entryId,
+                                            [activeTabConfig.config.keys.start]:
+                                                start,
+                                            [activeTabConfig.config.keys.end]:
+                                                end,
+                                        }
+                                    );
+
+                                    // Optionally, handle the response if needed
+                                    toast.success(
+                                        activeTabConfig.config.messages
+                                            .dragAndDrop ||
+                                            'Event updated via drag and drop!'
+                                    );
+                                    handleReload();
+                                } catch (error) {
+                                    console.error(
+                                        'Error updating event:',
+                                        error
+                                    );
+                                    toast.error('Error updating event.');
+                                }
+                            };
+
+                            // Callback when an event is resized
+                            const onEventResize = async ({
+                                event,
+                                start,
+                                end,
+                            }) => {
+                                try {
+                                    await CustomFetch(
+                                        activeTabConfig.config.urls.update,
+                                        'PUT',
+                                        {
+                                            dataId: routeParams[
+                                                activeTabConfig.urlParam
+                                            ],
+                                            key: activeTabConfig.dataKey,
+                                            id: event.entryId,
+                                            [activeTabConfig.config.keys.start]:
+                                                start,
+                                            [activeTabConfig.config.keys.end]:
+                                                end,
+                                        }
+                                    );
+
+                                    // Optionally, update your event in the backend here using an API call.
+                                    toast.success(
+                                        activeTabConfig.config.messages
+                                            .resize || 'Event resized!'
+                                    );
+                                    handleReload();
+                                } catch (error) {
+                                    console.error(
+                                        'Error resizing event:',
+                                        error
+                                    );
+                                    toast.error('Error resizing event.');
+                                }
+                            };
+
                             return (
-                                <Calendar
+                                <DnDCalendar
                                     localizer={localizer}
                                     events={events}
                                     startAccessor="start"
@@ -931,8 +1011,12 @@ function GenericDetail({
                                             'day',
                                         ]
                                     }
+                                    onEventDrop={onEventDrop}
+                                    resizable
+                                    onEventResize={onEventResize}
                                 />
                             );
+                        }
                         case 'dropzone':
                             const downloadFile = (file) => {
                                 const { id, file_url, file_name } = file;

package/src/components/crm/generic/GenericEditableTable.jsx

@@ -233,8 +233,6 @@ const GenericEditableTable = ({
             const groupKey = categoryId || 'no_category';
             // Use the category's sort_order if provided; otherwise, default to a high number (e.g. 9999)
 
-            console.info(categoryInfo);
-
             const catSortOrder =
                 categoryInfo && typeof categoryInfo.sort_order !== 'undefined'
                     ? categoryInfo.sort_order
@@ -270,8 +268,6 @@ const GenericEditableTable = ({
             return a.catSortOrder - b.catSortOrder;
         });
 
-        console.info(groupedArray);
-
         return groupedArray;
     };
 
@@ -310,7 +306,7 @@ const GenericEditableTable = ({
             .catch(() => toast.error('Failed to copy to clipboard'));
     };
 
-    // Update an existing field’s value
+    // Updated handleFieldChange to support "add" functionality
     const handleFieldChange = (value, fieldId, keyCounter) => {
         setLocalData((prev) => {
             const updatedDetail = [...prev];
@@ -319,6 +315,34 @@ const GenericEditableTable = ({
                 [fieldId]: value,
             };
 
+            // Loop through columns to see if any has an "add" property.
+            columns.forEach((col) => {
+                if (
+                    col.add &&
+                    (fieldId === col.id || fieldId === col.add.from)
+                ) {
+                    const fromVal = updatedDetail[keyCounter][col.add.from];
+                    const daysVal = parseFloat(
+                        updatedDetail[keyCounter][col.id]
+                    );
+                    if (fromVal && !isNaN(daysVal)) {
+                        const newDate = new Date(fromVal);
+                        if (!isNaN(newDate)) {
+                            newDate.setDate(newDate.getDate() + daysVal);
+                            // Format the date as YYYY-MM-DD
+                            const yyyy = newDate.getFullYear();
+                            let mm = newDate.getMonth() + 1;
+                            let dd = newDate.getDate();
+                            if (mm < 10) mm = '0' + mm;
+                            if (dd < 10) dd = '0' + dd;
+                            updatedDetail[keyCounter][
+                                col.add.to
+                            ] = `${yyyy}-${mm}-${dd}`;
+                        }
+                    }
+                }
+            });
+
             debouncedUpdate({ [rows.key]: updatedDetail });
             return updatedDetail;
         });
@@ -445,6 +469,7 @@ const GenericEditableTable = ({
                             )
                         }
                         style={{ textAlign: 'right' }}
+                        readOnly={column.readOnly || false}
                     />
                 );
             case 'date':
@@ -460,6 +485,7 @@ const GenericEditableTable = ({
                             )
                         }
                         style={{ textAlign: 'right' }}
+                        readOnly={column.readOnly || false}
                     />
                 );
             case 'dropdown':
@@ -473,6 +499,7 @@ const GenericEditableTable = ({
                                 keyCounter
                             )
                         }
+                        readOnly={column.readOnly || false}
                     >
                         {column.options.map((option) => (
                             <option key={option.id} value={option.id}>
@@ -493,6 +520,7 @@ const GenericEditableTable = ({
                                 keyCounter
                             )
                         }
+                        readOnly={column.readOnly || false}
                     >
                         <option>Select an Option</option>
                         {options.map((option) => (
@@ -537,6 +565,7 @@ const GenericEditableTable = ({
                                 keyCounter
                             )
                         }
+                        readOnly={column.readOnly || false}
                     />
                 );
         }
@@ -544,21 +573,71 @@ const GenericEditableTable = ({
 
     // --- New row functions for inline creation ---
 
-    // Update new entry fields (for grouped or ungrouped)
+    // Updated handleNewFieldChange to support "add" functionality in new rows
     const handleNewFieldChange = (value, fieldId, groupId = null) => {
         if (hasCategory) {
-            setNewEntries((prev) => ({
-                ...prev,
-                [groupId]: {
-                    ...prev[groupId],
-                    [fieldId]: value,
-                },
-            }));
+            setNewEntries((prev) => {
+                const updated = {
+                    ...prev,
+                    [groupId]: {
+                        ...prev[groupId],
+                        [fieldId]: value,
+                    },
+                };
+                columns.forEach((col) => {
+                    if (
+                        col.add &&
+                        (fieldId === col.id || fieldId === col.add.from)
+                    ) {
+                        const fromVal = updated[groupId][col.add.from];
+                        const daysVal = parseFloat(updated[groupId][col.id]);
+                        if (fromVal && !isNaN(daysVal)) {
+                            const newDate = new Date(fromVal);
+                            if (!isNaN(newDate)) {
+                                newDate.setDate(newDate.getDate() + daysVal);
+                                const yyyy = newDate.getFullYear();
+                                let mm = newDate.getMonth() + 1;
+                                let dd = newDate.getDate();
+                                if (mm < 10) mm = '0' + mm;
+                                if (dd < 10) dd = '0' + dd;
+                                updated[groupId][
+                                    col.add.to
+                                ] = `${yyyy}-${mm}-${dd}`;
+                            }
+                        }
+                    }
+                });
+                return updated;
+            });
         } else {
-            setNewEntry((prev) => ({
-                ...prev,
-                [fieldId]: value,
-            }));
+            setNewEntry((prev) => {
+                const updated = {
+                    ...prev,
+                    [fieldId]: value,
+                };
+                columns.forEach((col) => {
+                    if (
+                        col.add &&
+                        (fieldId === col.id || fieldId === col.add.from)
+                    ) {
+                        const fromVal = updated[col.add.from];
+                        const daysVal = parseFloat(updated[col.id]);
+                        if (fromVal && !isNaN(daysVal)) {
+                            const newDate = new Date(fromVal);
+                            if (!isNaN(newDate)) {
+                                newDate.setDate(newDate.getDate() + daysVal);
+                                const yyyy = newDate.getFullYear();
+                                let mm = newDate.getMonth() + 1;
+                                let dd = newDate.getDate();
+                                if (mm < 10) mm = '0' + mm;
+                                if (dd < 10) dd = '0' + dd;
+                                updated[col.add.to] = `${yyyy}-${mm}-${dd}`;
+                            }
+                        }
+                    }
+                });
+                return updated;
+            });
         }
     };
 

package/src/components/crm/generic/styles/GenericDashboard.module.scss

@@ -568,3 +568,10 @@
     color: #888;
     padding: 20px;
 }
+
+.noData {
+    text-align: center;
+    font-size: 1rem;
+    color: #888;
+    padding: 20px;
+}