From ccead771e6bc04837eee56495b1507d8e02d9b0a Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 26 Jun 2026 19:43:22 -0400
Subject: [PATCH] Fix stale identifier flags: refresh composable on Settings
 toggle

The identifier-flags composable fetched settings once and cached them in a
module singleton, so toggling an identifier in Settings (gauge/maintenance/FQDN
per asset type) did not take effect on already-open asset views until a full
page reload. Disabled identifiers kept showing.

- identifierSettings.js: extract applySetting/fetchFlags; export
  reloadIdentifierFlags() and setIdentifierFlag(name, assettype, enabled) to
  mutate the shared reactive state.
- SystemSettings.vue: push each successful matrix toggle into the shared state
  via setIdentifierFlag so dependent views react immediately.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/composables/identifierSettings.js     | 58 +++++++++++++------
 .../src/views/settings/SystemSettings.vue     |  4 ++
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/frontend/src/composables/identifierSettings.js b/frontend/src/composables/identifierSettings.js
index 752c669..a9c72b4 100644
--- a/frontend/src/composables/identifierSettings.js
+++ b/frontend/src/composables/identifierSettings.js
@@ -14,28 +14,48 @@ const state = reactive({
 
 let inflight = null
 
-function loadFlags() {
-  if (!state.loaded && !inflight) {
-    inflight = settingsApi.list()
-      .then(({ data }) => {
-        ;(data.data || []).forEach(s => {
-          const match = /^identifier_(.+?)(?:_(equipment|computer|printer|network_device))?_enabled$/.exec(s.key)
-          if (!match) return
-          const name = match[1]
-          const assettype = match[2]
-          if (assettype) {
-            if (!state.scope[name]) state.scope[name] = {}
-            state.scope[name][assettype] = s.value !== false
-          } else {
-            state.legacy[name] = s.value !== false
-          }
-        })
-        state.loaded = true
-      })
-      .catch(() => { state.loaded = true })
+const KEY_RE = /^identifier_(.+?)(?:_(equipment|computer|printer|network_device))?_enabled$/
+
+function applySetting(key, value) {
+  const match = KEY_RE.exec(key)
+  if (!match) return
+  const name = match[1]
+  const assettype = match[2]
+  if (assettype) {
+    if (!state.scope[name]) state.scope[name] = {}
+    state.scope[name][assettype] = value !== false
+  } else {
+    state.legacy[name] = value !== false
   }
 }
 
+function fetchFlags() {
+  inflight = settingsApi.list()
+    .then(({ data }) => {
+      ;(data.data || []).forEach(s => applySetting(s.key, s.value))
+      state.loaded = true
+    })
+    .catch(() => { state.loaded = true })
+    .finally(() => { inflight = null })
+  return inflight
+}
+
+function loadFlags() {
+  if (!state.loaded && !inflight) fetchFlags()
+}
+
+// Re-read flags from the server. Call after an identifier setting changes so
+// other open views pick it up without a full page reload.
+export function reloadIdentifierFlags() {
+  return fetchFlags()
+}
+
+// Optimistically update one flag in the shared state (e.g. right after a
+// Settings toggle) so dependent views react immediately.
+export function setIdentifierFlag(name, assettype, enabled) {
+  applySetting(`identifier_${name}_${assettype}_enabled`, enabled)
+}
+
 // True when identifier `name` should show on `assettype`. Per-type flag wins,
 // then the legacy global flag, then default-on.
 function isEnabled(name, assettype) {
diff --git a/frontend/src/views/settings/SystemSettings.vue b/frontend/src/views/settings/SystemSettings.vue
index 52044db..57c7194 100644
--- a/frontend/src/views/settings/SystemSettings.vue
+++ b/frontend/src/views/settings/SystemSettings.vue
@@ -423,6 +423,7 @@
 <script setup>
 import { ref, reactive, onMounted, computed } from 'vue'
 import { settingsApi } from '../../api'
+import { setIdentifierFlag } from '../../composables/identifierSettings'
 
 const settings = reactive({
   // Zabbix
@@ -577,6 +578,9 @@ async function toggleIdentifier(name, assettype) {
       }
     }
     identifierMatrix[key] = newValue
+    // Push into the shared composable so open asset views react without a
+    // full page reload (the composable otherwise fetches only once).
+    setIdentifierFlag(name, assettype, newValue)
     success.value = 'Setting saved'
     setTimeout(() => { success.value = '' }, 2000)
   } catch (e) {