feat: Add data panel to display object related data fetched via Cloud Function

package.json

@@ -65,9 +65,11 @@
     "react-dnd": "10.0.2",
     "react-dnd-html5-backend": "10.0.2",
     "react-dom": "16.14.0",
+    "react-draggable": "^4.4.6",
     "react-helmet": "6.1.0",
     "react-json-view": "1.21.3",
     "react-popper-tooltip": "4.4.2",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "6.4.1",
     "regenerator-runtime": "0.13.11"
   },

src/components/AggregationPanel/AggregationPanel.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  TextElement,
+  KeyValueElement,
+  TableElement,
+  ImageElement,
+  VideoElement,
+  AudioElement,
+  ButtonElement,
+} from './AggregationPanelComponents';
+import styles from './AggregationPanel.scss';
+const AggregationPanel = ({ data }) => {
+  console.log('data aggregation panel', data);
+  return (
+    <>
+      {Object.keys(data).length !== 0 ? (
+        data.panel.segments.map((segment, index) => (
+          <div key={index}>
+            <h2 className={styles.heading}>{segment.title}</h2>
+            <div className={styles.segmentItems}>
+              {segment.items.map((item, idx) => {
+                switch (item.type) {
+                  case 'text':
+                    return <TextElement key={idx} text={item.text} />;
+                  case 'keyValue':
+                    return <KeyValueElement key={idx} item={item} />;
+                  case 'table':
+                    return <TableElement key={idx} columns={item.columns} rows={item.rows} />;
+                  case 'image':
+                    return <ImageElement key={idx} url={item.url} />;
+                  case 'video':
+                    return <VideoElement key={idx} url={item.url} />;
+                  case 'audio':
+                    return <AudioElement key={idx} url={item.url} />;
+                  case 'button':
+                    return <ButtonElement key={idx} item={item} />;
+                  default:
+                    return null;
+                }
+              })}
+            </div>
+          </div>
+        ))
+      ) : (
+        <div className={styles.loading}>No object selected. Select an object</div>
+      )}
+    </>
+  );
+};
+
+export default AggregationPanel;

src/components/AggregationPanel/AggregationPanel.scss

@@ -0,0 +1,64 @@
+@import 'stylesheets/globals.scss';
+
+.heading{
+    font-size: 18px;
+    margin-bottom: 15px;
+    margin-top: 0;
+    padding: 6px;
+    padding-left: 10px;
+    background-color: $blue;
+    color: $white;
+}
+
+.segmentItems{
+    padding-left: 10px;
+    padding-right: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.keyValue{
+    display: flex;
+    gap: 36px;
+}
+
+.video{
+    width: 100%;
+    height: 100%;
+}
+.image{
+    width: 100%;
+    height: 100%;
+}
+
+.audio{
+    width: 100%;
+}
+
+.segmentItems table, .segmentItems th, .segmentItems td {
+    border: 1px solid #ddd;
+}
+.segmentItems th, .segmentItems td {
+    padding: 8px;
+    text-align: left;
+}
+
+.button{
+    display: block;
+        width: 100%;
+        padding: 10px;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        margin-bottom: 15px;
+}
+
+.loading{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}

src/components/AggregationPanel/AggregationPanelComponents.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import styles from './AggregationPanel.scss';
+// Text Element Component
+export const TextElement = ({ text }) => (
+  <div className="text-element">
+    <p>{text}</p>
+  </div>
+);
+
+// Key-Value Element Component
+export const KeyValueElement = ({ item }) => (
+  <div className={styles.keyValue}>
+    <strong>{item.key}:</strong>
+    {item.url ? <a href={item.url}>{item.value}</a> : <span>{item.value}</span>}
+  </div>
+);
+
+// Table Element Component
+export const TableElement = ({ columns, rows }) => (
+  <div className="table-element">
+    <table>
+      <thead>
+        <tr>
+          {columns.map((column, idx) => (
+            <th key={idx}>{column.name}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, idx) => (
+          <tr key={idx}>
+            {columns.map((column, colIdx) => (
+              <td key={colIdx}>{row[column.name]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+// Image Element Component
+export const ImageElement = ({ url }) => (
+  <div className="image-element">
+    <img src={url} alt="Image" className={styles.image}/>
+  </div>
+);
+
+// Video Element Component
+export const VideoElement = ({ url }) => (
+  <div className="video-element">
+    <video controls className={styles.video}>
+      <source src={url} type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  </div>
+);
+
+// Audio Element Component
+export const AudioElement = ({ url }) => (
+  <div className="audio-element">
+    <audio controls className={styles.audio}>
+      <source src={url} type="audio/mpeg" />
+      Your browser does not support the audio element.
+    </audio>
+  </div>
+);
+
+// Button Element Component
+export const ButtonElement = ({ item }) => {
+  const handleClick = () => {
+    fetch(item.action.url, {
+      method: item.action.method,
+      headers: item.action.headers,
+      body: JSON.stringify(item.action.body),
+    })
+      .then(response => response.json())
+      .then(data => console.log(data))
+      .catch(error => console.error('Error:', error));
+  };
+
+  return (
+    <div className="button-element">
+      <button onClick={handleClick} className={styles.button}>{item.text}</button>
+    </div>
+  );
+};

src/components/BrowserCell/BrowserCell.react.js

@@ -556,6 +556,10 @@ export default class BrowserCell extends Component {
       current,
       onEditChange,
       setCopyableValue,
+      selectedObjectId,
+      setSelectedObjectId,
+      callCloudFunction,
+      isPanelVisible,
       onPointerCmdClick,
       row,
       col,
@@ -628,6 +632,12 @@ export default class BrowserCell extends Component {
             onPointerCmdClick(value);
           } else {
             setCopyableValue(hidden ? undefined : this.copyableValue);
+            if(selectedObjectId !== this.props.objectId){
+              if(isPanelVisible){
+                setSelectedObjectId(this.props.objectId);
+                callCloudFunction(this.props.objectId, this.props.className);
+              }
+            }
             handleCellClick(e, row, col);
           }
         }}

src/components/BrowserRow/BrowserRow.react.js

@@ -36,6 +36,10 @@ export default class BrowserRow extends Component {
       selection,
       selectRow,
       setCopyableValue,
+      selectedObjectId,
+      setSelectedObjectId,
+      callCloudFunction,
+      isPanelVisible,
       setCurrent,
       setEditing,
       setRelation,
@@ -141,6 +145,10 @@ export default class BrowserRow extends Component {
               isRequired={isRequired}
               markRequiredFieldRow={markRequiredFieldRow}
               setCopyableValue={setCopyableValue}
+              selectedObjectId={selectedObjectId}
+              setSelectedObjectId={setSelectedObjectId}
+              isPanelVisible={isPanelVisible}
+              callCloudFunction={callCloudFunction}
               setContextMenu={setContextMenu}
               onEditSelectedRow={onEditSelectedRow}
               showNote={this.props.showNote}

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -76,7 +76,9 @@ export default class DataBrowserHeaderBar extends React.Component {
     if (onAddColumn) {
       const finalStyle = {};
       if (headers.length % 2) {
-        finalStyle.background = 'rgba(224,224,234,0.10)';
+        finalStyle.background = '#726F85';
+      }else {
+        finalStyle.background = '#66637A';
       }
 
       elements.push(

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -11,7 +11,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  height: 30px;
+  height: 0;
   background: #66637a;
   white-space: nowrap;
   display: inline-block;
@@ -52,7 +52,8 @@
   vertical-align: top;
   text-align: center;
   width: 30px;
-  background: rgba(224,224,234,0.10);
+  // background: rgba(224,224,234,0.10);
+  background: rgb(114, 111, 133)
 }
 
 .handle {

src/components/Toolbar/Toolbar.react.js

@@ -135,6 +135,21 @@ const Toolbar = props => {
       </div>
       {props?.selectedData?.length ? <Stats data={props.selectedData} /> : null}
       <div className={styles.actions}>{props.children}</div>
+      {props.classwiseCloudFunctions && props.classwiseCloudFunctions[props.className] && <button
+        onClick={props.togglePanel}
+        style={{
+          position: 'absolute',
+          right: '5px',
+          bottom: '5px',
+          border: 'none',
+          padding: '4px 3px',
+          width:' 100px',
+          background: 'rgb(114, 111, 133)',
+          color: 'white'
+        }}
+      >
+        {props.isPanelVisible ? 'Hide Panel' : 'Show Panel'}
+      </button>}
     </div>
   );
 };