Fix missing translations key (#133)

* translation: add simplified & traditional chinese

* Fix missing translations

* fix chinese translations

frontend/src/components/Recipe/RecipeEditor/ExtrasEditor.vue

@@ -2,11 +2,11 @@
   <div class="text-center">
     <v-dialog v-model="dialog" width="700">
       <template v-slot:activator="{ on, attrs }">
-        <v-btn color="accent" dark v-bind="attrs" v-on="on"> API Extras </v-btn>
+        <v-btn color="accent" dark v-bind="attrs" v-on="on"> {{ $t("recipe.api-extras") }} </v-btn>
       </template>
 
       <v-card>
-        <v-card-title> API Extras </v-card-title>
+        <v-card-title> {{ $t("recipe.api-extras") }} </v-card-title>
 
         <v-card-text :key="formKey">
           <v-row
@@ -28,14 +28,14 @@
             </v-col>
             <v-col cols="12" md="3" sm="6">
               <v-text-field
-                label="Object Key"
+                :label="$t('recipe.object-key')"
                 :value="key"
                 @input="updateKey(index)"
               >
               </v-text-field>
             </v-col>
             <v-col cols="12" md="8" sm="6">
-              <v-text-field label="Object Value" v-model="extras[key]">
+              <v-text-field :label="$t('recipe.object-value')" v-model="extras[key]">
               </v-text-field>
             </v-col>
           </v-row>
@@ -46,17 +46,17 @@
         <v-card-actions>
           <v-form ref="addKey">
             <v-text-field
-              label="New Key Name"
+              :label="$t('recipe.new-key-name')"
               v-model="newKeyName"
               class="pr-4"
               :rules="[rules.required, rules.whiteSpace]"
             ></v-text-field>
           </v-form>
-          <v-btn color="info" text @click="append"> Add Key</v-btn>
+          <v-btn color="info" text @click="append"> {{ $t("recipe.add-key") }} </v-btn>
 
           <v-spacer></v-spacer>
 
-          <v-btn color="success" text @click="save"> Save </v-btn>
+          <v-btn color="success" text @click="save"> {{ $t("general.save") }} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -74,9 +74,9 @@ export default {
       dialog: false,
       formKey: 1,
       rules: {
-        required: (v) => !!v || "Key Name Required",
+        required: (v) => !!v || this.$i18n.t("recipe.key-name-required"),
         whiteSpace: (v) =>
-          !v || v.split(" ").length <= 1 || "No White Space Allowed",
+          !v || v.split(" ").length <= 1 || this.$i18n.t("recipe.no-white-space-allowed"),
       },
     };
   },

frontend/src/components/Recipe/RecipeEditor/index.vue

@@ -16,19 +16,19 @@
       <v-row>
         <v-col>
           <v-text-field
-            label="Total Time"
+            :label="$t('recipe.total-time')"
             v-model="value.totalTime"
           ></v-text-field>
         </v-col>
         <v-col
           ><v-text-field
-            label="Prep Time"
+            :label="$t('recipe.prep-time')"
             v-model="value.prepTime"
           ></v-text-field
         ></v-col>
         <v-col
           ><v-text-field
-            label="Cook Time / Perform Time"
+            :label="$t('recipe.perform-time')"
             v-model="value.performTime"
           ></v-text-field
         ></v-col>
@@ -149,7 +149,7 @@
                   <v-icon color="error">mdi-delete</v-icon>
                 </v-btn>
                 <v-text-field
-                  label="Title"
+                  :label="$t('recipe.title')"
                   v-model="value.notes[index]['title']"
                 ></v-text-field>
               </v-row>
@@ -209,7 +209,7 @@
           <v-text-field
             v-model="value.orgURL"
             class="mt-10"
-            label="Original URL"
+            :label="$t('recipe.original-url')"
           ></v-text-field>
         </v-col>
       </v-row>
@@ -234,9 +234,9 @@ export default {
     return {
       fileObject: null,
       rules: {
-        required: v => !!v || "Key Name Required",
+        required: v => !!v || this.$i18n.t("recipe.key-name-required"),
         whiteSpace: v =>
-          !v || v.split(" ").length <= 1 || "No White Space Allowed",
+          !v || v.split(" ").length <= 1 || this.$i18n.t("recipe.no-white-space-allowed"),
       },
     };
   },

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -20,7 +20,7 @@
           v-if="totalTime"
         ></v-divider>
         <v-col v-if="totalTime">
-          <div><strong> Total Time </strong></div>
+          <div><strong> {{ $t("recipe.total-time") }} </strong></div>
           <div>{{ totalTime }}</div>
         </v-col>
         <v-divider
@@ -30,7 +30,7 @@
           v-if="prepTime"
         ></v-divider>
         <v-col v-if="prepTime">
-          <div><strong> Prep Time </strong></div>
+          <div><strong> {{ $t("recipe.prep-time") }} </strong></div>
           <div>{{ prepTime }}</div>
         </v-col>
         <v-divider
@@ -40,7 +40,7 @@
           v-if="performTime"
         ></v-divider>
         <v-col v-if="performTime">
-          <div><strong> Cook Time </strong></div>
+          <div><strong> {{ $t("recipe.perform-time") }} </strong></div>
           <div>{{ performTime }}</div>
         </v-col>
       </v-row>

frontend/src/components/Recipe/RecipeViewer.vue

@@ -121,7 +121,7 @@
           target="_blank"
           class="rounded-sm mr-4"
         >
-          {{$t('recipe.original-recipe')}}
+          {{$t('recipe.original-url')}}
         </v-btn>
       </v-row>
     </v-card-text>

frontend/src/components/Settings/Backup/NewBackupCard.vue

@@ -77,8 +77,8 @@ export default {
   computed: {
     switchLabel() {
       if (this.fullBackup) {
-        return "Full Backup";
-      } else return "Partial Backup";
+        return this.$t("settings.backup.full-backup");
+      } else return this.$t("settings.backup.partial-backup");
     },
   },
   methods: {

frontend/src/components/Settings/Backup/index.vue

@@ -18,7 +18,7 @@
       </v-row>
       <v-divider class="my-3"></v-divider>
       <v-card-title class="mt-n6">
-        Available Backups
+        {{ $t("settings.available-backups") }}
         <span>
           <UploadBtn
             class="mt-1"
@@ -35,10 +35,10 @@
       />
       <SuccessFailureAlert
         ref="report"
-        title="Back Restore Report"
-        success-header="Successfully Imported"
+        :title="$t('settings.backup.backup-restore-report')"
+        :success-header="$t('settings.backup.successfully-imported')"
         :success="successfulImports"
-        failed-header="Failed Imports"
+        :failed-header="$t('settings.backup.failed-imports')"
         :failed="failedImports"
       />
     </v-card-text>

frontend/src/components/Settings/General/index.vue

@@ -1,12 +1,12 @@
 <template>
   <v-card>
     <v-card-title>
-      General Settings
+      {{ $t("settings.general-settings") }}
       <v-spacer></v-spacer>
       <span>
         <v-btn class="pt-1" text href="/docs">
           <v-icon left>mdi-link</v-icon>
-          Local API
+          {{ $t("settings.local-api") }}
         </v-btn>
       </span>
     </v-card-title>
@@ -14,7 +14,7 @@
     <HomePageSettings />
     <v-divider></v-divider>
     <v-card-text>
-      <h2 class="mt-1 mb-1">Language</h2>
+      <h2 class="mt-1 mb-1">{{ $t("settings.language") }}</h2>
       <v-row>
         <v-col>
           <v-select
@@ -22,7 +22,7 @@
             :items="langOptions"
             item-text="name"
             item-value="value"
-            label="Language"
+            :label="$t('settings.language')"
           >
           </v-select>
         </v-col>

frontend/src/components/Settings/Migration/MigrationCard.vue

@@ -35,10 +35,10 @@
         <v-card-actions class="mt-n6">
           <v-spacer></v-spacer>
           <v-btn color="error" text @click="deleteMigration(migration.name)">
-            Delete
+            {{ $t("general.delete") }}
           </v-btn>
           <v-btn color="accent" text @click="importMigration(migration.name)">
-            Import
+            {{ $t("general.import") }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -46,7 +46,7 @@
     <div v-else>
       <v-card class="text-center ma-2">
         <v-card-text>
-          No Migration Data Avaiable
+          {{ $t("migration.no-migration-data-available") }}
         </v-card-text>
       </v-card>
     </div>

frontend/src/components/Settings/Migration/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <SuccessFailureAlert
-      title="Migration Report"
+      :title="$t('migration.migration-report')"
       ref="report"
-      failedHeader="Failed Imports"
+      :failedHeader="$t('migration.failed-imports')"
       :failed="failed"
-      successHeader="Successful Imports"
+      :successHeader="$t('migration.successful-imports')"
       :success="success"
     />
     <v-card :loading="loading">
@@ -54,14 +54,14 @@ export default {
       failed: [],
       migrations: {
         nextcloud: {
-          title: "Nextcloud Cookbook",
-          description: "migrate data from a nextcloud cookbook intance",
+          title: this.$t("migration.nextcloud.title"),
+          description: this.$t("migration.nextcloud.description"),
           urlVariable: "nextcloud",
           availableImports: [],
         },
         chowdown: {
-          title: "Chowdown",
-          description: "Migrate From Chowdown",
+          title: this.$t("migration.chowdown.title"),
+          description: this.$t("migration.chowdown.description"),
           urlVariable: "chowdown",
           availableImports: [],
         },

frontend/src/components/Settings/Theme/NewThemeDialog.vue

@@ -6,7 +6,7 @@
         <v-card-title> {{$t('settings.add-a-new-theme')}} </v-card-title>
         <v-card-text>
           <v-text-field
-            label="Theme Name"
+            :label="$t('settings.theme.theme-name')"
             v-model="themeName"
             :rules="[rules.required]"
           ></v-text-field>
@@ -34,7 +34,7 @@ export default {
       dialog: false,
       themeName: "",
       rules: {
-        required: (val) => !!val || "Required.",
+        required: (val) => !!val || this.$t("settings.theme.theme-name-is-required"),
       },
     };
   },

frontend/src/components/Settings/Theme/index.vue

@@ -21,7 +21,7 @@
             mandatory
             @change="setStoresDarkMode"
           >
-            <v-btn value="system"> Default to system </v-btn>
+            <v-btn value="system"> {{ $t("settings.theme.default-to-system") }} </v-btn>
 
             <v-btn value="light"> {{ $t("settings.theme.light") }} </v-btn>
 
@@ -60,7 +60,7 @@
             <v-btn-toggle group>
               <NewThemeDialog @new-theme="appendTheme" class="mt-1" />
               <v-btn text color="error" @click="deleteSelectedThemeValidation">
-                Delete
+                {{ $t("general.delete") }}
               </v-btn>
             </v-btn-toggle>
             <Confirmation

frontend/src/components/UI/ButtonRow.vue

@@ -14,8 +14,8 @@
           <v-icon>mdi-delete</v-icon>
         </v-btn>
         <Confirmation
-          title="Delete Recpie"
-          message="Are you sure you want to delete this recipie?"
+          :title="$t('recipe.delete-recipe')"
+          :message="$t('recipe.delete-confirmation')"
           color="error"
           icon="mdi-alert-circle"
           ref="deleteRecipieConfirm"

frontend/src/components/UI/Confirmation.vue

@@ -21,8 +21,8 @@
 
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="grey" text @click="cancel"> Cancel </v-btn>
-        <v-btn :color="color" text @click="confirm"> Confirm </v-btn>
+        <v-btn color="grey" text @click="cancel"> {{ $t("general.cancel") }} </v-btn>
+        <v-btn :color="color" text @click="confirm"> {{ $t("general.confirm") }} </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

frontend/src/components/UI/SearchBar.vue

@@ -6,7 +6,7 @@
       item-text="item.name"
       dense
       light
-      label="Search Mealie"
+      :label="$t('search.search-mealie')"
       :search-input.sync="search"
       hide-no-data
       cache-items

frontend/src/components/UI/UploadBtn.vue

@@ -3,7 +3,7 @@
     <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
     <v-btn :loading="isSelecting" @click="onButtonClick" color="accent" text>
       <v-icon left> mdi-cloud-upload </v-icon>
-      Upload
+      {{ $t('general.upload') }}
     </v-btn>
   </v-form>
 </template>
@@ -15,7 +15,7 @@ export default {
     url: String,
   },
   data: () => ({
-    defaultButtonText: "Upload",
+    defaultButtonText: this.$t("general.upload"),
     file: null,
     isSelecting: false,
   }),