Data row filtering
This commit is contained in:
parent
f831f905a5
commit
b3195bcd82
@ -6,16 +6,16 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody v-for="report in reports">
|
<tbody v-for="report in reports">
|
||||||
<template v-for="name in report">
|
<template v-for="name in report">
|
||||||
<tr v-if="names[name]">
|
<tr v-if="names[name]" @dblclick="toggle_filter_name(name)">
|
||||||
<th>{{name}}</th>
|
<th :class="{ filtered: name == filter_name }">{{name}}</th>
|
||||||
<td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td>
|
<td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody>
|
<tbody>
|
||||||
<template v-for="name in names">
|
<template v-for="name in names">
|
||||||
<tr v-if="!names_excluded[name]">
|
<tr v-if="!names_excluded[name]" @dblclick="toggle_filter_name(name)">
|
||||||
<th>{{name}}</th>
|
<th :class="{ filtered: name == filter_name }">{{name}}</th>
|
||||||
<td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td>
|
<td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
@ -37,16 +37,25 @@
|
|||||||
table.table-sticky tbody tr {
|
table.table-sticky tbody tr {
|
||||||
border-top: 1px dashed #dee2e6;
|
border-top: 1px dashed #dee2e6;
|
||||||
}
|
}
|
||||||
|
table.table-sticky tbody tr:hover {
|
||||||
|
border: 1px solid #6c757d;
|
||||||
|
}
|
||||||
td:nth-of-type(odd) {
|
td:nth-of-type(odd) {
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
table.table-sticky tbody th, table.table-sticky th.name {
|
table.table-sticky tbody th, table.table-sticky th.name {
|
||||||
|
cursor: default;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
|
table.table-sticky th.filtered {
|
||||||
|
background-color: #6c757d;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
table.table-sticky th.date {
|
table.table-sticky th.date {
|
||||||
|
cursor: default;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -147,11 +156,14 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
filter_name: null
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
resultset_all() {
|
resultset_all() {
|
||||||
return this.resultset_calculated.length > 0 ? this.resultset.concat(this.resultset_calculated) : this.resultset;
|
var res = this.resultset_calculated.length > 0 ? this.resultset.concat(this.resultset_calculated) : this.resultset;
|
||||||
|
return this.filter_name ? res.filter(x => x.name == this.filter_name) : res;
|
||||||
},
|
},
|
||||||
resultset_calculated() {
|
resultset_calculated() {
|
||||||
var self = this, snapshots = [], results = [], history, update, item;
|
var self = this, snapshots = [], results = [], history, update, item;
|
||||||
@ -230,6 +242,9 @@
|
|||||||
return res.join('\n');
|
return res.join('\n');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
toggle_filter_name(name) {
|
||||||
|
this.filter_name = this.filter_name != name ? name : null;
|
||||||
|
},
|
||||||
abnormal_ref(item) {
|
abnormal_ref(item) {
|
||||||
return (item) && (item.flag);
|
return (item) && (item.flag);
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user