Can't seem to write item values to the item database?

I have this:

import ItemInput from "~/components/item/ItemInput.svelte";

<script>
  function updateItem(item) {
    item.update({ system: item.system });
  }
</script>
<TextInput bind:value="{item.system.quantity}" on:change="{updateItem(item)}" />

import ItemInput from "~/components/item/ItemInput.svelte";

<script>
  function updateItem(item) {
    item.update({ system: item.system });
  }
</script>
<TextInput bind:value="{item.system.quantity}" on:change="{updateItem(item)}" />

I also tried this:

<script>
function updateItem(item, index) {
    $doc.system.items[index].quantity = item.system.quantity;
    $doc.update({
      system: $doc.system,
      flags: $doc.flags,
      name: $doc.name,
    });
  }
</script>
<TextInput bind:value="{item.system.quantity}" on:change="{updateItem(item, index)}" />

<script>
function updateItem(item, index) {
    $doc.system.items[index].quantity = item.system.quantity;
    $doc.update({
      system: $doc.system,
      flags: $doc.flags,
      name: $doc.name,
    });
  }
</script>
<TextInput bind:value="{item.system.quantity}" on:change="{updateItem(item, index)}" />

Tried this too:

  function updateItem(item, index) {
    const actor = $doc;
    let Item = actor.items.find((i) => i.name === item.name);
    Item.system.quantity = item.system.quantity;

    console.log(Item.system.quantity);

    Item.update({ quantity: Item.system.quantity });
  }

  function updateItem(item, index) {
    const actor = $doc;
    let Item = actor.items.find((i) => i.name === item.name);
    Item.system.quantity = item.system.quantity;

    console.log(Item.system.quantity);

    Item.update({ quantity: Item.system.quantity });
  }

No errors, but the value is not saved to the item in any of the cases. If I refresh, the value goes away. I also had a go at using TJSinputText but couldn't figure out how to import it.

  import { TJSinputText } from "@typhonjs-fvtt/svelte-standard/component/standard/form/input";

  import { TJSinputText } from "@typhonjs-fvtt/svelte-standard/component/standard/form/input";

 Missing "./component/standard/form/input" export in "@typhonjs-fvtt/svelte-standard" package

 Missing "./component/standard/form/input" export in "@typhonjs-fvtt/svelte-standard" package

2 Replies

geoidesic•16mo ago

Actually this works:

function updateItem(event, item, index) {
    item.update({ "system.quantity": event.target.value });
  }

function updateItem(event, item, index) {
    item.update({ "system.quantity": event.target.value });
  }

TyphonJS (Michael)•16mo ago

Good job I suppose.. You finally figured out the basics / format of how the Foundry API / document model works. For game system dev you really should start with building an understanding of how the Foundry API works. An additional layer of software like TRL does not necessarily solve a lack of understanding about the APIs beneath it. Of course the same goes for Svelte. You need to spend more time understanding how Svelte works as well and at that modern Javascript underpinning all of these layers. There are basic lack of understanding bugs in the code that you posted above. For instance: on:change="{updateItem(item, index)}"; what do you think this does and do you see a problem with it? If you actually understood the basics expressed in the Svelte tutorial you'd know this is not how to define an inline handler when passing variables to a function. See: https://svelte.dev/tutorial/inline-handlers https://svelte.dev/docs#template-syntax-element-directives https://stackoverflow.com/questions/58262380/how-to-pass-parameters-to-onclick-in-svelte Creating forum posts saying you are confused, but kind of clearly showing that you haven't done the basic work required for building an understanding does not lead to others being able to help you per se. If you don't do the work you will be confused. Again though it's a journey and you need to back things up and set expectations that the "throw things at the wall approach" does not make you a software developer; at best about on par with a "script kiddie". The best thing I can hopefully impart to you is that you are in over your head with a lack of knowledge about fundamental JS concepts, Svelte basics, incomplete understanding of Foundry API, TRL layered on top of all of this is not going to solve the issues further down the stack. That you may eventually get things to work doesn't mean that you have produced clean code or have "done it right". Posting stream of consciousness status of where you are at is not a question or much of a discussion. You probably won't get too many responses. I should say that doesn't mean that I and perhaps other folks in the Foundry dev community don't want to help, but there is only so much that can be done when you haven't taken the time to do the work yourself to move towards actually picking up sound software development skills / fundamental knowledge. With all this too I do hope that it isn't taken as being overly harsh. I'm glad to try and get folks of all skill levels moving forward w/ TRL and software development in general. It's in fact helpful from the perspective of releasing a library / framework to have folks of all skill levels attempting to use it as it is informative on the types of informational resources that need to be put together to help smooth out folks journey towards success. Absorbing and putting into practice fundamentals of any discipline is a sound approach to moving forward. This is all akin to the classic parable / proverb: "give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime." You'll grow much more and be way more self-reliant in your programming journey by changing your perspective and working on sound fundamental approaches. Constantly posting stream of consciousness updates hoping to get some small tidbit of info is more or less like repeatedly asking for a fish, but never learning how to do it yourself. Some seeds that I see that are good in snippets that you post is that you do pepper console.log about to try and verify what things are at various points in your process. One of the most powerful extensions to a basic debugging process is applying a "divide and conquer" approach. Now if you do a Google search you do need to include programming divide and conquer debugging as this is also a general algorithm pattern usually associated with sorting. Some of the top articles returned that discuss a debugging application include: https://betterprogramming.pub/find-and-fix-bugs-like-a-pro-with-divide-and-conquer-d55f3cf91154 https://markheath.net/post/effective-debugging-with-divide-and-conquer The big problem in your current efforts is that there are a lot of bugs and inefficiencies in your code. I and I'm sure others in this forum and elsewhere don't have the time to read / understand your code and where these problems are located as they are all over the place and legion. It's up to you to build a more disciplined skillset to work through your code. There are always tips and tricks, API clarifications, and such to share especially when there isn't a developer guide / API docs / step by step instructional content. --- For instance I see that you tried to import TJSInputText from an internal path which means that you looked at the svelte-standard code; which is good. There isn't an informational guide out that directly explains the import path structure. TRL does follow the same style as the Svelte library insofar as having several sub-package exports / a relatively new feature of NPM / Node packages. All of the components found in svelte-standard are exported from a single import point. This is found in the sample code that you recently looked at from essential-svelte-esm: import { TJSInput } from '@typhonjs-fvtt/svelte-standard/component'; There are many other usages in the demo repos showing the various import paths. You can directly import all components in svelte-standard through that path. This sub-package export pattern is going to be same across all of TRL. You can find where these are defined in the associated package.json file: https://github.com/typhonjs-fvtt-lib/svelte-standard/blob/main/package.json#L11-L49. More or less they are going to mirror the top level folders found in any given library repos: ./src/<export folder name>. Corresponding to the package name + <export folder name>; hence: package name: @typhonjs-fvtt/svelte-standard sub-package export: component refers to all exports from ./src/component/standard. Sometimes there will be additional variations and depending on the build process of the library what is pointed to in the package.json file are distribution resources / pre-processed / bundled resources.

Gaming

Programming

Can't seem to write item values to the item database?