From 73db86308019f03c2aabc264b337fd6a7478b16f Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Wed, 18 Apr 2018 17:39:52 +0100
Subject: [PATCH 1/2] i18n: playlists components

---
 front/src/components/playlists/Card.vue       |  7 ++++--
 front/src/components/playlists/Editor.vue     | 20 +++++++++--------
 front/src/components/playlists/Form.vue       | 22 +++++++++----------
 .../components/playlists/PlaylistModal.vue    | 22 +++++++++----------
 .../playlists/TrackPlaylistIcon.vue           |  4 ++--
 5 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 6dd1b0a0c..670b43194 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -10,13 +10,16 @@
         <i class="user icon"></i> {{ playlist.user.username }}
       </div>
       <div class="meta">
-        <i class="clock icon"></i> Updated <human-date :date="playlist.modification_date"></human-date>
+        <i class="clock icon"></i>
+        <i18next path="Updated {%date%}">
+          <human-date :date="playlist.modification_date" />
+        </i18next>
       </div>
     </div>
     <div class="extra content">
       <span>
         <i class="sound icon"></i>
-        {{ playlist.tracks_count }} tracks
+        {{ $t('{%count%} tracks', { count: playlist.tracks_count }) }}
       </span>
       <play-button class="mini basic orange right floated" :playlist="playlist">Play all</play-button>
     </div>
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index c668857ea..c036737ce 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -2,16 +2,16 @@
   <div class="ui text container">
     <playlist-form @updated="$emit('playlist-updated', $event)" :title="false" :playlist="playlist"></playlist-form>
     <h3 class="ui top attached header">
-      Playlist editor
+      {{ $t('Playlist editor') }}
     </h3>
     <div class="ui attached segment">
       <template v-if="status === 'loading'">
         <div class="ui active tiny inline loader"></div>
-        Syncing changes to server...
+        {{ $t('Syncing changes to server...') }}
       </template>
       <template v-else-if="status === 'errored'">
         <i class="red close icon"></i>
-        An error occured while saving your changes
+        {{ $t('An error occured while saving your changes') }}
         <div v-if="errors.length > 0" class="ui negative message">
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
@@ -19,7 +19,7 @@
         </div>
       </template>
       <template v-else-if="status === 'saved'">
-        <i class="green check icon"></i> Changes synced with server
+        <i class="green check icon"></i> {{ $t('Changes synced with server') }}
       </template>
     </div>
     <div class="ui bottom attached segment">
@@ -28,13 +28,15 @@
         :disabled="queueTracks.length === 0"
         :class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
         title="Copy tracks from current queue to playlist">
-          <i class="plus icon"></i> Insert from queue ({{ queueTracks.length }} tracks)</div>
+          <i class="plus icon"></i>
+          {{ $t('Insert from queue ({%count%} tracks)', { count: queueTracks.length }) }}
+        </div>
 
       <dangerous-button :disabled="plts.length === 0" class="labeled right floated icon" color='yellow' :action="clearPlaylist">
-        <i class="eraser icon"></i> Clear playlist
-        <p slot="modal-header">Do you want to clear the playlist "{{ playlist.name }}"?</p>
-        <p slot="modal-content">This will remove all tracks from this playlist and cannot be undone.</p>
-        <p slot="modal-confirm">Clear playlist</p>
+        <i class="eraser icon"></i> {{ $t('Clear playlist') }}
+        <p slot="modal-header">{{ $t('Do you want to clear the playlist "{%name%}"?', { name: playlist.name }) }}</p>
+        <p slot="modal-content">{{ $t('This will remove all tracks from this playlist and cannot be undone.') }}</p>
+        <p slot="modal-confirm">{{ $t('Clear playlist') }}</p>
       </dangerous-button>
       <div class="ui hidden divider"></div>
       <template v-if="plts.length > 0">
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 634e310bc..1fafe2d4a 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -1,29 +1,29 @@
 <template>
   <form class="ui form" @submit.prevent="submit()">
-    <h4 v-if="title" class="ui header">Create a new playlist</h4>
+    <h4 v-if="title" class="ui header">{{ $t('Create a new playlist') }}</h4>
     <div v-if="success" class="ui positive message">
       <div class="header">
         <template v-if="playlist">
-          Playlist updated
+          {{ $t('Playlist updated') }}
         </template>
         <template v-else>
-          Playlist created
+          {{ $t('Playlist created') }}
         </template>
       </div>
     </div>
     <div v-if="errors.length > 0" class="ui negative message">
-      <div class="header">We cannot create the playlist</div>
+      <div class="header">{{ $t('We cannot create the playlist') }}</div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>
     </div>
     <div class="three fields">
       <div class="field">
-        <label>Playlist name</label>
+        <label>{{ $t('Playlist name') }}</label>
         <input v-model="name" required type="text" placeholder="My awesome playlist" />
       </div>
       <div class="field">
-        <label>Playlist visibility</label>
+        <label>{{ $t('Playlist visibility') }}</label>
         <select class="ui dropdown" v-model="privacyLevel">
           <option :value="c.value" v-for="c in privacyLevelChoices">{{ c.label }}</option>
         </select>
@@ -31,8 +31,8 @@
       <div class="field">
         <label>&nbsp;</label>
         <button :class="['ui', 'fluid', {'loading': isLoading}, 'button']" type="submit">
-          <template v-if="playlist">Update playlist</template>
-          <template v-else>Create playlist</template>
+          <template v-if="playlist">{{ $t('Update playlist') }}</template>
+          <template v-else>{{ $t('Create playlist') }}</template>
         </button>
       </div>
     </div>
@@ -61,15 +61,15 @@ export default {
       privacyLevelChoices: [
         {
           value: 'me',
-          label: 'Nobody except me'
+          label: this.$t('Nobody except me')
         },
         {
           value: 'instance',
-          label: 'Everyone on this instance'
+          label: this.$t('Everyone on this instance')
         },
         {
           value: 'everyone',
-          label: 'Everyone'
+          label: this.$t('Everyone')
         }
       ]
     }
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 5fdf585df..03e36ee88 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -1,14 +1,14 @@
 <template>
   <modal @update:show="update" :show="$store.state.playlists.showModal">
     <div class="header">
-      Manage playlists
+      {{ $t('Manage playlists') }}
     </div>
     <div class="scrolling content">
       <div class="description">
         <template v-if="track">
-          <h4 class="ui header">Current track</h4>
+          <h4 class="ui header">{{ $t('Current track') }}</h4>
           <div>
-            "{{ track.title }}" by {{ track.artist.name }}
+            {{ $t('"{%title%}" by {%artist%}', { title: track.title, artist: track.artist.name }) }}
           </div>
           <div class="ui divider"></div>
         </template>
@@ -16,20 +16,20 @@
         <playlist-form></playlist-form>
         <div class="ui divider"></div>
         <div v-if="errors.length > 0" class="ui negative message">
-          <div class="header">We cannot add the track to a playlist</div>
+          <div class="header">{{ $t('We cannot add the track to a playlist') }}</div>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>
         </div>
         </div>
-        <h4 class="ui header">Available playlists</h4>
+        <h4 class="ui header">{{ $t('Available playlists') }}</h4>
         <table class="ui unstackable very basic table">
           <thead>
             <tr>
               <th></th>
-              <th>Name</th>
-              <th class="sorted descending">Last modification</th>
-              <th>Tracks</th>
+              <th>{{ $t('Name') }}</th>
+              <th class="sorted descending">{{ $t('Last modification') }}</th>
+              <th>{{ $t('Tracks') }}</th>
               <th></th>
             </tr>
           </thead>
@@ -48,9 +48,9 @@
                 <div
                   v-if="track"
                   class="ui green icon basic small right floated button"
-                  title="Add to this playlist"
+                  :title="{{ $t('Add to this playlist') }}"
                   @click="addToPlaylist(playlist.id)">
-                  <i class="plus icon"></i> Add track
+                  <i class="plus icon"></i> {{ $t('Add track') }}
                 </div>
               </td>
             </tr>
@@ -59,7 +59,7 @@
       </div>
     </div>
     <div class="actions">
-      <div class="ui cancel button">Cancel</div>
+      <div class="ui cancel button">{{ $t('Cancel') }}</div>
     </div>
   </modal>
 </template>
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index bba4c515b..cd74b4d27 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/front/src/components/playlists/TrackPlaylistIcon.vue
@@ -4,13 +4,13 @@
     v-if="button"
     :class="['ui', 'button']">
     <i class="list icon"></i>
-    Add to playlist...
+    {{ $t('Add to playlist...') }}
   </button>
   <i
     v-else
     @click="$store.commit('playlists/chooseTrack', track)"
     :class="['playlist-icon', 'list', 'link', 'icon']"
-    title="Add to playlist...">
+    :title="$t('Add to playlist...')">
   </i>
 </template>
 

From 81b84b486538885978fe1f27f9c06aece83e126b Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Wed, 18 Apr 2018 18:58:13 +0100
Subject: [PATCH 2/2] Fix $t bug

---
 front/src/components/playlists/Form.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 1fafe2d4a..d19cd6876 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -57,8 +57,20 @@ export default {
     let d = {
       errors: [],
       success: false,
-      isLoading: false,
-      privacyLevelChoices: [
+      isLoading: false
+    }
+    if (this.playlist) {
+      d.name = this.playlist.name
+      d.privacyLevel = this.playlist.privacy_level
+    } else {
+      d.privacyLevel = this.$store.state.auth.profile.privacy_level
+      d.name = ''
+    }
+    return d
+  },
+  computed: {
+    privacyLevelChoices: function () {
+      return [
         {
           value: 'me',
           label: this.$t('Nobody except me')
@@ -73,14 +85,6 @@ export default {
         }
       ]
     }
-    if (this.playlist) {
-      d.name = this.playlist.name
-      d.privacyLevel = this.playlist.privacy_level
-    } else {
-      d.privacyLevel = this.$store.state.auth.profile.privacy_level
-      d.name = ''
-    }
-    return d
   },
   methods: {
     submit () {