Merge branch 'mealie-next' into fixes/ui-improvements

frontend/pages/admin/maintenance/index.vue

@@ -27,7 +27,7 @@
     </div>
 
     <section>
-      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$t('admin.maintenance.summary-title')">
+      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$tc('admin.maintenance.summary-title')">
       </BaseCardSectionTitle>
       <div class="mb-6 ml-2 d-flex" style="gap: 0.3rem">
         <BaseButton color="info" @click="getSummary">
@@ -55,7 +55,7 @@
       <BaseCardSectionTitle
         class="pb-0 mt-8"
         :icon="$globals.icons.wrench"
-        :title="$t('admin.mainentance.actions-title')"
+        :title="$tc('admin.mainentance.actions-title')"
       >
         <i18n path="admin.maintenance.actions-description">
           <template #destructive-in-bold>
@@ -103,13 +103,14 @@ export default defineComponent({
     });
 
     const adminApi = useAdminApi();
+    const { i18n } = useContext();
 
     // ==========================================================================
     // General Info
 
     const infoResults = ref<MaintenanceSummary>({
-      dataDirSize: "unknown",
-      logFileSize: "unknown",
+      dataDirSize: i18n.tc("about.unknown-version"),
+      logFileSize: i18n.tc("about.unknown-version"),
       cleanableDirs: 0,
       cleanableImages: 0,
     });
@@ -119,8 +120,8 @@ export default defineComponent({
       const { data } = await adminApi.maintenance.getInfo();
 
       infoResults.value = data ?? {
-        dataDirSize: "unknown",
-        logFileSize: "unknown",
+        dataDirSize: i18n.tc("about.unknown-version"),
+        logFileSize: i18n.tc("about.unknown-version"),
         cleanableDirs: 0,
         cleanableImages: 0,
       };
@@ -128,7 +129,6 @@ export default defineComponent({
       state.fetchingInfo = false;
     }
 
-    const { i18n } = useContext();
 
     const info = computed(() => {
       return [
@@ -163,7 +163,7 @@ export default defineComponent({
     };
 
     function storageDetailsText(key: string) {
-      return storageTitles[key] ?? "unknown";
+      return storageTitles[key] ?? i18n.tc("about.unknown-version");
     }
 
     const storageDetails = ref<MaintenanceStorageDetails | null>(null);

frontend/pages/admin/manage/groups/_id.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
+import { defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
 import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
 import { useAdminApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
@@ -39,6 +39,8 @@ export default defineComponent({
   setup() {
     const route = useRoute();
 
+    const { i18n } = useContext();
+
     const groupId = route.value.params.id;
 
     // ==============================================
@@ -56,7 +58,7 @@ export default defineComponent({
       const { data, error } = await adminApi.groups.getOne(groupId);
 
       if (error?.response?.status === 404) {
-        alert.error("User Not Found");
+        alert.error(i18n.tc("user.user-not-found"));
         userError.value = true;
       }
 

frontend/pages/admin/manage/users/_id.vue

@@ -4,15 +4,15 @@
       <template #header>
         <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
       </template>
-      <template #title> Admin User Management </template>
-      Changes to this user will be reflected immediately.
+      <template #title> {{ $t("user.admin-user-management") }} </template>
+      {{ $t("user.changes-reflected-immediately") }}
     </BasePageTitle>
     <AppToolbar back> </AppToolbar>
     <v-form v-if="!userError" ref="refNewUserForm" @submit.prevent="handleSubmit">
       <v-card outlined>
         <v-card-text>
           <div class="d-flex">
-            <p>User Id: {{ user.id }}</p>
+            <p> {{ $t("user.user-id-with-value", {id: user.id} ) }}</p>
           </div>
           <v-select
             v-if="groups"
@@ -24,7 +24,7 @@
             item-value="name"
             :return-object="false"
             filled
-            label="User Group"
+            :label="$tc('group.user-group')"
             :rules="[validators.required]"
           ></v-select>
           <div class="d-flex py-2 pr-2">
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useRoute, onMounted, ref, useContext } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { useGroups } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
@@ -59,6 +59,7 @@ export default defineComponent({
   setup() {
     const { userForm } = useUserForm();
     const { groups } = useGroups();
+    const { i18n } = useContext();
     const route = useRoute();
 
     const userId = route.value.params.id;
@@ -84,7 +85,7 @@ export default defineComponent({
       const { data, error } = await adminApi.users.getOne(userId);
 
       if (error?.response?.status === 404) {
-        alert.error("User Not Found");
+        alert.error(i18n.tc("user.user-not-found"));
         userError.value = true;
       }
 

frontend/pages/admin/site-settings.vue

@@ -37,7 +37,7 @@
     </div>
 
     <section>
-      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$t('settings.configuration')"> </BaseCardSectionTitle>
+      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$tc('settings.configuration')"> </BaseCardSectionTitle>
       <v-card class="mb-4">
         <template v-for="(check, idx) in simpleChecks">
           <v-list-item :key="`list-item-${idx}`">
@@ -61,7 +61,7 @@
     </section>
 
     <section>
-      <BaseCardSectionTitle class="pt-2" :icon="$globals.icons.docker" :title="$t('settings.docker-volume')" />
+      <BaseCardSectionTitle class="pt-2" :icon="$globals.icons.docker" :title="$tc('settings.docker-volume')" />
       <v-alert
         border="left"
         colored-border
@@ -77,7 +77,7 @@
           </HelpIcon>
         </div>
         <div>
-          <template v-if="docker.state === DockerVolumeState.Error"> {{ $t('settings.volumes-are-misconfigured') }}. </template>
+          <template v-if="docker.state === DockerVolumeState.Error"> {{ $t('settings.volumes-are-misconfigured') }} </template>
           <template v-else-if="docker.state === DockerVolumeState.Success">
             {{ $t('settings.volumes-are-configured-correctly') }}
           </template>
@@ -116,7 +116,7 @@
           <template v-if="tested">
             <v-divider class="my-x mt-6"></v-divider>
             <v-card-text class="px-0">
-              <h4>Email Test Results</h4>
+              <h4> {{ $tc("settings.email-test-results") }}</h4>
               <span class="pl-4">
                 {{ success ? $t('settings.succeeded') : $t('settings.failed') }}
               </span>
@@ -128,7 +128,7 @@
 
     <!-- General App Info -->
     <section class="mt-4">
-      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$t('settings.general-about')"> </BaseCardSectionTitle>
+      <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" :title="$tc('settings.general-about')"> </BaseCardSectionTitle>
       <v-card class="mb-4">
         <template v-for="(property, idx) in appInfo">
           <v-list-item :key="property.name">
@@ -466,12 +466,12 @@ export default defineComponent({
         if (ignoreChecks[item.id]) {
           return;
         }
-        const status = item.status ? "Yes" : "No";
+        const status = item.status ? i18n.tc("general.yes") : i18n.tc("general.no");
         text += `${item.text.toString()}: ${status}\n`;
       });
 
-      text += `Email Configured: ${appConfig.value.emailReady ? "Yes" : "No"}\n`;
-      text += `Docker Volumes: ${docker.state}`;
+      text += `${i18n.tc("settings.email-configured")}: ${appConfig.value.emailReady ? i18n.tc("general.yes") : i18n.tc("general.no")}\n`;
+      text += `${i18n.tc("settings.docker-volume")}: ${docker.state}`;
 
       return text;
     });