another display for modalcard accordeon, displaying note icon on mediumcard and refresh it updated in modale

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -3,6 +3,7 @@
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'
 
+import Vue from 'vue'
 
 import { MGQ } from 'vuejs/api/graphql-axios'
 import { print } from 'graphql/language/printer'
@@ -46,6 +47,14 @@ export default {
       }
       // console.log('setResults, state.items', state.items);
     },
+    updateItem (state, item) {
+      // state.items[data.index] = data.item // this is not triggering vuejs refresh
+      // find the right index
+      const index = state.items.findIndex(i => i.id === item.id)
+      // update the array
+      Vue.set(state.items, index, item)
+      // console.log("mutation updateItem state.items", state.items)
+    },
     resetItems (state) {
       state.items = []
     },
@@ -166,6 +175,26 @@ export default {
           state.infiniteLoadingState.loaded()
         }
       }
+    },
+    refreshItem({ commit, state }, { id }) {
+      console.log("Search refreshItem: id", id);
+      let ast = gql`{
+        searchresult(id: ${id}, lang: "${drupalDecoupled.lang_code}") {
+          ...SearchResultFields
+        }
+      }
+      ${ searchresultGQL }
+      `
+      MGQ.post('', { query: print(ast) })
+        .then(resp => {
+          console.log('refreshItem searchresult resp', resp )
+          // dispatch("loadSearchResultsCallBack", { items: resp.data.data.searchresults})
+          commit("updateItem", resp.data.data.searchresult)
+        })
+        .catch(error => {
+          console.warn('Issue with refreshItem', error)
+          Promise.reject(error)
+        })
     }
   }
 }