feat(VocabPracticeDialog, VocabCourseView): implement event dispatch for hard vocabulary changes
All checks were successful
Deploy to production / deploy (push) Successful in 1m55s
All checks were successful
Deploy to production / deploy (push) Successful in 1m55s
- Added event dispatching for 'yourpart:hardvocab:changed' in both VocabPracticeDialog and VocabCourseView components to notify changes in hard vocabulary items. - Implemented event handling in VocabCourseView to refresh the hard vocabulary list when the event is triggered, ensuring UI consistency across components. - Included error handling for environments that do not support CustomEvent, enhancing robustness.
This commit is contained in:
@@ -339,6 +339,16 @@ export default {
|
|||||||
} catch (_) {
|
} catch (_) {
|
||||||
// ignore quota/private-mode issues
|
// ignore quota/private-mode issues
|
||||||
}
|
}
|
||||||
|
try {
|
||||||
|
window.dispatchEvent(new CustomEvent('yourpart:hardvocab:changed', {
|
||||||
|
detail: {
|
||||||
|
courseId: this.openParams?.courseId || null,
|
||||||
|
storageKey: key
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
} catch (_) {
|
||||||
|
// ignore environments without CustomEvent
|
||||||
|
}
|
||||||
},
|
},
|
||||||
getHardKey(item) {
|
getHardKey(item) {
|
||||||
const learning = this.normalize(item?.learning || '');
|
const learning = this.normalize(item?.learning || '');
|
||||||
|
|||||||
@@ -607,6 +607,13 @@ export default {
|
|||||||
delete next[entryKey];
|
delete next[entryKey];
|
||||||
localStorage.setItem(key, JSON.stringify(next));
|
localStorage.setItem(key, JSON.stringify(next));
|
||||||
this.refreshHardVocabList();
|
this.refreshHardVocabList();
|
||||||
|
try {
|
||||||
|
window.dispatchEvent(new CustomEvent('yourpart:hardvocab:changed', {
|
||||||
|
detail: { courseId: this.courseId, storageKey: key }
|
||||||
|
}));
|
||||||
|
} catch (_) {
|
||||||
|
// ignore environments without CustomEvent
|
||||||
|
}
|
||||||
} catch (_) {
|
} catch (_) {
|
||||||
// ignore storage parse/write errors
|
// ignore storage parse/write errors
|
||||||
}
|
}
|
||||||
@@ -614,6 +621,13 @@ export default {
|
|||||||
handleWindowFocus() {
|
handleWindowFocus() {
|
||||||
this.refreshHardVocabList();
|
this.refreshHardVocabList();
|
||||||
},
|
},
|
||||||
|
handleHardVocabChanged(event) {
|
||||||
|
const detailCourseId = event?.detail?.courseId;
|
||||||
|
if (detailCourseId != null && String(detailCourseId) !== String(this.courseId)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.refreshHardVocabList();
|
||||||
|
},
|
||||||
async loadCourse() {
|
async loadCourse() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
try {
|
try {
|
||||||
@@ -1021,9 +1035,11 @@ export default {
|
|||||||
]);
|
]);
|
||||||
this.refreshHardVocabList();
|
this.refreshHardVocabList();
|
||||||
window.addEventListener('focus', this.handleWindowFocus);
|
window.addEventListener('focus', this.handleWindowFocus);
|
||||||
|
window.addEventListener('yourpart:hardvocab:changed', this.handleHardVocabChanged);
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
window.removeEventListener('focus', this.handleWindowFocus);
|
window.removeEventListener('focus', this.handleWindowFocus);
|
||||||
|
window.removeEventListener('yourpart:hardvocab:changed', this.handleHardVocabChanged);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user