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/group/mealplan/planner.vue

@@ -35,25 +35,25 @@
           <v-date-picker v-model="newMeal.date" :first-day-of-week="firstDayOfWeek" no-title @input="pickerMenu = false"></v-date-picker>
         </v-menu>
         <v-card-text>
-          <v-select v-model="newMeal.entryType" :return-object="false" :items="planTypeOptions" label="Entry Type">
+          <v-select v-model="newMeal.entryType" :return-object="false" :items="planTypeOptions" :label="$t('recipe.entry-type')">
           </v-select>
 
           <v-autocomplete
             v-if="!dialog.note"
             v-model="newMeal.recipeId"
-            label="Meal Recipe"
+            :label="$t('meal-plan.meal-recipe')"
             :items="allRecipes"
             item-text="name"
             item-value="id"
             :return-object="false"
           ></v-autocomplete>
           <template v-else>
-            <v-text-field v-model="newMeal.title" label="Meal Title"> </v-text-field>
-            <v-textarea v-model="newMeal.text" rows="2" label="Meal Note"> </v-textarea>
+            <v-text-field v-model="newMeal.title" :label="$t('meal-plan.meal-title')"> </v-text-field>
+            <v-textarea v-model="newMeal.text" rows="2" :label="$t('meal-plan.meal-note')"> </v-textarea>
           </template>
         </v-card-text>
         <v-card-actions class="my-0 py-0">
-          <v-switch v-model="dialog.note" class="mt-n3" label="Note Only"></v-switch>
+          <v-switch v-model="dialog.note" class="mt-n3" :label="$t('meal-plan.note-only')"></v-switch>
         </v-card-actions>
       </v-card-text>
     </BaseDialog>
@@ -71,8 +71,8 @@
       </div>
     </div>
     <div class="d-flex align-center justify-space-between">
-      <v-switch v-model="edit" label="Editor"></v-switch>
-      <ButtonLink :icon="$globals.icons.calendar" to="/group/mealplan/settings" text="Settings" />
+      <v-switch v-model="edit" :label="$t('meal-plan.editor')"></v-switch>
+      <ButtonLink :icon="$globals.icons.calendar" to="/group/mealplan/settings" :text="$tc('general.settings')" />
     </div>
     <v-row class="">
       <v-col
@@ -174,7 +174,7 @@
               :buttons="[
                 {
                   icon: $globals.icons.diceMultiple,
-                  text: 'Random Meal',
+                  text: $tc('meal-plan.random-meal'),
                   event: 'random',
                   children: [
                     {
@@ -185,19 +185,19 @@
 
                     {
                       icon: $globals.icons.diceMultiple,
-                      text: 'Lunch',
+                      text: $tc('meal-plan.lunch'),
                       event: 'randomLunch',
                     },
                   ],
                 },
                 {
                   icon: $globals.icons.potSteam,
-                  text: 'Random Dinner',
+                  text: $tc('meal-plan.random-dinner'),
                   event: 'randomDinner',
                 },
                 {
                   icon: $globals.icons.bowlMixOutline,
-                  text: 'Random Side',
+                  text: $tc('meal-plan.random-side'),
                   event: 'randomSide',
                 },
                 {

frontend/pages/group/mealplan/settings.vue

@@ -4,20 +4,15 @@
       <template #header>
         <v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-cookbooks.svg')"></v-img>
       </template>
-      <template #title> Meal Plan Rules </template>
-      You can create rules for auto selecting recipes for you meal plans. These rules are used by the server to
-      determine the random pool of recipes to select from when creating meal plans. Note that if rules have the same
-      day/type constraints then the categories of the rules will be merged. In practice, it's unnecessary to create
-      duplicate rules, but it's possible to do so.
+      <template #title> {{ $t('meal-plan.meal-plan-rules') }} </template>
+      {{ $t('meal-plan.meal-plan-rules-description') }}
     </BasePageTitle>
 
     <v-card>
-      <v-card-title class="headline"> New Rule </v-card-title>
+      <v-card-title class="headline"> {{ $t('meal-plan.new-rule') }} </v-card-title>
       <v-divider class="mx-2"></v-divider>
       <v-card-text>
-        When creating a new rule for a meal plan you can restrict the rule to be applicable for a specific day of the
-        week and/or a specific type of meal. To apply a rule to all days or all meal types you can set the rule to "Any"
-        which will apply it to all the possible values for the day and/or meal type.
+        {{ $t('meal-plan.new-rule-description') }}
 
         <GroupMealPlanRuleForm
           class="mt-2"
@@ -33,13 +28,13 @@
     </v-card>
 
     <section>
-      <BaseCardSectionTitle class="mt-10" title="Recipe Rules" />
+      <BaseCardSectionTitle class="mt-10" :title="$tc('meal-plan.recipe-rules')" />
       <div>
         <div v-for="(rule, idx) in allRules" :key="rule.id">
           <v-card class="my-2 left-border">
             <v-card-title class="headline pb-1">
-              {{ rule.day === "unset" ? "Applies to all days" : `Applies on ${rule.day}s` }}
-              {{ rule.entryType === "unset" ? "for all meal types" : ` for ${rule.entryType} meal types` }}
+              {{ rule.day === "unset" ? $t('meal-plan.applies-to-all-days') : $t('meal-plan.applies-on-days', [rule.day]) }}
+              {{ rule.entryType === "unset" ? $t('meal-plan.for-all-meal-types') : $t('meal-plan.for-type-meal-types', [rule.entryType]) }}
               <span class="ml-auto">
                 <BaseButtonGroup
                   :buttons="[
@@ -91,7 +86,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useAsync } from "@nuxtjs/composition-api";
+import { defineComponent, ref, useAsync, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import { PlanRulesCreate, PlanRulesOut } from "~/lib/api/types/meal-plan";
 import GroupMealPlanRuleForm from "~/components/Domain/Group/GroupMealPlanRuleForm.vue";
@@ -182,8 +177,10 @@ export default defineComponent({
       toggleEditState,
     };
   },
-  head: {
-    title: "Meal Plan Settings",
+  head() {
+    return {
+      title: this.$tc("meal-plan.meal-plan-settings"),
+    };
   },
 });
 </script>