nise/nise-frontend/src/app/search/search.component.html

<div class="main term">
  <h1><span class="board">/k/</span> - Advanced Search</h1>

  <fieldset>
    <legend>Table columns</legend>
    <ng-container *ngFor="let category of ['user', 'beatmap', 'score']">
      <fieldset class="mb-2">
        <legend>{{ category }} <button (click)="this.selectEntireFieldCategory(category)">Select all</button> <button (click)="this.deselectEntireFieldCategory(category)">Deselect all</button></legend>
        <ng-container *ngFor="let field of fields">
          <div *ngIf="field.category === category">
            <label>
              <input type="checkbox" [(ngModel)]="field.active" (change)="this.saveColumnsStatusToLocalStorage()"/>
              {{ field.name }} <span class="text-muted" style="margin-left: 6px">{{ field.description }}</span>
            </label>
          </div>
        </ng-container>
      </fieldset>
    </ng-container>

  </fieldset>

  <div class="search-container mt-2" *ngIf="this.queries">
    <app-query-builder [queries]="this.queries" [fields]="this.mapSchemaFieldsToFields()"></app-query-builder>
  </div>

  <fieldset class="mt-2" *ngIf="this.sortingOrder">
    <legend>sorting</legend>

    <select>
      <option *ngFor="let field of fields"
              [value]="field.name"
              (click)="this.sortingOrder.field = field.name"
              [selected]="field.name == this.sortingOrder.field"
      >{{ field.name }}</option>
    </select>
    <label>
      <input type="radio" name="sortingOrder" [(ngModel)]="this.sortingOrder.order" value="ASC" />
      ASC
    </label>
    <label>
      <input type="radio" name="sortingOrder" [(ngModel)]="this.sortingOrder.order" value="DESC" />
      DESC
    </label>
  </fieldset>

  <div class="text-center mt-2">
    <button (click)="exportSettings()">Export settings</button>
    <button (click)="fileInput.click()" style="margin-left: 5px">Import settings</button>
    <input type="file" #fileInput style="display: none" (change)="importSettings($event)" accept=".json">
  </div>
  <div class="text-center mt-1">
    <button (click)="search()" class="mb-2" style="font-size: 18px">Search</button>
  </div>

  <ng-container *ngIf="this.isLoading">
    <div class="text-center">
      <p>Loading...</p>
    </div>
  </ng-container>

  <div class="text-center alert-error" *ngIf="this.isError">
    <p>Looks like something went wrong... :(</p>
    <p>I'll look into what caused the error - but feel free to get in touch.</p>
  </div>

  <ng-container *ngIf="response">
    <fieldset class="mb-2">
      <legend>tools</legend>
      <div class="text-center">
        <button (click)="this.downloadFilesService.downloadCSV(response.scores)">Download .csv</button>
        <button (click)="this.downloadFilesService.downloadJSON(response.scores)">Download .json</button>
        <button (click)="this.downloadFilesService.downloadXLSX(response.scores)">Download .xlsx</button>
      </div>
    </fieldset>
    <div class="scrollable-table">
      <table class="table-border">
        <thead>
        <tr>
          <th *ngFor="let column of fields" [hidden]="!column.active" class="text-center">
            {{ column.short_name }}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let entry of response.scores" class="score-entry" [routerLink]="['/s/' + entry.replay_id]">
          <td *ngFor="let column of fields" [hidden]="!column.active" class="text-center" style="line-height: 32px">
            <ng-container *ngIf="column.type == 'number'">
              {{ getValue(entry, column.name) | number }}
            </ng-container>
            <ng-container *ngIf="column.type == 'flag'">
              <span class="flag">{{ countryCodeToFlag(getValue(entry, column.name)) }}</span>
            </ng-container>
            <ng-container *ngIf="column.type == 'grade'">
              <app-osu-grade [grade]="getValue(entry, column.name)"></app-osu-grade>
            </ng-container>
            <ng-container *ngIf="column.type == 'boolean'">
              <ng-container *ngIf="getValue(entry, column.name) == true">
                ✓
              </ng-container>
              <ng-container *ngIf="getValue(entry, column.name) == false">
                ✗
              </ng-container>
            </ng-container>
            <ng-container *ngIf="column.type == 'string'">
              {{ getValue(entry, column.name) }}
            </ng-container>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="text-center mt-2">
      <p>Total results: {{ response.pagination.totalResults | number }}</p>
      <p>Page: {{ response.pagination.currentPage | number }} / {{ response.pagination.totalPages | number }}</p>
      <div class="mb-2">
        <button *ngIf="response.pagination.currentPage > 5" (click)="this.search(1)" style="margin-right: 5px">1</button>
        <span *ngIf="response.pagination.currentPage > 6">... </span>
        <button *ngFor="let page of [].constructor(Math.min(response.pagination.totalPages, 10)) | calculatePageRange:response.pagination.currentPage:response.pagination.totalPages; let i = index"
                (click)="this.search(page)"
                [disabled]="page == response.pagination.currentPage"
                style="margin-right: 5px">
          {{ page }}
        </button>
        <span *ngIf="response.pagination.currentPage < response.pagination.totalPages - 5">... </span>
        <button *ngIf="response.pagination.currentPage < response.pagination.totalPages - 4" (click)="this.search(response.pagination.totalPages)" style="margin-right: 5px">{{ response.pagination.totalPages }}</button>
      </div>
      <button (click)="this.search(response.pagination.currentPage - 1)" [disabled]="response.pagination.currentPage == 1">← Previous</button>
      <button (click)="this.search(response.pagination.currentPage + 1)" [disabled]="response.pagination.currentPage == response.pagination.totalPages" style="margin-left: 5px">Next →</button>
    </div>

  </ng-container>

</div>