Localize hard-coded texts (#2044)

* feat(lang): localize some views

* feat(lang): an attempt at localizing vuetify (WIP)

* feat(lang): localized some more screens

* feat(lang): localized some more screens again

* feat(lang): hack to localize vuetify

* feat(lang): localize data management pages

* fix linting errors

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/pages/shopping-lists/_id.vue

@@ -79,29 +79,29 @@
               children: [
                 {
                   icon: $globals.icons.contentCopy,
-                  text: 'Copy as Text',
+                  text: $tc('shopping-list.copy-as-text'),
                   event: 'copy-plain',
                 },
                 {
                   icon: $globals.icons.contentCopy,
-                  text: 'Copy as Markdown',
+                  text: $tc('shopping-list.copy-as-markdown'),
                   event: 'copy-markdown',
                 },
               ],
             },
             {
               icon: $globals.icons.delete,
-              text: 'Delete Checked',
+              text: $tc('shopping-list.delete-checked'),
               event: 'delete',
             },
             {
               icon: $globals.icons.tags,
-              text: 'Toggle Label Sort',
+              text: $tc('shopping-list.toggle-label-sort'),
               event: 'sort-by-labels',
             },
             {
               icon: $globals.icons.checkboxBlankOutline,
-              text: 'Uncheck All Items',
+              text: $tc('shopping-list.uncheck-all-items'),
               event: 'uncheck',
             },
           ]"
@@ -122,7 +122,7 @@
               {{ showChecked ? $globals.icons.chevronDown : $globals.icons.chevronRight }}
             </v-icon>
           </span>
-          {{ listItems.checked ? listItems.checked.length : 0 }} items checked
+          {{ $tc('shopping-list.items-checked-count', listItems.checked ? listItems.checked.length : 0) }}
         </button>
         <v-divider class="my-4"></v-divider>
         <v-expand-transition>
@@ -153,7 +153,7 @@
               {{ $globals.icons.primary }}
             </v-icon>
           </span>
-          {{ shoppingList.recipeReferences ? shoppingList.recipeReferences.length : 0 }} Linked Recipes
+          {{ $tc('shopping-list.linked-recipes-count', shoppingList.recipeReferences ? shoppingList.recipeReferences.length : 0) }}
         </div>
         <v-divider class="my-4"></v-divider>
         <RecipeList :recipes="listRecipes">
@@ -178,7 +178,7 @@
 
     <v-lazy>
       <div class="d-flex justify-end mt-10">
-        <ButtonLink to="/group/data/labels" text="Manage Labels" :icon="$globals.icons.tags" />
+        <ButtonLink to="/group/data/labels" :text="$tc('shopping-list.manage-labels')" :icon="$globals.icons.tags" />
       </div>
     </v-lazy>
   </v-container>
@@ -187,7 +187,7 @@
 <script lang="ts">
 import draggable from "vuedraggable";
 
-import { defineComponent, useAsync, useRoute, computed, ref, watch, onUnmounted } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync, useRoute, computed, ref, watch, onUnmounted, useContext } from "@nuxtjs/composition-api";
 import { useIdle, useToggle } from "@vueuse/core";
 import { useCopyList } from "~/composables/use-copy";
 import { useUserApi } from "~/composables/api";
@@ -224,6 +224,8 @@ export default defineComponent({
     const route = useRoute();
     const id = route.value.params.id;
 
+    const { i18n } = useContext();
+
     // ===============================================================
     // Shopping List Actions
 
@@ -416,9 +418,9 @@ export default defineComponent({
     function updateItemsByLabel() {
       const items: { [prop: string]: ShoppingListItemOut[] } = {};
 
-      const noLabel = {
-        "No Label": [] as ShoppingListItemOut[],
-      };
+      const noLabelText = i18n.tc("shopping-list.no-label");
+
+      const noLabel = [] as ShoppingListItemOut[];
 
       shoppingList.value?.listItems?.forEach((item) => {
         if (item.checked) {
@@ -432,12 +434,12 @@ export default defineComponent({
             items[item.label.name] = [item];
           }
         } else {
-          noLabel["No Label"].push(item);
+          noLabel.push(item);
         }
       });
 
-      if (noLabel["No Label"].length > 0) {
-        items["No Label"] = noLabel["No Label"];
+      if (noLabel.length > 0) {
+        items[noLabelText] = noLabel;
       }
 
       itemsByLabel.value = items;

frontend/pages/shopping-lists/index.vue

@@ -7,13 +7,13 @@
     </BaseDialog>
 
     <BaseDialog v-model="deleteDialog" :title="$tc('general.confirm')" color="error" @confirm="deleteOne">
-      <v-card-text> Are you sure you want to delete this item?</v-card-text>
+      <v-card-text>{{ $t('shopping-list.are-you-sure-you-want-to-delete-this-item') }}</v-card-text>
     </BaseDialog>
     <BasePageTitle divider>
       <template #header>
         <v-img max-height="100" max-width="100" :src="require('~/static/svgs/shopping-cart.svg')"></v-img>
       </template>
-      <template #title> Shopping Lists </template>
+      <template #title>{{ $t('shopping-list.shopping-lists') }}</template>
     </BasePageTitle>
     <BaseButton create @click="createDialog = true" />
 
@@ -33,7 +33,7 @@
       </v-card>
     </section>
     <div class="d-flex justify-end mt-10">
-      <ButtonLink to="/group/data/labels" text="Manage Labels" :icon="$globals.icons.tags" />
+      <ButtonLink to="/group/data/labels" :text="$tc('shopping-list.manage-labels')" :icon="$globals.icons.tags" />
     </div>
   </v-container>
 </template>