Merge branch '559-i18n' into 'develop'

Resolve "[i18n]Missing localisation"

Closes #559

See merge request funkwhale/funkwhale!438

changes/changelog.d/559.bugfix

@@ -0,0 +1 @@
+Fixed a few untranslated strings (#559)

front/src/components/Home.vue

@@ -74,13 +74,10 @@
           </div>
           <div class="item">
             <i class="tag icon"></i>
-            <div class="content">
-              <template v-translate>
-                Get quality metadata about your music thanks to
-                <a href="https://musicbrainz.org" target="_blank">
-                  MusicBrainz
-                </a>
-              </template>
+            <div
+              class="content"
+              v-translate="{url: musicbrainzUrl}">
+                Get quality metadata about your music thanks to <a href="%{ url }" target="_blank">MusicBrainz</a>
             </div>
           </div>
           <div class="item">
@@ -146,6 +143,11 @@
 <script>
 
 export default {
+  data () {
+    return {
+      musicbrainzUrl: 'https://musicbrainz.org/'
+    }
+  },
   computed: {
     labels () {
       return {

front/src/components/Sidebar.vue

@@ -54,6 +54,7 @@
             <template v-else>
               <router-link class="item" :to="{name: 'login'}"><i class="sign in icon"></i><translate>Login</translate></router-link>
               <router-link class="item" :to="{path: '/signup'}">
+                <i class="corner add icon"></i>
                 <translate>Create an account</translate>
               </router-link>
             </template>

front/src/components/activity/Like.vue

@@ -9,8 +9,10 @@
        <human-date class="date" :date="event.published" />
      </div>
      <div class="extra text">
-       <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">{{ event.object.name }}</router-link>
-       <translate :translate-params="{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }</translate>
+        <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">
+          {{ event.object.name }}
+        </router-link>
+        <translate :translate-params="{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }</translate>
       </div>
    </div>
  </div>

front/src/components/activity/Listen.vue

@@ -9,8 +9,10 @@
       <human-date class="date" :date="event.published" />
      </div>
      <div class="extra text">
-       <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">{{ event.object.name }}</router-link>
-       <translate :translate-params="{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }</translate>
+        <router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">
+          {{ event.object.name }}
+        </router-link>
+        <translate :translate-params="{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }</translate>
       </div>
    </div>
  </div>

front/src/components/auth/Settings.vue

@@ -18,10 +18,10 @@
             </ul>
           </div>
           <div class="field" v-for="f in orderedSettingsFields">
-            <label :for="f.id">{{ f.label }}</label>
-            <p v-if="f.help">{{ f.help }}</p>
+            <label>{{ sharedLabels.fields[f.id].label }}</label>
+            <p v-if="f.help">{{ sharedLabels.fields[f.id].help }}</p>
             <select v-if="f.type === 'dropdown'" class="ui dropdown" v-model="f.value">
-              <option :value="c.value" v-for="c in f.choices">{{ c.label }}</option>
+              <option :value="c" v-for="c in f.choices">{{ sharedLabels.fields[f.id].choices[c] }}</option>
             </select>
           </div>
           <button :class="['ui', {'loading': isLoading}, 'button']" type="submit">
@@ -118,8 +118,10 @@ import axios from 'axios'
 import logger from '@/logging'
 import PasswordInput from '@/components/forms/PasswordInput'
 import SubsonicTokenForm from '@/components/auth/SubsonicTokenForm'
+import TranslationsMixin from '@/components/mixins/Translations'
 
 export default {
+  mixins: [TranslationsMixin],
   components: {
     PasswordInput,
     SubsonicTokenForm
@@ -144,24 +146,14 @@ export default {
           'privacy_level': {
             type: 'dropdown',
             initial: this.$store.state.auth.profile.privacy_level,
-            label: 'Activity visibility',
-            help: 'Determine the visibility level of your activity',
-            choices: [
-              {
-                value: 'me',
-                label: 'Nobody except me'
-              },
-              {
-                value: 'instance',
-                label: 'Everyone on this instance'
-              }
-            ]
+            choices: ['me', 'instance']
           }
         }
       }
     }
     d.settings.order.forEach(id => {
       d.settings.fields[id].value = d.settings.fields[id].initial
+      d.settings.fields[id].id = id
     })
     return d
   },

front/src/components/favorites/List.vue

@@ -24,7 +24,7 @@
             <label><translate>Ordering</translate></label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
-                {{ option[1] }}
+                {{ sharedLabels.filters[option[1]] }}
               </option>
             </select>
           </div>
@@ -69,10 +69,11 @@ import RadioButton from '@/components/radios/Button'
 import Pagination from '@/components/Pagination'
 import OrderingMixin from '@/components/mixins/Ordering'
 import PaginationMixin from '@/components/mixins/Pagination'
+import TranslationsMixin from '@/components/mixins/Translations'
 const FAVORITES_URL = 'tracks/'
 
 export default {
-  mixins: [OrderingMixin, PaginationMixin],
+  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
   components: {
     TrackTable,
     RadioButton,
@@ -90,10 +91,10 @@ export default {
       orderingDirection: defaultOrdering.direction || '+',
       ordering: defaultOrdering.field,
       orderingOptions: [
-        ['creation_date', 'Creation date'],
-        ['title', 'Track name'],
-        ['album__title', 'Album name'],
-        ['artist__name', 'Artist name']
+        ['creation_date', 'creation_date'],
+        ['title', 'track_title'],
+        ['album__title', 'album_title'],
+        ['artist__name', 'artist_name']
       ]
     }
   },

front/src/components/library/Artists.vue

@@ -16,7 +16,7 @@
             <label><translate>Ordering</translate></label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
-                {{ option[1] }}
+                {{ sharedLabels.filters[option[1]] }}
               </option>
             </select>
           </div>
@@ -77,13 +77,14 @@ import logger from '@/logging'
 
 import OrderingMixin from '@/components/mixins/Ordering'
 import PaginationMixin from '@/components/mixins/Pagination'
+import TranslationsMixin from '@/components/mixins/Translations'
 import ArtistCard from '@/components/audio/artist/Card'
 import Pagination from '@/components/Pagination'
 
 const FETCH_URL = 'artists/'
 
 export default {
-  mixins: [OrderingMixin, PaginationMixin],
+  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
   props: {
     defaultQuery: {type: String, required: false, default: ''}
   },
@@ -102,8 +103,8 @@ export default {
       orderingDirection: defaultOrdering.direction || '+',
       ordering: defaultOrdering.field,
       orderingOptions: [
-        ['creation_date', 'Creation date'],
-        ['name', 'Name']
+        ['creation_date', 'creation_date'],
+        ['name', 'name']
       ]
     }
   },

front/src/components/library/Radios.vue

@@ -34,7 +34,7 @@
             <label><translate>Ordering</translate></label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
-                {{ option[1] }}
+                {{ sharedLabels.filters[option[1]] }}
               </option>
             </select>
           </div>
@@ -99,13 +99,14 @@ import logger from '@/logging'
 
 import OrderingMixin from '@/components/mixins/Ordering'
 import PaginationMixin from '@/components/mixins/Pagination'
+import TranslationsMixin from '@/components/mixins/Translations'
 import RadioCard from '@/components/radios/Card'
 import Pagination from '@/components/Pagination'
 
 const FETCH_URL = 'radios/radios/'
 
 export default {
-  mixins: [OrderingMixin, PaginationMixin],
+  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
   props: {
     defaultQuery: {type: String, required: false, default: ''}
   },
@@ -124,8 +125,8 @@ export default {
       orderingDirection: defaultOrdering.direction || '+',
       ordering: defaultOrdering.field,
       orderingOptions: [
-        ['creation_date', 'Creation date'],
-        ['name', 'Name']
+        ['creation_date', 'creation_date'],
+        ['name', 'name']
       ]
     }
   },

front/src/components/manage/library/FilesTable.vue

@@ -10,7 +10,7 @@
           <label><translate>Ordering</translate></label>
           <select class="ui dropdown" v-model="ordering">
             <option v-for="option in orderingOptions" :value="option[0]">
-              {{ option[1] }}
+              {{ sharedLabels.filters[option[1]] }}
             </option>
           </select>
         </div>
@@ -111,9 +111,10 @@ import time from '@/utils/time'
 import Pagination from '@/components/Pagination'
 import ActionTable from '@/components/common/ActionTable'
 import OrderingMixin from '@/components/mixins/Ordering'
+import TranslationsMixin from '@/components/mixins/Translations'
 
 export default {
-  mixins: [OrderingMixin],
+  mixins: [OrderingMixin, TranslationsMixin],
   props: {
     filters: {type: Object, required: false}
   },
@@ -133,12 +134,12 @@ export default {
       orderingDirection: defaultOrdering.direction || '+',
       ordering: defaultOrdering.field,
       orderingOptions: [
-        ['creation_date', 'Creation date'],
-        ['accessed_date', 'Accessed date'],
-        ['modification_date', 'Modification date'],
-        ['size', 'Size'],
-        ['bitrate', 'Bitrate'],
-        ['duration', 'Duration']
+        ['creation_date', 'creation_date'],
+        ['accessed_date', 'accessed_date'],
+        ['modification_date', 'modification_date'],
+        ['size', 'size'],
+        ['bitrate', 'bitrate'],
+        ['duration', 'duration']
       ]
 
     }

front/src/components/manage/library/RequestsTable.vue

@@ -1,241 +0,0 @@
-<template>
-  <div>
-    <div class="ui inline form">
-      <div class="fields">
-        <div class="ui field">
-          <label><translate>Search</translate></label>
-          <input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
-        </div>
-        <div class="field">
-          <label><translate>Ordering</translate></label>
-          <select class="ui dropdown" v-model="ordering">
-            <option v-for="option in orderingOptions" :value="option[0]">
-              {{ option[1] }}
-            </option>
-          </select>
-        </div>
-        <div class="field">
-          <label><translate>Ordering direction</translate></label>
-          <select class="ui dropdown" v-model="orderingDirection">
-            <option value="+"><translate>Ascending</translate></option>
-            <option value="-"><translate>Descending</translate></option>
-          </select>
-        </div>
-        <div class="field">
-          <label><translate>Status</translate></label>
-          <select class="ui dropdown" v-model="status">
-            <option :value="null"><translate>All</translate></option>
-            <option :value="'pending'"><translate>Pending</translate></option>
-            <option :value="'accepted'"><translate>Accepted</translate></option>
-            <option :value="'imported'"><translate>Imported</translate></option>
-            <option :value="'closed'"><translate>Closed</translate></option>
-          </select>
-        </div>
-      </div>
-      </div>
-    <div class="dimmable">
-      <div v-if="isLoading" class="ui active inverted dimmer">
-          <div class="ui loader"></div>
-      </div>
-      <action-table
-        v-if="result"
-        @action-launched="fetchData"
-        :objects-data="result"
-        :actions="actions"
-        :action-url="'manage/requests/import-requests/action/'"
-        :filters="actionFilters">
-        <template slot="header-cells">
-          <th><translate>User</translate></th>
-          <th><translate>Status</translate></th>
-          <th><translate>Artist</translate></th>
-          <th><translate>Albums</translate></th>
-          <th><translate>Comment</translate></th>
-          <th><translate>Creation date</translate></th>
-          <th><translate>Import date</translate></th>
-          <th><translate>Actions</translate></th>
-        </template>
-        <template slot="row-cells" slot-scope="scope">
-          <td>
-            {{ scope.obj.user.username }}
-          </td>
-          <td>
-            <span class="ui green basic label" v-if="scope.obj.status === 'imported'"><translate>Imported</translate></span>
-            <span class="ui pink basic label" v-else-if="scope.obj.status === 'accepted'"><translate>Accepted</translate></span>
-            <span class="ui yellow basic label" v-else-if="scope.obj.status === 'pending'"><translate>Pending</translate></span>
-            <span class="ui red basic label" v-else-if="scope.obj.status === 'closed'"><translate>Closed</translate></span>
-          </td>
-          <td>
-            <span :title="scope.obj.artist_name">{{ scope.obj.artist_name|truncate(30) }}</span>
-          </td>
-          <td>
-            <span v-if="scope.obj.albums" :title="scope.obj.albums">{{ scope.obj.albums|truncate(30) }}</span>
-            <template v-else><translate>N/A</translate></template>
-          </td>
-          <td>
-            <span v-if="scope.obj.comment" :title="scope.obj.comment">{{ scope.obj.comment|truncate(30) }}</span>
-            <template v-else><translate>N/A</translate></template>
-          </td>
-          <td>
-            <human-date :date="scope.obj.creation_date"></human-date>
-          </td>
-          <td>
-            <human-date v-if="scope.obj.imported_date" :date="scope.obj.creation_date"></human-date>
-            <template v-else><translate>N/A</translate></template>
-          </td>
-          <td>
-            <router-link
-              class="ui tiny basic button"
-              :to="{name: 'library.import.launch', query: {request: scope.obj.id}}"
-              v-if="scope.obj.status === 'pending'"><translate>Create import</translate></router-link>
-          </td>
-        </template>
-      </action-table>
-    </div>
-    <div>
-      <pagination
-        v-if="result && result.count > paginateBy"
-        @page-changed="selectPage"
-        :compact="true"
-        :current="page"
-        :paginate-by="paginateBy"
-        :total="result.count"
-        ></pagination>
-
-      <span v-if="result && result.results.length > 0">
-        <translate
-          :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}">
-          Showing results %{ start }-%{ end } on %{ total }
-        </translate>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import _ from 'lodash'
-import time from '@/utils/time'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-
-export default {
-  mixins: [OrderingMixin],
-  props: {
-    filters: {type: Object, required: false}
-  },
-  components: {
-    Pagination,
-    ActionTable
-  },
-  data () {
-    let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
-    return {
-      time,
-      isLoading: false,
-      result: null,
-      page: 1,
-      paginateBy: 25,
-      search: '',
-      status: null,
-      orderingDirection: defaultOrdering.direction || '+',
-      ordering: defaultOrdering.field,
-      orderingOptions: [
-        ['creation_date', 'Creation date'],
-        ['imported_date', 'Imported date']
-      ]
-
-    }
-  },
-  created () {
-    this.fetchData()
-  },
-  methods: {
-    fetchData () {
-      let params = _.merge({
-        'page': this.page,
-        'page_size': this.paginateBy,
-        'q': this.search,
-        'status': this.status,
-        'ordering': this.getOrderingAsString()
-      }, this.filters)
-      let self = this
-      self.isLoading = true
-      self.checked = []
-      axios.get('/manage/requests/import-requests/', {params: params}).then((response) => {
-        self.result = response.data
-        self.isLoading = false
-      }, error => {
-        self.isLoading = false
-        self.errors = error.backendErrors
-      })
-    },
-    selectPage: function (page) {
-      this.page = page
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        searchPlaceholder: this.$gettext('Search by artist, username, comment...')
-      }
-    },
-    actionFilters () {
-      var currentFilters = {
-        q: this.search
-      }
-      if (this.filters) {
-        return _.merge(currentFilters, this.filters)
-      } else {
-        return currentFilters
-      }
-    },
-    actions () {
-      // somehow, extraction fails otherwise
-      let deleteLabel = this.$gettext('Delete')
-      let markImportedLabel = this.$gettext('Mark as imported')
-      let markClosedLabel = this.$gettext('Mark as closed')
-      return [
-        {
-          name: 'delete',
-          label: deleteLabel,
-          isDangerous: true
-        },
-        {
-          name: 'mark_imported',
-          label: markImportedLabel,
-          filterCheckable: (obj) => { return ['pending', 'accepted'].indexOf(obj.status) > -1 },
-          isDangerous: true
-        },
-        {
-          name: 'mark_closed',
-          label: markClosedLabel,
-          filterCheckable: (obj) => { return ['pending', 'accepted'].indexOf(obj.status) > -1 },
-          isDangerous: true
-        }
-      ]
-    }
-  },
-  watch: {
-    search (newValue) {
-      this.page = 1
-      this.fetchData()
-    },
-    page () {
-      this.fetchData()
-    },
-    ordering () {
-      this.page = 1
-      this.fetchData()
-    },
-    status () {
-      this.page = 1
-      this.fetchData()
-    },
-    orderingDirection () {
-      this.page = 1
-      this.fetchData()
-    }
-  }
-}
-</script>

front/src/components/manage/users/InvitationsTable.vue

@@ -10,7 +10,7 @@
           <label><translate>Ordering</translate></label>
           <select class="ui dropdown" v-model="ordering">
             <option v-for="option in orderingOptions" :value="option[0]">
-              {{ option[1] }}
+              {{ sharedLabels.filters[option[1]] }}
             </option>
           </select>
         </div>
@@ -90,9 +90,10 @@ import _ from 'lodash'
 import Pagination from '@/components/Pagination'
 import ActionTable from '@/components/common/ActionTable'
 import OrderingMixin from '@/components/mixins/Ordering'
+import TranslationsMixin from '@/components/mixins/Translations'
 
 export default {
-  mixins: [OrderingMixin],
+  mixins: [OrderingMixin, TranslationsMixin],
   props: {
     filters: {type: Object, required: false}
   },
@@ -113,8 +114,8 @@ export default {
       orderingDirection: defaultOrdering.direction || '+',
       ordering: defaultOrdering.field,
       orderingOptions: [
-        ['expiration_date', 'Expiration date'],
-        ['creation_date', 'Creation date']
+        ['expiration_date', 'expiration_date'],
+        ['creation_date', 'creation_date']
       ]
 
     }

front/src/components/manage/users/UsersTable.vue

@@ -10,7 +10,7 @@
           <label><translate>Ordering</translate></label>
           <select class="ui dropdown" v-model="ordering">
             <option v-for="option in orderingOptions" :value="option[0]">
-              {{ option[1] }}
+              {{ sharedLabels.filters[option[1]] }}
             </option>
           </select>
         </div>
@@ -101,9 +101,10 @@ import time from '@/utils/time'
 import Pagination from '@/components/Pagination'
 import ActionTable from '@/components/common/ActionTable'
 import OrderingMixin from '@/components/mixins/Ordering'
+import TranslationsMixin from '@/components/mixins/Translations'
 
 export default {
-  mixins: [OrderingMixin],
+  mixins: [OrderingMixin, TranslationsMixin],
   props: {
     filters: {type: Object, required: false}
   },
@@ -123,9 +124,9 @@ export default {
       orderingDirection: defaultOrdering.direction || '+',
       ordering: defaultOrdering.field,
       orderingOptions: [
-        ['date_joined', 'Sign-up date'],
-        ['last_activity', 'Last activity'],
-        ['username', 'Username']
+        ['date_joined', 'date_joined'],
+        ['last_activity', 'last_activity'],
+        ['username', 'username']
       ]
 
     }

front/src/components/mixins/Translations.vue

@@ -0,0 +1,38 @@
+<script>
+export default {
+  computed: {
+    sharedLabels () {
+      return {
+        fields: {
+          privacy_level: {
+            label: this.$gettext('Activity visibility'),
+            help: this.$gettext('Determine the visibility level of your activity'),
+            choices: {
+              me: this.$gettext('Nobody except me'),
+              instance: this.$gettext('Everyone on this instance'),
+            }
+          }
+        },
+        filters: {
+          creation_date: this.$gettext('Creation date'),
+          accessed_date: this.$gettext('Accessed date'),
+          modification_date: this.$gettext('Modification date'),
+          imported_date: this.$gettext('Imported date'),
+          expiration_date: this.$gettext('Expiration date'),
+          track_title: this.$gettext('Track name'),
+          album_title: this.$gettext('Album name'),
+          artist_name: this.$gettext('Artist name'),
+          name: this.$gettext('Name'),
+          title: this.$gettext('Title'),
+          size: this.$gettext('Size'),
+          bitrate: this.$gettext('Bitrate'),
+          duration: this.$gettext('Duration'),
+          date_joined: this.$gettext('Sign-up date'),
+          last_activity: this.$gettext('Last activity'),
+          username: this.$gettext('Username'),
+        }
+      }
+    }
+  }
+}
+</script>

front/src/views/content/libraries/FilesTable.vue

@@ -22,7 +22,7 @@
           <label><translate>Ordering</translate></label>
           <select class="ui dropdown" v-model="ordering">
             <option v-for="option in orderingOptions" :value="option[0]">
-              {{ option[1] }}
+              {{ sharedLabels.filters[option[1]] }}
             </option>
           </select>
         </div>
@@ -127,9 +127,10 @@ import {normalizeQuery, parseTokens, compileTokens} from '@/search'
 import Pagination from '@/components/Pagination'
 import ActionTable from '@/components/common/ActionTable'
 import OrderingMixin from '@/components/mixins/Ordering'
+import TranslationsMixin from '@/components/mixins/Translations'
 
 export default {
-  mixins: [OrderingMixin],
+  mixins: [OrderingMixin, TranslationsMixin],
   props: {
     filters: {type: Object, required: false},
     defaultQuery: {type: String, default: ''},
@@ -153,13 +154,13 @@ export default {
       orderingDirection: '-',
       ordering: 'creation_date',
       orderingOptions: [
-        ['creation_date', 'Creation date'],
-        ['title', 'Title'],
-        ['size', 'Size'],
-        ['duration', 'Duration'],
-        ['bitrate', 'Bitrate'],
-        ['album_title', 'Album title'],
-        ['artist_name', 'Artist name']
+        ['creation_date', 'creation_date'],
+        ['title', 'title'],
+        ['size', 'size'],
+        ['duration', 'duration'],
+        ['bitrate', 'bitrate'],
+        ['album_title', 'album_title'],
+        ['artist_name', 'artist_name']
       ]
     }
   },

front/src/views/playlists/List.vue

@@ -18,7 +18,7 @@
             <label><translate>Ordering</translate></label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
-                {{ option[1] }}
+                {{ sharedLabels.filters[option[1]] }}
               </option>
             </select>
           </div>
@@ -61,13 +61,14 @@ import $ from 'jquery'
 
 import OrderingMixin from '@/components/mixins/Ordering'
 import PaginationMixin from '@/components/mixins/Pagination'
+import TranslationsMixin from '@/components/mixins/Translations'
 import PlaylistCardList from '@/components/playlists/CardList'
 import Pagination from '@/components/Pagination'
 
 const FETCH_URL = 'playlists/'
 
 export default {
-  mixins: [OrderingMixin, PaginationMixin],
+  mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
   props: {
     defaultQuery: {type: String, required: false, default: ''}
   },
@@ -86,9 +87,9 @@ export default {
       orderingDirection: defaultOrdering.direction || '+',
       ordering: defaultOrdering.field,
       orderingOptions: [
-        ['creation_date', 'Creation date'],
-        ['modification_date', 'Last modification date'],
-        ['name', 'Name']
+        ['creation_date', 'creation_date'],
+        ['modification_date', 'modification_date'],
+        ['name', 'name']
       ]
     }
   },