Refactor Dashboard components by renaming and replacing DashboardUnit with BlankDashboardUnit for improved clarity and structure

2024-11-21 14:49:07 +00:00 · 2024-11-15 14:54:09 +00:00 · 2024-11-15 14:54:09 +00:00 · a8baa76096
commit a8baa76096
parent 8d5cef72b3
4 changed files with 126 additions and 121 deletions
--- a/Dashboard/src/Components/Dashboard/Canvas/BlankDashboardUnit.tsx
+++ b/Dashboard/src/Components/Dashboard/Canvas/BlankDashboardUnit.tsx
@ -8,9 +8,10 @@ export interface ComponentProps {
  isEditMode: boolean;
  onClick: () => void;
  currentTotalDashboardWidthInPx: number;
+  id: string;
 }

-const DashboardUnitElement: FunctionComponent<ComponentProps> = (
+const BlankDashboardUnitElement: FunctionComponent<ComponentProps> = (
  props: ComponentProps,
 ): ReactElement => {
  const heightOfUnitInPx: number = GetDashboardUnitHeightInPx(
@ -28,6 +29,7 @@ const DashboardUnitElement: FunctionComponent<ComponentProps> = (

  return (
    <div
+      id={props.id}
      className={className}
      onClick={() => {
        props.onClick();
@ -41,4 +43,4 @@ const DashboardUnitElement: FunctionComponent<ComponentProps> = (
  );
 };

-export default DashboardUnitElement;
+export default BlankDashboardUnitElement;
--- a/Dashboard/src/Components/Dashboard/Canvas/BlankRow.tsx
+++ b/Dashboard/src/Components/Dashboard/Canvas/BlankRow.tsx
@ -1,6 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
-import BlankDashboardUnitElement from "./DashboardUnit";
+import BlankDashboardUnitElement from "./BlankDashboardUnit";

 export interface ComponentProps {
  rowNumber: number;
@ -23,11 +23,12 @@ const BlankRowElement: FunctionComponent<ComponentProps> = (
              currentTotalDashboardWidthInPx={
                props.totalCurrentDashboardWidthInPx
              }
-              key={index}
+              key={props.rowNumber + "-" + index}
              isEditMode={props.isEditMode}
              onClick={() => {
                props.onClick(props.rowNumber, index);
              }}
+              id={`blank-unit-${props.rowNumber}-${index}`}
            />
          );
        },
--- a/Dashboard/src/Components/Dashboard/Canvas/Index.tsx
+++ b/Dashboard/src/Components/Dashboard/Canvas/Index.tsx
@ -3,10 +3,11 @@ import BlankCanvasElement from "./BlankCanvas";
 import DashboardViewConfig from "Common/Types/Dashboard/DashboardViewConfig";
 import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
 import DashboardBaseComponent from "Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent";
-import BlankDashboardUnitElement from "./DashboardUnit";
+import BlankDashboardUnitElement from "./BlankDashboardUnit";
 import DashboardBaseComponentElement from "../Components/DashboardBaseComponent";
 import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
 import ObjectID from "Common/Types/ObjectID";
+import ComponentSettingsSideOver from "./ComponentSettingsSideOver";

 export interface ComponentProps {
  dashboardViewConfig: DashboardViewConfig;
@ -95,10 +96,11 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
                props.currentTotalDashboardWidthInPx
              }
              isEditMode={props.isEditMode}
-              key={`blank-${i}-${j}`}
+              key={`blank-unit-${i}-${j}`}
              onClick={() => {
                props.onComponentUnselected();
              }}
+              id={`blank-unit-${i}-${j}`}
            />,
          );
        }
@ -125,6 +127,35 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (

  type RenderComponentFunction = (componentId: ObjectID) => ReactElement;

+  type UpdateComponentFunction = (
+    updatedComponent: DashboardBaseComponent,
+  ) => void;
+
+  const updateComponent: UpdateComponentFunction = (
+    updatedComponent: DashboardBaseComponent,
+  ): void => {
+    const updatedComponents: Array<DashboardBaseComponent> =
+      props.dashboardViewConfig.components.map(
+        (component: DashboardBaseComponent) => {
+          if (
+            component.componentId.toString() ===
+            updatedComponent.componentId.toString()
+          ) {
+            return { ...updatedComponent };
+          }
+
+          return component;
+        },
+      );
+
+    const updatedDashboardViewConfig: DashboardViewConfig = {
+      ...props.dashboardViewConfig,
+      components: [...updatedComponents],
+    };
+
+    props.onDashboardViewConfigChange(updatedDashboardViewConfig);
+  };
+
  const renderComponent: RenderComponentFunction = (
    componentId: ObjectID,
  ): ReactElement => {
@ -144,53 +175,14 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
        totalCurrentDashboardWidthInPx={props.currentTotalDashboardWidthInPx}
        componentId={componentId}
        key={componentId.toString()}
-        onUnselectComponent={() => {
-          props.onComponentUnselected();
-        }}
-        onComponentDelete={(component: DashboardBaseComponent) => {
-          const updatedComponents: Array<DashboardBaseComponent> =
-            props.dashboardViewConfig.components.filter(
-              (c: DashboardBaseComponent) => {
-                return (
-                  c.componentId.toString() !== component.componentId.toString()
-                );
-              },
-            );
-
-          const updatedDashboardViewConfig: DashboardViewConfig = {
-            ...props.dashboardViewConfig,
-            components: [...updatedComponents],
-          };
-
-          props.onDashboardViewConfigChange(updatedDashboardViewConfig);
+        onComponentUpdate={(updatedComponent: DashboardBaseComponent) => {
+          updateComponent(updatedComponent);
        }}
        isSelected={isSelected}
        onClick={() => {
          // component is selected
          props.onComponentSelected(componentId);
        }}
-        onComponentUpdate={(updatedComponent: DashboardBaseComponent) => {
-          const updatedComponents: Array<DashboardBaseComponent> =
-            props.dashboardViewConfig.components.map(
-              (component: DashboardBaseComponent) => {
-                if (
-                  component.componentId.toString() ===
-                  updatedComponent.componentId.toString()
-                ) {
-                  return { ...updatedComponent };
-                }
-
-                return component;
-              },
-            );
-
-          const updatedDashboardViewConfig: DashboardViewConfig = {
-            ...props.dashboardViewConfig,
-            components: [...updatedComponents],
-          };
-
-          props.onDashboardViewConfigChange(updatedDashboardViewConfig);
-        }}
      />
    );
  };
@ -209,7 +201,44 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
    );
  }

-  return renderComponents();
+  return (
+    <div>
+      {renderComponents()}
+      {props.selectedComponentId && props.isEditMode && (
+        <ComponentSettingsSideOver
+          title="Component Settings"
+          description="Edit the settings of this component"
+          dashboardViewConfig={props.dashboardViewConfig}
+          onClose={() => {
+            // unselect this component.
+            props.onComponentUnselected();
+          }}
+          onComponentDelete={() => {
+            const updatedComponents: Array<DashboardBaseComponent> =
+              props.dashboardViewConfig.components.filter(
+                (c: DashboardBaseComponent) => {
+                  return (
+                    c.componentId.toString() !==
+                    props.selectedComponentId?.toString()
+                  );
+                },
+              );
+
+            const updatedDashboardViewConfig: DashboardViewConfig = {
+              ...props.dashboardViewConfig,
+              components: [...updatedComponents],
+            };
+
+            props.onDashboardViewConfigChange(updatedDashboardViewConfig);
+          }}
+          componentId={props.selectedComponentId}
+          onComponentUpdate={(updatedComponent: DashboardBaseComponent) => {
+            updateComponent(updatedComponent);
+          }}
+        />
+      )}
+    </div>
+  );
 };

 export default DashboardCanvas;
--- a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
+++ b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
@ -17,7 +17,6 @@ import DefaultDashboardSize, {
 import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
 import DashboardViewConfig from "Common/Types/Dashboard/DashboardViewConfig";
 import ObjectID from "Common/Types/ObjectID";
-import ComponentSettingsSideOver from "../Canvas/ComponentSettingsSideOver";
 import DashboardComponentType from "Common/Types/Dashboard/DashboardComponentType";

 export interface DashboardBaseComponentProps {
@ -26,14 +25,12 @@ export interface DashboardBaseComponentProps {
  isSelected: boolean;
  key: string;
  onComponentUpdate: (component: DashboardBaseComponent) => void;
-  onComponentDelete: (component: DashboardBaseComponent) => void;
  totalCurrentDashboardWidthInPx: number;
  dashboardCanvasTopInPx: number;
  dashboardCanvasLeftInPx: number;
  dashboardCanvasWidthInPx: number;
  dashboardCanvasHeightInPx: number;
  dashboardViewConfig: DashboardViewConfig;
-  onUnselectComponent: () => void;
 }

 export interface ComponentProps extends DashboardBaseComponentProps {
@ -356,79 +353,55 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
  };

  return (
-    <>
-      <div
-        className={className}
-        key={props.key}
-        onClick={() => {
-          props.onClick();
-        }}
-        style={{
-          margin: `${MarginForEachUnitInPx}px`,
-          height: `${
-            GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
-              heightOfComponent +
-            SpaceBetweenUnitsInPx * (heightOfComponent - 1)
-          }px`,
-          width: `${
-            GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
-              widthOfComponent +
-            (SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
-          }px`,
-        }}
-        ref={dashboardComponentRef}
-      >
-        {getMoveElement()}
+    <div
+      className={className}
+      style={{
+        margin: `${MarginForEachUnitInPx}px`,
+        height: `${
+          GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
+            heightOfComponent +
+          SpaceBetweenUnitsInPx * (heightOfComponent - 1)
+        }px`,
+        width: `${
+          GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
+            widthOfComponent +
+          (SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
+        }px`,
+      }}
+      key={props.key}
+      ref={dashboardComponentRef}
+      onClick={props.onClick}
+    >
+      {getMoveElement()}

-        {component.componentType === DashboardComponentType.Text && (
-          <DashboardTextComponent
-            {...props}
-            isEditMode={props.isEditMode}
-            isSelected={props.isSelected}
-            component={component as DashboardTextComponentType}
-          />
-        )}
-        {component.componentType === DashboardComponentType.Chart && (
-          <DashboardChartComponent
-            {...props}
-            isEditMode={props.isEditMode}
-            isSelected={props.isSelected}
-            component={component as DashboardChartComponentType}
-          />
-        )}
-        {component.componentType === DashboardComponentType.Value && (
-          <DashboardValueComponent
-            {...props}
-            isSelected={props.isSelected}
-            isEditMode={props.isEditMode}
-            component={component as DashboardValueComponentType}
-          />
-        )}
-
-        {getResizeWidthElement()}
-        {getResizeHeightElement()}
-      </div>
-
-      {props.isSelected && props.isEditMode && (
-        <ComponentSettingsSideOver
-          title="Component Settings"
-          description="Edit the settings of this component"
-          dashboardViewConfig={props.dashboardViewConfig}
-          onClose={() => {
-            // unselect this component.
-            props.onUnselectComponent();
-          }}
-          onComponentDelete={() => {
-            // delete this component
-            props.onComponentDelete(component);
-          }}
-          componentId={props.componentId}
-          onComponentUpdate={(component: DashboardBaseComponent) => {
-            props.onComponentUpdate(component);
-          }}
+      {component.componentType === DashboardComponentType.Text && (
+        <DashboardTextComponent
+          {...props}
+          isEditMode={props.isEditMode}
+          isSelected={props.isSelected}
+          component={component as DashboardTextComponentType}
        />
      )}
-    </>
+      {component.componentType === DashboardComponentType.Chart && (
+        <DashboardChartComponent
+          {...props}
+          isEditMode={props.isEditMode}
+          isSelected={props.isSelected}
+          component={component as DashboardChartComponentType}
+        />
+      )}
+      {component.componentType === DashboardComponentType.Value && (
+        <DashboardValueComponent
+          {...props}
+          isSelected={props.isSelected}
+          isEditMode={props.isEditMode}
+          component={component as DashboardValueComponentType}
+        />
+      )}
+
+      {getResizeWidthElement()}
+      {getResizeHeightElement()}
+    </div>
  );
 };