Translate new tiles in dashboard

frontend/src/components/FormHelpers/ImportOptions.vue

@@ -36,11 +36,11 @@ export default {
         },
         users: {
           value: true,
-          text: this.$t("general.users"),
+          text: this.$t("user.users"),
         },
         groups: {
           value: true,
-          text: this.$t("general.groups"),
+          text: this.$t("group.groups"),
         },
       },
     };

frontend/src/components/ImportSummaryDialog/index.vue

@@ -29,8 +29,8 @@
           <v-tab>{{ $t("general.themes") }}</v-tab>
           <v-tab>{{ $t("general.settings") }}</v-tab>
           <v-tab> {{ $t("settings.pages") }} </v-tab>
-          <v-tab>{{ $t("general.users") }}</v-tab>
-          <v-tab>{{ $t("general.groups") }}</v-tab>
+          <v-tab>{{ $t("user.users") }}</v-tab>
+          <v-tab>{{ $t("group.groups") }}</v-tab>
         </v-tabs>
         <v-tabs-items v-model="tab">
           <v-tab-item v-for="(table, index) in allTables" :key="index">
@@ -92,10 +92,10 @@ export default {
       return this.calculateNumbers(this.$t("general.themes"), this.themeData);
     },
     userNumbers() {
-      return this.calculateNumbers(this.$t("general.users"), this.userData);
+      return this.calculateNumbers(this.$t("user.users"), this.userData);
     },
     groupNumbers() {
-      return this.calculateNumbers(this.$t("general.groups"), this.groupData);
+      return this.calculateNumbers(this.$t("group.groups"), this.groupData);
     },
     pageNumbers() {
       return this.calculateNumbers(this.$t("settings.pages"), this.pageData);

frontend/src/components/UI/Dialogs/BackupDialog.vue

@@ -8,7 +8,7 @@
       :loading="loading"
     >
       <template v-slot:open="{ open }">
-        <v-btn @click="open" class="mx-2" small :color="color"> <v-icon left> mdi-plus </v-icon> Custom </v-btn>
+        <v-btn @click="open" class="mx-2" small :color="color"> <v-icon left> mdi-plus </v-icon> {{$t('general.custom')}} </v-btn>
       </template>
       <v-card-text class="mt-6">
         <v-text-field dense :label="$t('settings.backup.backup-tag')" v-model="tag"></v-text-field>

frontend/src/components/UI/TheSidebar.vue

@@ -155,7 +155,7 @@ export default {
         {
           icon: "mdi-account-group",
           to: "/admin/manage-users",
-          title: this.$t("settings.manage-users"),
+          title: this.$t("user.manage-users"),
         },
         {
           icon: "mdi-database-import",

frontend/src/locales/messages/en-US.json

@@ -28,16 +28,19 @@
     "category-deletion-failed": "Category deletion failed",
     "category-filter": "Category Filter",
     "category-update-failed": "Category update failed",
-    "category-updated": "Category updated"
+    "category-updated": "Category updated",
+    "uncategorized-count": "Uncategorized {count}"
   },
   "general": {
     "apply": "Apply",
     "cancel": "Cancel",
+    "clear": "Clear",
     "close": "Close",
     "confirm": "Confirm",
     "create": "Create",
     "created": "Created",
     "current-parenthesis": "(Current)",
+    "custom": "Custom",
     "dashboard": "Dashboard",
     "delete": "Delete",
     "disabled": "Disabled",
@@ -53,7 +56,6 @@
     "filter": "Filter",
     "friday": "Friday",
     "get": "Get",
-    "groups": "Groups",
     "image": "Image",
     "image-upload-failed": "Image upload failed",
     "import": "Import",
@@ -90,7 +92,6 @@
     "updated": "Updated",
     "upload": "Upload",
     "url": "URL",
-    "users": "Users",
     "wednesday": "Wednesday",
     "yes": "Yes"
   },
@@ -109,6 +110,7 @@
     "group-not-found": "Group not found",
     "groups": "Groups",
     "groups-can-only-be-set-by-administrators": "Groups can only be set by administrators",
+    "manage-groups": "Manage Groups",
     "user-group": "User Group",
     "user-group-created": "User Group Created",
     "user-group-creation-failed": "User Group Creation Failed"
@@ -258,6 +260,7 @@
     "current": "Version:",
     "custom-pages": "Custom Pages",
     "edit-page": "Edit Page",
+    "events": "Events",
     "first-day-of-week": "First day of the week",
     "group-settings-updated": "Group Settings Updated",
     "homepage": {
@@ -271,7 +274,6 @@
     "latest": "Latest",
     "local-api": "Local API",
     "locale-settings": "Locale settings",
-    "manage-users": "Manage Users",
     "migrations": "Migrations",
     "new-page": "New Page",
     "page-name": "Page Name",
@@ -353,7 +355,8 @@
     "tag-deletion-failed": "Tag deletion failed",
     "tag-update-failed": "Tag update failed",
     "tag-updated": "Tag updated",
-    "tags": "Tags"
+    "tags": "Tags",
+    "untagged-count": "Untagged {count}"
   },
   "user": {
     "admin": "Admin",
@@ -377,6 +380,7 @@
     "link-name": "Link Name",
     "login": "Login",
     "logout": "Logout",
+    "manage-users": "Manage Users",
     "new-password": "New Password",
     "new-user": "New User",
     "password": "Password",

frontend/src/pages/Admin/Dashboard/BackupViewer.vue

@@ -11,7 +11,9 @@
     <StatCard icon="mdi-backup-restore" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
-          <div class="body-3 grey--text font-weight-light" v-text="'Backups'" />
+          <h2 class="body-3 grey--text font-weight-light">
+            {{$t('settings.backup-and-exports')}}
+          </h2>
 
           <h3 class="display-2 font-weight-light text--primary">
             <small> {{ total }}</small>
@@ -22,14 +24,14 @@
         <TheUploadBtn url="/api/backups/upload" @uploaded="getAvailableBackups">
           <template v-slot="{ isSelecting, onButtonClick }">
             <v-btn :loading="isSelecting" class="mx-2" small :color="color" @click="onButtonClick">
-              <v-icon left> mdi-cloud-upload </v-icon> Upload
+              <v-icon left> mdi-cloud-upload </v-icon> {{$t('general.upload')}}
             </v-btn>
           </template>
         </TheUploadBtn>
         <BackupDialog :color="color" />
 
         <v-btn :loading="loading" class="mx-2" small :color="color" @click="createBackup">
-          <v-icon left> mdi-plus </v-icon> Create
+          <v-icon left> mdi-plus </v-icon> {{$t('general.create')}}
         </v-btn>
       </div>
       <template v-slot:bottom>

frontend/src/pages/Admin/Dashboard/EventViewer.vue

@@ -3,7 +3,9 @@
     <StatCard icon="mdi-bell-ring" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
-          <div class="body-3 grey--text font-weight-light" v-text="'Events'" />
+          <h2 class="body-3 grey--text font-weight-light">
+            {{$t('settings.events')}}
+          </h2>
 
           <h3 class="display-2 font-weight-light text--primary">
             <small> {{ total }} </small>
@@ -12,7 +14,7 @@
       </template>
       <div class="d-flex row py-3 justify-end">
         <v-btn class="mx-2" small :color="color" @click="deleteAll">
-          <v-icon left> mdi-notification-clear-all </v-icon> Clear
+          <v-icon left> mdi-notification-clear-all </v-icon> {{$t('general.clear')}}
         </v-btn>
       </div>
       <template v-slot:bottom>

frontend/src/pages/Admin/Dashboard/index.vue

@@ -5,7 +5,9 @@
         <StatCard icon="mdi-silverware-fork-knife">
           <template v-slot:after-heading>
             <div class="ml-auto text-right">
-              <div class="body-3 grey--text font-weight-light" v-text="'Recipes'" />
+              <h2 class="body-3 grey--text font-weight-light">
+                {{$t('general.recipes')}}
+              </h2>
 
               <h3 class="display-2 font-weight-light text--primary">
                 <small> {{ statistics.totalRecipes }}</small>
@@ -15,14 +17,14 @@
           <template v-slot:actions>
             <div class="d-flex row py-3 justify-space-around">
               <v-btn small color="primary" :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'tag' } }">
-                <v-icon left> mdi-tag </v-icon> Untagged {{ statistics.untaggedRecipes }}
+                <v-icon left> mdi-tag </v-icon> {{$tc('tag.untagged-count', [statistics.untaggedRecipes])}}
               </v-btn>
               <v-btn
                 small
                 color="primary"
                 :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'category' } }"
               >
-                <v-icon left> mdi-tag </v-icon> Uncategorized {{ statistics.uncategorizedRecipes }}
+                <v-icon left> mdi-tag </v-icon> {{$tc('category.uncategorized-count', [statistics.uncategorizedRecipes])}}
               </v-btn>
             </div>
           </template>
@@ -32,8 +34,9 @@
         <StatCard icon="mdi-account">
           <template v-slot:after-heading>
             <div class="ml-auto text-right">
-              <div class="body-3 grey--text font-weight-light" v-text="'Users'" />
-
+              <h2 class="body-3 grey--text font-weight-light">
+                 {{$t('user.users')}}
+              </h2>
               <h3 class="display-2 font-weight-light text--primary">
                 <small> {{ statistics.totalUsers }}</small>
               </h3>
@@ -43,7 +46,7 @@
             <div class="ml-auto">
               <v-btn color="primary" small to="/admin/manage-users?tab=users">
                 <v-icon left>mdi-account</v-icon>
-                Manage Users
+                {{$t('user.manage-users')}}
               </v-btn>
             </div>
           </template>
@@ -53,7 +56,9 @@
         <StatCard icon="mdi-account-group">
           <template v-slot:after-heading>
             <div class="ml-auto text-right">
-              <div class="body-3 grey--text font-weight-light" v-text="'Groups'" />
+              <h2 class="body-3 grey--text font-weight-light">
+                {{$t('group.groups')}}
+              </h2>
 
               <h3 class="display-2 font-weight-light text--primary">
                 <small> {{ statistics.totalGroups }}</small>
@@ -64,7 +69,7 @@
             <div class="ml-auto">
               <v-btn color="primary" small to="/admin/manage-users?tab=groups">
                 <v-icon left>mdi-account-group</v-icon>
-                Manage Groups
+                {{$t('group.manage-groups')}}
               </v-btn>
             </div>
           </template>

frontend/src/routes/admin.js

@@ -39,7 +39,7 @@ export const adminRoutes = {
       path: "manage-users",
       component: ManageUsers,
       meta: {
-        title: "settings.manage-users",
+        title: "user.manage-users",
       },
     },
     {