feat: restructure add new public-form components to allow for better …

…usability and consistency

libs/common/src/lib/public-form-controller.ts

@@ -15,7 +15,6 @@ export type AppState<T> = {
 
 export type Fieldset<T> = {
   heading: string;
-  skipSummary?: boolean;
   data:
     | { type: "details"; fieldsets: Record<string, FieldsetItemState> }
     | { type: "list"; items: AppState<T>[] };
@@ -26,16 +25,13 @@ export class PublicFormController<T> {
   _formData?: Record<string, string> = undefined;
   _formRef?: HTMLElement = undefined;
 
-  constructor(private type: "details" | "list") {
-    console.log("constructor", this.type);
-    // nothing here
-  }
+  constructor(private type: "details" | "list") {}
 
   // Obtain reference to the form element
   init(e: Event) {
     // FIXME: This condition should not be needed, but currently it is the only way to get things working
     if (this._formRef) {
-      console.error("init: form element has already been set");
+      console.warn("init: form element has already been set");
       return;
     }
     this._formRef = (e as CustomEvent).detail.el;
@@ -55,35 +51,13 @@ export class PublicFormController<T> {
   }
 
   // Public method to allow for the initialization of the state
-  initState(state: string | AppState<T> | AppState<T>[]) {
+  initState(state?: string | AppState<T> | AppState<T>[], callback?: () => void) {
     relay(this._formRef, "external::init:state", state);
-  }
 
-  // ISSUE:
-  // The issue is that all the logic below is happening outside the form component, thereby resulting
-  // in the "fixed" data not being in sync with the data within the form component.
-  //
-
-  // Public method to allow for the updating of the state
-  // updateState(e: Event) {
-  //   console.debug(
-  //     "Utils:updateState",
-  //     this.type,
-  //     { state: this.state },
-  //     (e as CustomEvent).detail,
-  //   );
-  //   if (!this.state) {
-  //     console.error("updateState: state has not yet been set");
-  //     return;
-  //   }
-  //
-  //   const detail = (e as CustomEvent).detail;
-  //   } else if (this.type === "details" && Array.isArray(detail.data)) {
-  //     this.#updateObjectListState(detail);
-  //   } else {
-  //     this.#updateObjectState(detail);
-  //   }
-  // }
+    if (callback) {
+      setTimeout(callback, 200);
+    }
+  }
 
   updateListState(e: Event) {
     const detail = (e as CustomEvent).detail;
@@ -261,6 +235,18 @@ export class PublicFormController<T> {
       }),
     );
   }
+
+  // removes any data collected that doesn't correspond with the final history path
+  clean() {
+    if (Array.isArray(this.state)) {
+      return;
+    }
+    const state = this.state;
+    return this.state?.history.reduce<Record<string, unknown>>((acc, fieldsetId) => {
+      acc[fieldsetId] = state?.form[fieldsetId];
+      return acc;
+    }, {});
+  }
 }
 
 // Public helper function to dispatch messages

libs/web-components/src/common/utils.ts

@@ -54,7 +54,10 @@ export function relay<T>(
   data?: T,
   opts?: { bubbles?: boolean; cancelable?: boolean; timeout?: number },
 ) {
-  // console.log(`RELAY(${eventName}):`, data, el);
+  if (!el) {
+    console.warn("relay() el is null | undefined");
+    return;
+  }
 
   const dispatch = () => {
     el?.dispatchEvent(
@@ -254,3 +257,22 @@ export function ensureSlotExists(el: HTMLElement) {
     el.appendChild(document.createElement("slot"));
   }
 }
+
+export function getQueryParams(url: string | URL): Record<string, string> {
+  const _url = url instanceof URL ? url : new URL(url);
+  const query = _url.search.substring(1);
+  const vars = query.split("&");
+
+  return vars.reduce((acc: Record<string, string>, val: string) => {
+    const [key, value] = val.split("=");
+    acc[key] = value;
+    return acc;
+  }, {});
+}
+
+export function getQueryParam(
+  url: string | URL,
+  key: string,
+): string | undefined {
+  return getQueryParams(url)[key];
+}

libs/web-components/src/components/form-item/FormItem.svelte

@@ -18,12 +18,15 @@
     typeValidator,
   } from "../../common/utils";
   import {
-    FieldsetErrorRelayDetail,
     FieldsetResetErrorsMsg,
     FieldsetSetErrorMsg,
     FormFieldMountMsg,
-    FormFieldMountRelayDetail,
     FormItemMountMsg,
+  } from "../../types/relay-types";
+
+  import type {
+    FieldsetErrorRelayDetail,
+    FormFieldMountRelayDetail,
     FormItemMountRelayDetail,
   } from "../../types/relay-types";