banana/definma-ui
2
Fork 0
Code Releases Activity

fixed type filter

Browse Source
This commit is contained in:
VLE2FE
2020-08-14 14:29:17 +02:00
parent 5f6411c613
commit f07c3be23a
7 changed files with 104 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/samples/samples.component.html
View File

@ -73,7 +73,7 @@
(ngModelChange)="updateFilterFields(filter.field)">
<ng-container *rbArrayInputItem="let item"
[ngSwitch]="(filter.autocomplete.length ? 'autocomplete' : '') +
(filter.field == 'added' ? 'date' : '')">
(filter.field == 'added' ? 'date' : (filter.field == 'type' ? 'type' : ''))">
<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>
@ -86,6 +86,12 @@
[rbDebounceTime]="0" (keydown)="preventDefault($event, 'Enter')"
[rbFormInputAutocomplete]="autocomplete.bind(this, filter.autocomplete)"
ngModel></rb-form-input>
<rb-form-select *ngSwitchCase="'type'" [rbArrayInputListener]="'filter-' + filter.field"
[name]="'filter-' + filter.field + item.i" [index]="item.i"
[label]="filter.label" [(ngModel)]="item.value">
<option value="as-delivered/raw">as-delivered/raw</option>
<option value="processed">processed</option>
</rb-form-select>
</ng-container>
</rb-array-input>
</div>
@ -132,17 +138,17 @@
<th *ngIf="validation">
<rb-form-checkbox name="validate-all" (change)="selectAll($event)">all</rb-form-checkbox>
</th>
<th *ngFor="let key of activeKeys">
<th *ngFor="let key of activeKeys" [title]="key.label">
<div class="sort-header">
<span>{{key.label}}</span>
<ng-container *ngIf="key.sortable">
<div *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>
</div>
</th>
<th *ngIf="login.isLevel.write"></th>
@ -165,6 +171,9 @@
<td *ngIf="isActiveKey['type']">{{sample.type}}</td>
<td *ngIf="isActiveKey['color']">{{sample.color}}</td>
<td *ngIf="isActiveKey['batch']">{{sample.batch}}</td>
<td *ngFor="let key of activeTemplateKeys.condition">
{{sample.condition ? sample.condition[key[1]] : '' | exists}}
</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>
@ -188,7 +197,7 @@
<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 label="page" (ngModelChange)="loadPage($event - page)" [ngModel]="page">
</rb-form-input>
<span>
of {{pages}} ({{totalSamples}} samples)

37
src/app/samples/samples.component.scss
View File

@ -54,7 +54,7 @@ rb-table {
.paging {
height: 50px;
rb-form-input {
max-width: 50px;
max-width: 65px;
}
> * {
@ -72,23 +72,34 @@ rb-table {
}
.sort-header {
display: inline-grid;
grid-template-columns: 1fr auto;
grid-column-gap: 5px;
width: 100%;
position: relative;
:first-child {
grid-row: span 2;
& > span:first-child {
max-width: 180px;
overflow: hidden;
display: block;
text-overflow: ellipsis;
margin-right: 20px;
}
:nth-child(2) {
margin-bottom: -3px;
cursor: pointer;
}
div {
display: grid;
grid-template-columns: 1fr;
position: absolute;
right: 0;
top: 0;
background: #FFF;
:nth-child(3) {
margin-top: -3px;
cursor: pointer;
:nth-child(1) {
margin-bottom: -3px;
cursor: pointer;
}
:nth-child(2) {
margin-top: -3px;
cursor: pointer;
}
}
}

57
src/app/samples/samples.component.ts
View File

@ -78,7 +78,7 @@ export class SamplesComponent implements OnInit {
];
isActiveKey: {[key: string]: boolean} = {};
activeKeys: KeyInterface[] = [];
activeTemplateKeys = {material: [], measurements: []};
activeTemplateKeys = {material: [], condition: [], measurements: []};
sampleDetailsSample: any = null;
validation = false; // true to activate validation mode
@ -89,12 +89,13 @@ export class SamplesComponent implements OnInit {
public login: LoginService,
private modalService: ModalService,
public d: DataService,
private storage: LocalStorageService
private storage: LocalStorageService,
private window: Window
) {
}
ngOnInit(): void {
let loading = 7;
let loading = 8;
const onLoad = () => {
if ((--loading) <= 0) {
this.loadSamples();
@ -117,6 +118,7 @@ export class SamplesComponent implements OnInit {
this.d.load('userKey', onLoad);
this.d.load('conditionTemplates', onLoad);
this.loadTemplateKeys('material', 'type', onLoad);
this.loadTemplateKeys('condition', 'notes', onLoad);
this.loadTemplateKeys('measurement', 'status', onLoad);
}
@ -128,15 +130,16 @@ export class SamplesComponent implements OnInit {
const parameterName = encodeURIComponent(parameter.name);
// exclude spectrum and duplicates
if (parameter.name !== 'dpt' && !templateKeys.find(e => new RegExp('.' + parameterName + '$').test(e.id))) {
const collectionNames = {material: 'material.properties', condition: 'condition', measurement: 'measurements.' + item.name};
templateKeys.push({
id: `${collection === 'material' ? 'material.properties' : collection + 's.' + item.name}.${parameterName}`,
label: `${this.ucFirst(item.name)} ${this.ucFirst(parameter.name)}`,
id: `${collectionNames[collection]}.${parameterName}`,
label: `${this.ucFirst(item.name)} ${parameter.name}`,
active: false,
sortable: true
});
this.filters.filters.push({
field: `${collection === 'material' ? 'material.properties' : collection + 's.' + item.name}.${parameterName}`,
label: `${this.ucFirst(item.name)} ${this.ucFirst(parameter.name)}`,
field: `${collectionNames[collection]}.${parameterName}`,
label: `${this.ucFirst(item.name)} ${parameter.name}`,
active: false,
autocomplete: [],
mode: 'eq',
@ -153,6 +156,7 @@ export class SamplesComponent implements OnInit {
}
loadSamples(options: LoadSamplesOptions = {}, event = null) { // set toPage to null to reload first page, queues calls
console.log(this.isActiveKey);
if (event) { // adjust active keys
this.keys.forEach(key => {
if (event.hasOwnProperty(key.id)) {
@ -169,15 +173,21 @@ export class SamplesComponent implements OnInit {
}
private sampleLoader(options: LoadSamplesOptions) { // actual loading of the sample, do not call directly
this.api.get(this.sampleUrl({paging: true, pagingOptions: options}), (sData, ignore, headers) => {
if (!options.toPage && headers['x-total-items']) {
this.totalSamples = headers['x-total-items'];
this.api.get(this.sampleUrl({paging: true, pagingOptions: options}), (sData, err, headers) => {
if (err) {
this.storage.remove('samplesPreferences');
this.api.requestError(err);
}
this.pages = Math.ceil(this.totalSamples / this.filters.pageSize);
this.samples = sData as any;
this.loadSamplesQueue.shift();
if (this.loadSamplesQueue.length > 0) { // execute next queue item
this.sampleLoader(this.loadSamplesQueue[0]);
else {
if (!options.toPage && headers['x-total-items']) {
this.totalSamples = headers['x-total-items'];
}
this.pages = Math.ceil(this.totalSamples / this.filters.pageSize);
this.samples = sData as any;
this.loadSamplesQueue.shift();
if (this.loadSamplesQueue.length > 0) { // execute next queue item
this.sampleLoader(this.loadSamplesQueue[0]);
}
}
});
}
@ -216,7 +226,7 @@ export class SamplesComponent implements OnInit {
}
this.keys.forEach(key => {
// do not load material properties for table
if (key.active && (options.export || (!options.export && key.id.indexOf('material') < 0))) {
if (key.active && (options.export || (!options.export && key.id.indexOf('material.') < 0))) {
query.push('fields[]=' + key.id);
}
});
@ -253,12 +263,13 @@ export class SamplesComponent implements OnInit {
query.push('fields[]=condition');
}
}
return (options.host && isDevMode() ? window.location.host : '') +
return (options.host && isDevMode() ? this.window.location.host : '') +
(options.export ? this.api.hostName : '') +
'/samples?' + query.join('&');
}
loadPage(delta) {
console.log(delta);
if (!/[0-9]+/.test(delta) || (this.page <= 1 && delta < 0)) { // invalid delta
return;
}
@ -293,9 +304,9 @@ export class SamplesComponent implements OnInit {
this.keys[keyIndex].active = key.active;
}
});
this.calcFieldSelectKeys();
this.updateActiveKeys();
}
this.calcFieldSelectKeys();
this.updateActiveKeys();
}
updateFilterFields(field) {
@ -313,10 +324,18 @@ export class SamplesComponent implements OnInit {
updateActiveKeys() { // array with all activeKeys
this.activeKeys = this.keys.filter(e => e.active);
this.filters.filters.forEach(filter => {
if (!this.isActiveKey[filter.field]) {
filter.active = false;
}
});
this.activeTemplateKeys.material = this.keys
.filter(e => e.id.indexOf('material.properties.') >= 0 && e.active)
.map(e => e.id.split('.')
.map(el => decodeURIComponent(el)));
this.activeTemplateKeys.condition = this.keys.filter(e => e.id.indexOf('condition.') >= 0 && e.active)
.map(e => e.id.split('.')
.map(el => decodeURIComponent(el)));
this.activeTemplateKeys.measurements = this.keys.filter(e => e.id.indexOf('measurements.') >= 0 && e.active)
.map(e => e.id.split('.')
.map(el => decodeURIComponent(el)));