From 030487d7283322f5652e2eab058b99598872099c Mon Sep 17 00:00:00 2001
From: inportb <inportb@gmail.com>
Date: Mon, 26 Sep 2022 18:30:10 -0400
Subject: [PATCH] Fix resource lookup premature collapse

---
 htdocs/ViewResourceLookup.vue | 57 ++++++++++++++++++++---------------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/htdocs/ViewResourceLookup.vue b/htdocs/ViewResourceLookup.vue
index b263a07..94793c0 100644
--- a/htdocs/ViewResourceLookup.vue
+++ b/htdocs/ViewResourceLookup.vue
@@ -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>