refactored loadMaterials vuex mixins with graphql

web/modules/custom/materio_flag/src/Controller/MaterioFlagActionsController.php

@@ -50,18 +50,18 @@ class MaterioFlagActionsController extends ActionLinkController {
   public function flaglistentity(Request $request) {
     $post_data = json_decode( $request->getContent(),TRUE);
     $flagid = $post_data['flagid'];
-    $uuid = $post_data['uuid'];
+    $id = $post_data['id'];
     $flagcollid = $post_data['flagcollid'];
 
     // $flagcoll = $this->flagListsService->getFlaggingCollectionById($flagcollid);
     // $flag = $flagcoll->getRelatedFlag();
     $flag = $this->flagService->getFlagById($flagid);
 
-    $node = \Drupal::service('entity.repository')->loadEntityByUuid('node', $uuid);
-    $nid = $node->id();
+    // $node = \Drupal::service('entity.repository')->loadEntityByUuid('node', $uuid);
+    // $nid = $node->id();
 
     // call the parent flag function
-    $this->flag($flag, $nid, $flagcollid);
+    $this->flag($flag, $id, $flagcollid);
 
     // // OR rewrite it entirely
     // $entity = $this->flagService->getFlaggableById($flag, $nid);
@@ -82,8 +82,8 @@ class MaterioFlagActionsController extends ActionLinkController {
     $data = [
       'flag' => $flag->toArray(),
       'flagid' => $flagid,
-      'entity_id' => $nid,
-      'entity_uuid' => $uuid,
+      'entity_id' => $id,
+      // 'entity_uuid' => $uuid,
       'flagcollid' => $flagcollid,
       // 'post_data' => $post_data,
       // 'flaggableEntityTypeId' => $flag->getFlaggableEntityTypeId(),
@@ -96,21 +96,21 @@ class MaterioFlagActionsController extends ActionLinkController {
   public function unFlaglistentity(Request $request) {
     $post_data = json_decode( $request->getContent(),TRUE);
     $flagid = $post_data['flagid'];
-    $uuid = $post_data['uuid'];
+    $id = $post_data['id'];
     $flagcollid = $post_data['flagcollid'];
     // get flag
     $flag = $this->flagService->getFlagById($flagid);
     // get the nid from uuid
-    $node = \Drupal::service('entity.repository')->loadEntityByUuid('node', $uuid);
-    $nid = $node->id();
+    // $node = \Drupal::service('entity.repository')->loadEntityByUuid('node', $uuid);
+    // $nid = $node->id();
     // call the parent flag function
-    $this->unflag($flag, $nid, $flagcollid);
+    $this->unflag($flag, $id, $flagcollid);
     // response
     $data = [
       'flag' => $flag->toArray(),
       'flagid' => $flagid,
-      'entity_id' => $nid,
-      'entity_uuid' => $uuid,
+      'entity_id' => $id,
+      // 'entity_uuid' => $uuid,
       'flagcollid' => $flagcollid,
     ];
     return new JsonResponse($data);

web/modules/custom/materio_flag/src/Controller/MaterioFlagController.php

@@ -76,20 +76,20 @@ class MaterioFlagController extends ControllerBase {
         //   'name' => $item->getName(),
         //   'connected_entity_id' => $item->getConnectedEntityId(),
         // );
-        $items[] = $item->getConnectedEntityId();
-      }
-      $items_uuids = [];
-      foreach ($items as $nid) {
-        $node = $this->entityTypeManager->getStorage('node')->load($nid);
-        $items_uuids[] = $node->uuid();
+        $items[] = (int)$item->getConnectedEntityId();
       }
+      // $items_uuids = [];
+      // foreach ($items as $nid) {
+      //   $node = $this->entityTypeManager->getStorage('node')->load($nid);
+      //   $items_uuids[] = $node->uuid();
+      // }
 
       $data[$collection->id()] = array(
         "id" => $collection->id(),
         "name" => $collection->getName(),
         "flag_id" => $flag_id,
-        "items" => $items,
-        "items_uuids" => $items_uuids,
+        "items" => $items
+        // "items_uuids" => $items_uuids
       );
     }
 

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

@@ -2,6 +2,10 @@ extend type Query {
   materiau(id: Int!): Materiau
 }
 
+extend type Query {
+  materiaux(ids: [Int]): [Materiau]
+}
+
 extend type Query {
   article(id: Int!): Article
 }

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

@@ -71,6 +71,13 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
         ->map('id', $builder->fromArgument('id'))
       );
 
+    $registry->addFieldResolver('Query', 'materiaux',
+      $builder->produce('entity_load_multiple')
+        ->map('type', $builder->fromValue('node'))
+        // ->map('bundles', $builder->fromValue(['materiau']))
+        ->map('ids', $builder->fromArgument('ids'))
+    );
+
     $registry->addFieldResolver('Materiau', 'id',
       $builder->produce('entity_id')
         ->map('entity', $builder->fromParent())
@@ -204,10 +211,8 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
         ->map('value', $builder->fromParent())
         ->map('path', $builder->fromValue('field_samples'))
       );
-
   }
 
-
  //  ___                  _
  // / __| __ _ _ __  _ __| |___
  // \__ \/ _` | '  \| '_ \ / -_)

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

@@ -1,32 +0,0 @@
-fragment MateriauFields on Materiau {
-  images {
-    id
-    url
-    alt
-    style_minicard{
-      width
-      height
-      url
-    }
-  }
-  id
-  title
-  author
-  uuid
-  memo
-  linked_materials {
-    id
-    title
-    memo
-    images {
-      id
-      url
-      alt
-      style_minicard{
-        width
-        height
-        url
-      }
-    }
-  }
-}

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

@@ -0,0 +1,10 @@
+fragment MateriauFields on Materiau {
+  id
+  title
+  images {
+    url
+    style_minicard{
+      url
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+fragment MateriauFields on Materiau {
+  id
+  title
+  short_description
+  reference
+  images{
+    url
+    alt
+    style_cardmedium{
+      url
+    }
+  }
+}

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

@@ -4,8 +4,8 @@
       @click="openModalCard"
     >
       <h1>{{ item.title }}</h1>
-      <h4>{{ item.field_short_description }}</h4>
-      <span class="ref">{{ item.field_reference }}</span>
+      <h4>{{ item.short_description }}</h4>
+      <span class="ref">{{ item.reference }}</span>
     </header>
     <nav class="tools">
       <section class="tool flags">
@@ -85,9 +85,14 @@ export default {
       flagUnflag: 'User/flagUnflag'
     }),
     flagIsActive(collid) {
-      // console.log(this.item.uuid);
+      // console.log("Card flagIsActive",
+      //   this.item.id,
+      //   this.flagcolls[collid].items,
+      //   this.flagcolls[collid].items.indexOf(this.item.id)
+      // );
       // console.log(this.flagcolls[collid].items_uuids);
-      return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+      // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+      return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
     },
     flagIsLoading(collid) {
       // console.log(this.item.uuid);
@@ -95,7 +100,7 @@ export default {
       return collid === this.loadingFlag;
     },
     onFlagActionCard (e) {
-      console.log("Card onFlagActionCard", e);
+      console.log("Card onFlagActionCard", e, this.item);
       if (!this.loadingFlag) {
         let collid = e.target.getAttribute('collid');
         let isActive = this.flagIsActive(collid);
@@ -103,7 +108,7 @@ export default {
         // console.log('collid', collid);
         // console.log("this.item", this.item);
         this.loadingFlag = collid;
-        this.flagUnflag({ action: action, uuid: this.item.uuid, collid: collid})
+        this.flagUnflag({ action: action, id: this.item.id, collid: collid})
         .then(data => {
           console.log("onFlagActionCard then", data);
           this.loadingFlag = false;

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

@@ -23,7 +23,7 @@
         <img
           class="lazy"
           v-lazy="index"
-          :data-src="img.img_styles.card_medium_half"
+          :data-src="img.style_minicard.url"
           :title="img.title"
         />
         <img class="blank" :src="blanksrc">
@@ -56,12 +56,12 @@ export default {
       return this.loadingItem
     },
     onUnFlagCard (e) {
-      console.log("Card onFlagActionCard", e);
+      console.log("Card onFlagActionCard", e, this.item);
       if (!this.loadingItem) {
         this.loadingItem = true;
         this.flagUnflag({
           action: 'unflag',
-          uuid: this.item.uuid,
+          id: this.item.id,
           collid: this.collid
         })
         .then(data => {

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

@@ -105,7 +105,8 @@ export default {
     flagIsActive(collid) {
       // console.log(this.item.uuid);
       // console.log(this.flagcolls[collid].items_uuids);
-      return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+      // return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+      return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
     },
     flagIsLoading(collid) {
       // console.log(this.item.uuid);
@@ -121,7 +122,7 @@ export default {
         // console.log('collid', collid);
         // console.log("this.item", this.item);
         this.loadingFlag = collid;
-        this.flagUnflag({ action: action, uuid: this.item.uuid, collid: collid})
+        this.flagUnflag({ action: action, id: this.item.id, collid: collid})
         .then(data => {
           console.log("onFlagActionCard then", data);
           this.loadingFlag = false;

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -206,7 +206,7 @@ export default {
     },
     loadArticle(){
       console.log('loadArticle', this.nid)
-      this.loading = true;
+      this.loading = true
       // let params = {
       //   include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
       // }

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -6,6 +6,11 @@ import { createStore } from 'vuex-extensions'
 import { JSONAPI } from 'vuejs/api/json-axios'
 import qs from 'querystring-es3'
 
+import { MGQ } from 'vuejs/api/graphql-axios'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+// import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
+
 import Common from './modules/common'
 import User from './modules/user'
 import Search from './modules/search'
@@ -13,6 +18,7 @@ import Blabla from './modules/blabla'
 import Showrooms from './modules/showrooms'
 import Pages from './modules/pages'
 
+
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
 Vue.use(Vuex)
@@ -29,6 +35,33 @@ export default createStore(Vuex.Store, {
   // https://github.com/huybuidac/vuex-extensions
   mixins: {
     actions: {
+      loadMaterialsGQL ({ dispatch }, { ids, gqlfragment, callBack, callBackArgs }) {
+        console.log('loadMaterialsGQL ids', ids)
+
+        let ast = gql`{
+          materiaux(ids: [${ids}]) {
+            ...MateriauFields
+          }
+        }
+        ${ gqlfragment }
+        `
+        MGQ.post('', { query: print(ast) })
+          .then(( resp ) => {
+            console.log('loadMaterialsGQL resp', resp )
+            dispatch('parseMaterialsGQL', {
+              items: resp.data.data.materiaux,
+              callBack: callBack,
+              callBackArgs: callBackArgs
+            })
+          })
+          .catch(error => {
+            console.warn('Issue with loadMaterials', error)
+            Promise.reject(error)
+          })
+      },
+      parseMaterialsGQL ({ dispatch }, { items, callBack, callBackArgs }) {
+        dispatch(callBack, { items: items, callBackArgs: callBackArgs })
+      },
       loadMaterials ({ dispatch }, { uuids, imgStyle, callBack, callBackArgs }) {
         const params = {
           // include: 'images', // no needs to include thanks to consumers_image_styles module

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

@@ -3,6 +3,8 @@
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'
 
+import materiauGQL from 'vuejs/api/gql/materiausearch.fragment.gql'
+
 export default {
   namespaced: true,
 
@@ -108,11 +110,18 @@ export default {
             commit('setUuids', data.uuids)
             // loadMaterials is on mixins
             // https://github.com/huybuidac/vuex-extensions
-            dispatch('loadMaterials', {
-              uuids: data.uuids,
-              imgStyle: ['card_medium', 'card_full'],
+
+            dispatch('loadMaterialsGQL', {
+              ids: data.nids,
+              gqlfragment: materiauGQL,
               callBack: 'loadMaterialsCallBack'
             })
+
+            // dispatch('loadMaterials', {
+            //   uuids: data.uuids,
+            //   imgStyle: ['card_medium', 'card_full'],
+            //   callBack: 'loadMaterialsCallBack'
+            // })
           } else {
             commit('setNoresults')
           }

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

@@ -3,6 +3,8 @@ import { REST } from 'vuejs/api/rest-axios'
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'
 
+import materiauGQL from 'vuejs/api/gql/materiauflaglist.fragment.gql'
+
 export default {
   namespaced: true,
 
@@ -238,12 +240,12 @@ export default {
           })
       })
     },
-    flagUnflag ({ dispatch, commit, state }, { action, uuid, collid }) {
-      console.log('user flagUnflag', action, uuid, collid)
+    flagUnflag ({ dispatch, commit, state }, { action, id, collid }) {
+      console.log('user flagUnflag', action, id, collid)
       return new Promise((resolve, reject) => {
         const params = {
           flagid: state.flagcolls[collid].flag_id,
-          uuid: uuid,
+          id: id,
           flagcollid: collid
         }
         return MA.post(`materio_flag/${action}`, params)
@@ -251,15 +253,25 @@ export default {
             console.log('user MA flag', data)
             // reload the fulllist of flagcolleciton
             dispatch('getUserFlagColls').then(() => {
-              if (state.flagcolls[collid].items_uuids.length) {
-                dispatch('loadMaterials', {
-                  uuids: state.flagcolls[collid].items_uuids,
-                  imgStyle: ['card_medium_half'],
+              if (state.flagcolls[collid].items.length) {
+
+                dispatch('loadMaterialsGQL', {
+                  ids: state.flagcolls[collid].items,
+                  gqlfragment: materiauGQL,
                   callBack: 'loadMaterialsCallBack',
                   callBackArgs: { collid: collid }
                 }).then(() => {
                   resolve()
                 })
+
+                // dispatch('loadMaterials', {
+                //   uuids: state.flagcolls[collid].items_uuids,
+                //   imgStyle: ['card_medium_half'],
+                //   callBack: 'loadMaterialsCallBack',
+                //   callBackArgs: { collid: collid }
+                // }).then(() => {
+                //   resolve()
+                // })
               } else {
                 commit('setLoadedCollItems', { collid: collid, items: [] })
                 resolve()
@@ -274,18 +286,27 @@ export default {
     openFlagColl ({ commit, dispatch, state }, collid) {
       console.log('user openFlagColl', collid)
       commit('openFlagColl', collid)
-      if (state.flagcolls[collid].items_uuids.length) {
+      if (state.flagcolls[collid].items.length) {
         if (typeof state.flagcollsLoadedItems[collid] === 'undefined') {
-          console.log('loading flagcoll items')
+          console.log('loading flagcoll items', state.flagcolls[collid])
           // if no loadedItems, load them
           // loadMaterials is on mixins
           // https://github.com/huybuidac/vuex-extensions
-          dispatch('loadMaterials', {
-            uuids: state.flagcolls[collid].items_uuids,
-            imgStyle: ['card_medium_half'],
+
+          dispatch('loadMaterialsGQL', {
+            ids: state.flagcolls[collid].items,
+            gqlfragment: materiauGQL,
             callBack: 'loadMaterialsCallBack',
             callBackArgs: { collid: collid }
           })
+
+          // dispatch('loadMaterials', {
+          //   uuids: state.flagcolls[collid].items_uuids,
+          //   imgStyle: ['card_medium_half'],
+          //   callBack: 'loadMaterialsCallBack',
+          //   callBackArgs: { collid: collid }
+          // })
+
         } else {
           // call the mutation without data to only trigger the FlagCollection component update
           console.log('committing setLoadedCollItems without args')