Add ability to sort the search
[oweals/peertube.git] / client / src / app / search / search-filters.component.html
1 <form role="form" (ngSubmit)="formUpdated()">
2
3   <div class="row">
4     <div class="col-lg-4 col-md-6 col-xs-12">
5       <div class="form-group">
6         <div i18n class="radio-label">Sort</div>
7
8         <div class="peertube-radio-container" *ngFor="let sort of sorts">
9           <input type="radio" name="sort" [id]="sort.id" [value]="sort.id" [(ngModel)]="advancedSearch.sort">
10           <label [for]="sort.id" class="radio">{{ sort.label }}</label>
11         </div>
12       </div>
13
14       <div class="form-group">
15         <div i18n class="radio-label">Published date</div>
16
17         <div class="peertube-radio-container" *ngFor="let date of publishedDateRanges">
18           <input type="radio" name="publishedDateRange" [id]="date.id" [value]="date.id" [(ngModel)]="publishedDateRange">
19           <label [for]="date.id" class="radio">{{ date.label }}</label>
20         </div>
21       </div>
22
23       <div class="form-group">
24         <div i18n class="radio-label">Duration</div>
25
26         <div class="peertube-radio-container" *ngFor="let duration of durationRanges">
27           <input type="radio" name="durationRange" [id]="duration.id" [value]="duration.id" [(ngModel)]="durationRange">
28           <label [for]="duration.id" class="radio">{{ duration.label }}</label>
29         </div>
30       </div>
31
32       <div class="form-group">
33         <div i18n class="radio-label">Display sensitive content</div>
34
35         <div class="peertube-radio-container">
36           <input type="radio" name="sensitiveContent" id="sensitiveContentYes" value="both" [(ngModel)]="advancedSearch.nsfw">
37           <label i18n for="sensitiveContentYes" class="radio">Yes</label>
38         </div>
39
40         <div class="peertube-radio-container">
41           <input type="radio" name="sensitiveContent" id="sensitiveContentNo" value="false" [(ngModel)]="advancedSearch.nsfw">
42           <label i18n for="sensitiveContentNo" class="radio">No</label>
43         </div>
44       </div>
45
46     </div>
47
48     <div class="col-lg-4 col-md-6 col-xs-12">
49       <div class="form-group">
50         <label i18n for="category">Category</label>
51         <div class="peertube-select-container">
52           <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf">
53             <option></option>
54             <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
55           </select>
56         </div>
57       </div>
58
59       <div class="form-group">
60         <label i18n for="licence">Licence</label>
61         <div class="peertube-select-container">
62           <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf">
63             <option></option>
64             <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
65           </select>
66         </div>
67       </div>
68
69       <div class="form-group">
70         <label i18n for="language">Language</label>
71         <div class="peertube-select-container">
72           <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf">
73             <option></option>
74             <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
75           </select>
76         </div>
77       </div>
78     </div>
79
80     <div class="col-lg-4 col-md-6 col-xs-12">
81       <div class="form-group">
82         <label i18n for="tagsAllOf">All of these tags</label>
83         <input type="text" name="tagsAllOf" id="tagsAllOf" [(ngModel)]="advancedSearch.tagsAllOf" />
84       </div>
85
86       <div class="form-group">
87         <label i18n for="tagsOneOf">One of these tags</label>
88         <input type="text" name="tagsOneOf" id="tagsOneOf" [(ngModel)]="advancedSearch.tagsOneOf" />
89       </div>
90     </div>
91   </div>
92
93   <div class="submit-button">
94     <input type="submit" i18n-value value="Filter">
95   </div>
96 </form>