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

personnal notes on materails on modalCard is ok

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-01-26 16:36:27 +01:00
parent 1dd65af561
commit 1f9b5a0053
25 changed files with 746 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls
View File

@@ -27,6 +27,13 @@ type Materiau implements NodeInterface {
# index: Int
reference: String
samples: [Sample]
note: Note
}
type Note implements NodeInterface {
id: Int!
contenu: String
target: Int
}
type Article implements NodeInterface {

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

@@ -31,6 +31,8 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
$this->addMateriau($registry, $builder);
$this->addNote($registry, $builder);
$this->addSearchResult($registry, $builder);
$this->addSample($registry, $builder);
@@ -271,6 +273,58 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
->map('value', $builder->fromParent())
->map('path', $builder->fromValue('field_samples'))
);
$registry->addFieldResolver('Materiau', 'note',
$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())
)
);
}
// _ _ _
// | \| |___| |_ ___
// | .` / _ \ _/ -_)
// |_|\_\___/\__\___|
protected function addNote(ResolverRegistryInterface $registry, ResolverBuilder $builder) {
$registry->addFieldResolver('Note', 'id',
$builder->produce('entity_id')
->map('entity', $builder->fromParent())
);
$registry->addFieldResolver('Note', 'contenu',
$builder->produce('property_path')
->map('type', $builder->fromValue('entity:node'))
->map('value', $builder->fromParent())
->map('path', $builder->fromValue('field_contenu.value'))
);
$registry->addFieldResolver('Note', 'target',
$builder->produce('property_path')
->map('type', $builder->fromValue('entity:node'))
->map('value', $builder->fromParent())
->map('path', $builder->fromValue('field_target.target_id'))
);
}
// ___ _ ___ _ _

18
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -1943,7 +1943,8 @@ article.card {
max-height: 0;
max-width: 0;
overflow: hidden;
transition: all 0.2s ease-in-out; }
transition: all 0.2s ease-in-out;
transition-delay: 0.1s; }
article.card nav.tools > *:hover .tool-content {
transition: all 0.3s ease-in-out;
opacity: 1;
@@ -2048,6 +2049,21 @@ article.card {
padding-right: 0.5em; }
article.card.modal-card section.col-right section.tool.samples div.tool-content ul li span.showroom {
font-weight: 500; }
article.card.modal-card section.col-right section.tool.note:hover div.tool-content {
max-height: 370px; }
article.card.modal-card section.col-right section.tool.note div.tool-content textarea,
article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus,
article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus-visible,
article.card.modal-card section.col-right section.tool.note div.tool-content textarea:active {
resize: none;
width: 99%;
height: 350px;
margin: 0;
padding: 0.3em;
border: 1px solid #ccc;
border-radius: 3px;
outline: none;
box-sizing: border-box; }
article.card.modal-card section.col-right section.industriels {
display: flex;
flex-flow: row; }

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

File diff suppressed because one or more lines are too long

23
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -1076,6 +1076,7 @@ article.card{
max-height: 0; max-width:0;
overflow: hidden;
transition: all 0.2s ease-in-out;
transition-delay: 0.1s;
}
&:hover{
.tool-content{
@@ -1249,6 +1250,28 @@ article.card{
}
}
}
section.tool.note{
&:hover div.tool-content{
max-height: 370px;
}
div.tool-content{
textarea,
textarea:focus,
textarea:focus-visible,
textarea:active{
resize:none;
width:99%;
height:350px;
margin:0;
padding:0.3em;
border:1px solid #ccc;
border-radius: 3px;
outline: none;
box-sizing: border-box;
}
}
}
// section.tool.industriels{
// div.tool-content{
// display: flex;

5
web/themes/custom/materiotheme/vuejs/api/gql/materiaumodal.fragment.gql
View File

@@ -2,6 +2,11 @@ fragment MateriauFields on Materiau {
title
short_description
reference
note{
id
contenu
target
}
attachments{
file{
filename

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

@@ -50,6 +50,12 @@
</ul>
</div>
</section>
<section class="tool note">
<span class="btn mdi mdi-square-edit-outline"/>
<div class="tool-content">
<textarea spellcheck="false" v-model="note" name="note"/>
</div>
</section>
<section class="tool print">
<a :href="material.path+'/printable/print'" target="_blank">
<span class="btn mdi mdi-printer"/>
@@ -198,6 +204,7 @@ import LinkedMaterialCard from 'vuejs/components/Content/LinkedMaterialCard'
import cardMixins from 'vuejs/components/cardMixins'
import { REST } from 'vuejs/api/rest-axios'
import { MGQ } from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
@@ -205,6 +212,8 @@ import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
const prettyBytes = require('pretty-bytes')
const _debounce = require('lodash/debounce')
export default {
name: "ModalCard",
props: ['item'],
@@ -218,11 +227,14 @@ export default {
loading: false,
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
loadingFlag: false,
lightbox_index: null
lightbox_index: null,
note: "",
note_nid: null
}
},
computed: {
...mapState({
csrf_token: state => state.User.csrf_token,
flagcolls: state => state.User.flagcolls,
showrooms: state => state.Showrooms.showrooms_by_tid
})
@@ -230,6 +242,14 @@ export default {
created () {
console.log('modale item', this.item)
this.loadMaterial()
this.debouncedSaveNote = _debounce(this.saveNote, 500)
},
watch: {
// whenever question changes, this function will run
note: function (n, o) {
console.log("note watcher: note", n)
this.debouncedSaveNote()
}
},
methods: {
...mapActions({
@@ -251,6 +271,10 @@ export default {
console.log('loadMaterial material loaded', materiau )
this.material = materiau
this.loading = false
if(materiau.note && materiau.note.id){
this.note_id = materiau.note.id
this.note = materiau.note.contenu
}
// delay the lazyload to let the card the time to update dom
// maybe not the best method
setTimeout(function () {
@@ -298,6 +322,53 @@ export default {
},
shortUrl(url){
return url.replace(/^http:\/\//, '').replace(/^www\./, '')
},
saveNote(){
console.log("saveNote", this.note);
if(this.note_nid){
this.updateNote()
}else{
this.createNote()
}
},
updateNote(){
let params = {
type: [{target_id:'note'}],
field_contenu: this.note
}
let config = {
headers:{
"X-CSRF-Token": this.csrf_token
}
}
REST.patch(`/node/${this.note_nid}?_format=json`, params, config)
.then(({ data }) => {
console.log('updateNote REST data', data)
})
.catch(error => {
console.warn('Issue with updateNote', error)
})
},
createNote(){
let params = {
type: [{target_id:'note'}],
title: [{value:`note`}],
field_contenu: this.note,
field_target: this.item.id
}
let config = {
headers:{
"X-CSRF-Token": this.csrf_token
}
}
REST.post('/node?_format=json', params, config)
.then(({ data }) => {
console.log('createNote REST data', data)
this.note_nid = data.nid[0].value
})
.catch(error => {
console.warn('Issue with createNote', error)
})
}
}
}