Move i18n to vue-i18n and json files

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Group/Create.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="root">
-    <h1 v-translate>Create a new group</h1>
+    <h1>{{ $t('Create a new group') }}</h1>
 
     <div>
-      <b-field :label="$gettext('Group name')">
+      <b-field :label="$t('Group name')">
         <b-input aria-required="true" required v-model="group.preferred_username"/>
       </b-field>
 
-      <b-field :label="$gettext('Group full name')">
+      <b-field :label="$t('Group full name')">
         <b-input aria-required="true" required v-model="group.name"/>
       </b-field>
 
-      <b-field :label="$gettext('Description')">
+      <b-field :label="$t('Description')">
         <b-input aria-required="true" required v-model="group.description" type="textarea"/>
       </b-field>
 
@@ -26,7 +26,7 @@
       </div>
 
       <button class="button is-primary" @click="createGroup()">
-        <translate>Create my group</translate>
+        {{ $t('Create my group') }}
       </button>
     </div>
   </div>
@@ -77,7 +77,7 @@ export default class CreateGroup extends Vue {
       await this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } });
 
       this.$notifier.success(
-        this.$gettextInterpolate('Group %{displayName} created', { displayName: this.group.displayName() }),
+        this.$t('Group {displayName} created', { displayName: this.group.displayName() }) as string,
       );
     } catch (err) {
       this.handleError(err);

js/src/views/Group/Group.vue

@@ -25,7 +25,7 @@
       </div>
       <section class="box" v-if="group.organizedEvents.length > 0">
         <h2 class="subtitle">
-          <translate>Organized</translate>
+          {{ $t('Organized') }}
         </h2>
         <div class="columns">
           <EventCard
@@ -39,7 +39,7 @@
       </section>
       <section v-if="group.members.length > 0">
         <h2 class="subtitle">
-          <translate>Members</translate>
+          {{ $t('Members') }}
         </h2>
         <div class="columns">
           <span
@@ -50,7 +50,7 @@
       </section>
     </div>
     <b-message v-else-if="!group && $apollo.loading === false" type="is-danger">
-      <translate>No group found</translate>
+      {{ $t('No group found') }}
     </b-message>
   </section>
 </template>

js/src/views/Group/GroupList.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <h1>
-      <translate>Group List</translate>
+      {{ $t('Group List') }}
     </h1>
     <b-loading :active.sync="$apollo.loading"></b-loading>
     <div class="columns">
@@ -13,7 +13,7 @@
       />
     </div>
     <router-link class="button" :to="{ name: RouteName.CREATE_GROUP }">
-      <translate>Create group</translate>
+      {{ $t('Create group') }}
     </router-link>
   </section>
 </template>