afiqzudinhadi/obsidian-media-db-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Preliminary fix in rune mode for remapping

Browse source 
Based on https://github.com/sveltejs/svelte/pull/15107#discussion_r1945486274
This commit is contained in:
ltctceplrm 2025-08-02 00:16:42 +02:00
parent e17271b8e9
commit 14fbbf8170
2 changed files with 20 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/settings/PropertyMappingModelComponent.svelte
View file

@ -3,18 +3,23 @@
import { capitalizeFirstLetter } from '../utils/Utils'; import { capitalizeFirstLetter } from '../utils/Utils';
import Icon from './Icon.svelte'; import Icon from './Icon.svelte';
export let model: PropertyMappingModel; interface Props {
export let save: (model: PropertyMappingModel) => void; 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> </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>
@ -48,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

8
src/settings/PropertyMappingModelsComponent.svelte
View file

@ -2,8 +2,12 @@
import { PropertyMappingModel } from './PropertyMapping'; import { PropertyMappingModel } from './PropertyMapping';
import PropertyMappingModelComponent from './PropertyMappingModelComponent.svelte'; import PropertyMappingModelComponent from './PropertyMappingModelComponent.svelte';
export let models: PropertyMappingModel[] = []; interface Props {
export let save: (model: PropertyMappingModel) => void; models?: PropertyMappingModel[];
save: (model: PropertyMappingModel) => void;
}
let { models = [], save }: Props = $props();
</script> </script>
<div class="setting-item" style="display: flex; gap: 10px; flex-direction: column; align-items: stretch;"> <div class="setting-item" style="display: flex; gap: 10px; flex-direction: column; align-items: stretch;">