bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactored loadMaterials vuex mixins with graphql

This commit is contained in:
Bachir Soussi Chiadmi 2020-12-23 18:05:25 +01:00
parent 665a550748
commit 53dcc8b854
15 changed files with 182 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/modules/custom/materio_flag/src/Controller/MaterioFlagActionsController.php
View File

@ -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);

16
web/modules/custom/materio_flag/src/Controller/MaterioFlagController.php
View File

@ -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
);
}

4
web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls
View File

@ -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
}

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

@ -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'))
);
}
// ___ _
// / __| __ _ _ __ _ __| |___
// \__ \/ _` | ' \| '_ \ / -_)

41
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

32
web/themes/custom/materiotheme/vuejs/api/gql/materiau.fragment.gql
View File

@ -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
}
}
}
}

10
web/themes/custom/materiotheme/vuejs/api/gql/materiauflaglist.fragment.gql Normal file
View File

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

13
web/themes/custom/materiotheme/vuejs/api/gql/materiausearch.fragment.gql Normal file
View File

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

17
web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
View File

@ -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;

6
web/themes/custom/materiotheme/vuejs/components/Content/MiniCard.vue
View File

@ -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 => {

5
web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue
View File

@ -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;

2
web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
View File

@ -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'
// }

33
web/themes/custom/materiotheme/vuejs/store/index.js
View File

@ -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

15
web/themes/custom/materiotheme/vuejs/store/modules/search.js
View File

@ -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')
}

45
web/themes/custom/materiotheme/vuejs/store/modules/user.js
View File

@ -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')