refactor(global): ♻️ small bug fix

those fix are related to toolbar and tab system in builder Ref #54
wrappid · Jan 3, 2025 · 7a06597 · 7a06597
1 parent 26dd352
commit 7a06597
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 116 deletions.
diff --git a/app/components/AppBuilder.tsx b/app/components/AppBuilder.tsx
@@ -1,12 +1,14 @@
 /* eslint-disable etc/no-commented-out-code */
 import React, { useEffect } from "react";
 
-import { CoreLayoutItem, AppBuilderContainerLayout, coreUseLocation } from "@wrappid/core";
-import { useDispatch } from "react-redux";
+import {
+  CoreLayoutItem, CoreButton, CoreIcon, CoreGrid, CoreBox, AppBuilderContainerLayout, CoreTypographyBody1, CoreClasses, coreUseLocation 
+} from "@wrappid/core";
+import { useDispatch, useSelector } from "react-redux";
 
 import { AppBuilderData } from "./data/app-builder/AppBuilder.data";
 import { DynamicEntity } from "./data/app-builder/DynamicEntity.interface";
-import HeaderComp from "./Header";
+import ToolbarGroup from "./toolbar/ToolbarGroup";
 import ToolBoxGroup from "./toolbox/ToolBoxGroup";
 import { GetDataFromReducer, getBuilderData, getBuilderType } from "./UtilityFunction";
 import ViewerGroup from "./viewers/ViewerGroup";
@@ -27,7 +29,6 @@ export function getBuilderState(): BuilderState {
 
 export default function AppBuilder<T extends AppBuilderData>() {
   const dispatch = useDispatch();
-
   const builderType = getBuilderType();
   const data = getBuilderData();
 
@@ -39,19 +40,50 @@ export default function AppBuilder<T extends AppBuilderData>() {
   const builderDataFromReducer = GetDataFromReducer(data?.id);
   const viewerData = builderDataFromReducer?.viewers;
   const toolboxData = builderDataFromReducer?.toolboxes;
-
+  const toolbarData = builderDataFromReducer?.toolbars;
+
+  const appBuilderDataFromReducer = useSelector((state: any) => state.BuilderOptions?.appBuilderData);
+
   return (
     <> 
       {/* Header area of pagebuilder */} 
       <CoreLayoutItem id={AppBuilderContainerLayout.PLACEHOLDER.Header}>
-        <HeaderComp builderType={builderType} tableName={data.name}/>
+        <CoreGrid>
+          <CoreBox gridProps={{ gridSize: 9 }} styleClasses={[CoreClasses.PADDING.PB1]}>
+            {appBuilderDataFromReducer && appBuilderDataFromReducer.length > 0 ? (
+              appBuilderDataFromReducer.map((eachBuilderData, index) => {
+                Object.setPrototypeOf(eachBuilderData, AppBuilderData.prototype);
+                return (
+                  <>
+                    <CoreButton 
+                      key={`tab-${index}`}
+                      variant="text" 
+                      startIcon={
+                        <CoreIcon icon={eachBuilderData?.getBuilderIcon()} />
+                      } 
+                      label= {eachBuilderData?.getBuilderData()[0]?.name}
+                    />
+                  </>
+                );
+              })
+            ) : (
+              <CoreTypographyBody1 styleClasses={[CoreClasses.PADDING.PB1]}>
+                No Builder available to display.
+              </CoreTypographyBody1>
+            )}
+          </CoreBox>
+
+          <CoreBox gridProps={{ gridSize: 3 }} styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END, CoreClasses.PADDING.PB1]}> 
+            <ToolbarGroup toolbarData={toolbarData}/>
+          </CoreBox>
+        </CoreGrid>
+
       </CoreLayoutItem>
-      
+
       {/* Content area of pagebuilder */}
       <CoreLayoutItem id={AppBuilderContainerLayout.PLACEHOLDER.Content}>
         <ViewerGroup viewerData={viewerData} />
       </CoreLayoutItem>
-
       {/* Right-Drawer area of pagebuilder */}
       <CoreLayoutItem id={AppBuilderContainerLayout.PLACEHOLDER.RightDrawer}>
         <ToolBoxGroup toolboxData={toolboxData}/>

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
diff --git a/app/components/toolbox/PropertyToolBox.tsx b/app/components/toolbox/PropertyToolBox.tsx
@@ -17,13 +17,13 @@ import {
 } from "@wrappid/core";
 
 import ToolBoxFactory from "../../factory/ToolBox.factory";
-import { GetDataFromReducer, getBuilderType } from "../UtilityFunction";
+import { GetDataFromReducer } from "../UtilityFunction";
 
 export default function PropertyToolBox(){
   /** 1. Get builder type 
    *  2. Get data from reducer  
    *  3. Get toolbox content dependent on the variant */
-  const toolboxContent = getToolboxContentByVariant(GetDataFromReducer(getBuilderType())?.toolboxes);
+  const toolboxContent = getToolboxContentByVariant(GetDataFromReducer(2));
 
   function getToolboxContentByVariant(toolboxData, variant = ToolBoxFactory.VARIANTS.PROPERTY) {
     if (!Array.isArray(toolboxData)) {

diff --git a/app/components/viewers/ViewerGroup.tsx b/app/components/viewers/ViewerGroup.tsx
@@ -44,15 +44,6 @@ export default function ViewerGroup<T extends ViewerData>(props: ViewerGroupType
     setValue(newValue);
   };
 
-  // const enhancedViewerData = [
-  //   ...viewerData,
-  // {
-  //   viewerContent          : builderJson,
-  //   viewerRenderedComponent: JSON_VIEWER,
-  //   viewerTitle            : "Builder JSON",
-  // } as unknown as ViewerData,
-  // ];
-
   const enhancedViewerData = Array.isArray(viewerData) 
     ? [
       ...viewerData,

diff --git a/app/constants/AppBuilder.constant.ts b/app/constants/AppBuilder.constant.ts
@@ -5,3 +5,10 @@ export const COMPONENT_TOOLBOX = "ComponentToolBox";
 export const MODEL_VIEWER = "ModelViewer";
 export const JSON_VIEWER = "JsonViewer";
 export const BUILDER_JSON = "Builder JSON";
+export const MODEL_ICON = "storage";
+export const PAGE_ICON = "layers";
+export const ROUTE_ICON = "directions";
+export const THEME_ICON = "contrast";
+export const FORM_ICON  = "feed";
+export const DEFAULT_ICON = "star";
+export const BUSINESS_ICON = "schema";
diff --git a/app/factory/Toolbar.factory.ts b/app/factory/Toolbar.factory.ts
@@ -0,0 +1,33 @@
+import { HistoryToolData } from "../components/data/toolbar/HistoryTool.data";
+import { RequestForReviewToolData } from "../components/data/toolbar/RequestForReviewTool.data";
+import { SaveToolData } from "../components/data/toolbar/SaveTool.data";
+import { ToolbarData } from "../components/data/toolbar/Toolbar.data";
+
+export default class ToolbarFactory {
+  static ICONS = {
+    HISTORY           : "history",
+    REQUEST_FOR_REVIEW: "rate_review",
+    SAVE              : "save",
+  } as const;
+
+  static getViewerData<T extends ToolbarData>(toolsIcon: string) :T {
+    switch (toolsIcon) {
+      case ToolbarFactory.ICONS.HISTORY: {
+        return new HistoryToolData() as T;
+      }
+
+      case ToolbarFactory.ICONS.REQUEST_FOR_REVIEW: {
+        return new RequestForReviewToolData() as T;
+      }
+
+      case ToolbarFactory.ICONS.SAVE: {
+        return new SaveToolData() as T;
+      } 
+
+      default: {
+        throw new Error(`Unknown entity type: ${toolsIcon}`);
+      }
+    }
+  }
+}
+