feat: 🎸 Add option to support multiple query forms at the same

.changeset/smooth-jars-divide.md

@@ -0,0 +1,5 @@
+---
+"@ethlete/query": minor
+---
+
+Add option to support multiple query forms at the same time

.prettierignore

@@ -8,11 +8,10 @@ node_modules
 pnpm-lock.yaml
 migrations.json
 
-.changeset/pre.json
-.changeset/*.md
-
 libs/types/src/lib/api
 /.nx/cache
 .angular
 
+.changeset/pre.json
+.changeset/*.md
 CHANGELOG.md

apps/playground/src/app/app.component.html

@@ -32,7 +32,7 @@ <h1>Playground</h1>
 
 <et-query-devtools />
 
-<ethlete-arch-test-accordion>
+<!-- <ethlete-arch-test-accordion>
   <ethlete-arch-test-accordion-item [isExpanded]="true" label="Accordion 1">
     <p>Some accordion stuff</p>
   </ethlete-arch-test-accordion-item>
@@ -73,4 +73,4 @@ <h1>Playground</h1>
 
 <button [ethleteOverlayTrigger]="{ component: comp, inputs: { foo: 'with context' }, injector }">
   overlay component custom
-</button>
+</button> -->

apps/playground/src/app/query/form/form.component.ts

@@ -118,6 +118,13 @@ export const postRefreshToken = client.post({
 
     </pre
     >
+
+    <h1>Form 2</h1>
+    <form [formGroup]="form2.form">
+      <input [formControl]="form2.controls.query" type="text" placeholder="Query" />
+      <input [formControl]="form2.controls.page" type="number" placeholder="Page" />
+      <input [formControl]="form2.controls.limit" type="number" placeholder="Limit" />
+    </form>
   `,
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -129,23 +136,47 @@ export class QueryFormComponent {
   protected readonly usersQuery = getUsers.createSignal(null, { abortPrevious: true });
   private readonly _destroy$ = createDestroy();
 
-  form = new QueryForm({
-    query: new QueryField({
-      control: new FormControl<string>(''),
-      debounce: 300,
-      disableDebounceIfFalsy: true,
-    }),
-    page: new QueryField({
-      control: new FormControl<number>(1),
-      isResetBy: ['query', 'limit'],
-    }),
-    limit: new QueryField({ control: new FormControl<number>(10) }),
-    sort: new QueryField<Sort | null>({
-      control: new FormControl(),
-      queryParamToValueTransformFn: transformToSort,
-      valueToQueryParamTransformFn: transformToSortQueryParam,
-    }),
-  });
+  form = new QueryForm(
+    {
+      query: new QueryField({
+        control: new FormControl<string>(''),
+        debounce: 300,
+        disableDebounceIfFalsy: true,
+      }),
+      page: new QueryField({
+        control: new FormControl<number>(1),
+        isResetBy: ['query', 'limit'],
+      }),
+      limit: new QueryField({ control: new FormControl<number>(10) }),
+      sort: new QueryField<Sort | null>({
+        control: new FormControl(),
+        queryParamToValueTransformFn: transformToSort,
+        valueToQueryParamTransformFn: transformToSortQueryParam,
+      }),
+    },
+    { queryParamPrefix: 'form' },
+  );
+
+  form2 = new QueryForm(
+    {
+      query: new QueryField({
+        control: new FormControl<string>(''),
+        debounce: 300,
+        disableDebounceIfFalsy: true,
+      }),
+      page: new QueryField({
+        control: new FormControl<number>(1),
+        isResetBy: ['query', 'limit'],
+      }),
+      limit: new QueryField({ control: new FormControl<number>(10) }),
+      sort: new QueryField<Sort | null>({
+        control: new FormControl(),
+        queryParamToValueTransformFn: transformToSort,
+        valueToQueryParamTransformFn: transformToSortQueryParam,
+      }),
+    },
+    { queryParamPrefix: 'form-2' },
+  );
 
   loginForm = new FormGroup({
     username: new FormControl<string>(''),
@@ -155,15 +186,20 @@ export class QueryFormComponent {
   constructor() {
     this._setAp();
 
+    setTimeout(() => {
+      this.form2.form.controls.query.setValue('test');
+    }, 100);
+
+    this.form.observe();
+    this.form2.observe();
+
     client.authProvider$
       .pipe(
         takeUntilDestroyed(),
         filter((ap): ap is BearerAuthProvider<typeof postRefreshToken> => !!ap && isBearerAuthProvider(ap)),
         switchMap((ap) => ap.tokens$),
         filter((tokens) => !!tokens.token && !!tokens.refreshToken),
         tap(() => {
-          this.form.observe();
-
           this.form.changes$
             .pipe(
               takeUntil(this._destroy$),

libs/query/src/lib/query-form/query-form.ts

@@ -26,6 +26,13 @@ export class QueryField<T> {
 
 const IGNORED_FILTER_COUNT_FIELDS = ['page', 'skip', 'take', 'limit', 'sort', 'sortBy', 'sortOrder', 'query', 'search'];
 
+export interface QueryFormOptions {
+  /**
+   * A prefix to use for the query parameters. This is useful when you have multiple query forms on the same page.
+   */
+  queryParamPrefix?: string;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export class QueryForm<T extends Record<string, QueryField<any>>> {
   private readonly _destroy$ = createDestroy();
@@ -117,7 +124,11 @@ export class QueryForm<T extends Record<string, QueryField<any>>> {
     }, {} as QueryFormValue<T>);
   }
 
-  constructor(private _fields: T) {
+  // with prefix eg. page should become ${prefix}-page
+  constructor(
+    private _fields: T,
+    private _options?: QueryFormOptions,
+  ) {
     assertInInjectionContext(QueryForm);
   }
 
@@ -300,7 +311,7 @@ export class QueryForm<T extends Record<string, QueryField<any>>> {
     let didValueChanges = false;
 
     for (const [key, field] of Object.entries(this._fields)) {
-      const value = options.queryParams[key];
+      const value = options.queryParams[this._transformKeyToQueryParam(key)];
 
       const valueDoesNotExist = value === undefined;
 
@@ -361,6 +372,10 @@ export class QueryForm<T extends Record<string, QueryField<any>>> {
     return val ?? null;
   }
 
+  private _transformKeyToQueryParam(key: string) {
+    return this._options?.queryParamPrefix ? `${this._options.queryParamPrefix}-${key}` : key;
+  }
+
   private _isDefaultValue(key: string, value: unknown) {
     const normalizedValue = Array.isArray(value) ? `${ET_ARR_PREFIX}${JSON.stringify(value)}` : value;
 
@@ -397,17 +412,17 @@ export class QueryForm<T extends Record<string, QueryField<any>>> {
     const queryParams = { ...clone(this._activatedRoute.snapshot.queryParams) };
 
     for (const [key, value] of Object.entries(values)) {
+      const queryParamKey = this._transformKeyToQueryParam(key);
       const field = this._fields[key];
 
       if (!field) {
-        console.warn(`The field "${key}" is not defined in the QueryForm. Is it a typo?`, this);
         continue;
       }
 
       if (this._isDefaultValue(key, value) || field.data.appendToUrl === false) {
-        delete queryParams[key];
+        queryParams[queryParamKey] = undefined;
       } else {
-        queryParams[key] = field.data.valueToQueryParamTransformFn
+        queryParams[queryParamKey] = field.data.valueToQueryParamTransformFn
           ? field.data.valueToQueryParamTransformFn?.(value)
           : value;
       }
@@ -417,6 +432,7 @@ export class QueryForm<T extends Record<string, QueryField<any>>> {
       this._router.navigate([], {
         queryParams,
         replaceUrl,
+        queryParamsHandling: 'merge',
       });
     });
   }