feat: set component as global by right clicking the component

frontend/src/components/BlockContextMenu.vue

@@ -10,6 +10,7 @@ import type Block from "@/block";
 import ContextMenu from "@/components/ContextMenu.vue";
 import NewBlockTemplate from "@/components/Modals/NewBlockTemplate.vue";
 import NewComponent from "@/components/Modals/NewComponent.vue";
+import webComponent from "@/data/webComponent";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import useComponentStore from "@/stores/componentStore";
@@ -265,6 +266,33 @@ const contextMenuOptions: ContextMenuOption[] = [
 		condition: () => !block.value.isExtendedFromComponent(),
 		disabled: () => builderStore.readOnlyMode,
 	},
+	{
+		label: "Set as Global Component",
+		action: () => {
+			const componentName = block.value.extendedFromComponent || block.value.isChildOfComponent;
+			if (!componentName) return;
+			const component = componentStore.getComponent(componentName);
+			if (!component) return;
+			webComponent.setValue
+				.submit({
+					name: componentName,
+					for_web_page: null,
+				})
+				.then(() => {
+					toast.success("Component is now set as global.");
+					component.for_web_page = undefined;
+					componentStore.setComponentMap(component);
+				});
+		},
+		condition: () => {
+			if (!block.value.isExtendedFromComponent()) return false;
+			const componentName = block.value.extendedFromComponent || block.value.isChildOfComponent;
+			if (!componentName) return false;
+			const component = componentStore.getComponent(componentName);
+			return Boolean(component?.for_web_page);
+		},
+		disabled: () => builderStore.readOnlyMode,
+	},
 	{
 		label: "Detach Component",
 		action: () => {

frontend/src/components/BuilderAssets.vue

@@ -14,13 +14,17 @@
 						draggable="true"
 						:data-component-id="component.component_id"
 						:data-component-name="component.name"
+						@contextmenu.prevent="(e: MouseEvent) => showContextMenu(e, component)"
 						:class="{
 							'!border-outline-gray-4':
 								canvasStore.fragmentData.fragmentId === component.name ||
 								componentStore.selectedComponent === component.component_id,
 						}">
 						<div class="flex items-center gap-2 text-ink-gray-7">
-							<FeatherIcon :name="'box'" class="h-4 w-4"></FeatherIcon>
+							<Tooltip v-if="!component.for_web_page" text="Global Component" :hoverDelay="0.3">
+								<FeatherIcon name="globe" class="size-4" />
+							</Tooltip>
+							<FeatherIcon v-else name="box" class="size-4" />
 							<p class="text-base">
 								{{ component.component_name }}
 							</p>
@@ -44,23 +48,31 @@
 					}
 				" />
 		</div>
+		<ContextMenu ref="contextMenu" :options="contextMenuOptions" />
 	</div>
 </template>
 <script setup lang="ts">
+import ContextMenu from "@/components/ContextMenu.vue";
 import webComponent from "@/data/webComponent";
+import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import useComponentStore from "@/stores/componentStore";
 import usePageStore from "@/stores/pageStore";
 import { BuilderComponent } from "@/types/Builder/BuilderComponent";
 import { useEventListener } from "@vueuse/core";
-import { computed, onMounted, ref } from "vue";
+import { Tooltip } from "frappe-ui";
+import { computed, onMounted, ref, Ref } from "vue";
+import { toast } from "vue-sonner";
 
 const canvasStore = useCanvasStore();
 const componentStore = useComponentStore();
 const pageStore = usePageStore();
+const builderStore = useBuilderStore();
 
 const componentFilter = ref("");
 const componentContainer = ref(null);
+const contextMenu = ref(null) as Ref<InstanceType<typeof ContextMenu> | null>;
+const selectedComponent = ref(null) as Ref<BuilderComponent | null>;
 
 const showSearchInput = computed(() => {
 	return components.value.length > 10 || componentFilter.value;
@@ -121,4 +133,37 @@ useEventListener(componentContainer, "dblclick", (e) => {
 const setComponentData = (ev: DragEvent, componentName: string) => {
 	ev?.dataTransfer?.setData("componentName", componentName);
 };
+
+const showContextMenu = (event: MouseEvent, component: BuilderComponent) => {
+	if (!component.for_web_page) {
+		contextMenu.value?.hide();
+		return;
+	}
+	selectedComponent.value = component;
+	contextMenu.value?.show(event);
+};
+
+const setAsGlobalComponent = () => {
+	if (!selectedComponent.value) return;
+	webComponent.setValue
+		.submit({
+			name: selectedComponent.value.name,
+			for_web_page: null,
+		})
+		.then(() => {
+			toast.success("Component is now set as global.");
+			if (selectedComponent.value) {
+				selectedComponent.value.for_web_page = undefined;
+				componentStore.setComponentMap(selectedComponent.value);
+			}
+		});
+};
+
+const contextMenuOptions: ContextMenuOption[] = [
+	{
+		label: "Set as Global Component",
+		action: setAsGlobalComponent,
+		disabled: () => builderStore.readOnlyMode,
+	},
+];
 </script>

frontend/src/components/PageScript.vue

@@ -164,7 +164,7 @@ import { BuilderPage } from "@/types/Builder/BuilderPage";
 import blockController from "@/utils/blockController";
 import { useStorage } from "@vueuse/core";
 import { useTelemetry } from "frappe-ui/frappe";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, ref, watch } from "vue";
 import { toast } from "vue-sonner";
 import CodeEditor from "./Controls/CodeEditor.vue";
 import Switch from "./Controls/Switch.vue";
@@ -213,7 +213,7 @@ const blockData = computed(() => {
 		? blockDataStore.getBlockData(
 				blockController.getFirstSelectedBlock().blockId,
 				showInheritedBlockData.value ? "all" : "own",
-			) || {}
+		  ) || {}
 		: {};
 });
 
@@ -284,4 +284,20 @@ watch(
 		}
 	},
 );
+
+watch(isBlockSelected, (newValue) => {
+	if (newValue) {
+		mode.value = "block";
+	} else {
+		mode.value = "page";
+	}
+});
+
+onMounted(() => {
+	if (isBlockSelected.value) {
+		mode.value = "block";
+	} else {
+		mode.value = "page";
+	}
+});
 </script>