238 lines
12 KiB
HTML
238 lines
12 KiB
HTML
<script src="samples.component.ts"></script>
|
|
<div class="header-addnew">
|
|
<h2>Samples</h2>
|
|
<a routerLink="/samples/new" *ngIf="login.isLevel.write">
|
|
<rb-icon-button icon="add" mode="primary" class="space-left">New sample</rb-icon-button>
|
|
</a>
|
|
<rb-icon-button *ngIf="validation" mode="secondary" icon="close" (click)="validation = false" class="validation-close"
|
|
iconOnly></rb-icon-button>
|
|
<rb-icon-button *ngIf="login.isLevel.dev" [icon]="validation ? 'checkmark' : 'clear-all'"
|
|
mode="secondary" (click)="validate()">
|
|
{{validation ? 'Validate' : 'Validation'}}
|
|
</rb-icon-button>
|
|
</div>
|
|
|
|
<rb-accordion>
|
|
<rb-accordion-title [open]="false"><span class="rb-ic rb-ic-filter"></span> 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 && !filters.status.deleted"
|
|
(ngModelChange)="loadSamples({firstPage: true})">
|
|
validated
|
|
</rb-form-checkbox>
|
|
<rb-form-checkbox name="status-new" [(ngModel)]="filters.status.new"
|
|
[disabled]="!filters.status.validated && !filters.status.deleted"
|
|
(ngModelChange)="loadSamples({firstPage: true})">
|
|
new
|
|
</rb-form-checkbox>
|
|
<rb-form-checkbox name="status-deleted" [(ngModel)]="filters.status.deleted"
|
|
[disabled]="!filters.status.validated && !filters.status.new"
|
|
(ngModelChange)="loadSamples({firstPage: true})" *ngIf="login.isLevel.dev">
|
|
deleted
|
|
</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">≠</option>
|
|
<option value="lt" title="field is lower than value"><</option>
|
|
<option value="lte" title="field is lower than or equal to value">≤</option>
|
|
<option value="gt" title="field is greater than value">></option>
|
|
<option value="gte" title="field is greater than or equal to value">≥</option>
|
|
<option value="stringin" title="field contains value">⊇</option>
|
|
<option value="in" title="field is one of the values">∈</option>
|
|
<option value="nin" title="field is not one of the values">∉</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 space-below" *ngIf="login.isLevel.dev">
|
|
<rb-icon-button class="space-right" icon="download" mode="secondary" [rbModal]="linkModal">
|
|
JSON download link
|
|
</rb-icon-button>
|
|
<ng-template #linkModal>
|
|
<div class="link-dialog">
|
|
<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 class="space-right" name="download-spectra" [(ngModel)]="downloadSpectra">
|
|
add spectra
|
|
</rb-form-checkbox>
|
|
<rb-form-checkbox name="download-flatten" [(ngModel)]="downloadFlatten">
|
|
flatten object
|
|
</rb-form-checkbox>
|
|
<rb-icon-button icon="clipboard" mode="secondary" (click)="clipboard()">Copy to clipboard</rb-icon-button>
|
|
</div>
|
|
</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 class="samples-table">
|
|
<tr>
|
|
<th *ngIf="validation">
|
|
<rb-form-checkbox name="validate-all" (change)="selectAll($event)">all</rb-form-checkbox>
|
|
</th>
|
|
<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 *ngIf="login.isLevel.write"></th>
|
|
</tr>
|
|
|
|
<tr *ngFor="let sample of samples; index as i" class="clickable" (click)="sampleDetails(sample._id, sampleModal)">
|
|
<td *ngIf="validation">
|
|
<rb-form-checkbox *ngIf="sample.status !== 'deleted'" [name]="'validate-' + i" (click)="stopPropagation($event)"
|
|
[(ngModel)]="sample.validate">
|
|
</rb-form-checkbox>
|
|
</td>
|
|
<td *ngIf="isActiveKey['number']">{{sample.number}}</td>
|
|
<td *ngIf="isActiveKey['material.numbers']">{{d.id.materials[sample.material_id].numbers}}</td>
|
|
<td *ngIf="isActiveKey['material.name']">{{d.id.materials[sample.material_id].name}}</td>
|
|
<td *ngIf="isActiveKey['material.supplier']">{{d.id.materials[sample.material_id].supplier}}</td>
|
|
<td *ngIf="isActiveKey['material.group']">{{d.id.materials[sample.material_id].group}}</td>
|
|
<td *ngFor="let key of activeTemplateKeys.material">
|
|
{{d.id.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['status']">{{sample.status}}</td>
|
|
<td *ngIf="isActiveKey['added']">{{sample.added | date:'dd/MM/yy'}}</td>
|
|
<td *ngIf="login.isLevel.write">
|
|
<a [routerLink]="'/samples/edit/' + sample._id"
|
|
*ngIf="sample.status !== 'deleted' &&
|
|
(login.isLevel.dev || (login.isLevel.write && sample.user_id === login.userId))">
|
|
<span class="rb-ic rb-ic-edit clickable"></span>
|
|
</a>
|
|
<span class="rb-ic rb-ic-undo clickable" *ngIf="sample.status === 'deleted' && login.isLevel.dev"
|
|
(click)="restoreSample(sample._id, restoreConfirm, $event)"></span>
|
|
</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>
|
|
|
|
<ng-template #sampleModal>
|
|
<rb-loading-spinner *ngIf="sampleDetailsSample === null; else sampleDetailsTemplate"></rb-loading-spinner>
|
|
<ng-template #sampleDetailsTemplate>
|
|
<h3>{{sampleDetailsSample.number}}</h3>
|
|
<rb-table class="sample-details-table">
|
|
<tr><th>Material</th><td>{{sampleDetailsSample.material.name}}</td></tr>
|
|
<tr><th>Supplier</th><td>{{sampleDetailsSample.material.supplier}}</td></tr>
|
|
<tr><th>Group</th><td>{{sampleDetailsSample.material.group}}</td></tr>
|
|
<tr><th>Type</th><td>{{sampleDetailsSample.type}}</td></tr>
|
|
<tr><th>color</th><td>{{sampleDetailsSample.color}}</td></tr>
|
|
<tr><th>Batch</th><td>{{sampleDetailsSample.batch}}</td></tr>
|
|
<tr><th>Comment</th><td>{{sampleDetailsSample.notes.comment | exists}}</td></tr>
|
|
<tr *ngFor="let customField of sampleDetailsSample.notes.custom_fields_entries">
|
|
<th>{{customField[0]}}</th>
|
|
<td>{{customField[0]}}</td>
|
|
</tr>
|
|
<tr *ngFor="let reference of sampleDetailsSample.notes.sample_references">
|
|
<th>{{reference.relation}}</th>
|
|
<td>
|
|
<button class="rb-btn rb-link" (click)="sampleDetails(reference.sample_id, sampleModal)">
|
|
{{reference.number}}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr *ngFor="let measurement of sampleDetailsSample.measurement_entries">
|
|
<th>{{measurement.name}}</th>
|
|
<td>{{measurement.value}}</td>
|
|
</tr>
|
|
<tr><th>User</th><td>{{sampleDetailsSample.user}}</td></tr>
|
|
<tr><th>Status</th><td>{{sampleDetailsSample.status}}</td></tr>
|
|
</rb-table>
|
|
</ng-template>
|
|
</ng-template>
|
|
|
|
<ng-template #restoreConfirm>
|
|
<rb-dialog dialogTitle="Restore sample">
|
|
Do you really want to restore this sample?
|
|
</rb-dialog>
|
|
</ng-template>
|