Feature/auto generate crowdin data (#1071)

* add translated key

* update code generation for crowdin generation

* use composition api and minor styling changes

frontend/components/global/LanguageDialog.vue

@@ -1,33 +1,46 @@
 <template>
-<BaseDialog v-model="dialog" :icon="$globals.icons.translate" :title="$t('language-dialog.choose-language')">
-  <v-card-text>
-    {{ $t('language-dialog.select-description') }}
-    <v-select
-      v-model="locale"
-      :items="locales"
-      item-text="name"
-      menu-props="auto"
-      outlined
-    ></v-select>
-    <i18n path="language-dialog.how-to-contribute-description">
-      <template #read-the-docs-link>
-        <a href="https://docs.mealie.io/contributors/translating/" target="_blank">{{ $t("language-dialog.read-the-docs") }}</a>
-      </template>
-    </i18n>
-  </v-card-text>
-</BaseDialog>
+  <BaseDialog v-model="dialog" :icon="$globals.icons.translate" :title="$tc('language-dialog.choose-language')">
+    <v-card-text>
+      {{ $t("language-dialog.select-description") }}
+      <v-autocomplete
+        v-model="locale"
+        :items="locales"
+        item-text="name"
+        menu-props="auto"
+        class="my-3"
+        hide-details
+        outlined
+        offset
+      >
+        <template #item="{ item }">
+          <v-list-item-content>
+            <v-list-item-title v-text="item.name"></v-list-item-title>
+            <v-list-item-subtitle> {{ item.progress }}% {{ $tc("language-dialog.translated") }} </v-list-item-subtitle>
+          </v-list-item-content>
+        </template>
+      </v-autocomplete>
+      <i18n path="language-dialog.how-to-contribute-description">
+        <template #read-the-docs-link>
+          <a href="https://docs.mealie.io/contributors/translating/" target="_blank">{{
+            $t("language-dialog.read-the-docs")
+          }}</a>
+        </template>
+      </i18n>
+    </v-card-text>
+  </BaseDialog>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
 import type { LocaleObject } from "@nuxtjs/i18n";
+import { useLocales } from "~/composables/use-locales";
 
 export default defineComponent({
   props: {
     value: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props, context) {
     const dialog = computed<boolean>({
@@ -39,145 +52,11 @@ export default defineComponent({
       },
     });
 
-    const { i18n } = useContext();
+    const { locales: LOCALES, locale, i18n } = useLocales();
 
-    const locales = [
-      {
-        name: "American English",
-        value: "en-US",
-      },
-      {
-        name: "British English",
-        value: "en-GB",
-      },
-      {
-        name: "Afrikaans (Afrikaans)",
-        value: "af-ZA",
-      },
-      {
-        name: "العربية (Arabic)",
-        value: "ar-SA",
-      },
-      {
-        name: "Català (Catalan)",
-        value: "ca-ES",
-      },
-      {
-        name: "Čeština (Czech)",
-        value: "cs-CZ",
-      },
-      {
-        name: "Dansk (Danish)",
-        value: "da-DK",
-      },
-      {
-        name: "Deutsch (German)",
-        value: "de-DE",
-      },
-      {
-        name: "Ελληνικά (Greek)",
-        value: "el-GR",
-      },
-      {
-        name: "Español (Spanish)",
-        value: "es-ES",
-      },
-      {
-        name: "Suomi (Finnish)",
-        value: "fi-FI",
-      },
-      {
-        name: "Français (French)",
-        value: "fr-FR",
-      },
-      {
-        name: "עברית (Hebrew)",
-        value: "he-IL",
-      },
-      {
-        name: "Magyar (Hungarian)",
-        value: "hu-HU",
-      },
-      {
-        name: "Italiano (Italian)",
-        value: "it-IT",
-      },
-      {
-        name: "日本語 (Japanese)",
-        value: "ja-JP",
-      },
-      {
-        name: "한국어 (Korean)",
-        value: "ko-KR",
-      },
-      {
-        name: "Norsk (Norwegian)",
-        value: "no-NO",
-      },
-      {
-        name: "Nederlands (Dutch)",
-        value: "nl-NL",
-      },
-      {
-        name: "Polski (Polish)",
-        value: "pl-PL",
-      },
-      {
-        name: "Português do Brasil (Brazilian Portugese)",
-        value: "pt-BR",
-      },
-      {
-        name: "Português (Portugese)",
-        value: "pt-PT",
-      },
-      {
-        name: "Română (Romanian)",
-        value: "ro-RO",
-      },
-      {
-        name: "Pусский (Russian)",
-        value: "ru-RU",
-      },
-      {
-        name: "српски (Serbian)",
-        value: "sr-SP",
-      },
-      {
-        name: "Svenska (Swedish)",
-        value: "sv-SE",
-      },
-      {
-        name: "Türkçe (Turkish)",
-        value: "tr-TR",
-      },
-      {
-        name: "Українська (Ukrainian)",
-        value: "uk-UA",
-      },
-      {
-        name: "Tiếng Việt (Vietnamese)",
-        value: "vi-VN",
-      },
-      {
-        name: "简体中文 (Chinese simplified)",
-        value: "zh-CN",
-      },
-      {
-        name: "繁體中文 (Chinese traditional)",
-        value: "zh-TW",
-      },
-    ].filter(locale => (i18n.locales as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value));
-
-    const locale = computed<string>({
-      get() {
-        return i18n.locale;
-      },
-      set(value) {
-        i18n.setLocale(value);
-        // Reload the page to update the language - not all strings are reactive
-        window.location.reload();
-      }
-    });
+    const locales = LOCALES.filter((locale) =>
+      (i18n.locales as LocaleObject[]).map((i18nLocale) => i18nLocale.code).includes(locale.value)
+    );
 
     return {
       dialog,
@@ -185,10 +64,8 @@ export default defineComponent({
       locales,
       locale,
     };
-  }
+  },
 });
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>