feat(foxy-filter-attribute-form): add support for filter query defaults

Author: pheekus

src/elements/public/FilterAttributeForm/FilterAttributeForm.stories.ts

@@ -19,10 +19,12 @@ const summary: Summary = {
 
 export default getMeta(summary);
 
-export const Playground = getStory({ ...summary, code: true });
-export const Empty = getStory(summary);
-export const Error = getStory(summary);
-export const Busy = getStory(summary);
+const ext = `defaults="size=large&color=blue" pathname="/stores/0/transactions"`;
+
+export const Playground = getStory({ ...summary, ext, code: true });
+export const Empty = getStory({ ...summary, ext });
+export const Error = getStory({ ...summary, ext });
+export const Busy = getStory({ ...summary, ext });
 
 Empty.args.href = '';
 Error.args.href = 'https://demo.api/virtual/empty?status=404';

src/elements/public/FilterAttributeForm/FilterAttributeForm.test.ts

@@ -66,6 +66,11 @@ describe('FilterAttributeForm', () => {
     expect(new Form()).to.have.property('ns', 'filter-attribute-form');
   });
 
+  it('has a reactive property "defaults"', () => {
+    expect(Form).to.have.deep.nested.property('properties.defaults', {});
+    expect(new Form()).to.have.property('defaults', null);
+  });
+
   it('has a reactive property "pathname"', async () => {
     expect(Form).to.have.deep.nested.property('properties.pathname', {});
 
@@ -85,12 +90,15 @@ describe('FilterAttributeForm', () => {
   });
 
   it('renders query builder', async () => {
-    const layout = html`<foxy-filter-attribute-form pathname="/foo"></foxy-filter-attribute-form>`;
-    const element = await fixture<Form>(layout);
-    const control = element.renderRoot.querySelector<QueryBuilder>('[infer="filter-query"]')!;
+    const element = await fixture<Form>(html`
+      <foxy-filter-attribute-form pathname="/foo" defaults="color=blue">
+      </foxy-filter-attribute-form>
+    `);
 
+    const control = element.renderRoot.querySelector<QueryBuilder>('[infer="filter-query"]')!;
     expect(control).to.exist;
     expect(control).to.be.instanceOf(customElements.get('foxy-query-builder'));
+    expect(control).to.have.property('value', 'color=blue');
 
     const options: Form['options'] = [];
     element.options = options;

src/elements/public/FilterAttributeForm/FilterAttributeForm.ts

@@ -34,11 +34,15 @@ export class FilterAttributeForm extends Base<Data> {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
+      defaults: {},
       pathname: {},
       options: { type: Array },
     };
   }
 
+  /** Default filter query. */
+  defaults: string | null = null;
+
   /** Admin page pathname. */
   pathname: string | null = null;
 
@@ -115,8 +119,26 @@ export class FilterAttributeForm extends Base<Data> {
 
   private __getValueParam(key: string) {
     try {
+      const constructor = this.constructor as typeof FilterAttributeForm;
       const url = new URL(decode(this.form.value ?? ''), 'https://example.com');
-      return url.searchParams.get(key) ?? '';
+
+      let result = url.searchParams.get(key) ?? '';
+
+      if (
+        key === constructor.filterQueryKey &&
+        (this.in({ idle: { snapshot: 'clean' } }) || this.in({ idle: { template: 'clean' } }))
+      ) {
+        try {
+          const fullQuery = new URLSearchParams(result);
+          const defaults = new URLSearchParams(this.defaults ?? '');
+          fullQuery.forEach((v, k) => defaults.set(k, v));
+          result = defaults.toString();
+        } catch {
+          // no-op
+        }
+      }
+
+      return result;
     } catch {
       return '';
     }