How to reset filter for Embedded collection?

I'm trying to allow the items list to be filtered by tabs / buttons for the

type

type

of item, rather than via a text field.

My tabs are two separate components. So I have registered the typeFilter in both

Comp1 (shows all items)

  const typeSearch = createFilterQuery("type");
  onMount(async () => {
    console.log("inventory onMount");
    typeSearch.set("");
  });

  const typeSearch = createFilterQuery("type");
  onMount(async () => {
    console.log("inventory onMount");
    typeSearch.set("");
  });

Comp2 (shows only items of type

trait

trait

const typeSearch = createFilterQuery("type");
  onMount(async () => {
    console.log("inventory onMount");
    typeSearch.set("trait");
  });

const typeSearch = createFilterQuery("type");
  onMount(async () => {
    console.log("inventory onMount");
    typeSearch.set("trait");
  });

This works for only the first tab clicked and thereafter is non-reactive.

I had a go at writing it to the documentStore

  const doc = getContext("#doc");

  const nameSearch = createFilterQuery("name");
  $doc.system.filters.inventory.typeSearch = createFilterQuery("type");
  $doc.system.filters.inventory.typeSearch.set("");

  $: console.log(nameSearch);
  $: console.log($doc.system.filters.inventory.typeSearch);

  const input = {
    store: nameSearch,
    efx: rippleFocus(),
    placeholder: "*",
    type: "search",
  };

  /** @type {import('@typhonjs-fvtt/runtime/svelte/store').DynMapReducer<string, Item>} */
  const wildcard = doc.embedded.create("Item", {
    name: "wildcard",
    filters: [nameSearch, $doc.system.filters.inventory.typeSearch],
    sort: (a, b) => a.name.localeCompare(b.name),
  });

  const doc = getContext("#doc");

  const nameSearch = createFilterQuery("name");
  $doc.system.filters.inventory.typeSearch = createFilterQuery("type");
  $doc.system.filters.inventory.typeSearch.set("");

  $: console.log(nameSearch);
  $: console.log($doc.system.filters.inventory.typeSearch);

  const input = {
    store: nameSearch,
    efx: rippleFocus(),
    placeholder: "*",
    type: "search",
  };

  /** @type {import('@typhonjs-fvtt/runtime/svelte/store').DynMapReducer<string, Item>} */
  const wildcard = doc.embedded.create("Item", {
    name: "wildcard",
    filters: [nameSearch, $doc.system.filters.inventory.typeSearch],
    sort: (a, b) => a.name.localeCompare(b.name),
  });

But no change in behaviour.

Another problem is that even if I just use the type field as per the

EmbeddedDocAppShell

EmbeddedDocAppShell

sample, and put it on one of my tabs... it only works when that tab is first viewed. Any time I click to a different tab and then back to that tab, the filter no longer works and will be stuck with whatever it's previous search results provided. Typing into the search field after that point yields no change.

Even if I close and re-open the Actor Sheet after that, the filter will still be broken. Only a page refresh fixes it.

TyphonJS•3y ago•

13 replies

geoidesic [Aardvark Games]

How to reset filter for Embedded collection?

I'm trying to allow the items list to be filtered by tabs / buttons for the

type

type

of item, rather than via a text field.

My tabs are two separate components. So I have registered the typeFilter in both

Comp1 (shows all items)

  const typeSearch = createFilterQuery("type");
  onMount(async () => {
    console.log("inventory onMount");
    typeSearch.set("");
  });

  const typeSearch = createFilterQuery("type");
  onMount(async () => {
    console.log("inventory onMount");
    typeSearch.set("");
  });

Comp2 (shows only items of type

trait

trait

const typeSearch = createFilterQuery("type");
  onMount(async () => {
    console.log("inventory onMount");
    typeSearch.set("trait");
  });

const typeSearch = createFilterQuery("type");
  onMount(async () => {
    console.log("inventory onMount");
    typeSearch.set("trait");
  });

This works for only the first tab clicked and thereafter is non-reactive.

I had a go at writing it to the documentStore

  const doc = getContext("#doc");

  const nameSearch = createFilterQuery("name");
  $doc.system.filters.inventory.typeSearch = createFilterQuery("type");
  $doc.system.filters.inventory.typeSearch.set("");

  $: console.log(nameSearch);
  $: console.log($doc.system.filters.inventory.typeSearch);

  const input = {
    store: nameSearch,
    efx: rippleFocus(),
    placeholder: "*",
    type: "search",
  };

  /** @type {import('@typhonjs-fvtt/runtime/svelte/store').DynMapReducer<string, Item>} */
  const wildcard = doc.embedded.create("Item", {
    name: "wildcard",
    filters: [nameSearch, $doc.system.filters.inventory.typeSearch],
    sort: (a, b) => a.name.localeCompare(b.name),
  });

  const doc = getContext("#doc");

  const nameSearch = createFilterQuery("name");
  $doc.system.filters.inventory.typeSearch = createFilterQuery("type");
  $doc.system.filters.inventory.typeSearch.set("");

  $: console.log(nameSearch);
  $: console.log($doc.system.filters.inventory.typeSearch);

  const input = {
    store: nameSearch,
    efx: rippleFocus(),
    placeholder: "*",
    type: "search",
  };

  /** @type {import('@typhonjs-fvtt/runtime/svelte/store').DynMapReducer<string, Item>} */
  const wildcard = doc.embedded.create("Item", {
    name: "wildcard",
    filters: [nameSearch, $doc.system.filters.inventory.typeSearch],
    sort: (a, b) => a.name.localeCompare(b.name),
  });

But no change in behaviour.

Another problem is that even if I just use the type field as per the

EmbeddedDocAppShell

EmbeddedDocAppShell

How to reset filter for Embedded collection?

Similar Threads

How to reset filter for Embedded collection?

Similar Threads

Similar Threads

Similar Threads