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

Property mapping section Table view

Browse source
This commit is contained in:
ltctceplrm 2025-12-10 01:30:19 +01:00
parent f8b6ae8761
commit b2835dc6e3
1 changed files with 117 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

160
src/settings/PropertyMappingModelComponent.svelte
View file

@ -11,71 +11,145 @@
let { model, save }: Props = $props(); let { model, save }: Props = $props();
let validationResult: { res: boolean; err?: Error } | undefined = $derived(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">
{#each propertyStates as property, i} <table class="media-db-plugin-property-mappings-table">
<div class="media-db-plugin-property-mapping-element"> <thead>
<div class="media-db-plugin-property-mapping-element-property-name-wrapper"> <tr>
<pre class="media-db-plugin-property-mapping-element-property-name"><code>{property.property}</code></pre> <th class="col-property">Property</th>
</div> <th class="col-mapping">Mapping</th>
{#if property.locked} <th class="col-new-name">New name</th>
<div class="media-db-plugin-property-binding-text">property cannot be remapped</div> <th class="col-wikilink">Wikilink</th>
{:else} </tr>
<div style="display: flex; align-items: center; gap: 8px;"> </thead>
<select class="dropdown" bind:value={property.mapping}> <tbody>
{#each propertyMappingOptions as remappingOption} {#each model.properties as property}
<option value={remappingOption}> <tr>
{remappingOption} <td class="col-property">
</option> <code>{property.property}</code>
{/each} </td>
</select>
{#if property.mapping === PropertyMappingOption.Map} {#if property.locked}
<Icon iconName="arrow-right" /> <td class="col-locked" colspan="3">
<div class="media-db-plugin-property-mapping-to"> <div class="media-db-plugin-property-binding-text">property cannot be remapped</div>
<input type="text" spellcheck="false" bind:value={property.newProperty} /> </td>
</div> {:else}
{/if} <td class="col-mapping">
<!-- Wikilink checkbox --> <select class="dropdown" bind:value={property.mapping}>
<label class="media-db-plugin-property-mapping-wikilink-label" title="Convert value to wikilink ([[value]])"> {#each propertyMappingOptions as remappingOption}
<input type="checkbox" bind:checked={property.wikilink} /> <option value={remappingOption}>
<Icon iconName="link" /> {remappingOption}
<span>Wikilink</span> </option>
</label> {/each}
</div> </select>
{/if} </td>
</div>
{/each} <td class="col-new-name">
</div> {#if property.mapping === PropertyMappingOption.Map}
<div class="media-db-plugin-property-mapping-to">
<Icon iconName="arrow-right" />
<input class="media-db-plugin-property-mapping-input" type="text" spellcheck="false" bind:value={property.newProperty} />
</div>
{:else}
<span class="media-db-plugin-property-mapping-to-disabled">—</span>
{/if}
</td>
<td class="col-wikilink">
<label class="media-db-plugin-property-mapping-wikilink-label" title="Convert value to wikilink ([[value]])">
<input type="checkbox" bind:checked={property.wikilink} />
</label>
</td>
{/if}
</tr>
{/each}
</tbody>
</table>
{#if !validationResult?.res} {#if !validationResult?.res}
<div class="media-db-plugin-property-mapping-validation"> <div class="media-db-plugin-property-mapping-validation">
{validationResult?.err?.message} {validationResult?.err?.message}
</div> </div>
{/if} {/if}
<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
</button> </button>
</div> </div>
<style> <style>
.media-db-plugin-property-mapping-wikilink-label { .media-db-plugin-property-mappings-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed; /* prevent overflow from wide cells */
}
/* remove excessive left padding and keep within container */
.media-db-plugin-property-mappings-table th,
.media-db-plugin-property-mappings-table td {
padding: 2px 4px;
border-bottom: 1px solid var(--background-modifier-border);
vertical-align: middle;
}
/* column widths */
.col-property {
width: 25%;
white-space: nowrap;
}
.col-mapping {
width: 20%;
}
.col-new-name {
width: 40%;
}
.col-wikilink {
width: 15%;
text-align: center;
}
/* ensure inner controls don't push table wider than container */
.media-db-plugin-property-mapping-to {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
min-width: 0;
}
.media-db-plugin-property-mapping-input,
.media-db-plugin-property-mappings-table select.dropdown {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.media-db-plugin-property-mapping-wikilink-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.95em; font-size: 0.95em;
cursor: pointer; cursor: pointer;
} }
.media-db-plugin-property-mapping-to-disabled {
color: var(--text-muted);
}
/* avoid extra left indentation from <pre> */
.media-db-plugin-property-mappings-table code {
padding: 0;
margin: 0;
}
</style> </style>