ivyforms / frontend / src / composables / useNavigation.ts

useNavigation.ts in The Innovative Form Builder – IvyForms 1.0, at frontend/src/composables/useNavigation.ts

146 lines 3.9 KB

Raw Download Zip

1	import { useRouter, type RouteParamsRaw, type LocationQueryRaw } from 'vue-router'
2	import {
3	IVYFORMS_ALLFORMS_PAGE,
4	IVYFORMS_ENTRIES_PAGE,
5	IVYFORMS_SETTINGS_PAGE,
6	IVYFORMS_INTEGRATIONS_PAGE,
7	IVYFORMS_DASHBOARD_PAGE,
8	IVYFORMS_FORM_BUILDER_PAGE,
9	} from '@/constants/pages'
10
11	/**
12	* Composable for cross-page navigation
13	* Handles navigation between different WordPress admin pages and within the SPA
14	*/
15	export function useNavigation() {
16	const router = useRouter()
17	const currentPage = new URLSearchParams(window.location.search).get('page')
18
19	/**
20	* Navigate to a different WordPress admin page
21	* @param page - The WordPress page identifier
22	* @param hash - Optional hash for SPA routing within the page
23	* @param preserveQuery - Whether to preserve current query parameters (default: false for cross-page navigation)
24	*/
25	const navigateToAdminPage = (page: string, hash?: string, preserveQuery = false): void => {
26	// If navigating to the same WordPress page, use router for SPA navigation
27	if (page === currentPage && hash) {
28	const path = hash.startsWith('/') ? hash : `/${hash}`
29
30	// Preserve query params when navigating within the same page
31	if (preserveQuery) {
32	router.push({ path, query: router.currentRoute.value.query })
33	} else {
34	router.push({ path })
35	}
36	return
37	}
38
39	// Otherwise, navigate to different WordPress page
40	const hashFragment = hash ? `#${hash}` : ''
41	window.location.href = `admin.php?page=${page}${hashFragment}`
42	}
43
44	/**
45	* Navigate within the current SPA using Vue Router
46	* @param path - The route path or route object
47	*/
48	const navigateWithinSpa = (path: string \| object) => {
49	return router.push(path)
50	}
51
52	/**
53	* Navigate to All Forms page
54	*/
55	const navigateToAllForms = () => {
56	navigateToAdminPage(IVYFORMS_ALLFORMS_PAGE)
57	}
58
59	/**
60	* Navigate to Entries page
61	* @param formId - Optional form ID to filter entries
62	*/
63	const navigateToEntries = (formId?: number) => {
64	const hash = formId ? `/?formId=${formId}` : '/'
65	navigateToAdminPage(IVYFORMS_ENTRIES_PAGE, hash)
66	}
67
68	/**
69	* Navigate to Settings page
70	* @param section - Optional settings section (general, security, etc.)
71	*/
72	const navigateToSettings = (section?: string) => {
73	const hash = section ? `/${section}` : '/'
74	navigateToAdminPage(IVYFORMS_SETTINGS_PAGE, hash)
75	}
76
77	/**
78	* Navigate to Integrations page
79	*/
80	const navigateToIntegrations = () => {
81	navigateToAdminPage(IVYFORMS_INTEGRATIONS_PAGE)
82	}
83
84	/**
85	* Navigate to Dashboard page
86	*/
87	const navigateToDashboard = () => {
88	navigateToAdminPage(IVYFORMS_DASHBOARD_PAGE)
89	}
90
91	/**
92	* Navigate to Form Builder page
93	* @param formId - Optional form ID to edit
94	* @param section - Optional section (build, settings, results)
95	*/
96	const navigateToFormBuilder = (formId?: number, section?: string) => {
97	if (!formId) {
98	navigateToAdminPage(IVYFORMS_FORM_BUILDER_PAGE)
99	return
100	}
101
102	let hash = `/manage/${formId}`
103	if (section) {
104	hash += `/${section}`
105	}
106	navigateToAdminPage(IVYFORMS_FORM_BUILDER_PAGE, hash)
107	}
108
109	/**
110	* Navigate back in history
111	*/
112	const navigateBack = () => {
113	router.back()
114	}
115
116	/**
117	* Get the URL for a specific admin page
118	*/
119	const getAdminPageUrl = (page: string, hash?: string): string => {
120	const hashFragment = hash ? `#${hash}` : ''
121	return `admin.php?page=${page}${hashFragment}`
122	}
123
124	/**
125	* Navigate to a specific route name with params
126	*/
127	const navigateToRoute = (name: string, params?: RouteParamsRaw, query?: LocationQueryRaw) => {
128	return router.push({ name, params, query })
129	}
130
131	return {
132	navigateToAdminPage,
133	navigateWithinSpa,
134	navigateToAllForms,
135	navigateToEntries,
136	navigateToSettings,
137	navigateToIntegrations,
138	navigateToDashboard,
139	navigateToFormBuilder,
140	navigateBack,
141	getAdminPageUrl,
142	navigateToRoute,
143	currentPage,
144	}
145	}
146