fix: Update template listing

builder/builder/doctype/builder_page/builder_page.js

@@ -3,10 +3,13 @@
 
 frappe.ui.form.on("Builder Page", {
   refresh(frm) {
-    frm.sidebar
-      .add_user_action(__("Open in Builder"))
-      .attr("href", `/builder/page/${frm.doc.name}`)
-      .attr("target", "_blank");
+    // only show in developer mode
+    if (frappe.boot.developer_mode || !frm.doc.is_template) {
+      frm.sidebar
+        .add_user_action(__("Open in Builder"))
+        .attr("href", `/builder/page/${frm.doc.name}`)
+        .attr("target", "_blank");
+    }
   },
   onload(frm) {
     frm.set_df_property("blocks", "wrap", true);

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 } });