Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add translation editing support for base recipe reference fields
All checks were successful
CI / update (push) Successful in 1m10s
Details

Browse Source 
Enhanced translation approval UI to allow editing translated text in base
recipe references:

- EditableIngredients: Added support for editing labelOverride, itemsBefore,
  and itemsAfter fields with visual distinction for base recipe references
- EditableInstructions: Added support for editing labelOverride, stepsBefore,
  and stepsAfter fields with organized sections
- TranslationApproval: Updated German side to display base recipe reference
  fields (labelOverride, items/steps before/after) in read-only view

Users can now edit all auto-translated fields in base recipe references
including additional ingredients/instructions added before or after the
base recipe content.
This commit is contained in:
Alexander Bocken
2026-01-04 20:54:43 +01:00
parent 7e66445312
commit 95e6d78619
3 changed files with 352 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/lib/components/EditableIngredients.svelte
View File

@@ -22,6 +22,31 @@
handleChange();
}
// Base recipe reference handlers
function updateLabelOverride(groupIndex: number, event: Event) {
const target = event.target as HTMLInputElement;
ingredients[groupIndex].labelOverride = target.value;
handleChange();
}
function updateItemBefore(groupIndex: number, itemIndex: number, field: string, event: Event) {
const target = event.target as HTMLInputElement;
if (!ingredients[groupIndex].itemsBefore) {
ingredients[groupIndex].itemsBefore = [];
}
ingredients[groupIndex].itemsBefore[itemIndex][field] = target.value;
handleChange();
}
function updateItemAfter(groupIndex: number, itemIndex: number, field: string, event: Event) {
const target = event.target as HTMLInputElement;
if (!ingredients[groupIndex].itemsAfter) {
ingredients[groupIndex].itemsAfter = [];
}
ingredients[groupIndex].itemsAfter[itemIndex][field] = target.value;
handleChange();
}
// Check if a group name was re-translated
function isGroupNameTranslated(groupIndex: number): boolean {
return translationMetadata?.[groupIndex]?.nameTranslated ?? false;
@@ -121,46 +146,157 @@
box-shadow: 0 0 0 transparent;
}
}
.reference-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
background: var(--nord9);
color: var(--nord6);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.reference-section {
padding: 0.5rem;
background: var(--nord2);
border-radius: 4px;
margin-bottom: 0.5rem;
}
@media(prefers-color-scheme: light) {
.reference-section {
background: var(--nord4);
}
}
.reference-section-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--nord8);
margin-bottom: 0.25rem;
}
</style>
<div class="ingredients-editor">
{#each ingredients as group, groupIndex}
<div class="ingredient-group">
<input
type="text"
class="group-name"
class:retranslated={isGroupNameTranslated(groupIndex)}
value={group.name || ''}
on:input={(e) => updateIngredientGroupName(groupIndex, e)}
placeholder="Ingredient group name"
/>
{#each group.list as item, itemIndex}
<div class="ingredient-item">
{#if group.type === 'reference'}
<span class="reference-badge">🔗 Base Recipe Reference</span>
{#if group.labelOverride !== undefined}
<input
type="text"
class="amount"
value={item.amount || ''}
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'amount', e)}
placeholder="Amt"
class="group-name"
value={group.labelOverride || ''}
on:input={(e) => updateLabelOverride(groupIndex, e)}
placeholder="Label override (optional)"
/>
<input
type="text"
class="unit"
class:retranslated={isItemTranslated(groupIndex, itemIndex)}
value={item.unit || ''}
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'unit', e)}
placeholder="Unit"
/>
<input
type="text"
class="name"
class:retranslated={isItemTranslated(groupIndex, itemIndex)}
value={item.name || ''}
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'name', e)}
placeholder="Ingredient name"
/>
</div>
{/each}
{/if}
{#if group.itemsBefore && group.itemsBefore.length > 0}
<div class="reference-section">
<div class="reference-section-label">Items Before Base Recipe:</div>
{#each group.itemsBefore as item, itemIndex}
<div class="ingredient-item">
<input
type="text"
class="amount"
value={item.amount || ''}
on:input={(e) => updateItemBefore(groupIndex, itemIndex, 'amount', e)}
placeholder="Amt"
/>
<input
type="text"
class="unit"
class:retranslated={isItemTranslated(groupIndex, itemIndex)}
value={item.unit || ''}
on:input={(e) => updateItemBefore(groupIndex, itemIndex, 'unit', e)}
placeholder="Unit"
/>
<input
type="text"
class="name"
class:retranslated={isItemTranslated(groupIndex, itemIndex)}
value={item.name || ''}
on:input={(e) => updateItemBefore(groupIndex, itemIndex, 'name', e)}
placeholder="Ingredient name"
/>
</div>
{/each}
</div>
{/if}
{#if group.itemsAfter && group.itemsAfter.length > 0}
<div class="reference-section">
<div class="reference-section-label">Items After Base Recipe:</div>
{#each group.itemsAfter as item, itemIndex}
<div class="ingredient-item">
<input
type="text"
class="amount"
value={item.amount || ''}
on:input={(e) => updateItemAfter(groupIndex, itemIndex, 'amount', e)}
placeholder="Amt"
/>
<input
type="text"
class="unit"
class:retranslated={isItemTranslated(groupIndex, itemIndex)}
value={item.unit || ''}
on:input={(e) => updateItemAfter(groupIndex, itemIndex, 'unit', e)}
placeholder="Unit"
/>
<input
type="text"
class="name"
class:retranslated={isItemTranslated(groupIndex, itemIndex)}
value={item.name || ''}
on:input={(e) => updateItemAfter(groupIndex, itemIndex, 'name', e)}
placeholder="Ingredient name"
/>
</div>
{/each}
</div>
{/if}
{:else}
<input
type="text"
class="group-name"
class:retranslated={isGroupNameTranslated(groupIndex)}
value={group.name || ''}
on:input={(e) => updateIngredientGroupName(groupIndex, e)}
placeholder="Ingredient group name"
/>
{#each group.list as item, itemIndex}
<div class="ingredient-item">
<input
type="text"
class="amount"
value={item.amount || ''}
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'amount', e)}
placeholder="Amt"
/>
<input
type="text"
class="unit"
class:retranslated={isItemTranslated(groupIndex, itemIndex)}
value={item.unit || ''}
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'unit', e)}
placeholder="Unit"
/>
<input
type="text"
class="name"
class:retranslated={isItemTranslated(groupIndex, itemIndex)}
value={item.name || ''}
on:input={(e) => updateIngredientItem(groupIndex, itemIndex, 'name', e)}
placeholder="Ingredient name"
/>
</div>
{/each}
{/if}
</div>
{/each}
</div>