finished filters
This commit is contained in:
VLE2FE
@ -8,17 +8,18 @@
|
||||
<rb-accordion>
|
||||
<rb-accordion-title [open]="true"><span class="rb-ic rb-ic-filter"></span> Filter</rb-accordion-title>
|
||||
<rb-accordion-body>
|
||||
<form (change)="loadSamples({event: $event})">
|
||||
<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">
|
||||
<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">
|
||||
<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="page-size-selection" #pageSizeSelection>
|
||||
<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>
|
||||
@ -27,38 +28,92 @@
|
||||
<option value="500">500</option>
|
||||
</rb-form-select>
|
||||
|
||||
<rb-form-multi-select name="fieldSelect" idField="id" [items]="keys" [(ngModel)]="activeKeys" label="Fields" class="selection" (ngModelChange)="loadSamples()">
|
||||
<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">
|
||||
<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">=</option>
|
||||
<option value="ne">≠</option>
|
||||
<option value="lt"><</option>
|
||||
<option value="lte">≤</option>
|
||||
<option value="gt">></option>
|
||||
<option value="gte">≥</option>
|
||||
<option value="in">∈</option>
|
||||
<option value="nin">∉</option>
|
||||
</rb-form-select>
|
||||
<div>
|
||||
<ng-container *ngFor="let ignore of [].constructor(filter.values.length); index as i">
|
||||
<rb-form-date-input *ngIf="filter.field === 'added'; else noDate" [name]="'filter-' + filter.field + i" [label]="filter.label" [(ngModel)]="filter.values[i]" (ngModelChange)="updateFilterFields(filter.field)"></rb-form-date-input>
|
||||
<ng-template #noDate>
|
||||
<rb-form-input *ngIf="!filter.autocomplete.length" [name]="'filter-' + filter.field + i" [label]="filter.label" [(ngModel)]="filter.values[i]" (ngModelChange)="updateFilterFields(filter.field)"></rb-form-input>
|
||||
<rb-form-input *ngIf="filter.autocomplete.length" [name]="'filter-' + filter.field + i" [label]="filter.label" [rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)" [rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')" [(ngModel)]="filter.values[i]" (ngModelChange)="updateFilterFields(filter.field)" ngModel></rb-form-input>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</div>
|
||||
<!-- <rb-form-date-input *ngIf="filter.field === 'added'; else noDate" [name]="'filter-' + filter.field" [label]="filter.label" [(ngModel)]="filter.values[0]" (ngModelChange)="loadSamples({firstPage: true})"></rb-form-date-input>-->
|
||||
<!-- <ng-template #noDate>-->
|
||||
<!-- <rb-form-input *ngIf="!filter.autocomplete.length" [name]="'filter-' + filter.field" [label]="filter.label" [(ngModel)]="filter.values[0]" (ngModelChange)="loadSamples({firstPage: true})"></rb-form-input>-->
|
||||
<!-- <rb-form-input *ngIf="filter.autocomplete.length" [name]="'filter-' + filter.field" [label]="filter.label" [rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)" [rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')" [(ngModel)]="filter.values[0]" (ngModelChange)="loadSamples({firstPage: true})" ngModel></rb-form-input>-->
|
||||
<!-- </ng-template>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <button class="rb-btn rb-secondary" (click)="loadSamples()">Apply filters</button>-->
|
||||
</form>
|
||||
</rb-accordion-body>
|
||||
</rb-accordion>
|
||||
|
||||
|
||||
<ng-container *ngTemplateOutlet="paging"></ng-container>
|
||||
|
||||
<div class="download">
|
||||
<button class="rb-btn rb-secondary" type="button" [rbModal]="linkModal" ><span class="rb-ic rb-ic-download"></span> JSON download link
|
||||
</button>
|
||||
<ng-template #linkModal let-close="close">
|
||||
URL for JSON download:
|
||||
<textarea class="linkmodal" #linkarea [value]="sampleUrl({export: true, host: true})" (keydown)="preventDefault($event)"></textarea>
|
||||
<rb-form-checkbox name="download-csv" [(ngModel)]="downloadCsv">
|
||||
add spectra
|
||||
</rb-form-checkbox>
|
||||
<button class="rb-btn rb-secondary" type="button" (click)="clipboard()"><span class="rb-ic rb-ic-clipboard"></span> Copy to clipboard</button>
|
||||
</ng-template>
|
||||
<a [href]="csvUrl" download="samples.csv">
|
||||
<button class="rb-btn rb-secondary" type="button" (mousedown)="csvUrl = sampleUrl({csv: true, export: true})"><span class="rb-ic rb-ic-download"></span> Download result as CSV</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<rb-table>
|
||||
<tr>
|
||||
<th *ngFor="let key of activeKeys">
|
||||
<th *ngFor="let key of activeKeysArray()">
|
||||
<div class="sort-header">
|
||||
<span>{{key.name}}</span>
|
||||
<span class="rb-ic rb-ic-up" [ngClass]="{'sort-active-desc': filters.sort === key.key + '-' + 'desc'}" (click)="setSort(key.key + '-' + 'desc')"></span>
|
||||
<span class="rb-ic rb-ic-down" [ngClass]="{'sort-active-asc': filters.sort === key.key + '-' + 'asc'}" (click)="setSort(key.key + '-' + 'asc')"></span>
|
||||
<span>{{key.label}}</span>
|
||||
<!-- <span class="rb-ic rb-ic-up" [ngClass]="{'sort-active-desc': filters.sort === key.id + '-' + 'desc'}" (click)="setSort(key.id + '-' + 'desc')"></span>-->
|
||||
<!-- <span class="rb-ic rb-ic-down" [ngClass]="{'sort-active-asc': filters.sort === key.id + '-' + 'asc'}" (click)="setSort(key.id + '-' + 'asc')"></span>-->
|
||||
<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>
|
||||
</div>
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
|
||||
<tr *ngFor="let sample of samples">
|
||||
<td>{{sample.number}}</td>
|
||||
<!-- <td>{{sample.material_number}}</td>-->
|
||||
<td>{{materials[sample.material_id].name}}</td>
|
||||
<td>{{materials[sample.material_id].supplier}}</td>
|
||||
<!-- <td>{{materials[sample.material_id].group}}</td>-->
|
||||
<!-- <td>{{materials[sample.material_id].glass_fiber}}</td>-->
|
||||
<!-- <td>{{materials[sample.material_id].carbon_fiber}}</td>-->
|
||||
<!-- <td>{{materials[sample.material_id].mineral}}</td>-->
|
||||
<td>{{sample.type}}</td>
|
||||
<td>{{sample.color}}</td>
|
||||
<td>{{sample.batch}}</td>
|
||||
<td>{{sample.added | date}}</td>
|
||||
<td *ngIf="activeKeys['number']">{{sample.number}}</td>
|
||||
<td *ngIf="activeKeys['material.number']">{{sample.material_number}}</td>
|
||||
<td *ngIf="activeKeys['material.name']">{{materials[sample.material_id].name}}</td>
|
||||
<td *ngIf="activeKeys['material.supplier']">{{materials[sample.material_id].supplier}}</td>
|
||||
<td *ngIf="activeKeys['material.group']">{{materials[sample.material_id].group}}</td>
|
||||
<td *ngIf="activeKeys['material.glass_fiber']">{{materials[sample.material_id].glass_fiber}}</td>
|
||||
<td *ngIf="activeKeys['material.carbon_fiber']">{{materials[sample.material_id].carbon_fiber}}</td>
|
||||
<td *ngIf="activeKeys['material.mineral']">{{materials[sample.material_id].mineral}}</td>
|
||||
<td *ngIf="activeKeys['type']">{{sample.type}}</td>
|
||||
<td *ngIf="activeKeys['color']">{{sample.color}}</td>
|
||||
<td *ngIf="activeKeys['batch']">{{sample.batch}}</td>
|
||||
<td *ngIf="activeKeys['added']">{{sample.added | date:'dd/MM/yy'}}</td>
|
||||
<td *ngFor="let key of activeMeasurementKeys()">{{sample[key[1]] ? sample[key[1]][key[2]] : ''}}</td>
|
||||
<td><a [routerLink]="'/samples/edit/' + sample._id"><span class="rb-ic rb-ic-edit"></span></a></td>
|
||||
</tr>
|
||||
</rb-table>
|
||||
@ -72,7 +127,7 @@
|
||||
</button>
|
||||
<rb-form-input label="page" (change)="loadPage({toPage: $event.target.value - page})" [ngModel]="page"></rb-form-input>
|
||||
<span>
|
||||
of {{pages()}}
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user