@visns-studio/visns-components 4.10.47 → 5.0.0

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

@@ -38,7 +38,6 @@ function GenericDetail({
     layout = 'full',
     setting,
     setActiveNav = null,
-    themeType,
     urlParam,
     userProfile,
 }) {
@@ -192,7 +191,6 @@ function GenericDetail({
             relationKey,
             size,
             truncateLength,
-            checkboxLabel,
         } = item;
         const value =
             relation && relation.length > 0 && type !== 'total'
@@ -265,22 +263,16 @@ function GenericDetail({
                 return '';
             }
 
-            // Create a lookup map for checkbox labels if it exists
-            const labelMap = checkboxLabel
-                ? checkboxLabel.reduce((map, item) => {
-                      map[item.id] = item.label;
-                      return map;
-                  }, {})
-                : {};
+            const formatKey = (key) => {
+                return key
+                    .toLowerCase()
+                    .split('_')
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(' ');
+            };
 
             const keys = Object.keys(value)
-                .filter(
-                    (key) =>
-                        (typeof value[key] === 'boolean' ||
-                            typeof value[key] === 'string') &&
-                        value[key] &&
-                        key !== 'notes'
-                )
+                .filter((key) => value[key] && key !== 'notes')
                 .sort((a, b) => {
                     if (a === 'other') return 1;
                     if (b === 'other') return -1;
@@ -288,44 +280,35 @@ function GenericDetail({
                 });
 
             const formattedKeys = keys.map((key) => {
-                // Use the label if available; otherwise, fallback to the formatted key
-                let label = labelMap[key] || formatKey(key);
-
-                // If the value is a string, append it directly to the label
-                if (typeof value[key] === 'string') {
-                    return `${label}: ${value[key]}`;
+                let formattedKey = formatKey(key);
+                if (key === 'other') {
+                    const otherValue = getValueFromData(
+                        data,
+                        [...relation],
+                        `${id}_other`,
+                        type
+                    );
+
+                    if (otherValue) {
+                        formattedKey += `: ${otherValue}`;
+                    }
                 }
-
-                // Return the label for boolean values
-                return label;
+                return formattedKey;
             });
 
             return formattedKeys.join(', ');
         };
 
-        // Helper function to format the key as a fallback
-        const formatKey = (key) => {
-            return key
-                .toLowerCase()
-                .split('_')
-                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-                .join(' ');
-        };
-
         const renderDate = () => formatDateValue(value);
 
         const renderDateTime = () => formatDateTimeValue(value);
 
-        const renderFile = () => {
-            // Check if value is a non-empty string and looks like a valid URL (optional)
-            const isValidUrl = value && value.startsWith('http');
-
-            return isValidUrl ? (
-                <a href={value} target="_blank" rel="noopener noreferrer">
+        const renderFile = () =>
+            value ? (
+                <a href={value} target="_blank">
                     Download
                 </a>
             ) : null;
-        };
 
         const renderExist = () => (truncatedValue ? 'Yes' : 'No');
 
@@ -979,39 +962,19 @@ function GenericDetail({
                                         )}
                                     </div>
 
-                                    {(activeTabConfig.form ||
-                                        activeTabConfig.export) && (
+                                    {activeTabConfig.form && (
                                         <div className={styles.polActions}>
-                                            {activeTabConfig.form && (
-                                                <button
-                                                    className={styles.btn}
-                                                    onClick={() =>
-                                                        modalOpen(
-                                                            'update',
-                                                            routeParams[
-                                                                urlParam
-                                                            ]
-                                                        )
-                                                    }
-                                                >
-                                                    Edit
-                                                </button>
-                                            )}
-                                            {activeTabConfig.export && (
-                                                <button
-                                                    className={styles.btn}
-                                                    onClick={() =>
-                                                        window.open
-                                                            ? window.open(
-                                                                  `${activeTabConfig.export.url}/${routeParams[urlParam]}`,
-                                                                  '_blank'
-                                                              )
-                                                            : (window.location.href = `${activeTabConfig.export.url}/${routeParams[urlParam]}`)
-                                                    }
-                                                >
-                                                    Export
-                                                </button>
-                                            )}
+                                            <button
+                                                className={styles.btn}
+                                                onClick={() =>
+                                                    modalOpen(
+                                                        'update',
+                                                        routeParams[urlParam]
+                                                    )
+                                                }
+                                            >
+                                                Edit
+                                            </button>
                                         </div>
                                     )}
                                 </>
@@ -1536,13 +1499,7 @@ function GenericDetail({
 
             <div className={styles.grid}>
                 <div className={styles.grid__subrow}>
-                    <div
-                        className={
-                            themeType === 'alternate'
-                                ? styles.grid__subnav__alternate
-                                : styles.grid__subnav
-                        }
-                    >
+                    <div className={styles.grid__subnav}>
                         <TableFilter filters={subnav} setFilters={setSubnav} />
                     </div>
                     <div className={styles.grid__subcontent}>

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

@@ -31,8 +31,6 @@ const updateField = (fields, name, value) => {
 
 const renderValue = (field, data) => {
     switch (field.type) {
-        case 'canvas':
-            return field.value || '';
         case 'datetime':
         case 'date':
             return field.value && moment(field.value).isValid()
@@ -105,7 +103,6 @@ const GenericDynamic = ({
 }) => {
     const [activeForm, setActiveForm] = useState({});
     const [activeFormKey, setActiveFormKey] = useState(0);
-    const [canvasSaveCounter, setCanvasSaveCounter] = useState(0);
 
     const handleChange = (e) => {
         const {
@@ -177,35 +174,6 @@ const GenericDynamic = ({
         }
     };
 
-    const handleChangeCanvas = (fieldSetting, value, imageData) => {
-        // Check if activeForm has keys
-        if (activeForm && typeof activeForm === 'object') {
-            // Iterate over the keys in activeForm to find the matching id
-            for (const key in activeForm) {
-                if (activeForm[key].id === fieldSetting.id) {
-                    // If a matching id is found, update the corresponding field
-                    setActiveForm((prevState) => ({
-                        ...prevState,
-                        [key]: {
-                            ...prevState[key],
-                            value, // Update the value for the matching id
-                            imageData,
-                        },
-                    }));
-
-                    setCanvasSaveCounter((prevState) => prevState + 1);
-                    return; // Exit after updating to prevent further iterations
-                }
-            }
-        }
-    };
-
-    useEffect(() => {
-        if (canvasSaveCounter > 0) {
-            handleSaveForm(false);
-        }
-    }, [canvasSaveCounter]);
-
     const handleChangeCheckbox = (e) => {
         const { checked, name, value } = e.target;
 
@@ -279,20 +247,33 @@ const GenericDynamic = ({
                 return prevActiveForm;
             }
 
-            // Create a shallow copy of rows to target only the necessary updates
+            // Create a new rows array with updated value properties based on input type
             const updatedRows = prevActiveForm[formKey].rows.map((row) => {
                 if (row.id === rowId) {
-                    // Update only the specific cell in the target row
-                    const newValue = {
-                        ...row.value,
-                        [columnId]: type === 'checkbox' ? checked : value,
+                    // Determine new value based on input type
+                    let newValue;
+                    if (type === 'checkbox') {
+                        newValue = { ...row.value, [columnId]: checked };
+                    } else if (
+                        type === 'date' ||
+                        type === 'time' ||
+                        type === 'text'
+                    ) {
+                        newValue = { ...row.value, [columnId]: value };
+                    } else {
+                        // For other input types, use the value directly
+                        newValue = { ...row.value, [columnId]: value };
+                    }
+
+                    return {
+                        ...row,
+                        value: newValue,
                     };
-                    return { ...row, value: newValue }; // Return the updated row
                 }
-                return row; // Return other rows unchanged
+                return row;
             });
 
-            // Update only the formKey section of activeForm
+            // Return the updated activeForm state
             return {
                 ...prevActiveForm,
                 [formKey]: {
@@ -582,29 +563,27 @@ const GenericDynamic = ({
         });
     };
 
-    const handleSaveForm = async (validate = true) => {
+    const handleSaveForm = async () => {
         try {
             let error = '';
 
-            if (validate) {
-                const excludedTypes = [
-                    'dynamicdata',
-                    'plaintext',
-                    'plaintextheading',
-                    'section',
-                    'table_radio',
-                ];
+            const excludedTypes = [
+                'dynamicdata',
+                'plaintext',
+                'plaintextheading',
+                'section',
+                'table_radio',
+            ];
 
-                Object.entries(activeForm).forEach(([key, field]) => {
-                    if (
-                        field.required === true &&
-                        !excludedTypes.includes(field.type) &&
-                        (field.value === null || field.value === '')
-                    ) {
-                        error += `<p>${field.label} is required</p>`;
-                    }
-                });
-            }
+            Object.entries(activeForm).forEach(([key, field]) => {
+                if (
+                    field.required === true &&
+                    !excludedTypes.includes(field.type) &&
+                    (field.value === null || field.value === '')
+                ) {
+                    error += `<p>${field.label} is required</p>`;
+                }
+            });
 
             if (error === '') {
                 const res = await CustomFetch(setting.save, 'POST', {
@@ -629,34 +608,47 @@ const GenericDynamic = ({
     };
 
     useEffect(() => {
-        if (!data[type] || data[type].length === 0) {
-            setActiveForm({});
-            return;
-        }
+        if (data[type] && data[type].length > 0) {
+            if (multiple) {
+                if (templateStatus) {
+                    let lastForm = data[type][data[type].length - 1];
+
+                    if (lastForm && typeof lastForm === 'object') {
+                        Object.entries(lastForm).forEach(([key, field]) => {
+                            if (field && field.required) {
+                                if (
+                                    field.required === 'yes' ||
+                                    field.required === 'no'
+                                ) {
+                                    lastForm[key].required =
+                                        field.required === 'yes';
+                                }
+                            }
+                        });
 
-        const formData = multiple
-            ? data[type][data[type].length - 1]
-            : data[type].hasOwnProperty('created_at')
-            ? data[type][0] || data[type]
-            : data[type];
-
-        if (
-            multiple &&
-            templateStatus &&
-            formData &&
-            typeof formData === 'object'
-        ) {
-            // Process the last form for required fields
-            Object.entries(formData).forEach(([key, field]) => {
-                if (field?.required) {
-                    field.required = field.required === 'yes';
+                        setActiveForm(lastForm);
+                        setActiveFormKey(data[type].length - 1);
+                    }
                 }
-            });
+            } else {
+                if (data[type].hasOwnProperty('id')) {
+                    if (
+                        Object.keys(activeForm).length === 0 &&
+                        templateStatus &&
+                        data[type][0]
+                    ) {
+                        setActiveForm(data[type][0]);
+                        setActiveFormKey(0);
+                    }
+                } else {
+                    setActiveForm(data[type]);
+                    setActiveFormKey(0);
+                }
+            }
+        } else {
+            setActiveForm({});
         }
-
-        setActiveForm(formData);
-        setActiveFormKey(0);
-    }, [data, type, multiple, templateStatus]);
+    }, [data, type]);
 
     useEffect(() => {
         if (data[type] && data[type].length > 0) {
@@ -824,7 +816,6 @@ const GenericDynamic = ({
                                     ? Object.entries(activeForm)
                                           .filter(
                                               ([key, value]) =>
-                                                  value && // Add this check to ensure value is not null
                                                   typeof value === 'object' &&
                                                   [
                                                       'id',
@@ -851,9 +842,6 @@ const GenericDynamic = ({
                                                           onChange={
                                                               handleChange
                                                           }
-                                                          onChangeCanvas={
-                                                              handleChangeCanvas
-                                                          }
                                                           onChangeCheckbox={
                                                               handleChangeCheckbox
                                                           }
@@ -902,18 +890,12 @@ const GenericDynamic = ({
                                                           originalData
                                                       )}
                                                       onChange={handleChange}
-                                                      onChangeCanvas={
-                                                          handleChangeCanvas
-                                                      }
                                                       onChangeCheckbox={
                                                           handleChangeCheckbox
                                                       }
                                                       onChangeDate={
                                                           handleChangeDate
                                                       }
-                                                      onChangeNumberFormat={
-                                                          handleChangeNumberFormat
-                                                      }
                                                       onChangeTableRadio={
                                                           handleChangeTableRadio
                                                       }

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

@@ -8,7 +8,7 @@ import Toggle from 'react-toggle';
 import { toast } from 'react-toastify';
 import { v4 as uuidv4 } from 'uuid';
 import { Editor } from '@tinymce/tinymce-react';
-import { CirclePlus, CircleX, TrashCan } from 'akar-icons';
+import { CircleChevronRight, CirclePlus, CircleX, TrashCan } from 'akar-icons';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -17,7 +17,6 @@ import 'react-confirm-alert/src/react-confirm-alert.css';
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import SortableList from '../../../components/cms/sorting/List';
-import SketchConfig from '../sketch/json/config.json';
 
 import styles from './styles/GenericFormBuilder.module.scss'; // Import the CSS module
 
@@ -45,8 +44,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         label: '',
         type: '',
     });
-    const [fieldTypes] = useState([
-        { value: 'canvas', label: 'Canvas' },
+    const [fieldTypes, setFieldTypes] = useState([
         { value: 'checkbox', label: 'Checkbox' },
         { value: 'html5_date', label: 'Date' },
         { value: 'html5_datetime', label: 'Date & Time' },
@@ -80,7 +78,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     });
     const [modalFormShow, setModalFormShow] = useState(false);
     const [roles, setRoles] = useState([]);
-    const canvasTypes = SketchConfig.canvasTypes;
 
     /** Data Option Functionalities */
     const handleDataOption = (e) => {
@@ -431,21 +428,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
 
     const renderField = (field) => {
         switch (field.type) {
-            case 'canvas':
-                const canvasType = canvasTypes.find(
-                    (item) => item.id === field.canvasType
-                );
-                return (
-                    <label className={`${styles.fi__label}`}>
-                        <span
-                            className={`${styles.fi__span} ${styles.prefocus}`}
-                        >
-                            {field.label}{' '}
-                            {field.required === 'yes' ? '*' : null}
-                        </span>
-                        <img src={canvasType.url} width="200" />
-                    </label>
-                );
             case 'checkbox':
                 return (
                     <label className={styles.fi__label}>
@@ -839,19 +821,17 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 <div className={styles.grid__subrow}>
                     <div className={styles.grid__subnav}>
                         {data.detail && data.detail.length > 0 ? (
-                            <div className={styles.sortableListContainer}>
-                                <SortableList
-                                    handleClick={handleEdit}
-                                    handleDelete={handleDeleteField}
-                                    items={data.detail}
-                                    onSortEnd={onSortEnd}
-                                    axis="xy"
-                                    helperClass={styles.dragitem}
-                                    transitionDuration={250}
-                                    showImage={false}
-                                    useDragHandle
-                                />
-                            </div>
+                            <SortableList
+                                handleClick={handleEdit}
+                                handleDelete={handleDeleteField}
+                                items={data.detail}
+                                onSortEnd={onSortEnd}
+                                axis="xy"
+                                helperClass={styles.dragitem}
+                                transitionDuration={250}
+                                showImage={false}
+                                useDragHandle
+                            />
                         ) : null}
                     </div>
                     <div className={styles.grid__subcontent}>
@@ -1493,9 +1473,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                                                             dataField.type ===
                                                                                             'table_text'
                                                                                         ) {
-                                                                                            // excludedKeywords.push(
-                                                                                            //     'checkbox'
-                                                                                            // );
+                                                                                            excludedKeywords.push(
+                                                                                                'checkbox'
+                                                                                            );
                                                                                         }
                                                                                         return !excludedKeywords.some(
                                                                                             (
@@ -1630,9 +1610,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                                                 dataField.type ===
                                                                                 'table_text'
                                                                             ) {
-                                                                                // excludedKeywords.push(
-                                                                                //     'checkbox'
-                                                                                // );
+                                                                                excludedKeywords.push(
+                                                                                    'checkbox'
+                                                                                );
                                                                             }
                                                                             return !excludedKeywords.some(
                                                                                 (
@@ -1699,46 +1679,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                         </div>
                                     ) : null}
 
-                                    {['canvas'].includes(dataField.type) ? (
-                                        <div className={styles.formItem}>
-                                            <label className={styles.fi__label}>
-                                                <select
-                                                    name="canvasType"
-                                                    value={dataField.canvasType}
-                                                    onChange={handleChangeForm}
-                                                >
-                                                    <option>
-                                                        Please select a type
-                                                    </option>
-                                                    {canvasTypes.map(
-                                                        (
-                                                            canvasType,
-                                                            canvasTypeKey
-                                                        ) => (
-                                                            <option
-                                                                value={
-                                                                    canvasType.id
-                                                                }
-                                                                key={
-                                                                    canvasTypeKey
-                                                                }
-                                                            >
-                                                                {
-                                                                    canvasType.label
-                                                                }
-                                                            </option>
-                                                        )
-                                                    )}
-                                                </select>
-                                                <span
-                                                    className={styles.fi__span}
-                                                >
-                                                    Canvas Type
-                                                </span>
-                                            </label>
-                                        </div>
-                                    ) : null}
-
                                     {['signature'].includes(dataField.type) ? (
                                         <div className={styles.formItem}>
                                             <label className={styles.fi__label}>

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

@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
-import parse from 'html-react-parser';
 import _ from 'lodash';
 import moment from 'moment';
 
@@ -388,7 +387,7 @@ function GenericIndex({
                                 : styles.crmtitleSimple
                         }`}
                     >
-                        <h1>{parse(setting.page?.title)}</h1>
+                        <h1>{setting.page?.title}</h1>
                         <div className={styles.titleInfo}>
                             <span>
                                 [<strong>{total}</strong> Total{' '}

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

@@ -127,57 +127,6 @@
     color: var(--background-color);
 }
 
-.grid__subnav__alternate {
-    flex: 1;
-    background: rgba(var(--item-color-rgb), 0.05);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    padding: 5px;
-    margin: 8px 0;
-    height: auto;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.grid__subnav__alternate > ul {
-    width: 100%;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.grid__subnav__alternate > ul li {
-    width: 100%;
-    margin-bottom: 3px;
-}
-
-.grid__subnav__alternate > ul li a {
-    width: 100%;
-    padding: 8px 20px;
-    box-sizing: border-box;
-    display: block;
-    text-decoration: none;
-    background: rgba(var(--item-color-rgb), 1.05);
-    color: var(--secondary-color);
-    border-radius: 5px;
-    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-    outline: none;
-    cursor: pointer;
-}
-
-.grid__subnav__alternate > ul li:hover a {
-    background: var(--primary-color);
-    color: var(--secondary-color);
-}
-
-.grid__subnav__alternate > ul li .subactive {
-    font-weight: 700;
-    background: var(--primary-color);
-    color: var(--secondary-color);
-}
-
 .grid__minheight {
     min-height: 300px;
 }

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

@@ -942,8 +942,3 @@ select:not(:placeholder-shown) + .fi__span {
     padding: 10px;
     background: var(--item-color);
 }
-
-.sortableListContainer {
-    max-height: 700px; /* Optional for scrollable content */
-    overflow-y: auto;
-}