Only one input is allowed. For example, it isn't possible to have a cell for RGB representation of a color with inputs for Red, Green, and Blue numbers
Only HTML tags that supports the value attribute can be used to provide a cell's value
Motivation / Goals
G1. Edit-components should be able to provide a finalized value, so something like the above mentioned RGB example becomes possible
G2. Warn users about unsaved edits / staged changes
Discussion
If you can find a way to make all edit components in a row report their final values once any submit button on that row in clicked, we won't have to deal with the complexity of each custom edit component and we won't have to resort to querySelectorAll to collect the values.
Actually, it's probably better (and also easier) if we keep track of all the "staged" (unsubmitted) changes in an Svelte store! So the edit components are responsible to write changes to this store and once an edit is submitted for row x, the staged changes of the row x will override the row data. This way even if we navigate back and forth between pages, we won't lose the staged changes. Also, we would be able to keep track of which cells have changed, so if user is closing the tab or exiting the edit mode, we can warn them about unsaved changes.
Summary
Take advantage of Svelte's onDestroy function as the mechanism to queue all cell values together. onDestroy will be called in for each cell when a row "stops being edited", and will append to the store. Then a function waitForEdits() will run after the store gets all the cell values, and the table data is updated.
Evaluation
Probably not actually a valid solution, and has some areas of concern. It works in most simple cases, but idk if it will always work. In particular, waitForEdits() and the extra use of binds feel scary. I got this working after playing around, and am too new to Svelte to tell if this is a reasonable approach, or what side effects it may have.
Pros
Simple for clients: only requirements are calling endEditCallback() when/where they want, and provide their value to saveCellEdits
Note: this references pending features and code from #33
Problem
Getting the values from an edited row relies on using a document query, looking for elements with a specific data-attribute.
https://github.com/muonw/muonw-powertable/blob/ce50210afc9aead43bb28a9493a8a9e3b100789a/app/src/lib/components/PowerTable.svelte#L724-L729
This limits the customization of edit-components
valueattribute can be used to provide a cell's valueMotivation / Goals
Discussion
Solutions
S0 - Clients write directly to a Store
Summary investigating
S1 - Queue changes via onDestroy
Summary Take advantage of Svelte's
onDestroyfunction as the mechanism to queue all cell values together.onDestroywill be called in for each cell when a row "stops being edited", and will append to the store. Then a functionwaitForEdits()will run after the store gets all the cell values, and the table data is updated.Evaluation Probably not actually a valid solution, and has some areas of concern. It works in most simple cases, but idk if it will always work. In particular,
waitForEdits()and the extra use ofbinds feel scary. I got this working after playing around, and am too new to Svelte to tell if this is a reasonable approach, or what side effects it may have.Pros
endEditCallback()when/where they want, and provide their value tosaveCellEditsCons
Implementation
code
todo: provide patch file ```svelte {#if data[record[dataIdKey]]?.[checkboxKey]}