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

134 lines
7.4 KiB
HTML
Raw Normal View History

2020-07-27 17:52:03 +02:00
<script src="samples.component.ts"></script>
2020-05-22 12:52:17 +02:00
<div class="header-addnew">
<h2>Samples</h2>
<a routerLink="/samples/new">
<button class="rb-btn rb-primary"><span class="rb-ic rb-ic-add"></span>&nbsp; New sample</button>
</a>
2020-05-22 12:52:17 +02:00
</div>
<rb-accordion>
2020-07-22 10:45:34 +02:00
<rb-accordion-title [open]="false"><span class="rb-ic rb-ic-filter"></span>&nbsp; Filter</rb-accordion-title>
2020-05-22 12:52:17 +02:00
<rb-accordion-body>
2020-07-13 10:52:10 +02:00
<form class="filters">
2020-06-26 11:09:59 +02:00
<div class="status-selection">
<label class="label">Status</label>
2020-07-13 10:52:10 +02:00
<rb-form-checkbox name="status-validated" [(ngModel)]="filters.status.validated" [disabled]="!filters.status.new" (ngModelChange)="loadSamples({firstPage: true})">
2020-06-26 11:09:59 +02:00
validated
</rb-form-checkbox>
2020-07-13 10:52:10 +02:00
<rb-form-checkbox name="status-new" [(ngModel)]="filters.status.new" [disabled]="!filters.status.validated" (ngModelChange)="loadSamples({firstPage: true})">
2020-06-26 11:09:59 +02:00
new
</rb-form-checkbox>
</div>
2020-07-13 10:52:10 +02:00
<rb-form-select name="pageSizeSelection" label="page size" [(ngModel)]="filters.pageSize" class="selection" (ngModelChange)="loadSamples({firstPage: true})" #pageSizeSelection>
<option value="3">3</option>
2020-06-26 11:09:59 +02:00
<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>
2020-07-22 10:45:34 +02:00
<rb-form-multi-select name="fieldSelect" idField="id" [items]="keys" [(ngModel)]="isActiveKey" label="Fields" class="selection" (ngModelChange)="loadSamples({}, $event)">
2020-07-13 10:52:10 +02:00
<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">
2020-07-22 10:45:34 +02:00
<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">
<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>
</ng-container>
2020-07-13 10:52:10 +02:00
</div>
</div>
</form>
2020-05-22 12:52:17 +02:00
</rb-accordion-body>
</rb-accordion>
2020-07-13 10:52:10 +02:00
2020-06-26 11:09:59 +02:00
<ng-container *ngTemplateOutlet="paging"></ng-container>
2020-07-13 10:52:10 +02:00
<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>
2020-05-22 12:52:17 +02:00
<rb-table>
<tr>
2020-07-22 10:45:34 +02:00
<th *ngFor="let key of activeKeys">
2020-06-26 11:09:59 +02:00
<div class="sort-header">
2020-07-13 10:52:10 +02:00
<span>{{key.label}}</span>
2020-07-27 17:52:03 +02:00
<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>
2020-06-26 11:09:59 +02:00
</div>
</th>
<th></th>
2020-05-22 12:52:17 +02:00
</tr>
<tr *ngFor="let sample of samples">
2020-07-22 10:45:34 +02:00
<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>
2020-07-27 17:52:03 +02:00
<td *ngIf="isActiveKey['notes']">{{sample.notes | object: ['_id', 'sample_references']}}</td>
2020-07-22 10:45:34 +02:00
<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>
2020-05-22 12:52:17 +02:00
</tr>
</rb-table>
2020-06-26 11:09:59 +02:00
<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>
2020-07-22 10:45:34 +02:00
of {{pages}} ({{totalSamples}} samples)
2020-06-26 11:09:59 +02:00
</span>
2020-07-22 10:45:34 +02:00
<button class="rb-btn rb-link" type="button" (click)="loadPage(1)" [disabled]="page >= pages">
2020-06-26 11:09:59 +02:00
<span class="rb-ic rb-ic-forward-right"></span>
</button>
</div>
</ng-template>