This commit is contained in:
Moritz Jung 2025-08-08 16:48:24 +02:00
commit 9f3a577c70

View file

@ -10,17 +10,16 @@
let { model, save }: Props = $props(); let { model, save }: Props = $props();
let validationResult: { res: boolean; err?: Error } | undefined = $state(); let validationResult: { res: boolean; err?: Error } | undefined = $derived(model.validate());
$effect(() => { // Use $state as a variable declaration initializer
validationResult = model.validate(); let propertyStates = $state(model.properties.map(p => ({ ...p })));
});
</script> </script>
<div class="media-db-plugin-property-mappings-model-container"> <div class="media-db-plugin-property-mappings-model-container">
<div class="setting-item-name">{capitalizeFirstLetter(model.type)}</div> <div class="setting-item-name">{capitalizeFirstLetter(model.type)}</div>
<div class="media-db-plugin-property-mappings-container"> <div class="media-db-plugin-property-mappings-container">
{#each model.properties as property} {#each propertyStates as property, i}
<div class="media-db-plugin-property-mapping-element"> <div class="media-db-plugin-property-mapping-element">
<div class="media-db-plugin-property-mapping-element-property-name-wrapper"> <div class="media-db-plugin-property-mapping-element-property-name-wrapper">
<pre class="media-db-plugin-property-mapping-element-property-name"><code>{property.property}</code></pre> <pre class="media-db-plugin-property-mapping-element-property-name"><code>{property.property}</code></pre>
@ -54,6 +53,10 @@
<button <button
class="media-db-plugin-property-mappings-save-button {validationResult?.res ? 'mod-cta' : 'mod-muted'}" class="media-db-plugin-property-mappings-save-button {validationResult?.res ? 'mod-cta' : 'mod-muted'}"
onclick={() => { onclick={() => {
// Sync propertyStates back to model.properties
model.properties.forEach((p, i) => {
Object.assign(p, propertyStates[i]);
});
if (model.validate().res) save(model); if (model.validate().res) save(model);
}} }}
>Save >Save