@visns-studio/visns-components 4.4.1 → 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,6 +234,47 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
 
         const renderBoolean = () => (value ? 'Yes' : 'No');
 
+        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);
 
         const renderDateTime = () => formatDateTimeValue(value);
@@ -276,6 +322,8 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
         switch (type) {
             case 'boolean':
                 return renderBoolean();
+            case 'checkbox':
+                return renderCheckbox();
             case 'copyToClipboard':
                 return renderCopyToClipboard();
             case 'date':

package/components/crm/generic/GenericIndex.jsx

@@ -2,12 +2,15 @@ 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 _ from 'lodash';
+
 import CustomFetch from '../Fetch';
 import Download from '../Download';
 import Field from '../Field';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
-import _ from 'lodash';
+
+import styles from './styles/GenericIndex.module.css';
 
 function useWindowHeight() {
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
@@ -234,11 +237,11 @@ function GenericIndex({ layout = 'full', setting, userProfile }) {
     const renderContent = useCallback(() => {
         if (subnav?.length > 0) {
             return (
-                <div className="grid__subrow">
+                <div className={styles.grid__subrow}>
                     {layout === 'simple' ? (
-                        <div className={`grid__full`}>
-                            <div className="tabcontent">
-                                <div className="tabcontent__menu">
+                        <div className={styles.grid__full}>
+                            <div className={styles.tabcontent}>
+                                <div className={styles.tabcontent__menu}>
                                     <TableFilter
                                         filters={subnav}
                                         setFilters={setSubnav}
@@ -246,14 +249,14 @@ function GenericIndex({ layout = 'full', setting, userProfile }) {
                                         type={layout}
                                     />
                                 </div>
-                                <div className="tabcontent__main">
+                                <div className={styles.tabcontent__main}>
                                     {renderContentBasedOnType()}
                                 </div>
                             </div>
                         </div>
                     ) : (
                         <>
-                            <div className={`grid__subnav`}>
+                            <div className={styles.grid__subnav}>
                                 <TableFilter
                                     filters={subnav}
                                     setFilters={setSubnav}
@@ -261,7 +264,7 @@ function GenericIndex({ layout = 'full', setting, userProfile }) {
                                     type={layout}
                                 />
                             </div>
-                            <div className="grid__subcontent">
+                            <div className={styles.grid__subcontent}>
                                 {renderContentBasedOnType()}
                             </div>
                         </>
@@ -277,9 +280,9 @@ function GenericIndex({ layout = 'full', setting, userProfile }) {
 
     return (
         <>
-            <div className="grid">
-                <div className="grid__row">
-                    <div className="grid__full crmtitle">
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
                         <h1>{setting.page?.title}</h1>
                         <div className="titleInfo">
                             <span>
@@ -291,11 +294,14 @@ function GenericIndex({ layout = 'full', setting, userProfile }) {
                 </div>
             </div>
 
-            <div className="grid">{renderContent()}</div>
+            <div className={styles.grid}>{renderContent()}</div>
             <Outlet />
             {setting.functions?.checkboxUpdate && (
-                <div className="polActions">
-                    <button className="btn" onClick={handleCheckboxUpdate}>
+                <div className={styles.polActions}>
+                    <button
+                        className={styles.btn}
+                        onClick={handleCheckboxUpdate}
+                    >
                         {setting.functions.checkboxUpdate.label || 'Update'}
                     </button>
                 </div>

package/components/crm/generic/styles/GenericIndex.module.css

@@ -0,0 +1,232 @@
+.grid {
+    &__row {
+        width: 100%;
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: nowrap;
+        height: auto;
+        gap: 1rem;
+    }
+
+    &__three {
+        width: 33%;
+        background: var(--item-color);
+        border-radius: var(--br);
+        border: 1px solid rgba(var(--item-color-rgb), 1.15);
+        box-sizing: border-box;
+        overflow: visible;
+        position: relative;
+        padding: 20px;
+        margin: 8px 0;
+        box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    }
+
+    &__half {
+        width: 50%;
+        background: var(--item-color);
+        border-radius: 6px;
+        border: 1px solid #dadce0;
+        box-sizing: border-box;
+        overflow: visible;
+        position: relative;
+        padding: 20px;
+        margin: 8px 0;
+        box-shadow: 0 4px 0 rgba(var(--primary-color), 0.05);
+    }
+
+    &__full {
+        width: 100%;
+        background: var(--item-color);
+        border-radius: var(--br);
+        border: 1px solid rgba(var(--item-color-rgb), 1.15);
+        box-sizing: border-box;
+        overflow: visible;
+        position: relative;
+        padding: 2px;
+        margin: 8px 0;
+        box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    }
+
+    &__dashfull {
+        width: 100%;
+        background: var(--item-color);
+        border-radius: 6px;
+        border: 1px solid #dadce0;
+        box-sizing: border-box;
+        overflow: visible;
+        position: relative;
+        padding: 20px;
+        margin: 8px 0;
+        box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    }
+
+    &__subrow {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        height: auto;
+        gap: 0.5rem;
+    }
+
+    &__subnav {
+        flex: 1;
+        background: rgba(var(--item-color-rgb), 1.01);
+        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);
+
+        > ul {
+            width: 100%;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+                width: 100%;
+                margin-bottom: 3px;
+
+                a {
+                    width: 100%;
+                    padding: 8px 20px;
+                    box-sizing: border-box;
+                    display: block;
+                    text-decoration: none;
+                    background: rgba(var(--primary-color-rgb), 0.05);
+                    color: var(--primary-color);
+                    border-radius: 5px;
+                    transition: background 0.25s
+                        cubic-bezier(0.25, 0.8, 0.25, 1);
+                    outline: none;
+                    cursor: pointer;
+                }
+
+                &:hover {
+                    a {
+                        background: var(--primary-color);
+                        color: var(--tertiary-color);
+                    }
+                }
+
+                .subactive {
+                    font-weight: 700;
+                    background: var(--primary-color);
+                    color: var(--tertiary-color);
+                }
+            }
+        }
+    }
+
+    &__minheight {
+        min-height: 300px;
+    }
+
+    .noborder {
+        border: none !important;
+    }
+
+    &__subcontent {
+        flex: 0 1 80%;
+        background: var(--item-color);
+        border-radius: var(--br);
+        border: 1px solid rgba(var(--item-color-rgb), 1.15);
+        box-sizing: border-box;
+        padding: 2px;
+        margin: 8px 0;
+        height: auto;
+        position: relative;
+        box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+
+        h2 {
+            color: var(--primary-color);
+            font-size: 1.35em;
+            padding: 0;
+            margin: 0 0 30px 0;
+        }
+    }
+}
+
+.crmtitle {
+    border: none;
+    min-height: auto;
+    padding: 10px 20px;
+    margin: 0;
+    background: var(--tertiary-color);
+    border-radius: var(--br);
+    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    position: relative;
+
+    h1 {
+        font-weight: 700;
+        font-size: 1.45em;
+        margin: 0;
+        padding: 0.65rem 0;
+
+        a {
+            text-decoration: none;
+            color: rgba(var(--secondary-color-rgb), 1.1);
+            font-weight: 300;
+        }
+
+        svg {
+            color: rgba(var(--primary-color-rgb), 0.25);
+            position: relative;
+            top: 2px;
+            margin: 0 0.25rem;
+        }
+    }
+}
+
+.titleInfo {
+    position: absolute;
+    right: 2em;
+    top: 24px;
+
+    span {
+        font-size: 0.875em;
+        color: rgba(var(--paragraph-color-rgb), 0.65);
+    }
+}
+
+.btn {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    font-size: 1.25em;
+
+    &:hover {
+        color: var(--primary-color);
+        background: var(--highlight-color);
+        border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
+    }
+}
+
+.polActions {
+    position: fixed;
+    bottom: 15px;
+    right: 20px;
+    width: auto;
+
+    button {
+        display: block;
+        float: left;
+        padding: 0.35em 1em;
+        margin: 0 0.15em;
+    }
+}

package/package.json

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