Sort search show results

CHANGELOG.md

@@ -3,8 +3,14 @@
 #### New Features
 
 #### Improvements
+- Add column sorting for the add new show page search results ([10217](https://github.com/pymedusa/Medusa/pull/10217))
+- Add series start year as a renaming option ([10183](https://github.com/pymedusa/Medusa/pull/10183))
+- Remove git username/password authentication. No longer supported by github. ([10144](https://github.com/pymedusa/Medusa/pull/10144))
 
 #### Fixes
+- Fix displayShow search subtitle button ([10214](https://github.com/pymedusa/Medusa/pull/10214))
+- Prevent failedDownloads from errorring, when a provider has been deleted ([10214](https://github.com/pymedusa/Medusa/pull/10214))
+- Fix mass update status page, start a new snatch when changing status to failed. ([10213](https://github.com/pymedusa/Medusa/pull/10213))
 
 -----
 

themes-default/slim/src/components/new-show.vue

@@ -123,10 +123,10 @@
                                                     <thead>
                                                         <tr>
                                                             <th />
-                                                            <th>Show Name</th>
-                                                            <th class="premiere">Premiere</th>
-                                                            <th class="network">Network</th>
-                                                            <th class="indexer">Indexer</th>
+                                                            <th class="sorting" :class="sorting.showName" @click="toggleSort('showName')">Show Name</th>
+                                                            <th class="sorting premiere" :class="sorting.premiere" @click="toggleSort('premiere')">Premiere</th>
+                                                            <th class="sorting network" :class="sorting.network" @click="toggleSort('network')">Network</th>
+                                                            <th class="sorting indexer" :class="sorting.indexerName" @click="toggleSort('indexerName')">Indexer</th>
                                                         </tr>
                                                     </thead>
                                                     <tbody>
@@ -309,7 +309,14 @@ export default {
                 showLists: []
             },
             addedQueueItem: null,
-            existingFolder: null
+            existingFolder: null,
+            sorting: {
+                showName: null,
+                premiere: null,
+                network: null,
+                indexerName: null,
+                currentSortColumn: null
+            }
         };
     },
     mounted() {
@@ -795,6 +802,28 @@ export default {
             } catch (error) {
                 this.$snotify.warning('Error while checking for existing folder');
             }
+        },
+        toggleSort(column) {
+            // Set the sort column
+            this.sorting.currentSortColumn = column;
+            Object.keys(this.sorting).filter(
+                key => key !== 'currentSortColumn' && key !== this.sorting.currentSortColumn
+            ).forEach(key => {
+                this.sorting[key] = null;
+            });
+
+            // Toggle through (tri-state) the sort options, 'desc', 'asc' and null.
+            const states = ['desc', 'asc'];
+            if (!this.sorting[column]) {
+                this.sorting[column] = states[0];
+                return;
+            }
+
+            let i = states.indexOf(this.sorting[column]);
+
+            // Increment the counter, but don't let it exceed the maximum index
+            i = ++i % states.length;
+            this.sorting[column] = states[i];
         }
     },
     watch: {
@@ -811,6 +840,28 @@ export default {
         },
         selectedShowSlug() {
             this.checkFolder();
+        },
+        sorting: {
+            deep: true,
+            handler(sorting) {
+                const { currentSortColumn } = sorting;
+                if (currentSortColumn && sorting[currentSortColumn]) {
+                    this.searchResults.sort((firstItem, secondItem) => {
+                        if (currentSortColumn === 'premiere') {
+                            if (!firstItem.premiereDate || !secondItem.premiereDate) {
+                                return firstItem.premiereDate ? 1 : -1;
+                            }
+                            return new Date(firstItem.premiereDate) - new Date(secondItem.premiereDate);
+                        }
+
+                        // Handle showName, indexerName and network
+                        return firstItem[currentSortColumn].localeCompare(secondItem[currentSortColumn]);
+                    });
+                    if (sorting[currentSortColumn] === 'desc') {
+                        this.searchResults.reverse();
+                    }
+                }
+            }
         }
     }
 };
@@ -869,4 +920,19 @@ ul.wizard-nav .step .smalltext {
     line-height: 40px;
 }
 
+.sorting {
+    background-repeat: no-repeat;
+}
+
+.desc {
+    background-color: rgb(85, 85, 85);
+    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+}
+
+.asc {
+    background-color: rgb(85, 85, 85);
+    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+    background-position-x: right;
+    background-position-y: bottom;
+}
 </style>