#50 [card] pronoun cards - overview, multilingual support

components/Account.vue

@@ -40,6 +40,14 @@
             </div>
         </div>
 
+        <Loading :value="profiles"><template v-if="profiles !== undefined">
+            <ul class="list-group mb-3">
+                <li v-for="(options, locale) in locales" :key="locale" :class="['list-group-item', locale === config.locale ? 'profile-current' : '']">
+                    <ProfileOverview :profile="profiles[locale]" :locale="locale"/>
+                </li>
+            </ul>
+        </template></Loading>
+
         <p>
             <button class="btn btn-outline-secondary btn-sm" @click="logout">
                 <Icon v="sign-out"/>
@@ -57,7 +65,12 @@
                 email: this.$user().email,
 
                 error: '',
-            };
+
+                profiles: undefined,
+            }
+        },
+        async mounted() {
+            this.profiles = await this.$axios.$get(`/profile/get/${this.$user().username}`);
         },
         methods: {
             async changeUsername() {
@@ -85,3 +98,11 @@
         },
     }
 </script>
+
+<style lang="scss" scoped>
+    @import "assets/style";
+
+    .profile-current {
+        border-left: 3px solid $primary;
+    }
+</style>

components/Loading.vue

@@ -1,9 +1,9 @@
 <template>
     <section class="w-100">
-        <div v-show="isLoaded">
+        <div v-if="isLoaded">
             <slot/>
         </div>
-        <p class="text-center" v-show="!isLoaded">
+        <p class="text-center" v-if="!isLoaded">
             <Spinner :size="size"/>
         </p>
     </section>

components/LocaleLink.vue

@@ -0,0 +1,17 @@
+<template>
+    <nuxt-link v-if="locale === config.locale" :to="link">
+        <slot></slot>
+    </nuxt-link>
+    <a v-else :href="locales[locale].url + link">
+        <slot></slot>
+    </a>
+</template>
+
+<script>
+    export default {
+        props: {
+            link: { required: true },
+            locale:  { required: true },
+        },
+    };
+</script>

components/Opinion.vue

@@ -1,15 +1,17 @@
 <template>
     <span>
-        <Icon :v="icon()"/>
         <strong v-if="opinion > 0">
+            <img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" alt="" class="icon"/>
             <nuxt-link v-if="link" :to="link">{{ word }}</nuxt-link>
             <span v-else>{{ word }}</span>
         </strong>
-        <span v-else-if="opinion < 0" class="text-muted">
+        <span v-else-if="opinion < 0" class="text-muted small">
+            <Icon v="thumbs-down"/>
             <nuxt-link v-if="link" :to="link">{{ word }}</nuxt-link>
             <span v-else>{{ word }}</span>
         </span>
         <span v-else>
+            <Icon v="thumbs-up"/>
             <nuxt-link v-if="link" :to="link">{{ word }}</nuxt-link>
             <span v-else>{{ word }}</span>
         </span>
@@ -23,16 +25,13 @@
             opinion: { required: true },
             link: {},
         },
-        methods: {
-            icon() {
-                const opinion = parseInt(this.opinion);
-                if (opinion > 0) {
-                    return 'heart';
-                } else if (opinion === 0) {
-                    return 'thumbs-up';
-                }
-                return 'thumbs-down';
-            }
-        }
     }
 </script>
+
+<style lang="scss" scoped>
+    img.icon {
+        height: 1em;
+        width: 1.25em;
+        text-align: center;
+    }
+</style>

components/ProfileOverview.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="d-flex justify-content-between align-items-center">
+        {{ locales[locale].name }}
+        <span v-if="profile">
+            <LocaleLink :locale="locale" :link="`/@${profile.username}`" class="badge badge-primary">
+                <T>profile.show</T>
+            </LocaleLink>
+            <LocaleLink :locale="locale" link="/TODO" class="badge badge-light border">
+                <T>profile.edit</T>
+            </LocaleLink>
+            <LocaleLink :locale="locale" link="/TODOS" class="badge badge-light border border-danger">
+                <T>profile.delete</T>
+            </LocaleLink>
+        </span>
+        <span v-else>
+            <LocaleLink :locale="locale" link="/TODO" class="badge badge-light border">
+                <T>profile.init</T>
+            </LocaleLink>
+        </span>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            profile: { required: true },
+            locale: { required: true },
+        }
+    }
+</script>

locale/pl/translations.suml

@@ -629,6 +629,10 @@ profile:
     names: 'Imiona'
     pronouns: 'Zaimki'
     words: 'Słowa'
+    init: 'Stwórz wizytówkę'
+    show: 'Pokaż'
+    edit: 'Edytuj'
+    delete: 'Usuń'
 
 share: 'Udostępnij'
 

plugins/globals.js

@@ -2,9 +2,17 @@ import Vue from 'vue'
 import t from '../src/translator';
 import config from '../data/config.suml';
 import { locales } from '../src/data';
+import {buildDict} from "../src/helpers";
 
 export default ({ app }) => {
     Vue.prototype.$t = t;
     Vue.prototype.config = config;
-    Vue.prototype.locales = locales;
+    Vue.prototype.locales = buildDict(function* () {
+        yield [ config.locale, locales[config.locale] ];
+        for (let l in locales) {
+            if (locales.hasOwnProperty(l) && l !== config.locale) {
+                yield [l, locales[l]];
+            }
+        }
+    });
 }

routes/profile.vue

@@ -1,10 +1,19 @@
 <template>
     <div class="container">
         <template v-if="profile">
-            <h2>
-                <Avatar :user="profile"/>
-                @{{username}}
-            </h2>
+            <div class="mb-3 d-flex justify-content-between align-items-center flex-column flex-md-row">
+                <h2 class="text-nowrap">
+                    <Avatar :user="profile"/>
+                    @{{username}}
+                </h2>
+                <div class="list-group">
+                    <LocaleLink v-for="(options, locale) in locales" :key="locale" v-if="profiles[locale] !== undefined"
+                                :locale="locale" :link="`/@${username}`"
+                                :class="['list-group-item list-group-item-action small px-3 py-2 text-center', locale === config.locale ? 'active disabled' : '']">
+                        {{options.name}}
+                    </LocaleLink>
+                </div>
+            </div>
 
             <section v-if="profile.description.trim().length">
                 <p v-for="line in profile.description.split('\n')" class="mb-1">
@@ -77,8 +86,10 @@
     import { head } from "../src/helpers";
     import { templates } from "~/src/data";
     import { buildTemplate } from "../src/buildTemplate";
+    import LocaleLink from "../components/LocaleLink";
 
     export default {
+        components: {LocaleLink},
         data() {
             return {
                 username: this.$route.params.pathMatch,