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

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