jyio/nuVistA
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix resource lookup premature collapse

Browse Source
This commit is contained in:
Jiang Yio 2022-09-26 18:30:10 -04:00
parent 976276e2e0
commit 030487d728
1 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
htdocs/ViewResourceLookup.vue
View File

@ -1,29 +1,31 @@
<template>
<div class="input-group">
<span class="input-group-text">🔎</span>
<input class="form-control" v-model="query_raw" @focus="collapsed = false" @blur="collapsed = true" />
</div>
<div :class="{ collapsed }" 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>
<div class="input-group">
<span class="input-group-text">🔎</span>
<input class="form-control" v-model="query_raw" @focus="collapsed = false" />
</div>
<div :class="{ collapsed }" 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>
</div>
</template>
@ -91,6 +93,7 @@
}
},
methods: {
collapse(evt) { if(!this.$el.contains(evt.target)) this.collapsed = true; },
reset(evt) {
var selection = this.resultset_selected.slice();
for(var i = selection.length - 1; i >= 0; --i) selection[i].selected = false;
@ -103,6 +106,10 @@
var rs = (await this.client.SDEC_RESOURCE()).slice();
update_selection(rs, this.selection);
this.resultset_raw = rs;
document.addEventListener('click', this.collapse);
},
destroyed() {
document.removeEventListener('click', this.collapse);
}
};
</script>