ivyforms / frontend / src / composables / useNavigation.ts

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

138 lines 3.6 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	*/
24	const navigateToAdminPage = (page: string, hash?: string): void => {
25	// If navigating to the same WordPress page, use router for SPA navigation
26	if (page === currentPage && hash) {
27	router.push({ path: hash.startsWith('/') ? hash : `/${hash}` })
28	return
29	}
30
31	// Otherwise, navigate to different WordPress page
32	const hashFragment = hash ? `#${hash}` : ''
33	window.location.href = `admin.php?page=${page}${hashFragment}`
34	}
35
36	/**
37	* Navigate within the current SPA using Vue Router
38	* @param path - The route path or route object
39	*/
40	const navigateWithinSpa = (path: string \| object) => {
41	return router.push(path)
42	}
43
44	/**
45	* Navigate to All Forms page
46	*/
47	const navigateToAllForms = () => {
48	navigateToAdminPage(IVYFORMS_ALLFORMS_PAGE)
49	}
50
51	/**
52	* Navigate to Entries page
53	* @param formId - Optional form ID to filter entries
54	*/
55	const navigateToEntries = (formId?: number) => {
56	const hash = formId ? `/?formId=${formId}` : '/'
57	navigateToAdminPage(IVYFORMS_ENTRIES_PAGE, hash)
58	}
59
60	/**
61	* Navigate to Settings page
62	* @param section - Optional settings section (general, security, etc.)
63	*/
64	const navigateToSettings = (section?: string) => {
65	const hash = section ? `/${section}` : '/'
66	navigateToAdminPage(IVYFORMS_SETTINGS_PAGE, hash)
67	}
68
69	/**
70	* Navigate to Integrations page
71	*/
72	const navigateToIntegrations = () => {
73	navigateToAdminPage(IVYFORMS_INTEGRATIONS_PAGE)
74	}
75
76	/**
77	* Navigate to Dashboard page
78	*/
79	const navigateToDashboard = () => {
80	navigateToAdminPage(IVYFORMS_DASHBOARD_PAGE)
81	}
82
83	/**
84	* Navigate to Form Builder page
85	* @param formId - Optional form ID to edit
86	* @param section - Optional section (build, settings, results)
87	*/
88	const navigateToFormBuilder = (formId?: number, section?: string) => {
89	if (!formId) {
90	navigateToAdminPage(IVYFORMS_FORM_BUILDER_PAGE)
91	return
92	}
93
94	let hash = `/manage/${formId}`
95	if (section) {
96	hash += `/${section}`
97	}
98	navigateToAdminPage(IVYFORMS_FORM_BUILDER_PAGE, hash)
99	}
100
101	/**
102	* Navigate back in history
103	*/
104	const navigateBack = () => {
105	router.back()
106	}
107
108	/**
109	* Get the URL for a specific admin page
110	*/
111	const getAdminPageUrl = (page: string, hash?: string): string => {
112	const hashFragment = hash ? `#${hash}` : ''
113	return `admin.php?page=${page}${hashFragment}`
114	}
115
116	/**
117	* Navigate to a specific route name with params
118	*/
119	const navigateToRoute = (name: string, params?: RouteParamsRaw, query?: LocationQueryRaw) => {
120	return router.push({ name, params, query })
121	}
122
123	return {
124	navigateToAdminPage,
125	navigateWithinSpa,
126	navigateToAllForms,
127	navigateToEntries,
128	navigateToSettings,
129	navigateToIntegrations,
130	navigateToDashboard,
131	navigateToFormBuilder,
132	navigateBack,
133	getAdminPageUrl,
134	navigateToRoute,
135	currentPage,
136	}
137	}
138