From 27c33cb2f84664b1ab8ec345b4a60f8a32d8fbb9 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshua.boniface@buildops.com>
Date: Wed, 26 Feb 2025 17:00:49 -0500
Subject: [PATCH] Close config when clicking outside

---
 pvcweb-vue/src/components/ConfigPanel.vue | 105 +++++++++++++---------
 1 file changed, 62 insertions(+), 43 deletions(-)

diff --git a/pvcweb-vue/src/components/ConfigPanel.vue b/pvcweb-vue/src/components/ConfigPanel.vue
index 835e627..3c51257 100644
--- a/pvcweb-vue/src/components/ConfigPanel.vue
+++ b/pvcweb-vue/src/components/ConfigPanel.vue
@@ -1,50 +1,59 @@
 <template>
-  <div class="config-panel" :class="{ 'open': modelValue }">
-    <div class="config-content">
-      <h3>Configuration</h3>
-      <form @submit.prevent="saveConfig">
-        <div class="mb-3">
-          <label for="apiUri" class="form-label">API URI</label>
-          <input
-            type="text"
-            class="form-control"
-            id="apiUri"
-            v-model="formData.apiUri"
-            placeholder="http://your-pvc-api:7370/api/v1"
-            required
-          >
-        </div>
+  <div>
+    <!-- Overlay that captures clicks outside the panel -->
+    <div 
+      v-if="modelValue" 
+      class="config-overlay"
+      @click="closePanel"
+    ></div>
+    
+    <div class="config-panel" :class="{ 'open': modelValue }">
+      <div class="config-content" @click.stop>
+        <h3>Configuration</h3>
+        <form @submit.prevent="saveConfig">
+          <div class="mb-3">
+            <label for="apiUri" class="form-label">API URI</label>
+            <input
+              type="text"
+              class="form-control"
+              id="apiUri"
+              v-model="formData.apiUri"
+              placeholder="http://your-pvc-api:7370/api/v1"
+              required
+            >
+          </div>
 
-        <div class="mb-3">
-          <label for="apiKey" class="form-label">API Key</label>
-          <input
-            type="password"
-            class="form-control"
-            id="apiKey"
-            v-model="formData.apiKey"
-            placeholder="Your API key"
-            required
-          >
-        </div>
+          <div class="mb-3">
+            <label for="apiKey" class="form-label">API Key</label>
+            <input
+              type="password"
+              class="form-control"
+              id="apiKey"
+              v-model="formData.apiKey"
+              placeholder="Your API key"
+              required
+            >
+          </div>
 
-        <div class="mb-3">
-          <label for="updateInterval" class="form-label">Update Interval (ms)</label>
-          <input
-            type="number"
-            class="form-control"
-            id="updateInterval"
-            v-model="formData.updateInterval"
-            min="1000"
-            step="1000"
-            required
-          >
-        </div>
+          <div class="mb-3">
+            <label for="updateInterval" class="form-label">Update Interval (ms)</label>
+            <input
+              type="number"
+              class="form-control"
+              id="updateInterval"
+              v-model="formData.updateInterval"
+              min="1000"
+              step="1000"
+              required
+            >
+          </div>
 
-        <div class="d-grid gap-2">
-          <button type="submit" class="btn btn-primary">Save</button>
-          <button type="button" class="btn btn-secondary" @click="closePanel">Cancel</button>
-        </div>
-      </form>
+          <div class="d-grid gap-2">
+            <button type="submit" class="btn btn-primary">Save</button>
+            <button type="button" class="btn btn-secondary" @click="closePanel">Cancel</button>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </template>
@@ -81,6 +90,16 @@ const closePanel = () => {
 </script>
 
 <style scoped>
+.config-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
 .config-panel {
   position: fixed;
   top: 0;