Add ability to sort the search

client/src/app/search/advanced-search.model.ts

@@ -18,6 +18,8 @@ export class AdvancedSearch {
   durationMin: number // seconds
   durationMax: number // seconds
 
+  sort: string
+
   constructor (options?: {
     startDate?: string
     endDate?: string
@@ -29,6 +31,7 @@ export class AdvancedSearch {
     tagsAllOf?: string
     durationMin?: string
     durationMax?: string
+    sort?: string
   }) {
     if (!options) return
 
@@ -45,11 +48,15 @@ export class AdvancedSearch {
 
     if (isNaN(this.durationMin)) this.durationMin = undefined
     if (isNaN(this.durationMax)) this.durationMax = undefined
+
+    this.sort = options.sort || '-match'
   }
 
   containsValues () {
     const obj = this.toUrlObject()
     for (const k of Object.keys(obj)) {
+      if (k === 'sort') continue // Exception
+
       if (obj[k] !== undefined) return true
     }
 
@@ -67,6 +74,8 @@ export class AdvancedSearch {
     this.tagsAllOf = undefined
     this.durationMin = undefined
     this.durationMax = undefined
+
+    this.sort = '-match'
   }
 
   toUrlObject () {
@@ -80,7 +89,8 @@ export class AdvancedSearch {
       tagsOneOf: this.tagsOneOf,
       tagsAllOf: this.tagsAllOf,
       durationMin: this.durationMin,
-      durationMax: this.durationMax
+      durationMax: this.durationMax,
+      sort: this.sort
     }
   }
 
@@ -95,7 +105,8 @@ export class AdvancedSearch {
       tagsOneOf: this.tagsOneOf ? this.tagsOneOf.split(',') : undefined,
       tagsAllOf: this.tagsAllOf ? this.tagsAllOf.split(',') : undefined,
       durationMin: this.durationMin,
-      durationMax: this.durationMax
+      durationMax: this.durationMax,
+      sort: this.sort
     }
   }
 }

client/src/app/search/search-filters.component.html

@@ -2,6 +2,15 @@
 
   <div class="row">
     <div class="col-lg-4 col-md-6 col-xs-12">
+      <div class="form-group">
+        <div i18n class="radio-label">Sort</div>
+
+        <div class="peertube-radio-container" *ngFor="let sort of sorts">
+          <input type="radio" name="sort" [id]="sort.id" [value]="sort.id" [(ngModel)]="advancedSearch.sort">
+          <label [for]="sort.id" class="radio">{{ sort.label }}</label>
+        </div>
+      </div>
+
       <div class="form-group">
         <div i18n class="radio-label">Published date</div>
 

client/src/app/search/search-filters.component.ts

@@ -23,6 +23,7 @@ export class SearchFiltersComponent implements OnInit {
   videoLanguages: VideoConstant<string>[] = []
 
   publishedDateRanges: { id: string, label: string }[] = []
+  sorts: { id: string, label: string }[] = []
   durationRanges: { id: string, label: string }[] = []
 
   publishedDateRange: string
@@ -59,15 +60,30 @@ export class SearchFiltersComponent implements OnInit {
     this.durationRanges = [
       {
         id: 'short',
-        label: this.i18n('Short (< 4 minutes)')
+        label: this.i18n('Short (< 4 min)')
       },
       {
         id: 'long',
-        label: this.i18n('Long (> 10 minutes)')
+        label: this.i18n('Long (> 10 min)')
       },
       {
         id: 'medium',
-        label: this.i18n('Medium (4-10 minutes)')
+        label: this.i18n('Medium (4-10 min)')
+      }
+    ]
+
+    this.sorts = [
+      {
+        id: '-match',
+        label: this.i18n('Relevance')
+      },
+      {
+        id: '-publishedAt',
+        label: this.i18n('Publish date')
+      },
+      {
+        id: '-views',
+        label: this.i18n('Views')
       }
     ]
   }