definma-ui/src/app/samples/samples.component.html

<script src="samples.component.ts"></script>
<div class="header-addnew">
  <h2>Samples</h2>
  <a routerLink="/samples/new">
    <rb-icon-button icon="add" mode="primary">New sample</rb-icon-button>
  </a>
</div>

<rb-accordion>
  <rb-accordion-title [open]="false"><span class="rb-ic rb-ic-filter"></span>&nbsp; Filter</rb-accordion-title>
  <rb-accordion-body>
    <form class="filters">
      <div class="status-selection">
        <label class="label">Status</label>
        <rb-form-checkbox name="status-validated" [(ngModel)]="filters.status.validated"
                          [disabled]="!filters.status.new" (ngModelChange)="loadSamples({firstPage: true})">
          validated
        </rb-form-checkbox>
        <rb-form-checkbox name="status-new" [(ngModel)]="filters.status.new" [disabled]="!filters.status.validated"
                          (ngModelChange)="loadSamples({firstPage: true})">
          new
        </rb-form-checkbox>
      </div>
      <rb-form-select name="pageSizeSelection" label="page size" [(ngModel)]="filters.pageSize" class="selection"
                      (ngModelChange)="loadSamples({firstPage: true})" #pageSizeSelection>
        <option value="3">3</option>
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="250">250</option>
        <option value="500">500</option>
      </rb-form-select>

      <rb-form-multi-select name="fieldSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Fields"
                            class="selection" (ngModelChange)="loadSamples({}, $event)">
        <span *rbFormMultiSelectOption="let item" class="load-first-page">{{item.label}}</span>
      </rb-form-multi-select>

      <div class="fieldfilters">
        <div *ngFor="let filter of filters.filters">
          <ng-container *ngIf="isActiveKey[filter.field]">
            <rb-form-checkbox [name]="'filteractive-' + filter.field" [(ngModel)]="filter.active"
                              (ngModelChange)="loadSamples({firstPage: true})"></rb-form-checkbox>
            <rb-form-select [name]="'filtermode-' + filter.field" class="filtermode" [(ngModel)]="filter.mode"
                            (ngModelChange)="updateFilterFields(filter.field)">
              <option value="eq" title="field is equal to value">=</option>
              <option value="ne" title="field is not equal to value">&ne;</option>
              <option value="lt" title="field is lower than value">&lt;</option>
              <option value="lte" title="field is lower than or equal to value">&le;</option>
              <option value="gt" title="field is greater than value">&gt;</option>
              <option value="gte" title="field is greater than or equal to value">&ge;</option>
              <option value="stringin" title="field contains value">&supe;</option>
              <option value="in" title="field is one of the values">&isin;</option>
              <option value="nin" title="field is not one of the values">&notin;</option>
            </rb-form-select>
            <div class="filter-inputs">
              <rb-array-input [(ngModel)]="filter.values" [name]="'filter-' + filter.field"
                              [pushTemplate]="!(filter.mode === 'in' || filter.mode === 'nin') ? null :''"
                              (ngModelChange)="updateFilterFields(filter.field)">
                <ng-container *rbArrayInputItem="let item"
                              [ngSwitch]="(filter.autocomplete.length ? 'autocomplete' : '') +
                              (filter.field == 'added' ? 'date' : '')">
                  <rb-form-date-input *ngSwitchCase="'date'" [rbArrayInputListener]="'filter-' + filter.field"
                                      [name]="'filter-' + filter.field + item.i" [index]="item.i"
                                      [label]="filter.label" [(ngModel)]="item.value"></rb-form-date-input>
                  <rb-form-input *ngSwitchCase="''" [rbArrayInputListener]="'filter-' + filter.field"
                                 [name]="'filter-' + filter.field + item.i" [index]="item.i"
                                 [label]="filter.label" [(ngModel)]="item.value"></rb-form-input>
                  <rb-form-input *ngSwitchCase="'autocomplete'" [rbArrayInputListener]="'filter-' + filter.field"
                                 [name]="'filter-' + filter.field + item.i" [index]="item.i"
                                 [label]="filter.label" [(ngModel)]="item.value"
                                 [rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')"
                                 [rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)"
                                 ngModel></rb-form-input>
                </ng-container>
              </rb-array-input>
            </div>
          </ng-container>
        </div>
      </div>
    </form>
  </rb-accordion-body>
</rb-accordion>


<ng-container *ngTemplateOutlet="paging"></ng-container>

<div class="download">
  <rb-icon-button icon="download" mode="secondary" [rbModal]="linkModal">JSON download link</rb-icon-button>
  <ng-template #linkModal>
    <label for="jsonUrl">URL for JSON download</label>
    <textarea class="linkmodal" id="jsonUrl" #linkarea [value]="sampleUrl({export: true, host: true})"
              (keydown)="preventDefault($event)"></textarea>
    <rb-form-checkbox name="download-csv" [(ngModel)]="downloadCsv">
      add spectra
    </rb-form-checkbox>
    <rb-icon-button icon="clipboard" mode="secondary" (click)="clipboard()">Copy to clipboard</rb-icon-button>
  </ng-template>
  <a [href]="csvUrl" download="samples.csv">
    <rb-icon-button icon="download" mode="secondary" (mousedown)="csvUrl = sampleUrl({csv: true, export: true})">
      Download result as CSV
    </rb-icon-button>
  </a>
</div>

<rb-table>
  <tr>
    <th *ngFor="let key of activeKeys">
      <div class="sort-header">
        <span>{{key.label}}</span>
        <ng-container *ngIf="key.sortable">
          <span class="rb-ic rb-ic-up sort-arr-up" (click)="setSort(key.id + '-' + 'desc')">
            <span *ngIf="filters.sort === key.id + '-' + 'desc'"></span>
          </span>
          <span class="rb-ic rb-ic-down sort-arr-down" (click)="setSort(key.id + '-' + 'asc')">
            <span *ngIf="filters.sort === key.id + '-' + 'asc'"></span>
          </span>
        </ng-container>
      </div>
    </th>
    <th></th>
  </tr>

  <tr *ngFor="let sample of samples">
    <td *ngIf="isActiveKey['number']">{{sample.number}}</td>
    <td *ngIf="isActiveKey['material.numbers']">{{materials[sample.material_id].numbers}}</td>
    <td *ngIf="isActiveKey['material.name']">{{materials[sample.material_id].name}}</td>
    <td *ngIf="isActiveKey['material.supplier']">{{materials[sample.material_id].supplier}}</td>
    <td *ngIf="isActiveKey['material.group']">{{materials[sample.material_id].group}}</td>
    <td *ngFor="let key of activeTemplateKeys.material">
      {{materials[sample.material_id].properties[key[2]] | exists}}
    </td>
    <td *ngIf="isActiveKey['type']">{{sample.type}}</td>
    <td *ngIf="isActiveKey['color']">{{sample.color}}</td>
    <td *ngIf="isActiveKey['batch']">{{sample.batch}}</td>
    <td *ngIf="isActiveKey['notes']">{{sample.notes | object: ['_id', 'sample_references']}}</td>
    <td *ngFor="let key of activeTemplateKeys.measurements">{{sample[key[1]] | exists: key[2]}}</td>
    <td *ngIf="isActiveKey['added']">{{sample.added | date:'dd/MM/yy'}}</td>
    <td><a [routerLink]="'/samples/edit/' + sample._id"><span class="rb-ic rb-ic-edit"></span></a></td>
  </tr>
</rb-table>

<ng-container *ngTemplateOutlet="paging"></ng-container>

<ng-template #paging>
  <div class="paging">
    <button class="rb-btn rb-link" type="button" (click)="loadPage(-1)" [disabled]="page === 1">
      <span class="rb-ic  rb-ic-back-left"></span>
    </button>
    <rb-form-input label="page" (change)="loadPage({toPage: $event.target.value - page})" [ngModel]="page">
    </rb-form-input>
    <span>
      of {{pages}} ({{totalSamples}} samples)
    </span>
    <button class="rb-btn rb-link" type="button" (click)="loadPage(1)" [disabled]="page >= pages">
      <span class="rb-ic  rb-ic-forward-right"></span>
    </button>
  </div>
</ng-template>