feat: add useFormQuery to pair url params and a form

app/src/composables/form.ts

@@ -16,8 +16,10 @@ import type {
   WritableComputedRef,
 } from 'vue'
 import { computed, inject, provide, reactive, ref, toValue } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { APIBadRequestError, type APIError } from '@/api/errors'
+import { fromEntries, getKeys } from '@/helpers/commons'
 import type { Obj } from '@/types/commons'
 import type { FormFieldDict } from '@/types/form'
 
@@ -160,3 +162,24 @@ export function useArrayRule<V extends any[], T extends ValidationArgs>(
     }, {})
   })
 }
+
+export function useFormQuery<T extends Obj>(
+  props: T,
+  onUpdate?: () => T | undefined,
+) {
+  const router = useRouter()
+  const formQuery = fromEntries(
+    getKeys(props).map((key) => [
+      key,
+      computed({
+        get: () => props[key],
+        set: (n) => {
+          const nextProps = onUpdate?.() ?? props
+          router.replace({ query: { ...nextProps, [key]: n } })
+        },
+      }),
+    ]) as { [K in keyof T]: [K, WritableComputedRef<T[K]>] }[keyof T][],
+  )
+
+  return formQuery
+}

app/src/helpers/commons.ts

@@ -182,11 +182,30 @@ export function getFileContent(
   })
 }
 
+export function getKeys<T extends Obj, K extends (keyof T)[]>(obj: T): K {
+  return Object.keys(obj) as K
+}
+
 export function toEntries<T extends Record<PropertyKey, unknown>>(
   obj: T,
 ): { [K in keyof T]: [K, T[K]] }[keyof T][] {
   return Object.entries(obj) as { [K in keyof T]: [K, T[K]] }[keyof T][]
 }
+
+export function fromEntries<
+  const T extends ReadonlyArray<readonly [PropertyKey, unknown]>,
+>(entries: T): { [K in T[number] as K[0]]: K[1] } {
+  return Object.fromEntries(entries) as { [K in T[number] as K[0]]: K[1] }
+}
+
+export function pick<T extends Obj, K extends (keyof T)[]>(
+  obj: T,
+  keys: K,
+): Pick<T, K[number]> {
+  return Object.fromEntries(keys.map((key) => [key, obj[key]])) as Pick<
+    T,
+    K[number]
+  >
 }
 
 export function omit<T extends Obj, K extends (keyof T)[]>(