getodk · sadiqkhoja · Sep 11, 2024 · Aug 12, 2024 · Sep 11, 2024 · Sep 11, 2024
diff --git a/eslint.config.js b/eslint.config.js
@@ -362,7 +362,12 @@ export default tseslint.config(
 			'vue/html-indent': ['error', 'tab'],
 			// should be based on the printWidth
 			'vue/max-attributes-per-line': 'off',
-			'vue/no-undef-components': 'error',
+			'vue/no-undef-components': [
+				'error',
+				{
+					ignorePatterns: ['RouterView', 'RouterLink'],
+				},
+			],
 			'vue/html-comment-indent': ['error', 'tab'],
 			'vue/script-indent': ['error', 'tab'],
 			'vue/no-empty-component-block': 'error',

diff --git a/packages/web-forms/e2e/vue.test.ts b/packages/web-forms/e2e/vue.test.ts
@@ -1,6 +1,11 @@
 import { faker } from '@faker-js/faker';
-import { expect, test } from '@playwright/test';
+import { expect, Page, test } from '@playwright/test';
 
+const expandAllCategories = async (page: Page) => {
+	await page.evaluate(() => {
+		document.querySelectorAll('ul.category-list > li').forEach((c) => c.classList.add('expanded'));
+	});
+};
 test('All forms are rendered and there is no console error', async ({ page, browserName }) => {
 	let consoleErrors = 0;
 
@@ -15,7 +20,10 @@ test('All forms are rendered and there is no console error', async ({ page, brow
 	// this ensures that Vue application is loaded before proceeding forward.
 	await expect(page.getByText('Demo Forms')).toBeVisible();
 
-	const forms = await page.locator('ul.form-list li').all();
+	// Let's expand all categories, so that Form list is visible
+	await expandAllCategories(page);
+
+	const forms = await page.locator('ul.form-list li a').all();
 
 	expect(forms.length).toBeGreaterThan(0);
 
@@ -81,6 +89,7 @@ test('All forms are rendered and there is no console error', async ({ page, brow
 		}
 
 		await page.goBack();
+		await expandAllCategories(page);
 	}
 
 	expect(consoleErrors).toBe(0);

diff --git a/packages/web-forms/index.html b/packages/web-forms/index.html
@@ -7,6 +7,6 @@
 	</head>
 	<body>
 		<div id="app"></div>
-		<script type="module" src="/src/demo.ts"></script>
+		<script type="module" src="/src/demo/demo.ts"></script>
 	</body>
 </html>
diff --git a/packages/web-forms/package.json b/packages/web-forms/package.json
@@ -66,7 +66,8 @@
     "vite": "^5.4.3",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vitest": "^2.0.5",
-    "vue": "3.3.4"
+    "vue": "3.3.4",
+    "vue-router": "^4.4.3"
   },
   "peerDependencies": {
     "vue": "^3.3.4"

diff --git a/packages/web-forms/src/OdkWebFormDemo.vue b/packages/web-forms/src/OdkWebFormDemo.vue
diff --git a/packages/web-forms/src/demo/FormList.vue b/packages/web-forms/src/demo/FormList.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { RouterLink } from 'vue-router';
+
+const formFixtureGlobImports = import.meta.glob<true, 'raw', string>('../../../ui-solid/fixtures/xforms/**/*.xml', {
+	query: '?raw'
+});
+
+type CategoryType = Record<string, string[]>;
+
+const categories = Object.keys(formFixtureGlobImports)
+	.map(f => f.replace('../../../ui-solid/fixtures/xforms/', '').replace('.xml', ''))
+	.reduce((result: CategoryType, f:string) => {
+		const parts = f.split('/');
+		const category = parts.length == 2 ? parts[0] : 'Other';
+		if(!result[category]){
+			result[category] = [];
+		}
+		result[category].push(parts.length == 2 ? parts[1]: parts[0])
+		return result;
+	}, {});
+
+const expandedCategories = ref(new Set());
+
+const toggleCategory = (category:string) => {
+	if(expandedCategories.value.has(category)) {
+		expandedCategories.value.delete(category);
+	}
+	else {
+		expandedCategories.value.add(category);
+	}
+}
+
+</script>
+
+<template>
+	<div class="component-root">
+		<h1>Demo Forms</h1>
+		<ul class="category-list">
+			<li
+				v-for="(category,categoryName) in categories"
+				:key="categoryName"
+				:class="{ 'expanded': expandedCategories.has(categoryName) }"
+				@click="toggleCategory(categoryName)"
+			>
+				{{ categoryName }}
+				<ul class="form-list">
+					<li v-for="form in category" :key="form">
+						<RouterLink :to="`/form/${categoryName}/${form}`">
+							{{ form }}
+						</RouterLink>
+					</li>
+				</ul>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped>
+	.component-root {
+		background: white;
+		height: 100vh;
+		margin-top: -25px;
+	}
+
+	h1 {
+		margin-left: 10px;
+		padding-top: 20px;
+	}
+	.category-list {
+		padding: 0;
+
+		> li {
+		list-style: none;
+		cursor: pointer;
+		margin: 10px;
+		text-transform: capitalize;
+		font-size: 20px;
+		padding: 10px;
+
+		&:hover {
+			background-color: var(--gray-100);
+		}
+
+		&::before {
+			content: '▶︎';
+			margin-right: 10px;
+		}
+
+		ul.form-list {
+			display: none;
+			padding: 0 0 0 20px;
+
+			li {
+				list-style: none;
+				margin: 10px;
+				border: 1px solid var(--primary-500);
+				border-radius: 10px;
+				cursor: pointer;
+				background-color: var(--surface-0);
+				font-size: 16px;
+
+				a {
+					display: block;
+					padding: 10px;
+					text-decoration: none;
+					color: var(--gray-900);
+
+					&:visited {
+						color: var(--gray-900)
+					}
+				}
+			}
+
+			li:hover {
+				background-color: var(--primary-50);
+			}
+		}
+
+		&.expanded {
+			&::before {
+				content: '▼';
+			}
+		 	ul.form-list {
+				display: block;
+			}
+		}
+	}
+}
+
+</style>
diff --git a/packages/web-forms/src/demo/FormPreview.vue b/packages/web-forms/src/demo/FormPreview.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import OdkWebForm from '../components/OdkWebForm.vue';
+
+const route = useRoute()
+
+const formFixtureGlobImports = import.meta.glob<false, 'raw', string>('../../../ui-solid/fixtures/xforms/**/*.xml', {
+	query: '?raw',
+	import: 'default',
+	eager: false,
+});
+
+const categoryParam = route.params.category as string;
+const formParam = route.params.form as string;
+const formPath = '../../../ui-solid/fixtures/xforms/' + (route.params.category != 'Other' ? `${categoryParam}/${formParam}` : formParam) + '.xml';
+
+const form = ref();
+formFixtureGlobImports[formPath]()
+	.then((xml:string) => {
+		form.value = xml;
+	})
+	.catch(() => { 
+		alert('Failed to load the Form XML');
+	});
+
+const handleSubmit = () => {
+	alert(`Submit button was pressed`);  
+}
+
+</script>
+
+<template>
+	<OdkWebForm v-if="form" :form-xml="form" @submit="handleSubmit" />
+	<div v-else>
+		Loading...
+	</div>  
+</template>
diff --git a/packages/web-forms/src/demo/OdkWebFormDemo.vue b/packages/web-forms/src/demo/OdkWebFormDemo.vue
@@ -0,0 +1,3 @@
+<template>
+	<RouterView />
+</template>
diff --git a/packages/web-forms/src/demo.ts → packages/web-forms/src/demo/demo.ts b/packages/web-forms/src/demo.ts → packages/web-forms/src/demo/demo.ts
@@ -1,16 +1,17 @@
 import type { Component } from 'vue';
 import { createApp } from 'vue';
 
+import { webFormsPlugin } from '../WebFormsPlugin';
 import OdkWebFormDemo from './OdkWebFormDemo.vue';
-import { webFormsPlugin } from './WebFormsPlugin';
 
 import roboto from '@fontsource/roboto/300.css?inline';
-import icomoon from './assets/css/icomoon.css?inline';
-import theme from './themes/2024-light/theme.scss?inline';
+import icomoon from '../assets/css/icomoon.css?inline';
+import theme from '../themes/2024-light/theme.scss?inline';
 // TODO/sk: Purge it - postcss-purgecss
 import primeflex from 'primeflex/primeflex.css?inline';
 
-import demoStyles from './assets/css/style.scss?inline';
+import demoStyles from '../assets/css/style.scss?inline';
+import router from './router';
 
 const styles = [roboto, icomoon, theme, primeflex, demoStyles].join('\n\n');
 const stylesheet = new CSSStyleSheet();
@@ -21,4 +22,5 @@ document.adoptedStyleSheets.push(stylesheet);
 
 const app = createApp(OdkWebFormDemo as Component);
 app.use(webFormsPlugin);
+app.use(router);
 app.mount('#app');
diff --git a/packages/web-forms/src/demo/router.ts b/packages/web-forms/src/demo/router.ts
@@ -0,0 +1,16 @@
+import type { Component } from 'vue';
+import { createRouter, createWebHashHistory } from 'vue-router';
+import FormList from './FormList.vue';
+import FormPreview from './FormPreview.vue';
+
+const routes = [
+	{ path: '/', component: FormList as Component },
+	{ path: '/form/:category/:form', component: FormPreview as Component },
+];
+
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes,
+});
+
+export default router;