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

web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls

@@ -46,6 +46,7 @@ type Materiau implements NodeInterface & SearchResultInterface{
   reference: String
   samples: [Sample]
   note: Note
+  note_id: Int
   # famille: String
   # index: Int
 }

web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls

@@ -14,6 +14,10 @@ extend type Query {
   searchresults(ids: [Int], lang: String): [SearchResultInterface]
 }
 
+extend type Query {
+  searchresult(id: Int!, lang: String): SearchResultInterface
+}
+
 extend type Query {
   article(id: Int!, lang: String): Article
 }

web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php

@@ -365,6 +365,33 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
           ->map('id', $builder->fromParent())
       )
     );
+    $registry->addFieldResolver('Materiau', 'note_id',
+      $builder->compose(
+        $builder->callback(function($parent, $args){
+          // get the current user id
+          $user = \Drupal::currentUser()->id();
+          // get the current material id
+          $target = $parent->id();
+          // query the note for these user AND material (if any)
+          // if null, UI will create it with rest api
+          $entity_storage = \Drupal::entityTypeManager()->getStorage('node');
+          $query = $entity_storage->getQuery()
+            ->condition('type', 'note')
+            ->condition('uid', $user)
+            ->condition('field_target', $target)
+            ->accessCheck(TRUE);
+          $results = $query->execute();
+          // $test="test";
+          return array_shift($results);
+        }),
+        $builder->produce('entity_load')
+          ->map('type', $builder->fromValue('node'))
+          ->map('bundle', $builder->fromValue('note'))
+          ->map('id', $builder->fromParent()),
+        $builder->produce('entity_id')
+          ->map('entity', $builder->fromParent())
+      )
+    );
   }
 
   //  _  _     _
@@ -419,6 +446,13 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
           ->map('ids', $builder->fromArgument('ids'))
           ->map('language', $builder->fromArgument('lang'))
     );
+
+    $registry->addFieldResolver('Query', 'searchresult',
+        $builder->produce('entity_load')
+          ->map('type', $builder->fromValue('node'))
+          ->map('id', $builder->fromArgument('id'))
+          ->map('language', $builder->fromArgument('lang'))
+    );
   }
 
   //  ___                  _

web/themes/custom/materiotheme/assets/dist/main.css

@@ -2055,7 +2055,7 @@ article.card {
       border: none;
       --vsa-heading-padding: 0 0;
       --vsa-content-padding: 0 0 0.5em;
-      --vsa-default-icon-size: 0.2;
+      --vsa-default-icon-size: 0.3;
       --vsa-border-width: 0;
       --vsa-text-color: #1A1A1A;
       --vsa-highlight-color: #fff;
@@ -2066,9 +2066,9 @@ article.card {
         height: 2em; }
         article.card.modal-card section.col-right .vsa-list .vsa-item .vsa-item__heading button.vsa-item__trigger:hover, article.card.modal-card section.col-right .vsa-list .vsa-item .vsa-item__heading button.vsa-item__trigger:focus {
           color: var(--vsa-text-color); }
-      article.card.modal-card section.col-right .vsa-list .vsa-item .vsa-item__heading {
+      article.card.modal-card section.col-right .vsa-list .vsa-item[data-vsa-active="false"] .vsa-item__heading {
-        padding-bottom: 0.2em; }
+        padding-bottom: 0.2em;
-        article.card.modal-card section.col-right .vsa-list .vsa-item .vsa-item__heading > button {
+        margin-bottom: 0.2em;
         border-bottom: 0.5px dotted #1A1A1A; }
     article.card.modal-card section.col-right section.linked-materials > ul {
       display: flex;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1238,7 +1238,7 @@ article.card{
         border: none;
         --vsa-heading-padding: 0 0;
         --vsa-content-padding: 0 0 0.5em;
-        --vsa-default-icon-size: 0.2;
+        --vsa-default-icon-size: 0.3;
         --vsa-border-width: 0;
         --vsa-text-color: #{$color-main-text};
         --vsa-highlight-color: #fff;
@@ -1257,15 +1257,17 @@ article.card{
               }
             }
           }
+          .vsa-item__content{}
+
+          &[data-vsa-active="false"]{
             .vsa-item__heading{
               padding-bottom: 0.2em;
-            >button{
+              margin-bottom: 0.2em;
               border-bottom: 0.5px dotted $color-main-text;
             }
-          }
-          .vsa-item__content{
 
           }
+
         }
       }
       section.linked-materials{

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