@visns-studio/visns-components 4.4.2 → 4.4.3

package/components/crm/generic/GenericDetail.jsx

@@ -115,7 +115,7 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
         setDataReload(randomNumber);
     };
 
-    const getValueFromData = (data, path, id) => {
+    const getValueFromData = (data, path, id, type) => {
         let value =
             path.reduce((result, key) => (result ? result[key] : ''), data) ??
             '';
@@ -128,7 +128,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
                     .join(', ');
             } else {
                 if (Array.isArray(id)) {
-                    return id.map((key) => value[key]).join(' ');
+                    if (type === 'checkbox') {
+                        return value[id];
+                    } else {
+                        return id.map((key) => value[key]).join(' ');
+                    }
                 } else {
                     return value[id];
                 }
@@ -166,8 +170,9 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
         } = item;
         const value =
             relation && relation.length > 0 && type !== 'total'
-                ? getValueFromData(data, [...relation], id)
-                : getValueFromData(data, [], id);
+                ? getValueFromData(data, [...relation], id, type)
+                : getValueFromData(data, [], id, type);
+
         const stringValue = String(value ?? ''); // Convert value to a string
 
         // Conditionally truncate the value if the 'truncate' key is present
@@ -229,9 +234,45 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
 
         const renderBoolean = () => (value ? 'Yes' : 'No');
 
-        const renderCheckbox = (value) => {
-            const keys = Object.keys(value).filter((key) => value[key]);
-            return keys.join(', ');
+        const renderCheckbox = () => {
+            if (!value || typeof value !== 'object') {
+                return '';
+            }
+
+            const formatKey = (key) => {
+                return key
+                    .toLowerCase()
+                    .split('_')
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(' ');
+            };
+
+            const keys = Object.keys(value)
+                .filter((key) => value[key] && key !== 'notes')
+                .sort((a, b) => {
+                    if (a === 'other') return 1;
+                    if (b === 'other') return -1;
+                    return a.localeCompare(b);
+                });
+
+            const formattedKeys = keys.map((key) => {
+                let formattedKey = formatKey(key);
+                if (key === 'other') {
+                    const otherValue = getValueFromData(
+                        data,
+                        [...relation],
+                        `${id}_other`,
+                        type
+                    );
+
+                    if (otherValue) {
+                        formattedKey += `: ${otherValue}`;
+                    }
+                }
+                return formattedKey;
+            });
+
+            return formattedKeys.join(', ');
         };
 
         const renderDate = () => formatDateValue(value);

package/package.json

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