i18n for playlist views

front/src/views/playlists/Detail.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment" v-title="'Playlist'">
+    <div v-if="isLoading" class="ui vertical segment" v-title="$t('Playlist')">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment" v-title="playlist.name">
@@ -9,28 +9,28 @@
           <i class="circular inverted list yellow icon"></i>
           <div class="content">
             {{ playlist.name }}
-            <div class="sub header">
-              Playlist containing {{ playlistTracks.length }} tracks,
-              by <username :username="playlist.user.username"></username>
-            </div>
+            <i18next tag="div" class="sub header" path="Playlist containing {%0%} tracks, by {%1%}">
+              {{ playlistTracks.length }}
+              <username :username="playlist.user.username"></username>
+            </i18next>
           </div>
         </h2>
         <div class="ui hidden divider"></div>
         </button>
-        <play-button class="orange" :tracks="tracks">Play all</play-button>
+        <play-button class="orange" :tracks="tracks">{{ $t('Play all') }}</play-button>
         <button
           class="ui icon button"
           v-if="playlist.user.id === $store.state.auth.profile.id"
           @click="edit = !edit">
           <i class="pencil icon"></i>
-          <template v-if="edit">End edition</template>
-          <template v-else>Edit...</template>
+          <template v-if="edit">{{ $t('End edition') }}</template>
+          <template v-else>{{ $t('Edit...') }}</template>
         </button>
         <dangerous-button class="labeled icon" :action="deletePlaylist">
-          <i class="trash icon"></i> Delete
-          <p slot="modal-header">Do you want to delete the playlist "{{ playlist.name }}"?</p>
-          <p slot="modal-content">This will completely delete this playlist and cannot be undone.</p>
-          <p slot="modal-confirm">Delete playlist</p>
+          <i class="trash icon"></i> {{ $t('Delete') }}
+          <p slot="modal-header">{{ $t('Do you want to delete the playlist "{% playlist %}"?', {playlist: playlist.name}) }}</p>
+          <p slot="modal-content">{{ $t('This will completely delete this playlist and cannot be undone.') }}</p>
+          <p slot="modal-confirm">{{ $t('Delete playlist') }}</p>
         </dangerous-button>
       </div>
     </div>

front/src/views/playlists/List.vue

@@ -1,21 +1,21 @@
 <template>
-  <div v-title="'Playlists'">
+  <div v-title="$t('Playlists')">
     <div class="ui vertical stripe segment">
-      <h2 class="ui header">Browsing playlists</h2>
+      <h2 class="ui header">{{ $t('Browsing playlists') }}</h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">
         <template v-if="$store.state.auth.authenticated">
           <button
             @click="$store.commit('playlists/chooseTrack', null)"
-            class="ui basic green button">Manage your playlists</button>
+            class="ui basic green button">{{ $t('Manage your playlists') }}</button>
           <div class="ui hidden divider"></div>
         </template>
         <div class="fields">
           <div class="field">
-            <label>Search</label>
-            <input type="text" v-model="query" placeholder="Enter an playlist name..."/>
+            <label>{{ $t('Search') }}</label>
+            <input type="text" v-model="query" :placeholder="$t('Enter an playlist name...')"/>
           </div>
           <div class="field">
-            <label>Ordering</label>
+            <label>{{ $t('Ordering') }}</label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
                 {{ option[1] }}
@@ -23,14 +23,14 @@
             </select>
           </div>
           <div class="field">
-            <label>Ordering direction</label>
+            <label>{{ $t('Ordering direction') }}</label>
             <select class="ui dropdown" v-model="orderingDirection">
-              <option value="">Ascending</option>
-              <option value="-">Descending</option>
+              <option value="">{{ $t('Ascending') }}</option>
+              <option value="-">{{ $t('Descending') }}</option>
             </select>
           </div>
           <div class="field">
-            <label>Results per page</label>
+            <label>{{ $t('Results per page') }}</label>
             <select class="ui dropdown" v-model="paginateBy">
               <option :value="parseInt(12)">12</option>
               <option :value="parseInt(25)">25</option>
@@ -76,6 +76,7 @@ export default {
     Pagination
   },
   data () {
+    console.log('YOLO', this.$t)
     let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
     return {
       isLoading: true,