Refactor dashboard component types and add chart, text, and value components

Common/Types/Dashboard/DashboardComponentType.ts

@@ -0,0 +1,8 @@
+ enum DashboardComponentType {
+    Chart = `Chart`,
+    Value = `Value`,
+    Text = `Text`,
+}
+
+
+export default DashboardComponentType;

Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent.ts

@@ -1,6 +1,10 @@
 import ObjectID from "../../ObjectID";
 
 export default interface DashboardBaseComponent {
-  type: string;
+  _type: string;
   componentId: ObjectID;
+  topInDashboardUnits: number;
+  leftInDashboardUnits: number;
+  widthInDashboardUnits: number;
+  heightInDashboardUnits: number;
 }

Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts

@@ -2,8 +2,8 @@ import ObjectID from "../../ObjectID";
 import ChartType from "../Chart/ChartType";
 import BaseComponent from "./DashboardBaseComponent";
 
-export default interface ChartDashboardComponent extends BaseComponent {
-  type: "chart";
+export default interface DashboardChartComponent extends BaseComponent {
+  _type: "DashboardChartComponent";
   componentId: ObjectID;
   chartType: ChartType;
 }

Common/Types/Dashboard/DashboardComponents/DashboardTextComponent.ts

@@ -0,0 +1,8 @@
+import ObjectID from "../../ObjectID";
+import BaseComponent from "./DashboardBaseComponent";
+
+export default interface DashboardTextComponent extends BaseComponent {
+  _type: "DashboardTextComponent";
+  componentId: ObjectID;
+  text: string;
+}

Common/Types/Dashboard/DashboardComponents/DashboardValueComponent.ts

@@ -0,0 +1,7 @@
+import ObjectID from "../../ObjectID";
+import BaseComponent from "./DashboardBaseComponent";
+
+export default interface DashboardValueComponent extends BaseComponent {
+  _type: "DashboardValueComponent";
+  componentId: ObjectID;
+}

Common/Types/Dashboard/DashboardComponents/ValueDashboardComponent.ts

@@ -1,3 +0,0 @@
-import BaseComponent from "./DashboardBaseComponent";
-
-export interface ValueDashboardComponent extends BaseComponent {}

Common/Types/JSON.ts

@@ -64,6 +64,12 @@ export enum ObjectType {
   NotNull = "NotNull",
   IsNull = "IsNull",
   Includes = "Includes",
+
+  // Dashboard Components. 
+  DashboardViewConfig = "DashboardViewConfig",
+  DashboardTextComponent = "DashboardTextComponent",
+  DashboardValueComponent = "DashboardValueComponent",
+  DashboardChartComponent = "DashboardChartComponent",
 }
 
 export type JSONValue =

Common/UI/Components/Button/Button.tsx

@@ -20,6 +20,9 @@ export enum ButtonStyleType {
   LINK,
   SECONDARY_LINK,
   ICON,
+  HOVER_DANGER_OUTLINE,
+  HOVER_SUCCESS_OUTLINE,
+  HOVER_PRIMARY_OUTLINE
 }
 
 export enum ButtonSize {
@@ -173,8 +176,21 @@ const Button: FunctionComponent<ComponentProps> = ({
     }  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
   }
 
-  if (buttonStyle === ButtonStyleType.OUTLINE) {
+  if (buttonStyle === ButtonStyleType.OUTLINE || buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE || buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE || buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE) {
     buttonStyleCssClass = `flex btn-outline-secondary background-very-light-Gray500-on-hover sm:text-sm ml-1`;
+
+    if(buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE){
+      buttonStyleCssClass += ` hover:text-red-500`;
+    }
+
+    if(buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE){
+      buttonStyleCssClass += ` hover:text-green-500`;
+    }
+
+    if(buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE){
+      buttonStyleCssClass += ` hover:text-indigo-500`;
+    }
+    
   }
 
   if (buttonStyle === ButtonStyleType.SUCCESS) {

Common/Utils/Dashboard/Components/DashboardChartComponent.ts

@@ -0,0 +1,15 @@
+import DashboardViewConfig from "../../../Types/Dashboard/DashboardViewConfig";
+import { ObjectType } from "../../../Types/JSON";
+
+export default class DashboardChartComponentConfigUtil {
+  public static createDefaultDashboardViewConfig(): DashboardChar {
+    return {
+      _type: ObjectType.DashboardChartComponent,
+      components: [],
+    };
+  }
+
+  public static addDefaultChartComponent(): DashboardViewConfig {
+
+  }
+}

Common/Utils/Dashboard/Components/DashboardTextComponent.ts

@@ -0,0 +1,17 @@
+import DashboardTextComponent from "../../../Types/Dashboard/DashboardComponents/DashboardTextComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+
+export default class DashboardViewConfigUtil {
+    public static getDefaultDashboardTextComponent(): DashboardTextComponent {
+        return {
+            _type: ObjectType.DashboardTextComponent,
+            widthInDashboardUnits: 3,
+            heightInDashboardUnits: 1,
+            topInDashboardUnits: 0,
+            leftInDashboardUnits: 0,
+            text: "Hello, World!",
+            componentId: ObjectID.generate()
+        };
+    }
+}

Common/Utils/Dashboard/Components/DashboardValueComponent.ts

@@ -0,0 +1,15 @@
+import { ObjectType } from "../../../Types/JSON";
+import DashboardViewConfig from "../../Types/Dashboard/DashboardViewConfig";
+
+export default class DashboardViewConfigUtil {
+  public static createDefaultDashboardViewConfig(): DashboardViewConfig {
+    return {
+      _type: ObjectType.DashboardValueComponent,
+      components: [],
+    };
+  }
+
+  public static addDefaultChartComponent(): DashboardViewConfig {
+
+  }
+}

Common/Utils/Dashboard/DashboardViewConfig.ts

@@ -7,4 +7,8 @@ export default class DashboardViewConfigUtil {
       components: [],
     };
   }
+
+  public static addDefaultChartComponent(): DashboardViewConfig {
+
+  }
 }

Dashboard/src/Components/Dashboard/DashboardView.tsx

@@ -2,12 +2,14 @@ import React, { FunctionComponent, ReactElement, useState } from "react";
 import DashboardToolbar from "./Toolbar/DashboardToolbar";
 import DashboardCanvas from "./Canvas/Index";
 import DashboardMode from "Common/Types/Dashboard/DashboardMode";
+import DashboardComponentType from "Common/Types/Dashboard/DashboardComponentType";
 
 export interface ComponentProps {}
 
 const DashboardViewer: FunctionComponent<ComponentProps> = (
   _props: ComponentProps,
 ): ReactElement => {
+  
   const [dashboardMode, setDashboardMode] = useState<DashboardMode>(
     DashboardMode.View,
   );
@@ -25,6 +27,9 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
         onEditClick={() => {
           setDashboardMode(DashboardMode.Edit);
         }}
+        onAddComponentClick={(componentType: DashboardComponentType) => {
+
+        }}
       />
       <DashboardCanvas />
     </div>

Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx

@@ -5,12 +5,14 @@ import React, { FunctionComponent, ReactElement } from "react";
 import DashboardMode from "Common/Types/Dashboard/DashboardMode";
 import MoreMenu from "Common/UI/Components/MoreMenu/MoreMenu";
 import MoreMenuItem from "Common/UI/Components/MoreMenu/MoreMenuItem";
+import DashboardComponentType from "Common/Types/Dashboard/DashboardComponentType";
 
 export interface ComponentProps {
   onEditClick: () => void;
   onSaveClick: () => void;
   onCancelEditClick: () => void;
   dashboardMode: DashboardMode;
+  onAddComponentClick: (type: DashboardComponentType) => void;
 }
 
 const DashboardToolbar: FunctionComponent<ComponentProps> = (
@@ -37,9 +39,15 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
         <div className="flex">
           {isEditMode ? (
             <MoreMenu menuIcon={IconProp.Add} text="Add Component">
-              <MoreMenuItem text={"Add Chart"} onClick={() => {}} />
-              <MoreMenuItem text={"Add Value"} onClick={() => {}} />
-              <MoreMenuItem text={"Add Text"} onClick={() => {}} />
+              <MoreMenuItem text={"Add Chart"} onClick={() => {
+                props.onAddComponentClick(DashboardComponentType.Chart);
+              }} />
+              <MoreMenuItem text={"Add Value"} onClick={() => {
+                props.onAddComponentClick(DashboardComponentType.Value);
+              }} />
+              <MoreMenuItem text={"Add Text"} onClick={() => {
+                props.onAddComponentClick(DashboardComponentType.Text);
+              }} />
             </MoreMenu>
           ) : (
             <></>
@@ -57,7 +65,7 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
             <Button
               icon={IconProp.Check}
               title="Save"
-              buttonStyle={ButtonStyleType.OUTLINE}
+              buttonStyle={ButtonStyleType.HOVER_PRIMARY_OUTLINE}
               onClick={props.onSaveClick}
             />
           )}
@@ -65,7 +73,7 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
             <Button
               icon={IconProp.Close}
               title="Cancel"
-              buttonStyle={ButtonStyleType.OUTLINE}
+              buttonStyle={ButtonStyleType.HOVER_DANGER_OUTLINE}
               onClick={props.onCancelEditClick}
             />
           )}