Merge pull request #234 from devmount/bugs/fix-locale-processing

Fix locale processing

README.md

@@ -8,8 +8,8 @@
 
 A song management web application to store, sync and present songs and setlists, based on [Vue.js](//vuejs.org) and [Firebase](//firebase.google.com). Head over to the docs ([EN](https://github.com/devmount/SongDrive/blob/main/frontend/src/docs/docs.en.md), [DE](https://github.com/devmount/SongDrive/blob/main/frontend/src/docs/docs.en.md)) for more information about SongDrive and how to get started.
 
-> [!NOTE]  
-> SongDrive is currently being restructured to have its own backend with database, authentication and API endpoints for the frontend. Find more information about this in https://github.com/devmount/SongDrive/issues/213.
+> [!NOTE]
+> SongDrive is currently being restructured to have its own backend with database, authentication and API endpoints for the frontend. Find more information about this in <https://github.com/devmount/SongDrive/issues/213>.
 
 ## Preview
 

frontend/README.md

@@ -34,10 +34,10 @@ This directory contains all frontend functionality of SongDrive.
 9. To give necessary permisstions, click + Start collection again. Input *permissions* as Collection ID and click Next. Insert the copied UID as Document ID and add the following field to the document:
     - `role` = string | `admin`
 
-10. Now your app is ready to be launched. Either start the development server with hot reload at `localhost:8080` ...
+10. Now your app is ready to be launched. Either start the development server with hot reload at `localhost:5173` ...
 
     ```bash
-    npm run serve
+    npm run dev
     ```
 
 11. ... or create an optimized production build with minification. All build files can be found in the `dist` directory.

frontend/package.json

@@ -32,7 +32,7 @@
 	"dependencies": {
 		"@kyvg/vue3-notification": "^3.1.3",
 		"@tabler/icons-vue": "^3.3.0",
-		"@vuepic/vue-datepicker": "^10.0.0",
+		"@vuepic/vue-datepicker": "^11.0.0",
 		"@vueuse/core": "^12.3.0",
 		"@vueuse/math": "^12.3.0",
 		"@zip.js/zip.js": "^2.7.45",
@@ -47,7 +47,7 @@
 		"vue-i18n": "^11.0.1",
 		"vue-prism-editor": "^2.0.0-alpha.2",
 		"vue-router": "^4.0.16",
-		"vue3-carousel": "^0.12.0",
+		"vue3-carousel": "^0.13.0",
 		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {

frontend/src/elements/Tag.vue

@@ -5,7 +5,7 @@
 		<slot>
 			<icon-tag class="shrink-0 w-4 h-4 stroke-1.5" />
 			<div v-if="tag" class="whitespace-nowrap">
-				{{ tag[locale] ? tag[locale] : tag.key }}
+				{{ tag[loc] ? tag[loc] : tag.key }}
 			</div>
 			<icon-x v-if="closable" class="cursor-pointer w-4 h-4 stroke-1.5"  @click="emit('close')" />
 		</slot>
@@ -20,6 +20,7 @@ import { IconTag, IconX } from '@tabler/icons-vue';
 
 // component constants
 const { locale } = useI18n({ useScope: 'global' });
+const loc = locale.value.substring(0, 2);
 
 // component properties
 const props = defineProps({

frontend/src/main.js

@@ -39,7 +39,7 @@ const messages = {
 	'en': en, // English
 };
 const loc = !('lang' in localStorage)
-	? navigator.language || navigator.userLanguage
+	? navigator.language.substring(0, 2) || navigator.userLanguage.substring(0, 2)
 	: localStorage.getItem('lang');
 const i18n = createI18n({
 	legacy: false,
@@ -73,7 +73,7 @@ marked.use({
 app.provide('marked', marked);
 
 // extend Object for filtering
-Object.filter = (obj, predicate) => 
+Object.filter = (obj, predicate) =>
 	Object.keys(obj)
 		.filter(key => predicate(obj[key]))
 		.reduce((res, key) => (res[key] = obj[key], res), {});

frontend/src/modals/InfoSongSyntax.vue

@@ -20,10 +20,11 @@ import Modal from '@/elements/Modal.vue';
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 
 // cheatsheet contents
 const cheatsheets = { de, en };
-const lang = ['de', 'en'].includes(locale.value) ? locale.value : 'en';
+const lang = ['de', 'en'].includes(loc) ? loc : 'en';
 
 // component properties
 const props = defineProps({

frontend/src/modals/SetlistSet.vue

@@ -47,7 +47,7 @@
 						class="lg:hidden"
 						pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
 					/>
-					<div class="text-blade-500">{{ humanDate(setlist.date, locale) }}</div>
+					<div class="text-blade-500">{{ humanDate(setlist.date, loc) }}</div>
 					<div v-if="error.date & !setlist.date" class="text-rose-600">
 						{{ t('error.requiredDate') }}
 					</div>
@@ -60,8 +60,8 @@
 						auto-apply
 						:dark="isDark"
 						:enable-time-picker="false"
-						:locale="locale"
-						:format-locale="calendarLanguage[locale]"
+						:locale="loc"
+						:format-locale="calendarLanguage[loc]"
 						@update:model-value="updateDate"
 					>
 						<template #arrow-left>
@@ -102,7 +102,7 @@
 							</template>
 							<div class="max-h-80 overflow-y-scroll flex flex-col gap-0.5 !p-2 text-sm">
 								<tag
-									v-for="tag in sortTags(tags, locale)" :key="tag.key"
+									v-for="tag in sortTags(tags, loc)" :key="tag.key"
 									:tag="tag"
 									@click="filter.tag = tag.key"
 									class="cursor-pointer"
@@ -304,6 +304,8 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
+
 const calendarLanguage = {
 	en: enGB,
 	de: de
@@ -455,7 +457,7 @@ const performedSongs = computed(() => {
 	setlists.forEach(setlist => {
 		setlist.songs.forEach(song => {
 			if (!(song.id in songs)) {
-				songs[song.id] = humanDate(setlist.date, locale.value, false);
+				songs[song.id] = humanDate(setlist.date, loc, false);
 			}
 		});
 	});

frontend/src/modals/TagAssign.vue

@@ -25,7 +25,7 @@
 							type="checkbox"
 							class="w-6 h-6 ml-2"
 						/>
-						{{ tag[locale] ? tag[locale] : tag.key }}
+						{{ tag[loc] ? tag[loc] : tag.key }}
 					</label>
 				</div>
 			</div>
@@ -39,7 +39,7 @@
 					<div class="text-lg text-center mb-2">{{ t('text.selection') }}</div>
 					<div v-for="tag in sortedSelectedTags" :key="tag" class="flex items-center gap-2">
 						<icon-tag class="w-4 h-4" />
-						{{ tags[tag][locale] ? tags[tag][locale] : tag }}
+						{{ tags[tag][loc] ? tags[tag][loc] : tag }}
 						<button
 							class="ml-auto"
 							@click="selectedTags = selectedTags.filter(k => k !== tag)"
@@ -79,6 +79,7 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 
 // user input properties
 const selectedTags = ref([]);
@@ -109,7 +110,7 @@ const filteredTags = computed(() => {
 				const tag = props.tags[key];
 				let search = searchInput.value.toLowerCase();
 				// search in tag labels
-				let label = tag[locale.value] ? tag[locale.value] : key;
+				let label = tag[loc] ? tag[loc] : key;
 				if (label.toLowerCase().indexOf(search) !== -1) {
 					tags[key] = tag;
 				}

frontend/src/partials/Login.vue

@@ -11,6 +11,7 @@
 					v-model="email"
 					:class="{ '!border-rose-600': error.email }"
 					:placeholder="t('field.email')"
+					autocomplete="email"
 					required
 				/>
 				<input

frontend/src/partials/SongFooter.vue

@@ -56,6 +56,7 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 
 // component properties
 const props = defineProps({
@@ -66,6 +67,6 @@ const props = defineProps({
 // sort tag list
 const sortedTags = computed(() => {
 	const songTags = props.song.tags.map(t => props.tags[t]);
-	return sortTags(songTags, locale.value);
+	return sortTags(songTags, loc);
 });
 </script>

frontend/src/views/Documentation.vue

@@ -63,7 +63,7 @@
 				<div class="text-center">{{ t('text.foundABug') }}</div>
 				<div class="flex gap-4 justify-center items-center">
 					<a
-						:href="'https://github.com/devmount/SongDrive/blob/main/frontend/src/docs/docs.' + locale + '.md'"
+						:href="'https://github.com/devmount/SongDrive/blob/main/frontend/src/docs/docs.' + loc + '.md'"
 						target="_blank"
 					>
 						<secondary-button>
@@ -73,7 +73,7 @@
 						</secondary-button>
 					</a>
 					<a
-						:href="'https://github.com/devmount/SongDrive/edit/main/frontend/src/docs/docs.' + locale + '.md'"
+						:href="'https://github.com/devmount/SongDrive/edit/main/frontend/src/docs/docs.' + loc + '.md'"
 						target="_blank"
 					>
 						<secondary-button>
@@ -109,10 +109,11 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 
 // documentation contents
 const docs = { de, en };
-const lang = ['de', 'en'].includes(locale.value) ? locale.value : 'en';
+const lang = ['de', 'en'].includes(loc) ? loc : 'en';
 
 // convert spaces to dashes
 const dashCase = (text) => {

frontend/src/views/SetlistShow.vue

@@ -531,6 +531,7 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 const route = useRoute();
 const router = useRouter();
 const setlistKey = route.params.id;
@@ -995,7 +996,7 @@ const exportOsz = async () => {
 			// get song object
 			const song = props.songs[setlist.value.songs[key].id];
 			// check for translations
-			const lang = !('lang' in localStorage) ? locale.value : localStorage.getItem('lang');
+			const lang = !('lang' in localStorage) ? loc : localStorage.getItem('lang');
 			let tSong = null;
 			if (lang !== song.language && song.translations.length > 0) {
 				const tKey = song.translations.find((t) => t.endsWith(`-${lang}`));

frontend/src/views/Settings.vue

@@ -481,6 +481,7 @@ import {
 
 // component constants
 const { t, locale, availableLocales } = useI18n({ useScope: 'global' });
+const loc = locale.value.substring(0, 2);
 
 // global properties
 const fb = inject('firebaseApp');
@@ -695,11 +696,11 @@ const uiLanguages = computed(() => {
 	});
 	return uiLanguages;
 });
-const initLang = !('lang' in localStorage) ? locale.value : localStorage.getItem('lang');
+const initLang = !('lang' in localStorage) ? loc : localStorage.getItem('lang');
 const lang = ref(initLang);
 watch(lang, (newValue) => {
 	locale.value = newValue;
-	localStorage.setItem('lang', newValue);
+	localStorage.setItem('lang', newValue.substring(0, 2));
 });
 
 // handle theme mode

frontend/src/views/SongShow.vue

@@ -294,7 +294,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { whenever } from '@vueuse/core';
 import Dropdown from '@/elements/Dropdown.vue';
-import pdfMake from "pdfmake/build/pdfmake";
+import pdfMake, { log } from "pdfmake/build/pdfmake";
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SongContent from '@/partials/SongContent.vue';
@@ -327,6 +327,8 @@ import {
 
 // component constants
 const { t, availableLocales } = useI18n();
+console.log(availableLocales);
+
 const route      = useRoute();
 const router     = useRouter();
 const songId     = route.params.id;

frontend/src/views/Songs.vue

@@ -52,7 +52,7 @@
 					<icon-chevron-right class="w-5 h-5 stroke-1.5" />
 				</secondary-button>
 			</div>
-		</div>	
+		</div>
 
 		<!-- empty songs collection -->
 		<div v-if="noSongs" class="text-blade-500">
@@ -124,7 +124,7 @@
 							<icon-filter class="absolute top-0 left-2 w-5 h-5 stroke-1.5 text-blade-500" />
 							<select v-model="filter.tag" class="w-full pl-8">
 								<option v-for="tag in tags" :key="tag.key" :value="tag.key">
-									{{ tag[locale] ? tag[locale] : tag.key }}
+									{{ tag[loc] ? tag[loc] : tag.key }}
 								</option>
 							</select>
 						</label>
@@ -290,6 +290,7 @@ import {
 
 // component constantes
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 const route = useRoute();
 const router = useRouter();
 
@@ -340,7 +341,7 @@ const isFiltered = computed(() => {
 // pagination and sorting
 const page       = ref(0);
 const listLength = 16;
-const order = reactive({ 
+const order = reactive({
 	field: 'title',
 	ascending: true
 });