refactor(global): ♻️ fix ui for model viewer

some data related fix in model builder, change icon of toolbox group Ref #54
wrappid · Jan 1, 2025 · 9cc5467 · 9cc5467
1 parent c4db04e
commit 9cc5467
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 108 deletions.
diff --git a/app/components/AppBuilder.tsx b/app/components/AppBuilder.tsx
@@ -36,10 +36,9 @@ export default function AppBuilder<T extends AppBuilderData>() {
   useEffect(() => {
     dispatch(addAppBuilderDataToReducer(appBuilderData, data));
   }, []);
-
-  const viewerData = appBuilderData.getViewers();
-
-  const toolboxData = GetDataFromReducer(builderType)?.toolboxes;
+  const builderDataFromReducer = GetDataFromReducer(data?.id);
+  const viewerData = builderDataFromReducer?.viewers;
+  const toolboxData = builderDataFromReducer?.toolboxes;
 
   return (
     <> 

diff --git a/app/components/UtilityFunction.ts b/app/components/UtilityFunction.ts
@@ -2,49 +2,20 @@ import { useSelector } from "react-redux";
 
 import { getBuilderState } from "./AppBuilder";
 import { DynamicEntity } from "./data/app-builder/DynamicEntity.interface";
-import AppBuilderFactory from "../factory/AppBuilder.factory";
 
 /** @TODO - Need to fix the naming of that function as this function name should be camel case */
-export function GetDataFromReducer(builderType: string){
+export function GetDataFromReducer(builderDataId: number) {
   return useSelector((state: any) => {
-    let targetBuilderType = "";
-
-    // Determine the builderId based on builderType
-    if (builderType.includes(AppBuilderFactory.BUILDER_TYPES.FORM)) {
-      targetBuilderType = "Form";
-    } else if (builderType.includes(AppBuilderFactory.BUILDER_TYPES.MODEL)) {
-      targetBuilderType = "Model";
-    } else if (builderType.includes(AppBuilderFactory.BUILDER_TYPES.PAGE)) {
-      targetBuilderType = "Page";
-    }
-
-    // Find the builderData with the matching targetBuilderType
+    // Find the builder that contains builderData with the matching builderDataId
     const builder = state.BuilderOptions?.appBuilderData?.find(
-      (item: any) => item.builderType === targetBuilderType
+      (item: any) =>
+        item.builderData?.some((data: any) => data.id === builderDataId)
     );
 
-    // Return modelAttributes if available
     return builder || {};
   });
 }
 
-interface Attribute {
-  type: string;
-  primaryKey?: boolean;
-  autoIncrement?: boolean;
-  defaultValue?: any;
-  allowNull?: boolean;
-}
-
-interface FormattedAttribute {
-  name: string;
-  type: string;
-  primaryKey?: boolean;
-  autoIncrement?: boolean;
-  defaultValue?: any;
-  allowNull?: boolean;
-}
-
 export const GetViewerContent: () => any = () => {
   return useSelector((state: any) => state.BuilderOptions?.modelSchema);
 

diff --git a/app/components/data/app-builder/ModelBuilder.data.ts b/app/components/data/app-builder/ModelBuilder.data.ts
@@ -10,11 +10,7 @@ import ViewerFactory from "../../../factory/Viewer.factory";
  */
 export class ModelBuilderData extends AppBuilderData {
 
-  private static toolboxMeta = {
-    [ToolBoxFactory.VARIANTS.PROPERTY] : {},
-    [ToolBoxFactory.VARIANTS.COMPONENT]: {},
-    [ToolBoxFactory.VARIANTS.DEVICE]   : {}
-  };
+  private static toolboxMeta = { [ToolBoxFactory.VARIANTS.PROPERTY]: {} };
 
   private static viewerMeta = {
     [ViewerFactory.VARIANTS.MODEL]: {},

diff --git a/app/components/data/toolbox/PropertyToolBox.data.ts b/app/components/data/toolbox/PropertyToolBox.data.ts
@@ -17,8 +17,7 @@ export class PropertyToolBoxData extends ToolBoxData {
       ToolBoxFactory.VARIANTS.PROPERTY, // Pass the variant constant
       toolboxTitle,
       toolboxExpand,
-      toolboxResize,
-      renderedComponent
+      toolboxResize
     );
     this.setRenderedComponent(renderedComponent);
   }

diff --git a/app/components/data/toolbox/ToolBox.data.ts b/app/components/data/toolbox/ToolBox.data.ts
@@ -39,9 +39,9 @@ export abstract class ToolBoxData {
     toolboxTitle = "Unknown",
     toolboxExpand = false,
     toolboxResize = "none",
-    upArrowIcon = "keyboard_double_arrow_up",
-    downArrowIcon = "keyboard_double_arrow_down",
-    removeIcon = "remove_circle"
+    upArrowIcon = "arrow_drop_up",
+    downArrowIcon = "arrow_drop_down",
+    removeIcon = "remove_circle_outline"
 
   ){
     this.toolboxId = getWrappidUUID();

diff --git a/app/components/toolbox/ToolBoxGroup.tsx b/app/components/toolbox/ToolBoxGroup.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import {
-  CoreBox, CoreButton, CoreClasses, CoreIcon, CoreIconButton, CoreStack, CoreTooltip, CoreTypographyBody1
+  CoreBox, CoreClasses, CoreIcon, CoreIconButton, CoreStack, CoreTooltip, CoreTypographyBody1
 } from "@wrappid/core";
 
 import ToolBox from "./ToolBox";
@@ -21,7 +21,6 @@ export default function ToolBoxGroup<T extends ToolBoxData>(props: ToolBoxGroupT
           CoreClasses.DISPLAY.FLEX,
           CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN,
           CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER,
-          CoreClasses.PADDING.P0_5,
           CoreClasses.BORDER.BORDER_BOTTOM,
           CoreClasses.WIDTH.W_100
         ]}
@@ -30,19 +29,21 @@ export default function ToolBoxGroup<T extends ToolBoxData>(props: ToolBoxGroupT
           styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.GAP.GAP_3]}
         >
           <CoreTooltip title="Collapse All" arrow>
-            <CoreButton
-              label="Collapse"
-              variant="text"
+            <CoreIconButton>
+              <CoreIcon 
+                icon="unfold_less" 
               // onClick={() => dispatch(toolboxCollapseExpand(false))}
-            />
+              />
+            </CoreIconButton>
           </CoreTooltip>
 
           <CoreTooltip title="Expand All" arrow>
-            <CoreButton
-              label="Expand"
-              variant="text"
-              // onClick={() => dispatch(toolboxCollapseExpand(true))}
-            />
+            <CoreIconButton>
+              <CoreIcon 
+                icon="unfold_more" 
+              // onClick={() => dispatch(toolboxCollapseExpand(false))}
+              />
+            </CoreIconButton>
           </CoreTooltip>
         </CoreBox>
 

diff --git a/app/components/viewers/JsonViewer.tsx b/app/components/viewers/JsonViewer.tsx
@@ -1,13 +1,18 @@
 import React from "react";
 
-import { CoreBox } from "@wrappid/core";
+import { CoreBox, CoreJSONEditor } from "@wrappid/core";
 
 export default function JsonViewer(props) {
   const { content } = props;
 
   return (
-    <CoreBox component="pre">
-      {JSON.stringify(content, null, 2)}
-    </CoreBox>
+    <>
+      <CoreJSONEditor
+        label="Height of this JSON editor should be increased"
+        value={content}/>
+      <CoreBox component="pre">
+        {JSON.stringify(content, null, 2)}
+      </CoreBox>
+    </>
   );
 }
diff --git a/app/components/viewers/ModelViewer.tsx b/app/components/viewers/ModelViewer.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable etc/no-commented-out-code */
-/* eslint-disable no-console */
+// /* eslint-disable etc/no-commented-out-code */
+// /* eslint-disable no-console */
 import React, { useEffect, useState } from "react";
 
 import {
   CoreBox,
   CoreClasses,
-  CoreGrid,
   CoreTypographyBody1,
   CoreTypographyBody2,
   CoreCard,
@@ -18,14 +18,11 @@ import {
 } from "@wrappid/core";
 import { useDispatch } from "react-redux";
 
-import ModelAssociationViewer from "./model-viewer-helper/ModelAssociationViewer";
 import ModelAttributeViewer from "./model-viewer-helper/ModelAttributeViewer";
 import { addAttribute, selectedAttribute, setToolboxContent } from "../../actions/reducer.action";
 import ModuleClasses from "../../styles/ModuleClasses";
-import { getBuilderType } from "../AppBuilder";
-import { Association } from "../data/model/Association.data";
 import ValidProps from "../data/valid-props/Validprops";
-import GetDataFromReducer from "../UtilityFunction";
+import { getBuilderType, getBuilderData } from "../UtilityFunction";
 // interface AttributeData {
 //   type: string;
 //   primaryKey?: boolean;
@@ -54,46 +51,46 @@ allowNull	:	boolean
 }
 
 // Function using classes
-const getGroupedForeignKeys = (associations: Association[]) => {
-  const groupedForeignKeys: Record<
-    string,
-    { foreignKey: string | ForeignKeyData; sourceKey: string; as?: string; type: string }[]
-  > = {};
-
-  associations.forEach((association) => {
-    association.data.forEach((relation) => {
-      const { foreignKey, sourceKey, as } = relation.data;
-      const relationType = relation.type;
-      const tableName = association.model;
-
-      if (!groupedForeignKeys[tableName]) {
-        groupedForeignKeys[tableName] = [];
-      }
-
-      groupedForeignKeys[tableName].push({
-        as,
-        foreignKey,
-        sourceKey,
-        type: relationType,
-      });
-    });
-  });
-
-  return groupedForeignKeys;
-};
+// const getGroupedForeignKeys = (associations: Association[]) => {
+//   const groupedForeignKeys: Record<
+//     string,
+//     { foreignKey: string | ForeignKeyData; sourceKey: string; as?: string; type: string }[]
+//   > = {};
+
+//   associations.forEach((association) => {
+//     association.data.forEach((relation) => {
+//       const { foreignKey, sourceKey, as } = relation.data;
+//       const relationType = relation.type;
+//       const tableName = association.model;
+
+//       if (!groupedForeignKeys[tableName]) {
+//         groupedForeignKeys[tableName] = [];
+//       }
+
+//       groupedForeignKeys[tableName].push({
+//         as,
+//         foreignKey,
+//         sourceKey,
+//         type: relationType,
+//       });
+//     });
+//   });
+
+//   return groupedForeignKeys;
+// };
 
 // React Component (unchanged functionality, uses groupedForeignKeys)
 export default function ModelViewer(props) {
-  const { viewerContent } = props;
+  const { content } = props;
   const dispatch = useDispatch();
   const [attributeId, setAttributeId] = useState("");
   const [selectedAttributeId, setSelectedAttributeId] = useState(null);
 
+  const builderData = getBuilderData();
   const builderType = getBuilderType();
   const validPropsInstance = new ValidProps();
   const validPropsForAllComponent = validPropsInstance.getValidProps();
-  const attributesData =
-    GetDataFromReducer(builderType)?.viewerGroupData[0]?.modelAttributes || [];
+  const attributesData = content;
 
   const setValidPropsToToolboxDataInReducer = (validProps) => {
     dispatch(setToolboxContent(validProps));
@@ -135,7 +132,7 @@ export default function ModelViewer(props) {
     checkAndDispatchToolboxData();
   }, [attributesData]);
 
-  const groupedForeignKeys = getGroupedForeignKeys(viewerContent.associations);
+  // const groupedForeignKeys = getGroupedForeignKeys(viewerContent.associations);
 
   return (
     <CoreBox styleClasses={CoreClasses.PADDING.P2}>
@@ -146,11 +143,11 @@ export default function ModelViewer(props) {
         <CoreCard styleClasses={[ModuleClasses.ATTRIBUTE_CARD]}>
           <CoreCardHeader
             styleClasses={[ModuleClasses.CARD_HEADER]}
-            subheader={
-              <CoreTypographyBody2 styleClasses={[CoreClasses.MARGIN.MB0]}>
-                {viewerContent.model || viewerContent.table}
-              </CoreTypographyBody2>
-            }
+            // subheader={
+            //   <CoreTypographyBody2 styleClasses={[CoreClasses.MARGIN.MB0]}>
+            //     {viewerContent.model || viewerContent.table}
+            //   </CoreTypographyBody2>
+            // }
           />
           <CoreCardContent styleClasses={[CoreClasses.PADDING.P1]}>
             {attributesData.length > 0 ? (
@@ -178,7 +175,7 @@ export default function ModelViewer(props) {
         </CoreCard>
       </CoreBox>
 
-      <CoreGrid
+      {/* <CoreGrid
         container
         spacing={3}
         styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.PADDING.P2]}
@@ -224,7 +221,24 @@ export default function ModelViewer(props) {
             </CoreTypographyBody1>
           </CoreGrid>
         )}
-      </CoreGrid>
+      </CoreGrid> */}
     </CoreBox>
   );
 }
+// import React from "react";
+
+// export interface AssociationData {
+//   as?: string;
+//   sourceKey: string;
+//   foreignKey: string | ForeignKeyData;
+// }
+
+// interface ForeignKeyData{
+// name	:	string,
+// type	:	string,
+// allowNull	:	boolean
+// }
+
+// export default function ModelViewer() {
+//   return <CoreTypographyBody1>ModelViewer</CoreTypographyBody1>;
+// }
diff --git a/app/components/viewers/ViewerGroup.tsx b/app/components/viewers/ViewerGroup.tsx
@@ -6,6 +6,7 @@ import { CoreBox, CoreClasses, CoreTabs, CoreTab, CoreTypographyBody1 } from "@w
 import Viewer from "./Viewer";
 import { BUILDER_JSON, JSON_VIEWER } from "../../constants/AppBuilder.constant";
 import { ViewerData } from "../data/viewer/Viewer.data";
+import { getBuilderData, GetDataFromReducer } from "../UtilityFunction";
 
 function CoreTabPanel(props) {
   const { children, value, index, ...other } = props;
@@ -35,7 +36,7 @@ type ViewerGroupType<T extends ViewerData> = {viewerData: T[]};
 export default function ViewerGroup<T extends ViewerData>(props: ViewerGroupType<T>) {
   const { viewerData } = props;
 
-  const builderJson = { "hola": "buenos" };
+  const builderJson = GetDataFromReducer(getBuilderData()?.id);
 
   const [value, setValue] = useState(0);
 

diff --git a/app/factory/Viewer.factory.ts b/app/factory/Viewer.factory.ts
@@ -4,7 +4,7 @@ import { ViewerData } from "../components/data/viewer/Viewer.data";
 
 export default class ViewerFactory {
   static VARIANTS = {
-    JSON : "Json",
+    JSON : "JSON",
     MODEL: "Model"
   } as const;