i18n: profile #74 (#153)

we-dance · Feb 8, 2022 · ed891dc · ed891dc
1 parent 372885a
commit ed891dc
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 69 deletions.
diff --git a/components/TCardActions.vue b/components/TCardActions.vue
@@ -3,26 +3,35 @@
     <TButton
       :type="type"
       icon="fire"
-      label="Report"
+      :label="$t('report')"
       @click="isReportShown = true"
     />
-    <TPopup v-if="isReportShown" title="Report" @close="isReportShown = false">
+    <TPopup
+      v-if="isReportShown"
+      :title="$t('report')"
+      @close="isReportShown = false"
+    >
       <div class="p-4">
         <TField
           v-model="reportCategory"
-          label="Reason"
+          :label="$t('TCardActions.Reason')"
           component="TInputSelect"
-          :options="['spam', 'other']"
+          :options="[
+            { value: 'spam', label: $t('TCardActions.options.spam') },
+            { value: 'other', label: $t('TCardActions.options.other') },
+          ]"
         />
         <TField
           v-model="reportReason"
           class="mt-2"
-          label="Comments"
+          :label="$t('comments.label')"
           component="TInputTextarea"
         />
         <div class="mt-4 flex justify-end">
-          <TButton class="mr-2" @click="cancelReport">Cancel</TButton>
-          <TButton type="danger" @click="report">Report</TButton>
+          <TButton class="mr-2" @click="cancelReport">{{
+            $t('cancel')
+          }}</TButton>
+          <TButton type="danger" @click="report">{{ $t('report') }}</TButton>
         </div>
       </div>
     </TPopup>

diff --git a/components/TItemToolbar.vue b/components/TItemToolbar.vue
@@ -5,14 +5,14 @@
       icon="people"
       :to="`/${collection}/${item.id}/dashboard`"
       class="hover:text-blue-500 mr-2"
-      :label="$('dashboard.label')"
+      :label="$('dashboard')"
     />
     <TButton
       v-if="edit"
       icon="edit"
       :to="`/${collection}/${item.id}/edit`"
       class="hover:text-blue-500"
-      :label="$t('edit.label')"
+      :label="$t('edit')"
     />
     <slot />
   </div>

diff --git a/components/TPost.vue b/components/TPost.vue
@@ -30,35 +30,35 @@
             @click="show = !show"
             class="p-2 text-blue-700 cursor-pointer underline hover:no-underline text-xs text-center mb-2"
           >
-            {{ show ? 'Show less' : 'Show more' }}
+            {{ show ? $t('TPost.showLess') : $t('TPost.showMore') }}
           </div>
         </div>
       </div>
 
       <TDropdown
         v-if="!item.hideMeta || can('edit', 'posts', item)"
-        :title="$t('TDropdown.title')"
+        :title="$t('TPost.dropdown')"
         class="-mr-4"
       >
         <TButton
           v-if="can('edit', 'posts', item) && item.type !== 'event'"
           type="context"
           icon="edit"
           :to="`/posts/${item.id}/edit`"
-          label="Edit"
+          :label="$t('edit')"
         />
         <TButton
           v-if="can('edit', 'posts', item) && item.type === 'event'"
           type="context"
           icon="edit"
           :to="`/events/${item.id}/edit`"
-          label="Edit"
+          :label="$t('edit')"
         />
         <TButton
           v-if="can('edit', 'posts', item)"
           type="context"
           icon="delete"
-          label="Delete"
+          :label="$t('delete')"
           @click="remove(item.id)"
         />
         <TCardActions
@@ -75,7 +75,7 @@
           :url="`https://wedance.vip/posts/${item.id}`"
           :text="item.description"
           type="context"
-          label="Share"
+          :label="$t('share.title')"
         />
       </TDropdown>
     </div>

diff --git a/components/TPostList.vue b/components/TPostList.vue
@@ -18,7 +18,7 @@
       </div>
 
       <div class="mt-4 p-4 flex justify-center items-center">
-        <TButton @click="loadMore">Load more</TButton>
+        <TButton @click="loadMore">{{ $t('TPostList.loadMore') }}</TButton>
       </div>
     </div>
   </div>

diff --git a/components/TProfile.vue b/components/TProfile.vue
@@ -7,7 +7,7 @@
           v-if="isAdmin()"
           type="context"
           :fields="profileFields"
-          label="Edit Profile"
+          :label="$t('myprofile.edit')"
           collection="profiles"
           singular="profile"
           :item="profile"
@@ -27,30 +27,40 @@
           :url="$route.fullPath"
           :text="profile.name"
           type="context"
-          label="Share"
+          :label="$t('share.title')"
         />
       </TDropdown>
     </THeader>
 
     <template v-if="uid === profile.id">
       <div v-if="intro.visible" class="m-4 rounded border p-4">
         <h2 class="border-b p-4 font-bold text-lg -m-4 mb-4">
-          Welcome to WeDance!
+          {{ $t('myprofile.intro.title') }}
         </h2>
         <div class="typo">
           <p>
-            This is your profile. A square below is a poster – your visual
-            introduction.
-          </p>
-          <p>
-            Your poster is also shown in
-            <NuxtLink to="/community">Сommunity</NuxtLink> among other dancers.
-          </p>
-          <p>
-            Click
-            <NuxtLink to="/settings?tab=profile">Edit Profile</NuxtLink>
-            and add:
+            {{ $t('myprofile.intro.description1') }}
           </p>
+          <div>
+            <i18n
+              path="myprofile.intro.description2"
+              tag="p"
+              for="myprofile.intro.community"
+            >
+              <NuxtLink to="/community">{{
+                $t('myprofile.intro.community')
+              }}</NuxtLink>
+            </i18n>
+          </div>
+          <i18n
+            path="myprofile.intro.description3"
+            tag="p"
+            for="myprofile.edit"
+          >
+            <NuxtLink to="/settings?tab=profile">{{
+              $t('myprofile.edit')
+            }}</NuxtLink>
+          </i18n>
           <ul>
             <li v-for="field in intro.missing" :key="field.name">
               {{ field.label }}
@@ -62,19 +72,19 @@
       <div v-if="false">
         <div>
           <p>
-            WeDance is represented by Ambassador in local dance communities.
-            Volunteers help Ambassador with different initiatives to unite local
-            dancers. WeDance is created and supported by volunteers. Get
-            Involved, become volunteer!
+            {{ $t('myprofile.ambassador.description1') }}
+          </p>
+          <p>
+            {{
+              $t('myprofile.ambassador.description2', { community: community })
+            }}
           </p>
-          <p>Ambassador in {{ community }} is</p>
         </div>
 
         <w-profile username="CharlyAl"></w-profile>
 
         <div class="mt-4">
-          Help us build a dance network in your city, follow and interact with
-          our local social media accounts:
+          {{ $t('myprofile.ambassador.description2') }}
           <div class="mt-4 flex flex-col items-center space-y-2">
             <TButton
               icon="instagram"
@@ -117,15 +127,25 @@
             {{ profile.name }}
           </div>
           <div class="ml-2 text-sm text-gray-700">
-            <span v-if="profile.height">• {{ profile.height }}cm</span>
-            <span v-if="profile.weight">• {{ profile.weight }}kg</span>
+            <span v-if="profile.height"
+              >•
+              {{
+                $t('myprofile.profile.height', { height: profile.height })
+              }}</span
+            >
+            <span v-if="profile.weight"
+              >•
+              {{
+                $t('myprofile.profile.weight', { weight: profile.weight })
+              }}</span
+            >
           </div>
         </div>
         <TButton
           v-if="uid !== profile.id"
           type="primary"
           :to="`/chat/${profile.username}`"
-          >Chat</TButton
+          >{{ $t('profile.chat.label') }}</TButton
         >
       </div>
 
@@ -137,12 +157,12 @@
     <TProfileContacts :profile="profile" class="p-2 mb-4 bg-gray-100" />
 
     <div v-if="uid === profile.id" class="flex justify-center space-x-2">
-      <TButton label="Edit Profile" to="/settings?tab=profile" />
+      <TButton :label="$t('myprofile.edit')" to="/settings?tab=profile" />
     </div>
 
     <WTeaser
       v-if="profile.partner === 'Yes'"
-      title="I am looking for a dance partner"
+      :title="$t('profile.partnerSearch.title')"
       :description="profile.partnerBio"
       class="w-full mt-4"
     />
@@ -164,15 +184,15 @@
 
     <div v-if="uid === profile.id" class="w-full flex justify-center p-4">
       <TButton to="/events/-/edit" type="primary">{{
-        $t('myprofile.events.add')
+        $t('myprofile.addEvent')
       }}</TButton>
     </div>
 
     <TProfileDetails v-if="profile.type !== 'City'" :profile="profile" />
 
     <div v-if="uid === profile.id" class="w-full flex justify-center p-4 mt-4">
       <TButton to="/posts/-/edit" type="primary">{{
-        $t('myprofile.posts.add')
+        $t('myprofile.addPost')
       }}</TButton>
     </div>
 
@@ -189,6 +209,7 @@ import { useApp } from '~/use/app'
 import { useAuth } from '~/use/auth'
 import { useProfiles } from '~/use/profiles'
 import { getExcerpt } from '~/utils'
+import { useI18n } from '~/use/i18n'
 
 export default {
   props: {
@@ -201,34 +222,35 @@ export default {
     const { uid, isAdmin, can } = useAuth()
     const { profileFields } = useProfiles()
     const { getCity } = useApp()
+    const { t } = useI18n()
 
     const community = computed(() => getCity(props.profile?.place))
 
     const intro = {
       fields: [
         {
           name: 'photo',
-          label: 'your photo',
+          label: t('myprofile.intro.photo'),
         },
         {
           name: 'gender',
-          label: 'your gender',
+          label: t('myprofile.intro.gender'),
         },
         {
           name: 'styles',
-          label: 'what do you dance',
+          label: t('myprofile.intro.styles'),
         },
         {
           name: 'bio',
-          label: 'teaser (short introduction)',
+          label: t('myprofile.intro.bio'),
         },
         {
           name: 'place',
-          label: 'your city',
+          label: t('myprofile.intro.place'),
         },
         {
           name: 'objectives',
-          label: 'your objectives',
+          label: t('myprofile.intro.objectives'),
         },
       ],
       missing: [],

diff --git a/components/TProfileDetails.vue b/components/TProfileDetails.vue
@@ -1,46 +1,46 @@
 <template>
   <div class="space-y-4 mt-8 p-4 bg-gray-100">
     <dl v-if="profile.locales">
-      <dt class="font-bold mr-1">Languages:</dt>
+      <dt class="font-bold mr-1">{{ $t('profile.languages') }}:</dt>
       <dd>{{ getLabels(languages, profile.locales) }}</dd>
     </dl>
     <dl v-else-if="profile.languages">
-      <dt class="font-bold mr-1">Languages:</dt>
+      <dt class="font-bold mr-1">{{ $t('profile.languages') }}:</dt>
       <dd>{{ profile.languages }}</dd>
     </dl>
     <div v-if="profile.objectives">
-      <h2 class="font-bold">Objectives:</h2>
+      <h2 class="font-bold">{{ $t('profile.objectives') }}:</h2>
       <div>{{ getLabels(objectivesList, profile.objectives) }}</div>
     </div>
     <div v-if="profile.learning">
-      <h2 class="font-bold">Which dance topics you are interested in?</h2>
+      <h2 class="font-bold">{{ $t('profile.learning.label') }}</h2>
       <div>{{ profile.learning }}</div>
     </div>
     <div v-if="profile.styles">
-      <h2 class="font-bold">Dance styles:</h2>
+      <h2 class="font-bold">{{ $t('profile.style') }}:</h2>
       <TStyles :value.sync="profile.styles" />
     </div>
     <div v-else-if="profile.skills">
-      <h2 class="font-bold">Dance styles:</h2>
+      <h2 class="font-bold">{{ $t('profile.style') }}:</h2>
       <div>{{ profile.skills }}</div>
     </div>
     <div v-if="profile.jobs">
-      <h2 class="font-bold">I can help with:</h2>
+      <h2 class="font-bold">{{ $t('profile.jobs.label') }}:</h2>
       <div>{{ profile.jobs }}</div>
     </div>
 
     <dl class="mt-4 md:flex">
-      <dt class="font-bold mr-1">Joined:</dt>
+      <dt class="font-bold mr-1">{{ $t('profile.joined') }}:</dt>
       <dd>{{ getDateTimeYear(profile.createdAt) }}</dd>
     </dl>
 
     <dl v-if="profile.lastLoginAt" class="mt-4 md:flex">
-      <dt class="font-bold mr-1">Last seen:</dt>
+      <dt class="font-bold mr-1">{{ $t('profile.profileSorts.lastSeen') }}:</dt>
       <dd>{{ getDateTimeYear(profile.lastLoginAt) }}</dd>
     </dl>
 
     <dl class="mt-4 md:flex">
-      <dt class="font-bold mr-1">Visibility:</dt>
+      <dt class="font-bold mr-1">{{ $t('profile.visibility.label') }}:</dt>
       <dd>{{ profile.visibility }}</dd>
     </dl>
   </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ @@
           </div>
           <div class="mt-4 p-4 flex justify-center items-center">
-            <TButton @click="loadMore">Load more</TButton>
+            <TButton @click="loadMore">{{ $t('TPostList.loadMore') }}</TButton>
           </div>
         </div>
       </div>
@@ Expand Down @@