Add translation keys for organization page (dashboard)

locales/en-US/index.json

@@ -263,6 +263,24 @@
   "dashboard.collections.long-title": {
     "message": "Your collections"
   },
+  "dashboard.organization.title": {
+    "message": "Organizations"
+  },
+  "dashboard.organizations.action.create-organization": {
+    "message": "Create organization"
+  },
+  "dashboard.organizations.error.fetch-organization": {
+    "message": "Failed to fetch organizations"
+  },
+  "dashboard.organizations.make-organization": {
+    "message": "Make an organization!"
+  },
+  "dashboard.organizations.members": {
+    "message": "{count, plural, one {{count} member} other {{count} members}}"
+  },
+  "dashboard.organizations.title": {
+    "message": "Organizations"
+  },
   "frog": {
     "message": "You've been frogged! 🐸"
   },

pages/dashboard.vue

@@ -21,7 +21,11 @@
           <NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
             <ListIcon />
           </NavStackItem>
-          <NavStackItem v-if="true" link="/dashboard/organizations" label="Organizations">
+          <NavStackItem
+            v-if="true"
+            link="/dashboard/organizations"
+            :label="formatMessage(messages.organizationTitle)"
+          >
             <OrganizationIcon />
           </NavStackItem>
           <NavStackItem
@@ -55,6 +59,13 @@ import OrganizationIcon from '~/assets/images/utils/organization.svg'
 
 const { formatMessage } = useVIntl()
 
+const messages = defineMessages({
+  organizationTitle: {
+    id: 'dashboard.organization.title',
+    defaultMessage: 'Organizations',
+  },
+})
+
 definePageMeta({
   middleware: 'auth',
 })

pages/dashboard/organizations.vue

@@ -3,11 +3,11 @@
     <OrganizationCreateModal ref="createOrgModal" />
     <section class="universal-card">
       <div class="header__row">
-        <h2 class="header__title">Organizations</h2>
+        <h2 class="header__title">{{ formatMessage(messages.title) }}</h2>
         <div class="input-group">
           <button class="iconified-button brand-button" @click="openCreateOrgModal">
             <PlusIcon />
-            Create organization
+            {{ formatMessage(messages.createOrganization) }}
           </button>
         </div>
       </div>
@@ -32,18 +32,21 @@
                 <div class="stats">
                   <UsersIcon />
                   <span>
-                    {{ onlyAcceptedMembers(org.members).length }} member<template
-                      v-if="onlyAcceptedMembers(org.members).length !== 1"
-                      >s</template
-                    >
+                    {{
+                      formatMessage(messages.membersLabel, {
+                        count: formatCompactNumber(onlyAcceptedMembers(org.members).length),
+                      })
+                    }}
                   </span>
                 </div>
               </span>
             </div>
           </nuxt-link>
         </div>
       </template>
-      <template v-else> Make an organization! </template>
+      <template v-else>
+        {{ formatMessage(messages.makeOrganizationLabel) }}
+      </template>
     </section>
   </div>
 </template>
@@ -54,6 +57,32 @@ import { PlusIcon, Avatar, UsersIcon } from 'omorphia'
 import { useAuth } from '~/composables/auth.js'
 import OrganizationCreateModal from '~/components/ui/OrganizationCreateModal.vue'
 
+const { formatMessage } = useVIntl()
+const formatCompactNumber = useCompactNumber()
+
+const messages = defineMessages({
+  createOrganization: {
+    id: 'dashboard.organizations.action.create-organization',
+    defaultMessage: 'Create organization',
+  },
+  fetchOranizationError: {
+    id: 'dashboard.organizations.error.fetch-organization',
+    defaultMessage: 'Failed to fetch organizations',
+  },
+  makeOrganizationLabel: {
+    id: 'dashboard.organizations.make-organization',
+    defaultMessage: 'Make an organization!',
+  },
+  membersLabel: {
+    id: 'dashboard.organizations.members',
+    defaultMessage: '{count, plural, one {{count} member} other {{count} members}}',
+  },
+  title: {
+    id: 'dashboard.organizations.title',
+    defaultMessage: 'Organizations',
+  },
+})
+
 const createOrgModal = ref(null)
 
 const auth = await useAuth()
@@ -72,7 +101,7 @@ const onlyAcceptedMembers = (members) => members.filter((member) => member?.acce
 if (error.value) {
   createError({
     statusCode: 500,
-    message: 'Failed to fetch organizations',
+    message: formatMessage(message.fetchOranizationError),
   })
 }