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

web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql

@@ -20,6 +20,10 @@ fragment SearchResultFields on SearchResultInterface {
       }
       location
     }
+    note{
+      id
+    }
+    note_id
   }
   ... on Thematique {
     images{

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -53,6 +53,9 @@
           </ul>
         </div>
       </section>
+      <section v-if="item.note" class="tool note">
+        <span class="btn mdi mdi-note"/>
+      </section>
       <section class="tool print">
         <a :href="item.path+'/printable/print'" target="_blank">
           <span class="btn mdi mdi-printer"/>

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -335,6 +335,7 @@ export default {
   },
   methods: {
     ...mapActions({
+      refreshItem: 'Search/refreshItem',
       createFlagColl: 'User/createFlagColl',
       flagUnflag: 'User/flagUnflag'
     }),
@@ -465,6 +466,9 @@ export default {
         .then(({ data }) => {
           console.log('createNote REST data', data)
           this.note_nid = data.nid[0].value
+          // call search results refresh of the item to display that note is now existing for this item
+          // TODO: do the same for article linked materials
+          this.refreshItem({id: this.item.id})
         })
         .catch(error => {
           console.warn('Issue with createNote', error)

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)
+        })
     }
   }
 }