From df64c0a4b5397a5f4d476e0c8fa5da83c0833c36 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 30 Dec 2025 18:44:35 +0100
Subject: [PATCH] Update VocabPracticeDialog and VocabChapterView components to
 manage practice dialog state

- Changed the close button visibility in VocabPracticeDialog to false for a cleaner UI.
- Enhanced VocabChapterView to manage the practice dialog state with a new `practiceOpen` flag.
- Updated the `openPractice` method to handle the dialog's open and close events, ensuring proper state management.
---
 .../socialnetwork/VocabPracticeDialog.vue     | 12 ++-
 .../src/views/social/VocabChapterView.vue     | 81 ++++++++++---------
 2 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue b/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue
index 21c9492..1110b15 100644
--- a/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/VocabPracticeDialog.vue
@@ -2,7 +2,7 @@
   <DialogWidget
     ref="dialog"
     :title="$t('socialnetwork.vocab.practice.title')"
-    :show-close="true"
+    :show-close="false"
     :buttons="buttons"
     :modal="true"
     :isTitleTranslated="false"
@@ -10,7 +10,6 @@
     height="32em"
     name="VocabPracticeDialog"
     display="flex"
-    @close="close"
   >
     <div class="layout">
       <div class="left">
@@ -112,6 +111,7 @@ export default {
   data() {
     return {
       openParams: null, // { languageId, chapterId }
+      onClose: null,
       loading: false,
       allVocabs: false,
       simpleMode: false,
@@ -168,12 +168,13 @@ export default {
     },
   },
   methods: {
-    open({ languageId, chapterId }) {
+    open({ languageId, chapterId, onClose = null }) {
       if (this.autoAdvanceTimer) {
         clearTimeout(this.autoAdvanceTimer);
         this.autoAdvanceTimer = null;
       }
       this.openParams = { languageId, chapterId };
+      this.onClose = typeof onClose === 'function' ? onClose : null;
       this.allVocabs = false;
       this.simpleMode = false;
       this.correctCount = 0;
@@ -191,7 +192,12 @@ export default {
         clearTimeout(this.autoAdvanceTimer);
         this.autoAdvanceTimer = null;
       }
+      const cb = this.onClose;
+      this.onClose = null;
       this.$refs.dialog.close();
+      try {
+        if (cb) cb();
+      } catch (_) {}
     },
     normalize(s) {
       return String(s || '')
diff --git a/frontend/src/views/social/VocabChapterView.vue b/frontend/src/views/social/VocabChapterView.vue
index a40c748..d7cf7cd 100644
--- a/frontend/src/views/social/VocabChapterView.vue
+++ b/frontend/src/views/social/VocabChapterView.vue
@@ -5,45 +5,47 @@
     <div v-if="loading">{{ $t('general.loading') }}</div>
     <div v-else-if="!chapter">{{ $t('socialnetwork.vocab.notFound') }}</div>
     <div v-else>
-      <div class="row">
-        <button @click="back">{{ $t('general.back') }}</button>
-        <button v-if="vocabs.length" @click="openPractice">{{ $t('socialnetwork.vocab.practice.open') }}</button>
-      </div>
-
-      <div class="row" v-if="chapter.isOwner">
-        <h3>{{ $t('socialnetwork.vocab.addVocab') }}</h3>
-        <div class="grid">
-          <label>
-            {{ $t('socialnetwork.vocab.learningWord') }}
-            <input v-model="learning" type="text" />
-          </label>
-          <label>
-            {{ $t('socialnetwork.vocab.referenceWord') }}
-            <input v-model="reference" type="text" />
-          </label>
+      <div v-show="!practiceOpen">
+        <div class="row">
+          <button @click="back">{{ $t('general.back') }}</button>
+          <button v-if="vocabs.length" @click="openPractice">{{ $t('socialnetwork.vocab.practice.open') }}</button>
         </div>
-        <button :disabled="saving || !canSave" @click="add">
-          {{ saving ? $t('socialnetwork.vocab.saving') : $t('socialnetwork.vocab.add') }}
-        </button>
+
+        <div class="row" v-if="chapter.isOwner">
+          <h3>{{ $t('socialnetwork.vocab.addVocab') }}</h3>
+          <div class="grid">
+            <label>
+              {{ $t('socialnetwork.vocab.learningWord') }}
+              <input v-model="learning" type="text" />
+            </label>
+            <label>
+              {{ $t('socialnetwork.vocab.referenceWord') }}
+              <input v-model="reference" type="text" />
+            </label>
+          </div>
+          <button :disabled="saving || !canSave" @click="add">
+            {{ saving ? $t('socialnetwork.vocab.saving') : $t('socialnetwork.vocab.add') }}
+          </button>
+        </div>
+
+        <hr />
+
+        <div v-if="vocabs.length === 0">{{ $t('socialnetwork.vocab.noVocabs') }}</div>
+        <table v-else class="tbl">
+          <thead>
+            <tr>
+              <th>{{ $t('socialnetwork.vocab.learningWord') }}</th>
+              <th>{{ $t('socialnetwork.vocab.referenceWord') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="v in vocabs" :key="v.id">
+              <td>{{ v.learning }}</td>
+              <td>{{ v.reference }}</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-
-      <hr />
-
-      <div v-if="vocabs.length === 0">{{ $t('socialnetwork.vocab.noVocabs') }}</div>
-      <table v-else class="tbl">
-        <thead>
-          <tr>
-            <th>{{ $t('socialnetwork.vocab.learningWord') }}</th>
-            <th>{{ $t('socialnetwork.vocab.referenceWord') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="v in vocabs" :key="v.id">
-            <td>{{ v.learning }}</td>
-            <td>{{ v.reference }}</td>
-          </tr>
-        </tbody>
-      </table>
     </div>
   </div>
 
@@ -61,6 +63,7 @@ export default {
     return {
       loading: false,
       saving: false,
+      practiceOpen: false,
       chapter: null,
       vocabs: [],
       learning: '',
@@ -77,9 +80,13 @@ export default {
       this.$router.push(`/socialnetwork/vocab/${this.$route.params.languageId}`);
     },
     openPractice() {
+      this.practiceOpen = true;
       this.$refs.practiceDialog?.open?.({
         languageId: this.$route.params.languageId,
         chapterId: this.$route.params.chapterId,
+        onClose: () => {
+          this.practiceOpen = false;
+        },
       });
     },
     async load() {