fix: implement reactive macro updates using loadMacros

frontend/src/features/admin/macros/dataTableDropdown.vue

@@ -55,10 +55,12 @@ import { Button } from '@/components/ui/button'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useRouter } from 'vue-router'
+import { useMacroStore } from '@/stores/macro'
 import api from '@/api/index.js'
 
 const router = useRouter()
 const emit = useEmitter()
+const macroStore = useMacroStore()
 const isDeleteOpen = ref(false)
 
 const props = defineProps({
@@ -70,6 +72,9 @@ const props = defineProps({
 
 const handleDelete = async () => {
   await api.deleteMacro(props.macro.id)
+  
+  await macroStore.loadMacros(true)
+  
   isDeleteOpen.value = false
   emit.emit(EMITTER_EVENTS.REFRESH_LIST, { model: 'macros' })
 }
@@ -77,4 +82,4 @@ const handleDelete = async () => {
 const editMacro = () => {
   router.push({ path: `/admin/conversations/macros/${props.macro.id}/edit` })
 }
-</script>
+</script>

frontend/src/stores/macro.js

@@ -61,8 +61,8 @@ export const useMacroStore = defineStore('macroStore', () => {
         }))
     })
 
-    const loadMacros = async () => {
-        if (macroList.value.length) return
+    const loadMacros = async (force = false) => {
+        if (!force && macroList.value.length) return
         try {
             const response = await api.getAllMacros()
             macroList.value = response?.data?.data || []

frontend/src/views/admin/macros/CreateMacro.vue

@@ -14,11 +14,13 @@ import { useRouter } from 'vue-router'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { useI18n } from 'vue-i18n'
+import { useMacroStore } from '@/stores/macro'
 import api from '@/api'
 
 const router = useRouter()
 const emit = useEmitter()
 const { t } = useI18n()
+const macroStore = useMacroStore()
 const formLoading = ref(false)
 const breadcrumbLinks = [
   { path: 'macro-list', label: t('globals.terms.macro', 2) },
@@ -38,6 +40,9 @@ const createMacro = async (values) => {
   try {
     formLoading.value = true
     await api.createMacro(values)
+    
+    await macroStore.loadMacros(true)
+    
     emit.emit(EMITTER_EVENTS.SHOW_TOAST, {
       description: t('globals.messages.createdSuccessfully', {
         name: t('globals.terms.macro')
@@ -53,4 +58,4 @@ const createMacro = async (values) => {
     formLoading.value = false
   }
 }
-</script>
+</script>

frontend/src/views/admin/macros/EditMacro.vue

@@ -16,12 +16,14 @@ import MacroForm from '@/features/admin/macros/MacroForm.vue'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 import { useI18n } from 'vue-i18n'
 import { Spinner } from '@/components/ui/spinner'
+import { useMacroStore } from '@/stores/macro'
 
 const macro = ref({})
 const { t } = useI18n()
 const isLoading = ref(false)
 const formLoading = ref(false)
 const emitter = useEmitter()
+const macroStore = useMacroStore()
 
 const breadcrumbLinks = [
   { path: 'macro-list', label: t('globals.terms.macro', 2) },
@@ -36,6 +38,10 @@ const updateMacro = async (payload) => {
   try {
     formLoading.value = true
     await api.updateMacro(macro.value.id, payload)
+    
+    // Reload macros from server
+    await macroStore.loadMacros(true)
+    
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
       description: t('globals.messages.updatedSuccessfully', {
         name: t('globals.terms.macro')
@@ -72,4 +78,4 @@ const props = defineProps({
     required: true
   }
 })
-</script>
+</script>