@visns-studio/visns-components 4.10.8 → 4.10.10

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -628,7 +628,6 @@ const DataGrid = forwardRef(
                     break;
                 case 'view':
                     modalJsonOpen();
-                    console.info(d[s.key], s.headers);
                     setJsonData((prevState) => ({
                         ...prevState,
                         data: d[s.key],
@@ -2723,10 +2722,6 @@ const DataGrid = forwardRef(
             style: style ? style : {},
         };
 
-        useEffect(() => {
-            console.info(jsonData);
-        }, [jsonData]);
-
         useEffect(() => {
             const getMinimumHeight = () => {
                 if (gridHeight > 0) return gridHeight;

package/src/components/crm/Field.jsx

@@ -1433,7 +1433,9 @@ function Field({
                                 <th></th>
                                 {tableRadioColumns.map((column, columnKey) => (
                                     <th
-                                        key={`${settings.id}-${column.id}`}
+                                        key={`${settings.id}-${
+                                            column.id
+                                        }-${Math.random()}`}
                                         style={{
                                             width: '250px',
                                             whiteSpace: 'nowrap',
@@ -1467,7 +1469,13 @@ function Field({
                                     </td>
                                     {tableRadioColumns.map((cell, cellKey) => (
                                         <td
-                                            key={`table-radio-cell-${settings.id}-${row.id}-${cell.id}`}
+                                            key={`table-radio-cell-${
+                                                settings.id
+                                            }-${row.id}-${
+                                                cell.id
+                                            }-${Math.random()
+                                                .toString(36)
+                                                .substr(2, 9)}`}
                                             style={{
                                                 textAlign:
                                                     tableRadioColumns[cellKey]

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

@@ -38,6 +38,7 @@ function GenericDetail({
     layout = 'full',
     setting,
     setActiveNav = null,
+    themeType,
     urlParam,
     userProfile,
 }) {
@@ -1499,7 +1500,13 @@ function GenericDetail({
 
             <div className={styles.grid}>
                 <div className={styles.grid__subrow}>
-                    <div className={styles.grid__subnav}>
+                    <div
+                        className={
+                            themeType === 'alternate'
+                                ? styles.grid__subnav__alternate
+                                : styles.grid__subnav
+                        }
+                    >
                         <TableFilter filters={subnav} setFilters={setSubnav} />
                     </div>
                     <div className={styles.grid__subcontent}>

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

@@ -631,17 +631,19 @@ const GenericDynamic = ({
                     }
                 }
             } else {
-                if (data[type].hasOwnProperty('id')) {
+                let formData = data[type][0] ? data[type][0] : data[type];
+
+                if (formData.hasOwnProperty('id')) {
                     if (
                         Object.keys(activeForm).length === 0 &&
                         templateStatus &&
-                        data[type][0]
+                        formData[0]
                     ) {
-                        setActiveForm(data[type][0]);
+                        setActiveForm(formData[0]);
                         setActiveFormKey(0);
                     }
                 } else {
-                    setActiveForm(data[type]);
+                    setActiveForm(formData);
                     setActiveFormKey(0);
                 }
             }
@@ -896,6 +898,9 @@ const GenericDynamic = ({
                                                       onChangeDate={
                                                           handleChangeDate
                                                       }
+                                                      onChangeNumberFormat={
+                                                          handleChangeNumberFormat
+                                                      }
                                                       onChangeTableRadio={
                                                           handleChangeTableRadio
                                                       }

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

@@ -127,6 +127,57 @@
     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;
 }