feat: save operation parameters in page URL

Author: BatLeDev

ui/dts/typed-router.d.ts

@@ -19,5 +19,6 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/dev': RouteRecordInfo<'/dev', '/dev', Record<never, never>, Record<never, never>>,
   }
 }

ui/src/components/layout/navigation-drawer-items.vue

@@ -7,7 +7,7 @@
       'text-disabled font-italic': item.deprecated,
     }"
     rounded
-    @click="$router.push({ query: { ...$route.query, operation: item.hash} })"
+    @click="$router.push({ query: { ...$route.query, operation: item.hash, params: undefined } })"
   >
     <v-list-item-title class="text-wrap">
       {{ item.summary }}

ui/src/components/operation.vue

@@ -192,8 +192,23 @@ const { operation, pathItemParameters, serverUrl, method, path } = defineProps<{
 }>()
 
 const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
 
-const endpointQueryValues = ref<GenericEndpointQuery>({})
+// Init endpointQueryValues from URL query parameters if available
+const initialValues = (() => {
+  const params = route.query.params as string | undefined
+  if (params) {
+    try {
+      return JSON.parse(params)
+    } catch (e) {
+      console.error('Failed to parse params from URL:', e)
+    }
+  }
+  return {}
+})()
+
+const endpointQueryValues = ref<GenericEndpointQuery>(initialValues)
 const endpointQuerySchema = getVJSFSchema(operation, pathItemParameters)
 console.log(endpointQuerySchema)
 const responseData = ref<Record<string, any> | null>(null)
@@ -204,6 +219,16 @@ const exampleSelected = ref<string>('default')
 const loading = ref(false)
 const isValid = ref(false)
 
+// Serialize the endpointQueryValues when they change
+watch(endpointQueryValues, (newValues) => {
+  router.replace({
+    query: {
+      ...route.query,
+      params: JSON.stringify(newValues)
+    }
+  })
+}, { deep: true })
+
 const fullPath = computed(() => {
   let fullPath = path
 

ui/src/utils/serialize.ts

@@ -4,7 +4,6 @@ import type { Parameter } from '~/utils/transform'
 /**
  * Serialize query parameters according to OpenAPI 3.0 specification
  *
- * https://swagger.io/docs/specification/v3_0/serialization
  * @param params - Object containing parameter name and values
  * @param paramSpecs - Array of parameter specifications with style and explode properties
  * @returns URLSearchParams object with properly serialized parameters