Preliminary fix in rune mode for remapping
Based on https://github.com/sveltejs/svelte/pull/15107#discussion_r1945486274
This commit is contained in:
parent
e17271b8e9
commit
14fbbf8170
2 changed files with 20 additions and 7 deletions
|
|
@ -3,18 +3,23 @@
|
|||
import { capitalizeFirstLetter } from '../utils/Utils';
|
||||
import Icon from './Icon.svelte';
|
||||
|
||||
export let model: PropertyMappingModel;
|
||||
export let save: (model: PropertyMappingModel) => void;
|
||||
interface Props {
|
||||
model: PropertyMappingModel;
|
||||
save: (model: PropertyMappingModel) => void;
|
||||
}
|
||||
|
||||
let validationResult: { res: boolean; err?: Error } | undefined;
|
||||
let { model, save }: Props = $props();
|
||||
|
||||
$: validationResult = model.validate();
|
||||
let validationResult: { res: boolean; err?: Error } | undefined = $derived(model.validate());
|
||||
|
||||
// Use $state as a variable declaration initializer
|
||||
let propertyStates = $state(model.properties.map(p => ({ ...p })));
|
||||
</script>
|
||||
|
||||
<div class="media-db-plugin-property-mappings-model-container">
|
||||
<div class="setting-item-name">{capitalizeFirstLetter(model.type)}</div>
|
||||
<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-property-name-wrapper">
|
||||
<pre class="media-db-plugin-property-mapping-element-property-name"><code>{property.property}</code></pre>
|
||||
|
|
@ -48,6 +53,10 @@
|
|||
<button
|
||||
class="media-db-plugin-property-mappings-save-button {validationResult?.res ? 'mod-cta' : 'mod-muted'}"
|
||||
onclick={() => {
|
||||
// Sync propertyStates back to model.properties
|
||||
model.properties.forEach((p, i) => {
|
||||
Object.assign(p, propertyStates[i]);
|
||||
});
|
||||
if (model.validate().res) save(model);
|
||||
}}
|
||||
>Save
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
import { PropertyMappingModel } from './PropertyMapping';
|
||||
import PropertyMappingModelComponent from './PropertyMappingModelComponent.svelte';
|
||||
|
||||
export let models: PropertyMappingModel[] = [];
|
||||
export let save: (model: PropertyMappingModel) => void;
|
||||
interface Props {
|
||||
models?: PropertyMappingModel[];
|
||||
save: (model: PropertyMappingModel) => void;
|
||||
}
|
||||
|
||||
let { models = [], save }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="setting-item" style="display: flex; gap: 10px; flex-direction: column; align-items: stretch;">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue