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

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-10 11:54:08 +01:00
parent 4894f88c6d
commit fbf509a005
10 changed files with 96 additions and 15 deletions

View File

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

View File

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

View File

@ -365,6 +365,33 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
->map('id', $builder->fromParent()) ->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('ids', $builder->fromArgument('ids'))
->map('language', $builder->fromArgument('lang')) ->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'))
);
} }
// ___ _ // ___ _

View File

@ -2055,7 +2055,7 @@ article.card {
border: none; border: none;
--vsa-heading-padding: 0 0; --vsa-heading-padding: 0 0;
--vsa-content-padding: 0 0 0.5em; --vsa-content-padding: 0 0 0.5em;
--vsa-default-icon-size: 0.2; --vsa-default-icon-size: 0.3;
--vsa-border-width: 0; --vsa-border-width: 0;
--vsa-text-color: #1A1A1A; --vsa-text-color: #1A1A1A;
--vsa-highlight-color: #fff; --vsa-highlight-color: #fff;
@ -2066,10 +2066,10 @@ article.card {
height: 2em; } 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 { 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); } 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; } border-bottom: 0.5px dotted #1A1A1A; }
article.card.modal-card section.col-right section.linked-materials > ul { article.card.modal-card section.col-right section.linked-materials > ul {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

@ -335,6 +335,7 @@ export default {
}, },
methods: { methods: {
...mapActions({ ...mapActions({
refreshItem: 'Search/refreshItem',
createFlagColl: 'User/createFlagColl', createFlagColl: 'User/createFlagColl',
flagUnflag: 'User/flagUnflag' flagUnflag: 'User/flagUnflag'
}), }),
@ -465,6 +466,9 @@ export default {
.then(({ data }) => { .then(({ data }) => {
console.log('createNote REST data', data) console.log('createNote REST data', data)
this.note_nid = data.nid[0].value 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 => { .catch(error => {
console.warn('Issue with createNote', error) console.warn('Issue with createNote', error)

View File

@ -3,6 +3,7 @@
import { MA } from 'vuejs/api/ma-axios' import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring-es3' import qs from 'querystring-es3'
import Vue from 'vue'
import { MGQ } from 'vuejs/api/graphql-axios' import { MGQ } from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer' import { print } from 'graphql/language/printer'
@ -46,6 +47,14 @@ export default {
} }
// console.log('setResults, state.items', state.items); // 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) { resetItems (state) {
state.items = [] state.items = []
}, },
@ -166,6 +175,26 @@ export default {
state.infiniteLoadingState.loaded() 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)
})
} }
} }
} }