Fix pages

invent-framework · Mar 22, 2024 · 2b14014 · 2b14014
1 parent 93cc87a
commit 2b14014
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 15 deletions.
diff --git a/src/tools/builder/src/data/models/page-model.ts b/src/tools/builder/src/data/models/page-model.ts
@@ -1,8 +1,8 @@
 import type { WidgetModel } from "./widget-model";
+import type { WidgetPropertiesModel } from "./widget-properties-model";
 
 export interface PageModel {
-    id: string;
-    name: string;
     element: HTMLElement;
+    properties: WidgetPropertiesModel;
     content: Array<WidgetModel>;
 }
diff --git a/src/tools/builder/src/data/models/widget-property-model.ts b/src/tools/builder/src/data/models/widget-property-model.ts
@@ -8,4 +8,6 @@ export interface WidgetPropertyModel {
     max_length?: number;
     choices: Array<string>;
     is_from_datastore: boolean;
+    id: string;
+    name: string;
 }
diff --git a/src/tools/builder/src/python/builder.py b/src/tools/builder/src/python/builder.py
@@ -120,7 +120,7 @@ def add_widget_to_page(self, page, widget_blueprint, parent_id=None):
         Create a widget from a blueprint and add it to the specified page.
         """
 
-        page = self._get_page_by_id(page.id)
+        page = self._get_page_by_id(page.properties.id)
         if page is None:
             raise ValueError(f"No such page: {page.name}")
 

diff --git a/src/tools/builder/src/utilities/builder-utilities.ts b/src/tools/builder/src/utilities/builder-utilities.ts
@@ -3,6 +3,7 @@ import type { WidgetModel } from "@/data/models/widget-model";
 import type { PageModel } from "@/data/models/page-model";
 import { view as builder } from "@/views/builder/builder-model";
 import type { ComponentsModel } from "@/data/models/components-model";
+import type { WidgetPropertyModel } from "@/data/models/widget-property-model";
 
  /**
  * Utility functions for the builder.
@@ -16,7 +17,7 @@ export class BuilderUtilities {
 		return JSON.parse(this.builder().get_pages());
 	}
 
-	public static getPageElementById(pageId: string): HTMLElement {
+	public static getPageElementById(pageId: WidgetPropertyModel): HTMLElement {
 		return this.builder().get_page_element_by_id(pageId);
 	}
 

diff --git a/src/tools/builder/src/views/builder/builder-model.ts b/src/tools/builder/src/views/builder/builder-model.ts
@@ -127,7 +127,7 @@ export class BuilderModel extends ViewModelBase {
 	}
 
 	public getPageButtonColor(page: PageModel): string { 
-		return this.state.activePage && this.state.activeBuilderTab === 'app' && this.state.activePage.id === page.id ? 'gray' : 'transparent';
+		return this.state.activePage && this.state.activeBuilderTab === 'app' && this.state.activePage.properties.id === page.properties.id ? 'gray' : 'transparent';
 	}
 
 	// Drag and Drop Prototype

diff --git a/src/tools/builder/src/views/builder/builder.vue b/src/tools/builder/src/views/builder/builder.vue
@@ -11,7 +11,7 @@
                         <ib-button
                             v-for="(page, key) in view.state.pages"
                             :key="key"
-                            :label="page.name"
+                            :label="page.properties.name"
                             size="sm"
                             :color="view.getPageButtonColor(page)"
                             @click="view.onPageClicked(page)"

diff --git a/src/tools/builder/src/views/builder/components/page-editor/page-editor-model.ts b/src/tools/builder/src/views/builder/components/page-editor/page-editor-model.ts
@@ -27,8 +27,8 @@ class PageEditorModel extends ComponentModelBase {
 	}
 
 	public onPageLoad(pages: Array<PageModel>, activePage: PageModel, addWidgetToPage: Function): void {
-		const pageEditor: HTMLIFrameElement = document.getElementById(`${activePage.id}-editor`) as HTMLIFrameElement;
-		const pageElement: HTMLElement = BuilderUtilities.getPageElementById(activePage.id);
+		const pageEditor: HTMLIFrameElement = document.getElementById(`${activePage.properties.id}-editor`) as HTMLIFrameElement;
+		const pageElement: HTMLElement = BuilderUtilities.getPageElementById(activePage.properties.id);
 		pageElement.style.display = "grid";
 		pageEditor.contentDocument?.body.insertBefore(pageElement, pageEditor.contentDocument?.body.firstChild);
 
@@ -37,11 +37,11 @@ class PageEditorModel extends ComponentModelBase {
 
 	private addDragAndDropEventListeners(pages: Array<PageModel>, activePage: PageModel, addWidgetToPage: Function): void {
 		pages.forEach((page: PageModel) => {
-			const iframe: HTMLIFrameElement = document.getElementById(`${page.id}-editor`) as HTMLIFrameElement;
+			const iframe: HTMLIFrameElement = document.getElementById(`${page.properties.id}-editor`) as HTMLIFrameElement;
 
 			if (iframe.contentDocument){
 				const dropZoneMain: HTMLDivElement = iframe.contentDocument.createElement("div");
-				const pageElement: HTMLDivElement = iframe.contentDocument.getElementById(page.id) as HTMLDivElement;
+				const pageElement: HTMLDivElement = iframe.contentDocument.getElementById(page.properties.id as any) as HTMLDivElement;
 				if (!iframe.contentDocument.getElementById("drop-zone-main")){
 					dropZoneMain.id = "drop-zone-main";
 					dropZoneMain.classList.add("drop-zone");
@@ -65,7 +65,7 @@ class PageEditorModel extends ComponentModelBase {
 
 						dropZoneMain.classList.remove("drop-zone-active");
 
-						if (page.id === activePage.id){
+						if (page.properties.id === activePage.properties.id){
 							const widget: WidgetModel = JSON.parse(event.dataTransfer?.getData("widget") as string);
 							addWidgetToPage(widget);
 						}

diff --git a/src/tools/builder/src/views/builder/components/page-editor/page-editor.vue b/src/tools/builder/src/views/builder/components/page-editor/page-editor.vue
@@ -2,10 +2,10 @@
     <div v-if="pages && activePage" class="px-4 py-3 w-full">
         <iframe 
             v-for="page in pages" 
-            v-show="activePage.id === page.id"
-            :key="page.name" 
-            :id="`${page.id}-editor`"
-            :srcdoc="component.getSrcDoc(page)" 
+            v-show="activePage.properties.id === page.properties.id"
+            :key="page.properties.name" 
+            :id="`${page.properties.id}-editor`"
+            :srcdoc="component.getSrcDoc()" 
             class="w-full h-full"
             @load="component.onPageLoad(pages, activePage, addWidgetToPage)"
         />