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 class="radio-label label-container">
   7           <label i18n>Sort</label>
   8           <button i18n class="reset-button reset-button-small" (click)="resetField('sort', '-match')" *ngIf="advancedSearch.sort !== '-match'">
   9             Reset
  10           </button>
  11         </div>
  12
  13         <div class="peertube-radio-container" *ngFor="let sort of sorts">
  14           <input type="radio" name="sort" [id]="sort.id" [value]="sort.id" [(ngModel)]="advancedSearch.sort">
  15           <label [for]="sort.id" class="radio">{{ sort.label }}</label>
  16         </div>
  17       </div>
  18
  19       <div class="form-group">
  20         <div class="radio-label label-container">
  21           <label i18n>Published date</label>
  22           <button i18n class="reset-button reset-button-small" (click)="resetLocalField('publishedDateRange')" *ngIf="publishedDateRange !== undefined">
  23             Reset
  24           </button>
  25         </div>
  26
  27         <div class="peertube-radio-container" *ngFor="let date of publishedDateRanges">
  28           <input type="radio" (change)="inputUpdated()" name="publishedDateRange" [id]="date.id" [value]="date.id" [(ngModel)]="publishedDateRange">
  29           <label [for]="date.id" class="radio">{{ date.label }}</label>
  30         </div>
  31       </div>
  32
  33       <div class="form-group">
  34         <div class="label-container">
  35           <label i18n for="original-publication-after">Original publication year</label>
  36           <button i18n class="reset-button reset-button-small" (click)="resetOriginalPublicationYears()" *ngIf="originallyPublishedStartYear || originallyPublishedEndYear">
  37             Reset
  38           </button>
  39         </div>
  40
  41         <div class="row">
  42           <div class="col-sm-6">
  43             <input
  44               (change)="inputUpdated()"
  45               (keydown.enter)="$event.preventDefault()"
  46               type="text" id="original-publication-after" name="original-publication-after"
  47               i18n-placeholder placeholder="After..."
  48               [(ngModel)]="originallyPublishedStartYear"
  49             >
  50           </div>
  51           <div class="col-sm-6">
  52             <input
  53               (change)="inputUpdated()"
  54               (keydown.enter)="$event.preventDefault()"
  55               type="text" id="original-publication-before" name="original-publication-before"
  56               i18n-placeholder placeholder="Before..."
  57               [(ngModel)]="originallyPublishedEndYear"
  58             >
  59           </div>
  60         </div>
  61       </div>
  62
  63       <div class="form-group">
  64         <div class="radio-label label-container">
  65           <label i18n>Duration</label>
  66           <button i18n class="reset-button reset-button-small" (click)="resetLocalField('durationRange')" *ngIf="durationRange !== undefined">
  67             Reset
  68           </button>
  69         </div>
  70
  71         <div class="peertube-radio-container" *ngFor="let duration of durationRanges">
  72           <input type="radio" (change)="inputUpdated()" name="durationRange" [id]="duration.id" [value]="duration.id" [(ngModel)]="durationRange">
  73           <label [for]="duration.id" class="radio">{{ duration.label }}</label>
  74         </div>
  75       </div>
  76
  77       <div class="form-group">
  78         <div class="radio-label label-container">
  79           <label i18n>Display sensitive content</label>
  80           <button i18n class="reset-button reset-button-small" (click)="resetField('nsfw')" *ngIf="advancedSearch.nsfw !== undefined">
  81             Reset
  82           </button>
  83         </div>
  84
  85         <div class="peertube-radio-container">
  86           <input type="radio" name="sensitiveContent" id="sensitiveContentYes" value="both" [(ngModel)]="advancedSearch.nsfw">
  87           <label i18n for="sensitiveContentYes" class="radio">Yes</label>
  88         </div>
  89
  90         <div class="peertube-radio-container">
  91           <input type="radio" name="sensitiveContent" id="sensitiveContentNo" value="false" [(ngModel)]="advancedSearch.nsfw">
  92           <label i18n for="sensitiveContentNo" class="radio">No</label>
  93         </div>
  94       </div>
  95
  96     </div>
  97
  98     <div class="col-lg-4 col-md-6 col-xs-12">
  99       <div class="form-group">
 100         <label i18n for="category">Category</label>
 101         <button i18n class="reset-button reset-button-small" (click)="resetField('categoryOneOf')" *ngIf="advancedSearch.categoryOneOf !== undefined">
 102           Reset
 103         </button>
 104         <div class="peertube-select-container">
 105           <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf">
 106             <option [value]="undefined" i18n>Display all categories</option>
 107             <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
 108           </select>
 109         </div>
 110       </div>
 111
 112       <div class="form-group">
 113         <label i18n for="licence">Licence</label>
 114         <button i18n class="reset-button reset-button-small" (click)="resetField('licenceOneOf')" *ngIf="advancedSearch.licenceOneOf !== undefined">
 115           Reset
 116         </button>
 117         <div class="peertube-select-container">
 118           <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf">
 119             <option [value]="undefined" i18n>Display all licenses</option>
 120             <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
 121           </select>
 122         </div>
 123       </div>
 124
 125       <div class="form-group">
 126         <label i18n for="language">Language</label>
 127         <button i18n class="reset-button reset-button-small" (click)="resetField('languageOneOf')" *ngIf="advancedSearch.languageOneOf !== undefined">
 128           Reset
 129         </button>
 130         <div class="peertube-select-container">
 131           <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf">
 132             <option [value]="undefined" i18n>Display all languages</option>
 133             <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
 134           </select>
 135         </div>
 136       </div>
 137     </div>
 138
 139     <div class="col-lg-4 col-md-6 col-xs-12">
 140       <div class="form-group">
 141         <label i18n for="tagsAllOf">All of these tags</label>
 142         <button i18n class="reset-button reset-button-small" (click)="resetField('tagsAllOf')" *ngIf="advancedSearch.tagsAllOf">
 143           Reset
 144         </button>
 145         <tag-input
 146           [(ngModel)]="advancedSearch.tagsAllOf" name="tagsAllOf" id="tagsAllOf"
 147           [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
 148           i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
 149           [maxItems]="5" [modelAsStrings]="true"
 150         ></tag-input>
 151       </div>
 152
 153       <div class="form-group">
 154         <label i18n for="tagsOneOf">One of these tags</label>
 155         <button i18n class="reset-button reset-button-small" (click)="resetField('tagsOneOf')" *ngIf="advancedSearch.tagsOneOf">
 156           Reset
 157         </button>
 158         <tag-input
 159           [(ngModel)]="advancedSearch.tagsOneOf" name="tagsOneOf" id="tagsOneOf"
 160           [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
 161           i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
 162           [maxItems]="5" [modelAsStrings]="true"
 163         ></tag-input>
 164       </div>
 165     </div>
 166   </div>
 167
 168   <div class="submit-button">
 169     <button i18n class="reset-button" (click)="reset()" *ngIf="advancedSearch.size()">
 170       Reset
 171     </button>
 172
 173     <input type="submit" i18n-value value="Filter">
 174   </div>
 175 </form>