102 lines
3.2 KiB
Vue
102 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-text">🔎</span>
|
||
|
|
<input class="form-control" v-model="query_raw" />
|
||
|
|
</div>
|
||
|
|
<div style="max-height: 30em; overflow-y: auto;">
|
||
|
|
<table class="table table-striped" style="font-family: monospace;" v-if="resultset_raw && resultset_raw.length > 0">
|
||
|
|
<thead>
|
||
|
|
<tr><th></th><th>ID</th><th>Name</th><th>Type</th><th>User</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<template v-for="row in resultset_filtered">
|
||
|
|
<tr :class="{ 'table-active': row.selected }" v-if="row.INACTIVE != 'YES'">
|
||
|
|
<td><input type="checkbox" v-model="row.selected" /></td>
|
||
|
|
<td>{{row.RESOURCEID}}</td>
|
||
|
|
<td>{{row.RESOURCE_NAME}}</td>
|
||
|
|
<td>{{row.RESOURCETYPE}}</td>
|
||
|
|
<td>{{row.USERNAME}}</td>
|
||
|
|
</tr>
|
||
|
|
</template>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div style="font-family: monospace;" v-if="resultset_selected.length">
|
||
|
|
<span class="badge bg-primary" style="cursor: default; margin-right: 0.35em;" v-on:click="reset">CLEAR {{resultset_selected.length}}</span>
|
||
|
|
<span class="badge bg-secondary" style="cursor: default; margin-right: 0.35em;" v-for="row in resultset_selected" v-on:click="row.selected = false;">❌ {{row.RESOURCEID}} {{row.RESOURCE_NAME}}</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { debounce } from './util.mjs';
|
||
|
|
|
||
|
|
function arrayeq1(a, b) {
|
||
|
|
if(a.length == b.length) {
|
||
|
|
for(var i = a.length - 1; i >= 0; --i) if(a[i] != b[i]) return false;
|
||
|
|
return true;
|
||
|
|
} else return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function update_selection(resultset, selection) {
|
||
|
|
var mapping = selection.reduce((obj, key) => (obj[key] = true, obj), {});
|
||
|
|
for(var i = resultset.length -1; i >= 0; --i) resultset[i].selected = resultset[i].RESOURCEID in mapping;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
client: Object,
|
||
|
|
selection: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emits: {
|
||
|
|
'update:selection': Object
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
resultset_raw: [],
|
||
|
|
query_raw: '',
|
||
|
|
query_view: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
resultset_filtered() {
|
||
|
|
var query_view = this.query_view.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ').toUpperCase();
|
||
|
|
return query_view ? this.resultset_raw.filter(row => (query_view == row.RESOURCEID) || (row.RESOURCE_NAME.indexOf(query_view) >= 0) || (row.USERNAME.indexOf(query_view) >= 0)) : this.resultset_raw;
|
||
|
|
},
|
||
|
|
resultset_selected() {
|
||
|
|
return this.resultset_raw.filter(row => row.selected);
|
||
|
|
},
|
||
|
|
resultset_selection() {
|
||
|
|
return this.resultset_selected.map(x => x.RESOURCEID);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
selection(value) {
|
||
|
|
if(!arrayeq1(value, this.resultset_selection)) update_selection(this.resultset_raw, value);
|
||
|
|
},
|
||
|
|
resultset_selection(value) {
|
||
|
|
this.$emit('update:selection', value);
|
||
|
|
},
|
||
|
|
query_raw(value) {
|
||
|
|
this.query_sync(value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
reset(evt) {
|
||
|
|
var selection = this.resultset_selected.slice();
|
||
|
|
for(var i = selection.length - 1; i >= 0; --i) selection[i].selected = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.query_sync = debounce(function(value) { this.query_view = value.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' '); }, 500);
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
var rs = (await this.client.SDEC_RESOURCE()).slice();
|
||
|
|
update_selection(rs, this.selection);
|
||
|
|
this.resultset_raw = rs;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|