From 2f4a0dd212994c3a3e0344f41192aa246d98c0cb Mon Sep 17 00:00:00 2001
From: Matt Kilgore <matthew@kilgore.dev>
Date: Wed, 7 Aug 2024 21:55:05 -0400
Subject: [PATCH] fix: #146 add version info to every page

---
 frontend/layouts/default.vue | 16 ++++++++++++++--
 frontend/locales/en.json     |  5 ++++-
 frontend/pages/profile.vue   | 18 ++++--------------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index df117f37..70ff0953 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -29,6 +29,12 @@
         </div>
 
         <slot></slot>
+        <footer v-if="status" class="text-center w-full bottom-0 pb-4 bg-base-300 text-secondary-content">
+          <p class="text-center text-sm">
+            {{ $t("global.version", { version: status.build.version }) }} ~
+            {{ $t("global.build", { build: status.build.commit }) }}
+          </p>
+        </footer>
       </div>
 
       <!-- Sidebar -->
@@ -104,10 +110,16 @@
   import MdiAccount from "~icons/mdi/account";
   import MdiCog from "~icons/mdi/cog";
   const username = computed(() => authCtx.user?.name || "User");
+
+  const pubApi = usePublicApi();
+  const { data: status } = useAsyncData(async () => {
+    const { data } = await pubApi.status();
+
+    return data;
+  });
+
   // Preload currency format
   useFormatCurrency();
-  const locale = useState("locale").value;
-  console.log(locale);
   const modals = reactive({
     item: false,
     location: false,
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index f2b7fbe1..35e498c8 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -11,6 +11,7 @@
         "submit": "Submit",
         "confirm": "Confirm",
         "create": "Create",
+        "created": "Created",
         "create_and_add": "Create and Add Another",
         "welcome": "Welcome, { username }",
         "sign_out": "Sign Out"
@@ -40,7 +41,9 @@
         "test": "Test",
         "gen_invite": "Generate Invite Link",
         "user_profile": "User Profile",
-        "user_profile_sub": "Invite users, and manage your account."
+        "user_profile_sub": "Invite users, and manage your account.",
+        "active": "Active",
+        "inactive": "Inactive"
     },
     "components": {
         "global": {
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index fe3986d4..aa257eeb 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -89,13 +89,6 @@
     notify.success("Group updated");
   }
 
-  const pubApi = usePublicApi();
-  const { data: status } = useAsyncData(async () => {
-    const { data } = await pubApi.status();
-
-    return data;
-  });
-
   const { setTheme } = useTheme();
 
   const auth = useAuthContext();
@@ -399,11 +392,11 @@
             </div>
             <div class="flex justify-between py-1 flex-wrap text-sm">
               <p>
-                <span v-if="n.isActive" class="badge badge-success"> Active </span>
-                <span v-else class="badge badge-error"> Inactive</span>
+                <span v-if="n.isActive" class="badge badge-success"> {{ $t("profile.active") }} </span>
+                <span v-else class="badge badge-error"> {{ $t("profile.inactive") }} </span>
               </p>
               <p>
-                Created
+                {{ $t("global.created") }}
                 <DateTime format="relative" datetime-type="time" :date="n.createdAt" />
               </p>
             </div>
@@ -411,7 +404,7 @@
         </div>
 
         <div class="p-4">
-          <BaseButton size="sm" @click="openNotifierDialog"> Create </BaseButton>
+          <BaseButton size="sm" @click="openNotifierDialog"> {{ $t("global.create") }} </BaseButton>
         </div>
       </BaseCard>
 
@@ -500,9 +493,6 @@
         </div>
       </BaseCard>
     </BaseContainer>
-    <footer v-if="status" class="text-center w-full bottom-0 pb-4">
-      <p class="text-center text-sm">Version: {{ status.build.version }} ~ Build: {{ status.build.commit }}</p>
-    </footer>
   </div>
 </template>