wip

builder/builder/doctype/builder_asset/builder_asset.js

@@ -0,0 +1,8 @@
+// Copyright (c) 2024, Frappe Technologies Pvt Ltd and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("Builder Asset", {
+// 	refresh(frm) {
+
+// 	},
+// });

builder/builder/doctype/builder_asset/builder_asset.json

@@ -0,0 +1,63 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "autoname": "field:asset_name",
+ "creation": "2024-02-26 16:16:39.699863",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "asset_name",
+  "asset_type",
+  "block",
+  "preview_image"
+ ],
+ "fields": [
+  {
+   "fieldname": "asset_name",
+   "fieldtype": "Data",
+   "label": "Asset Name",
+   "unique": 1
+  },
+  {
+   "fieldname": "asset_type",
+   "fieldtype": "Select",
+   "label": "Asset Type",
+   "options": "Page Template"
+  },
+  {
+   "fieldname": "block",
+   "fieldtype": "Code",
+   "label": "Block"
+  },
+  {
+   "fieldname": "preview_image",
+   "fieldtype": "Attach Image",
+   "label": "Preview Image"
+  }
+ ],
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2024-02-26 22:58:04.799980",
+ "modified_by": "Administrator",
+ "module": "Builder",
+ "name": "Builder Asset",
+ "naming_rule": "By fieldname",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  }
+ ],
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": []
+}

builder/builder/doctype/builder_asset/builder_asset.py

@@ -0,0 +1,9 @@
+# Copyright (c) 2024, Frappe Technologies Pvt Ltd and contributors
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+
+class BuilderAsset(Document):
+	pass

builder/builder/doctype/builder_asset/test_builder_asset.py

@@ -0,0 +1,9 @@
+# Copyright (c) 2024, Frappe Technologies Pvt Ltd and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests.utils import FrappeTestCase
+
+
+class TestBuilderAsset(FrappeTestCase):
+	pass

builder/builder/doctype/builder_page/builder_page.py

@@ -87,6 +87,7 @@ def on_update(self):
 			clear_cache(self.route)
 
 		if frappe.conf.developer_mode and self.is_template:
+			# move all assets to www/builder_assets/{page_name}
 			export_to_files(record_list=[["Builder Page", self.name, "builder_page_template"]], record_module="builder")
 
 	def autoname(self):
@@ -620,3 +621,28 @@ def is_component_used(blocks, component_id):
 			return is_component_used(block.get("children"), component_id)
 
 	return False
+
+@frappe.whitelist()
+def save_page_as_template(page_name: str, template_name: str):
+	page = frappe.get_doc("Builder Page", page_name)
+	blocks = frappe.parse_json(page.drag_blocks)
+	# move all assets to www/builder_assets/{page_name}
+	for block in blocks:
+		if block.get("element") == "img":
+			src = block.get("attributes", {}).get("src")
+			if src and src.startswith("/files"):
+				# find file doc
+				files = frappe.get_all("File", filters={"file_url": src}, fields=["name"])
+				if files:
+					_file = frappe.get_doc("File", files[0].name)
+
+				block["attributes"]["src"] = f"/builder_assets/{page_name}/{src.split('/')[-1]}"
+
+	template = frappe.new_doc("Builder Asset", {
+		"doctype": "Builder Asset",
+		"asset_type": "Page Template",
+		"asset_name": template_name,
+		"block": page.draft_blocks,
+	})
+	template.insert()
+	return template

builder/www/builder.py

@@ -7,5 +7,7 @@ def get_context(context):
 	csrf_token = frappe.sessions.get_csrf_token()
 	frappe.db.commit()
 	context.csrf_token = csrf_token
+	# developer mode
+	context.is_developer_mode = frappe.conf.developer_mode
 	if frappe.session.user != 'Guest':
 		capture('active_site', 'builder')

frontend/index.html

@@ -15,6 +15,7 @@
 
 		<script>
 			window.csrf_token = "{{ csrf_token }}";
+			window.is_developer_mode = {{ is_developer_mode }};
 		</script>
 		<script type="module" src="/src/main.ts"></script>
 	</body>

frontend/src/data/webPage.ts

@@ -20,9 +20,40 @@ const webPages = createListResource({
 		"is_template",
 		"owner",
 	],
+	filters: {
+		is_template: 0,
+	},
 	cache: "pages",
 	orderBy: "modified desc",
 	pageLength: 50,
 });
 
-export { webPages };
+const templates = createListResource({
+	method: "GET",
+	doctype: "Builder Page",
+	fields: [
+		"name",
+		"route",
+		"blocks",
+		"page_name",
+		"preview",
+		"page_title",
+		"creation",
+		"page_data_script",
+		"draft_blocks",
+		"published",
+		"dynamic_route",
+		"client_scripts",
+		"modified",
+		"is_template",
+		"owner",
+	],
+	filters: {
+		is_template: 1,
+	},
+	cache: "templates",
+	orderBy: "modified desc",
+	pageLength: 50,
+	auto: true,
+});
+export { templates, webPages };

frontend/src/pages/PageBuilderLanding.vue

@@ -101,7 +101,7 @@
 					</div>
 					<TemplatePagePreview
 						class="max-w-[250px] flex-grow basis-52"
-						v-for="page in webPages.data.slice(0, 8)"
+						v-for="page in templates.data"
 						:page="page"
 						@click="() => duplicatePage(page)"></TemplatePagePreview>
 				</div>
@@ -113,25 +113,25 @@
 import CrossIcon from "@/components/Icons/Cross.vue";
 import PagePreviewCard from "@/components/PagePreviewCard.vue";
 import TemplatePagePreview from "@/components/TemplatePagePreview.vue";
-import { webPages } from "@/data/webPage";
+import { templates, webPages } from "@/data/webPage";
 import router from "@/router";
-import useStore from "@/store";
 import { BuilderPage } from "@/types/Builder/BuilderPage";
 import { useStorage, watchDebounced } from "@vueuse/core";
 import { TabButtons } from "frappe-ui";
 import { Ref, onMounted, ref } from "vue";
 
 const displayType = useStorage("displayType", "grid") as Ref<"grid" | "list">;
 
-const store = useStore();
 const searchFilter = ref("");
 const typeFilter = ref("");
 const showDialog = ref(false);
 
 watchDebounced(
 	[searchFilter, typeFilter],
 	() => {
-		const filters = {} as any;
+		const filters = {
+			is_template: 0,
+		} as any;
 		if (typeFilter.value) {
 			if (typeFilter.value === "published") {
 				filters["published"] = true;
@@ -172,8 +172,8 @@ const loadPage = (template: string | null) => {
 
 const duplicatePage = async (page: BuilderPage) => {
 	const pageCopy = { ...page };
-	pageCopy.page_name = `${page.page_name}-copy`;
-	pageCopy.page_title = `${page.page_title} Copy`;
+	delete pageCopy.page_name;
+	pageCopy.page_title = `${page.page_title}`;
 	pageCopy.is_template = 0;
 	const newPage = await webPages.insert.submit(pageCopy);
 	router.push({ name: "builder", params: { pageId: newPage.name } });

frontend/src/types/Builder/BuilderAsset.ts

@@ -0,0 +1,21 @@
+
+export interface BuilderAsset{
+	creation: string
+	name: string
+	modified: string
+	owner: string
+	modified_by: string
+	docstatus: 0 | 1 | 2
+	parent?: string
+	parentfield?: string
+	parenttype?: string
+	idx?: number
+	/**	Asset Name : Data	*/
+	asset_name?: string
+	/**	Asset Type : Select	*/
+	asset_type?: "Page Template"
+	/**	Block : Code	*/
+	block?: string
+	/**	Preview Image : Attach Image	*/
+	preview_image?: string
+}