torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(vocab): update vocabulary label handling in VocabLessonView
All checks were successful
Deploy to production / deploy (push) Successful in 2m44s
Details

Browse Source 
- Replaced computed properties for current vocabulary preparation labels with direct references to new properties, enhancing clarity and maintainability.
- Improved the logic for populating native and target hints, ensuring accurate representation of vocabulary items.
- Removed outdated label swapping logic, streamlining the code and focusing on course-specific language names for better user experience.
This commit is contained in:
Torsten Schulz (local)
2026-04-07 11:22:22 +02:00
parent fe9322c098
commit ee338c0e49
1 changed files with 20 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/views/social/VocabLessonView.vue
View File

@@ -126,11 +126,11 @@
</p> </p>
<div class="vocab-prep-card"> <div class="vocab-prep-card">
<div class="vocab-prep-card__row"> <div class="vocab-prep-card__row">
<span class="vocab-prep-card__label">{{ currentPrepTopLabel }}</span> <span class="vocab-prep-card__label">{{ prepTargetLabel }}</span>
<div class="vocab-prep-card__target">{{ currentPrepItem.target }}</div> <div class="vocab-prep-card__target">{{ currentPrepItem.target }}</div>
</div> </div>
<div class="vocab-prep-card__row"> <div class="vocab-prep-card__row">
<span class="vocab-prep-card__label">{{ currentPrepBottomLabel }}</span> <span class="vocab-prep-card__label">{{ prepGlossLabel }}</span>
<div class="vocab-prep-card__gloss">{{ currentPrepItem.gloss || '—' }}</div> <div class="vocab-prep-card__gloss">{{ currentPrepItem.gloss || '—' }}</div>
</div> </div>
</div> </div>
@@ -1313,27 +1313,33 @@ export default {
|| this.$t('socialnetwork.vocab.courses.vocabPrepGlossLabel') || this.$t('socialnetwork.vocab.courses.vocabPrepGlossLabel')
).toUpperCase(); ).toUpperCase();
}, },
currentPrepTopLabel() {
return this._prepRowLabelFor('target');
},
currentPrepBottomLabel() {
return this._prepRowLabelFor('gloss');
},
prepItems() { prepItems() {
// Vorbereitung nur mit echten Paaren (Zielsprache + Übersetzung), // Vorbereitung nur mit echten Paaren (Zielsprache + Übersetzung),
// damit weder leere Gloss-Zeilen noch übergroße Listen entstehen. // damit weder leere Gloss-Zeilen noch übergroße Listen entstehen.
const out = []; const out = [];
const seen = new Set(); const seen = new Set();
const nativeHints = new Set( let nativeHints = new Set(
(this.importantVocab || []) (this.normalizedCorePatterns || [])
.map((x) => this.normalizeLessonVocabTerm(x?.learning)) .map((x) => this.normalizeLessonVocabTerm(x?.gloss))
.filter(Boolean) .filter(Boolean)
); );
const targetHints = new Set( let targetHints = new Set(
(this.importantVocab || []) (this.normalizedCorePatterns || [])
.map((x) => this.normalizeLessonVocabTerm(x?.reference)) .map((x) => this.normalizeLessonVocabTerm(x?.target))
.filter(Boolean) .filter(Boolean)
); );
if (nativeHints.size === 0 || targetHints.size === 0) {
nativeHints = new Set(
(this.importantVocab || [])
.map((x) => this.normalizeLessonVocabTerm(x?.learning))
.filter(Boolean)
);
targetHints = new Set(
(this.importantVocab || [])
.map((x) => this.normalizeLessonVocabTerm(x?.reference))
.filter(Boolean)
);
}
const orientPair = (target, gloss) => { const orientPair = (target, gloss) => {
const t = String(target || '').trim(); const t = String(target || '').trim();
const g = String(gloss || '').trim(); const g = String(gloss || '').trim();
@@ -1822,33 +1828,6 @@ export default {
} }
return { target: s, gloss: '' }; return { target: s, gloss: '' };
}, },
_prepRowLabelFor(side = 'target') {
const item = this.currentPrepItem;
if (!item) {
return side === 'target' ? this.prepTargetLabel : this.prepGlossLabel;
}
const nativeHints = new Set(
(this.importantVocab || [])
.map((x) => this.normalizeLessonVocabTerm(x?.learning))
.filter(Boolean)
);
const targetHints = new Set(
(this.importantVocab || [])
.map((x) => this.normalizeLessonVocabTerm(x?.reference))
.filter(Boolean)
);
const targetNorm = this.normalizeLessonVocabTerm(item.target);
const glossNorm = this.normalizeLessonVocabTerm(item.gloss);
const targetLooksNative = nativeHints.has(targetNorm) && !targetHints.has(targetNorm);
const glossLooksTarget = targetHints.has(glossNorm) && !nativeHints.has(glossNorm);
const targetLooksTarget = targetHints.has(targetNorm) && !nativeHints.has(targetNorm);
const glossLooksNative = nativeHints.has(glossNorm) && !targetHints.has(glossNorm);
const shouldSwapLabels = targetLooksNative && glossLooksTarget && !(targetLooksTarget && glossLooksNative);
if (shouldSwapLabels) {
return side === 'target' ? this.prepGlossLabel : this.prepTargetLabel;
}
return side === 'target' ? this.prepTargetLabel : this.prepGlossLabel;
},
corePatternToDisplayString(p) { corePatternToDisplayString(p) {
const n = this.normalizeCorePatternEntry(p); const n = this.normalizeCorePatternEntry(p);
if (!n) return ''; if (!n) return '';