Sort list by game release date (#122)

src/components/Lists/ListSettings.vue

@@ -66,11 +66,12 @@
                 <button
                     v-for="(icon, sortOrder) in sortOrders"
                     :key="sortOrder"
-                    class="xsmall primary"
+                    class="xxsmall primary"
                     :class="{ hollow: activeList.sortOrder !== sortOrder }"
                     @click="setListSort(sortOrder)"
                 >
                     <i :class="icon" />
+                    <br>
                     {{ $t(`list.${sortOrder}`) }}
                 </button>
             </div>
@@ -145,7 +146,8 @@ export default {
             sortOrders: {
                 sortByName: 'fas fa-sort-alpha-down',
                 sortByRating: 'fas fa-sort-numeric-up',
-                sortByCustom: 'fas fa-sort-custom',
+                sortByReleaseDate: 'fas fa-calendar-alt',
+                sortByCustom: 'fas fa-sort',
             },
         };
     },
@@ -239,6 +241,9 @@ export default {
             } else if (sortOrder === 'sortByRating') {
                 this.$store.commit('SORT_LIST_BY_RATING', this.activeListIndex);
                 this.$emit('update', 'List sorted by game rating');
+            } else if (sortOrder === 'sortByReleaseDate') {
+                this.$store.commit('SORT_LIST_BY_RELEASE_DATE', this.activeListIndex);
+                this.$emit('update', 'List sorted by game rating');
             }
         },
 

src/i18n/de.js

@@ -40,6 +40,7 @@ module.exports = {
         add: 'Liste hinzufügen',
         sortByName: 'Alphabetisch',
         sortByRating: 'Spielbewertung',
+        sortByReleaseDate: 'Veröffentlichungsdatum',
         sortByCustom: 'Brauch',
         delete: 'Liste löschen',
         moveLeft: 'Geh nach links',

src/i18n/en.js

@@ -39,6 +39,7 @@ module.exports = {
         add: 'Add list',
         sortByName: 'Alphabetically',
         sortByRating: 'Game rating',
+        sortByReleaseDate: 'Release date',
         sortByCustom: 'Custom',
         delete: 'Delete list',
         moveLeft: 'Move left',

src/i18n/es.js

@@ -41,6 +41,7 @@ module.exports = {
         sortByName: 'Alfabéticamente',
         sortByRating: 'Calificación del juego',
         sortByCustom: 'Personalizado',
+        sortByReleaseDate: 'Fecha de lanzamiento',
         delete: 'Eliminar lista',
         moveLeft: 'Mover hacia la izquierda',
         moveRight: 'Mover a la derecha',

src/i18n/fr.js

@@ -40,6 +40,7 @@ module.exports = {
         add: 'Ajouter la liste',
         sortByName: 'Alphabétiquement',
         sortByRating: 'Classement du jeu',
+        sortByReleaseDate: 'Date de sortie',
         sortByCustom: 'Douane',
         delete: 'Supprimer la liste',
         moveLeft: 'Se déplacer à gauche',

src/i18n/it.js

@@ -40,6 +40,7 @@ module.exports = {
         add: 'Aggiungi lista',
         sortByName: 'In ordine alfabetico',
         sortByRating: 'Valutazione del gioco',
+        sortByReleaseDate: 'Data di rilascio',
         sortByCustom: 'costume',
         delete: 'Cancella lista',
         moveLeft: 'Muovere a sinistra',

src/i18n/pt.js

@@ -40,6 +40,7 @@ module.exports = {
         add: 'Adicionar lista',
         sortByName: 'Alfabeticamente',
         sortByRating: 'Classificação do jogo',
+        sortByReleaseDate: 'Data de lançamento',
         sortByCustom: 'personalizadas',
         delete: 'Excluir lista',
         moveLeft: 'Mova à esquerda',

src/store/mutations.js

@@ -117,6 +117,28 @@ export default {
         });
     },
 
+    SORT_LIST_BY_RELEASE_DATE(state, listIndex) {
+        const games = state.gameLists[state.platform.code][listIndex].games;
+
+        games.sort((a, b) => {
+            const gameA = state.games[a] && state.games[a].release_dates
+            && state.games[a].release_dates.length > 0
+                ? state.games[a].release_dates.find(releaseDate =>
+                    releaseDate.platform === state.platform.id).date : 0;
+
+            const gameB = state.games[b] && state.games[b].release_dates
+            && state.games[b].release_dates.length > 0
+                ? state.games[b].release_dates.find(releaseDate =>
+                    releaseDate.platform === state.platform.id).date : 0;
+
+            if (gameA > gameB) {
+                return -1;
+            }
+
+            return gameA < gameB ? 1 : 0;
+        });
+    },
+
     SORT_LIST_BY_RATING(state, listIndex) {
         const games = state.gameLists[state.platform.code][listIndex].games;
 

src/styles/_buttons.scss

@@ -60,6 +60,13 @@ button, a.link {
         font-size: 12px;
     }
 
+    &.xxsmall {
+        min-height: $iconSmallSize / 3;
+        min-width: $iconSmallSize / 3;
+        padding: $gp / 3;
+        font-size: 10px;
+    }
+
     &.small {
         min-height: $iconSmallSize;
         min-width: $iconSmallSize;