- Translations completed for Front-End, Configs (e.g. Forms) and free text.

- Allowed_languages and default_language now part of Tenant Make iso Tenant - Introduction of Translation into Traicie Selection Specialist
2025-06-30 14:20:17 +02:00
parent 4338f09f5c
commit fbc9f44ac8
34 changed files with 1206 additions and 220 deletions
--- a/eveai_chat_client/static/assets/js/components/LanguageSelector.js
+++ b/eveai_chat_client/static/assets/js/components/LanguageSelector.js
@@ -0,0 +1,118 @@
+
+export const LanguageSelector = {
+    name: 'LanguageSelector',
+    props: {
+        initialLanguage: {
+            type: String,
+            default: 'nl'
+        },
+        supportedLanguageDetails: {
+            type: Object,
+            default: () => ({})
+        },
+        allowedLanguages: {
+            type: Array,
+            default: () => ['nl', 'en', 'fr', 'de']
+        }
+    },
+    computed: {
+        availableLanguages() {
+            // Maak een array van taalobjecten op basis van de toegestane talen
+            // en de ondersteunde taaldetails
+            const languages = [];
+
+            // Als er geen toegestane talen zijn of de lijst is leeg, gebruik een standaardlijst
+            const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0) 
+                ? this.allowedLanguages 
+                : ['nl', 'en', 'fr', 'de'];
+
+            // Loop door alle ondersteunde taaldetails
+            if (this.supportedLanguageDetails && Object.keys(this.supportedLanguageDetails).length > 0) {
+                // Vind talen die overeenkomen met toegestane taalcodes
+                for (const [langName, langDetails] of Object.entries(this.supportedLanguageDetails)) {
+                    const isoCode = langDetails['iso 639-1'];
+                    if (languagesToUse.includes(isoCode)) {
+                        languages.push({
+                            code: isoCode,
+                            name: langName,
+                            flag: langDetails.flag || ''
+                        });
+                    }
+                }
+            } else {
+                // Fallback als er geen taaldetails beschikbaar zijn
+                const defaultLanguages = {
+                    'nl': { name: 'Nederlands', flag: '🇳🇱' },
+                    'en': { name: 'English', flag: '🇬🇧' },
+                    'fr': { name: 'Français', flag: '🇫🇷' },
+                    'de': { name: 'Deutsch', flag: '🇩🇪' }
+                };
+
+                languagesToUse.forEach(code => {
+                    if (defaultLanguages[code]) {
+                        languages.push({
+                            code: code,
+                            name: defaultLanguages[code].code,
+                            flag: defaultLanguages[code].flag
+                        });
+                    }
+                });
+            }
+
+            console.log('LanguageSelector: availableLanguages computed:', languages);
+            return languages;
+        }
+    },
+    emits: ['language-changed'],
+    data() {
+        return {
+            selectedLanguage: this.initialLanguage,
+            currentLanguage: this.initialLanguage
+        };
+    },
+    mounted() {
+        console.log('LanguageSelector mounted with:', {
+            initialLanguage: this.initialLanguage,
+            selectedLanguage: this.selectedLanguage,
+            availableLanguages: this.availableLanguages
+        });
+
+        // Stuur het language-changed event uit met de initiële taal
+        console.log(`LanguageSelector: Emitting language-changed event for initial language ${this.initialLanguage}`);
+        this.$emit('language-changed', this.initialLanguage);
+    },
+    methods: {
+        changeLanguage(languageCode) {
+            console.log(`LanguageSelector: changeLanguage called with ${languageCode}, current: ${this.currentLanguage}`);
+
+            if (this.currentLanguage !== languageCode) {
+                console.log(`LanguageSelector: Emitting language-changed event for ${languageCode}`);
+                this.currentLanguage = languageCode;
+                this.$emit('language-changed', languageCode);
+            } else {
+                console.log(`LanguageSelector: No change needed, already ${languageCode}`);
+            }
+        }
+    },
+    template: `
+        <div class="language-selector">
+            <label for="language-select">Taal / Language:</label>
+            <div class="select-wrapper">
+                <select 
+                    id="language-select" 
+                    v-model="selectedLanguage" 
+                    @change="changeLanguage(selectedLanguage); currentLanguage = selectedLanguage"
+                    class="language-select"
+                >
+                    <option 
+                        v-for="lang in availableLanguages" 
+                        :key="lang.code" 
+                        :value="lang.code"
+                    >
+                        {{ lang.flag }} {{ lang.name }}
+                    </option>
+                </select>
+            </div>
+        </div>
+    `
+};