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

folders beta 1

This commit is contained in:
Bachir Soussi Chiadmi 2020-12-01 20:40:37 +01:00
parent 93c4707c45
commit 564a1638fc
12 changed files with 234 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
config/sync/block.block.views_block__my_flag_list_items_block_1.yml Normal file
View File

@ -0,0 +1,35 @@
uuid: b3a7a1d3-79a0-4874-abdd-4a49c48d0f5d
langcode: en
status: false
dependencies:
config:
- views.view.my_flag_list_items
module:
- context
- views
theme:
- materiotheme
id: views_block__my_flag_list_items_block_1
theme: materiotheme
region: content_left
weight: 0
provider: null
plugin: 'views_block:my_flag_list_items-block_1'
settings:
id: 'views_block:my_flag_list_items-block_1'
label: ''
provider: views
label_display: visible
views_label: ''
items_per_page: none
visibility:
view_inclusion:
id: view_inclusion
negate: null
view_inclusion: { }
context_mapping: { }
request_path_exclusion:
id: request_path_exclusion
pages: ''
negate: null
context_mapping: { }

4
config/sync/image.style.card_medium_half.yml
View File

@ -3,13 +3,13 @@ langcode: en
status: true status: true
dependencies: { } dependencies: { }
name: card_medium_half name: card_medium_half
label: 'card-medium-half (205x100)' label: 'minicard (170x100)'
effects: effects:
34e936a0-1fee-4327-9553-b4f48bde14e6: 34e936a0-1fee-4327-9553-b4f48bde14e6:
uuid: 34e936a0-1fee-4327-9553-b4f48bde14e6 uuid: 34e936a0-1fee-4327-9553-b4f48bde14e6
id: image_scale_and_crop id: image_scale_and_crop
weight: 1 weight: 1
data: data:
width: 205 width: 170
height: 100 height: 100
anchor: center-center anchor: center-center

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

@ -1182,10 +1182,12 @@ main[role="main"] {
display: flex; display: flex;
flex-direction: row-reverse; } flex-direction: row-reverse; }
main[role="main"] > .scroller > .wrapper #content-left { main[role="main"] > .scroller > .wrapper #content-left {
flex-basis: 218px; flex-basis: 205px;
flex-shrink: 0; } flex-shrink: 0; }
main[role="main"] > .scroller > .wrapper #content-left > * { main[role="main"] > .scroller > .wrapper #content-left > * {
width: 100%; } width: 100%;
box-sizing: border-box;
padding: 0.5em 13px; }
main[role="main"] > .scroller > .wrapper #content-center { main[role="main"] > .scroller > .wrapper #content-center {
flex-basis: 110%; } flex-basis: 110%; }
@ -1303,10 +1305,11 @@ header[role="banner"] {
position: absolute; position: absolute;
right: 0; right: 0;
top: 1.7em; top: 1.7em;
box-sizing: content-box; } box-sizing: content-box;
z-index: 30; }
header[role="banner"] #user-flags:hover ul { header[role="banner"] #user-flags:hover ul {
transition-delay: 0s; transition-delay: 0s;
max-height: 12em; max-height: 50em;
padding: 1em 1em; padding: 1em 1em;
box-shadow: 0 0 10px #ccc; } box-shadow: 0 0 10px #ccc; }
header[role="banner"] #user-flags li { header[role="banner"] #user-flags li {
@ -1460,7 +1463,8 @@ aside.messages {
#content-left .flag-collection > header { #content-left .flag-collection > header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; } justify-content: space-between;
padding-bottom: 13px; }
#content-left .flag-collection > header .mdi-close { #content-left .flag-collection > header .mdi-close {
cursor: pointer; cursor: pointer;
align-self: flex-end; } align-self: flex-end; }
@ -1468,13 +1472,20 @@ aside.messages {
margin: 0 0 13px 0; margin: 0 0 13px 0;
padding: 0; } padding: 0; }
#content-left .flag-collection > ul > li article.card.minicard { #content-left .flag-collection > ul > li article.card.minicard {
width: 100%; } width: 170px;
height: 100px;
margin: auto; }
#content-left .flag-collection > ul > li article.card.minicard > header { #content-left .flag-collection > ul > li article.card.minicard > header {
padding: 0.3em 0.3em 0.1em; } padding: 0.3em 0.3em 0.1em; }
#content-left .flag-collection > ul > li article.card.minicard > header h1 { #content-left .flag-collection > ul > li article.card.minicard > header h1 {
margin: 0; } margin: 0; }
#content-left .flag-collection > ul > li article.card.minicard > nav.tools { #content-left .flag-collection > ul > li article.card.minicard > nav.tools {
padding: 0 0.2em; } top: auto;
bottom: 0;
padding: 0 0.2em;
background: transparent; }
#content-left .flag-collection > ul > li article.card.minicard > nav.tools .mdi.unflag {
cursor: pointer; }
article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label { article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label {
font-size: 3.5em; font-size: 3.5em;
@ -1681,10 +1692,12 @@ article.card {
top: 0; top: 0;
right: 0; right: 0;
z-index: 21; z-index: 21;
width: 1em; width: 15px;
background-color: #fff; background-color: #fff;
box-sizing: content-box; box-sizing: content-box;
padding: 0.3em 0.1em; } padding: 0.3em 0.1em;
opacity: 0;
transition: opacity 0.2s ease-in-out; }
article.card nav.tools > * { article.card nav.tools > * {
overflow: visible; overflow: visible;
position: relative; } position: relative; }
@ -1695,11 +1708,26 @@ article.card {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 100%; right: 100%;
width: 5em; width: 180px;
box-sizing: content-box; box-sizing: border-box;
padding: 0.3em; padding: 0.3em;
background-color: #fff; background-color: #fff;
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2); } box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
opacity: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
transition: all 0.2s ease-in-out; }
article.card nav.tools > *:hover .tool-content {
transition: all 0.3s ease-in-out;
opacity: 1;
max-height: 195px;
max-width: 200px; }
article.card nav.tools .tool.flags .tool-content ul {
display: flex;
flex-flow: row wrap; }
article.card nav.tools .tool.flags .tool-content ul li {
padding: 0 0.5em 0 0; }
article.card nav.tools .tool.flags span.flag { article.card nav.tools .tool.flags span.flag {
cursor: pointer; cursor: pointer;
font-size: 0.756em; font-size: 0.756em;
@ -1707,6 +1735,8 @@ article.card {
transition: color 0.3s ease-in-out; } transition: color 0.3s ease-in-out; }
article.card nav.tools .tool.flags span.flag:hover, article.card nav.tools .tool.flags span.flag.isActive { article.card nav.tools .tool.flags span.flag:hover, article.card nav.tools .tool.flags span.flag.isActive {
color: #1a1a1a; } color: #1a1a1a; }
article.card:hover nav.tools {
opacity: 1; }
article.card section.images { article.card section.images {
position: relative; } position: relative; }
article.card section.images, article.card section.images * { article.card section.images, article.card section.images * {

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

File diff suppressed because one or more lines are too long

4
web/themes/custom/materiotheme/assets/styles/base/_layout.scss
View File

@ -102,11 +102,13 @@ main[role="main"]{
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
#content-left{ #content-left{
flex-basis: $column_width+$column_goutiere; flex-basis: $column_width;
flex-shrink: 0; flex-shrink: 0;
// width:$column_width*2+$column_goutiere; // width:$column_width*2+$column_goutiere;
>*{ >*{
width:100%; width:100%;
box-sizing: border-box;
padding:0.5em $column_goutiere;
} }
} }
#content-center{ #content-center{

3
web/themes/custom/materiotheme/assets/styles/base/_variables.scss
View File

@ -9,3 +9,6 @@ $column_width: 205px;
$column_goutiere: 13px; $column_goutiere: 13px;
$card_height: 295px; $card_height: 295px;
$minicard_width: 170px;
$minicard_height: 100px;

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

@ -164,11 +164,12 @@ header[role="banner"]{
right:0; right:0;
top:1.7em; top:1.7em;
box-sizing: content-box; box-sizing: content-box;
z-index: 30;
} }
&:hover{ &:hover{
ul{ ul{
transition-delay: 0s; transition-delay: 0s;
max-height:12em; max-height:50em;
padding:1em 1em; padding:1em 1em;
box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc;
} }
@ -415,6 +416,7 @@ aside.messages{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding-bottom: $column_goutiere;
h3{ h3{
// flex-basis: calc(100% - 1em); // flex-basis: calc(100% - 1em);
} }
@ -430,8 +432,9 @@ aside.messages{
margin:0 0 $column_goutiere 0; margin:0 0 $column_goutiere 0;
padding:0; padding:0;
article.card.minicard{ article.card.minicard{
width:100%; width:$minicard_width;
height:$minicard_height;
margin:auto;
>header{ >header{
padding: 0.3em 0.3em 0.1em; padding: 0.3em 0.3em 0.1em;
h1{ h1{
@ -439,7 +442,13 @@ aside.messages{
} }
} }
>nav.tools{ >nav.tools{
top: auto;
bottom: 0;
padding:0 0.2em; padding:0 0.2em;
background:transparent;
.mdi.unflag{
cursor: pointer;
}
} }
} }
} }
@ -752,7 +761,8 @@ article.card{
top: 0; top: 0;
right: 0; right: 0;
z-index: 21; z-index: 21;
width: 1em; $toolbar_width: 15px;
width: $toolbar_width;
background-color: #fff; background-color: #fff;
box-sizing: content-box; box-sizing: content-box;
padding: 0.3em 0.1em; padding: 0.3em 0.1em;
@ -767,14 +777,36 @@ article.card{
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 100%; right: 100%;
width: 5em; // width: 5em;
box-sizing: content-box; width: $column_width - $toolbar_width - 10px;
box-sizing: border-box;
padding: 0.3em; padding: 0.3em;
background-color: #fff; background-color: #fff;
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2); box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
opacity: 0;
max-height: 0; max-width:0;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
&:hover{
.tool-content{
transition: all 0.3s ease-in-out;
opacity: 1;
max-height: 195px;
max-width:200px;
}
} }
} }
.tool.flags{ .tool.flags{
.tool-content{
ul{
display: flex;
flex-flow: row wrap;
li{
padding:0 0.5em 0 0;
}
}
}
span.flag{ span.flag{
cursor: pointer; cursor: pointer;
font-size: 0.756em; font-size: 0.756em;
@ -785,6 +817,13 @@ article.card{
} }
} }
} }
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
&:hover{
nav.tools{
opacity:1;
}
} }
section.images{ section.images{
position: relative; position: relative;

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

@ -14,7 +14,7 @@
<span <span
class="flag mdi" class="flag mdi"
:class="[ :class="[
flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close isActive' : 'mdi-plus' flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close-circle isActive' : 'mdi-plus'
]" ]"
:collid="coll.id" :collid="coll.id"
@click.prevent="onFlagActionCard" @click.prevent="onFlagActionCard"
@ -64,8 +64,7 @@ export default {
}, },
methods: { methods: {
...mapActions({ ...mapActions({
flag: 'User/flag', flagUnflag: 'User/flagUnflag'
unFlag: 'User/unFlag'
}), }),
flagIsActive(collid) { flagIsActive(collid) {
// console.log(this.item.uuid); // console.log(this.item.uuid);
@ -82,22 +81,15 @@ export default {
if (!this.loadingFlag) { if (!this.loadingFlag) {
let collid = e.target.getAttribute('collid'); let collid = e.target.getAttribute('collid');
let isActive = this.flagIsActive(collid); let isActive = this.flagIsActive(collid);
let action = isActive ? 'unflag' : 'flag';
// console.log('collid', collid); // console.log('collid', collid);
// console.log("this.item", this.item); // console.log("this.item", this.item);
this.loadingFlag = collid; this.loadingFlag = collid;
if (isActive) { this.flagUnflag({ action: action, uuid: this.item.uuid, collid: collid})
this.unFlag({uuid: this.item.uuid, collid: collid}) .then(data => {
.then(data => { console.log("onFlagActionCard then", data);
console.log("onFlagActionCard then", data); this.loadingFlag = false;
this.loadingFlag = false; })
})
}else{
this.flag({uuid: this.item.uuid, collid: collid})
.then(data => {
console.log("onFlagActionCard then", data);
this.loadingFlag = false;
})
}
} }
} }
} }

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

@ -6,7 +6,13 @@
</header> </header>
<nav class="tools"> <nav class="tools">
<section class="tool flags"> <section class="tool flags">
<span class="mdi mdi-folder-remove-outline"/> <span
class="mdi unflag"
:class="[
itemIsLoading() ? 'mdi-loading mdi-spin' : 'mdi-folder-remove'
]"
@click.prevent="onUnFlagCard"
/>
</section> </section>
</nav> </nav>
<section class="images" v-switcher> <section class="images" v-switcher>
@ -32,57 +38,38 @@ import cardMixins from 'vuejs/components/cardMixins'
export default { export default {
name: "MiniCard", name: "MiniCard",
props: ['item'], props: ['item', 'collid'],
mixins: [cardMixins], mixins: [cardMixins],
data() { data() {
return { return {
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`, blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
// loadingFlag: false loadingItem: false
} }
}, },
computed: { computed: {
// ...mapState({
// flagcolls: state => state.User.flagcolls
// })
}, },
methods: { methods: {
// ...mapActions({ ...mapActions({
// flag: 'User/flag', flagUnflag: 'User/flagUnflag'
// unFlag: 'User/unFlag' }),
// }), itemIsLoading(id) {
// flagIsActive(collid) { return this.loadingItem
// // console.log(this.item.uuid); },
// // console.log(this.flagcolls[collid].items_uuids); onUnFlagCard (e) {
// return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1; console.log("Card onFlagActionCard", e);
// }, if (!this.loadingItem) {
// flagIsLoading(collid) { this.loadingItem = true;
// // console.log(this.item.uuid); this.flagUnflag({
// // console.log(this.flagcolls[collid].items_uuids); action: 'unflag',
// return collid === this.loadingFlag; uuid: this.item.uuid,
// }, collid: this.collid
// onFlagActionCard (e) { })
// console.log("Card onFlagActionCard", e); .then(data => {
// if (!this.loadingFlag) { console.log("onUnFlagCard then", data);
// let collid = e.target.getAttribute('collid'); this.loadingItem = false;
// let isActive = this.flagIsActive(collid); })
// // console.log('collid', collid); }
// // console.log("this.item", this.item); }
// this.loadingFlag = collid;
// if (isActive) {
// this.unFlag({uuid: this.item.uuid, collid: collid})
// .then(data => {
// console.log("onFlagActionCard then", data);
// this.loadingFlag = false;
// })
// }else{
// this.flag({uuid: this.item.uuid, collid: collid})
// .then(data => {
// console.log("onFlagActionCard then", data);
// this.loadingFlag = false;
// })
// }
// }
// }
} }
} }

10
web/themes/custom/materiotheme/vuejs/components/User/FlagCollection.vue
View File

@ -13,8 +13,9 @@
v-for="item in loadedItems" v-for="item in loadedItems"
:key="item.id" :key="item.id"
> >
<MiniCard :item="item"/> <MiniCard :item="item" :collid="collection.id"/>
</li> </li>
<span v-if="loadedItems.length === 0">No items in your folder</span>
</ul> </ul>
<span v-else class="loading">Loading</span> <span v-else class="loading">Loading</span>
</section> </section>
@ -33,6 +34,7 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
flagcolls: state => state.User.flagcolls, flagcolls: state => state.User.flagcolls,
flagcollsLoadedItems: state => state.User.flagcollsLoadedItems,
openedCollid: state => state.User.openedCollid openedCollid: state => state.User.openedCollid
}) })
}, },
@ -45,11 +47,11 @@ export default {
// } // }
// }, // },
created() { created() {
if (typeof this.collection.loadedItems !== 'undefined') { if (typeof this.flagcollsLoadedItems[this.openedCollid] !== 'undefined') {
// if loadedItems are alredy loaded, // if loadedItems are alredy loaded,
// the mutation occurs before this subscription // the mutation occurs before this subscription
// so we first check if they are already available // so we first check if they are already available
this.loadedItems = this.collection.loadedItems this.loadedItems = this.flagcollsLoadedItems[this.openedCollid]
} }
this.unsubscribe = this.$store.subscribe((mutation, state) => { this.unsubscribe = this.$store.subscribe((mutation, state) => {
@ -57,7 +59,7 @@ export default {
console.log("mutation setLoadedCollItems collid", this.openedCollid) console.log("mutation setLoadedCollItems collid", this.openedCollid)
// mutation is triggered before the component update // mutation is triggered before the component update
// so this.collection.id is not good // so this.collection.id is not good
this.loadedItems = state.User.flagcolls[this.openedCollid].loadedItems this.loadedItems = state.User.flagcollsLoadedItems[this.openedCollid]
} }
}) })

8
web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue
View File

@ -2,7 +2,7 @@
<div id="user-flags"> <div id="user-flags">
<h2 <h2
class="mdi mdi-folder-outline" class="mdi mdi-folder-outline"
>My folders</h2> >My folders ({{collsLength}})</h2>
<ul> <ul>
<li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id"> <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
<h5 <h5
@ -18,10 +18,11 @@
/> />
</div> </div>
</li> </li>
<li class="create-flag"> <li v-if="collsLength<15" class="create-flag">
<input <input
placeholder="new folder" placeholder="new folder"
v-model="new_folder_name" v-model="new_folder_name"
@keyup.enter.prevent.stop="onCreateFlagColl"
/> />
<span <span
class="add-btn mdi" class="add-btn mdi"
@ -48,6 +49,9 @@ export default {
...mapState({ ...mapState({
flagcolls: state => state.User.flagcolls flagcolls: state => state.User.flagcolls
}), }),
collsLength() {
return Object.keys(this.flagcolls).length
},
addFlagBtnClassObj() { addFlagBtnClassObj() {
return { return {
'mdi-plus-circle-outline': !this.is_creating_folder, 'mdi-plus-circle-outline': !this.is_creating_folder,

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

@ -19,6 +19,7 @@ export default {
canSearch: false, canSearch: false,
roles: [], roles: [],
flagcolls: false, flagcolls: false,
flagcollsLoadedItems: {},
openedCollid: null openedCollid: null
}, },
@ -83,8 +84,9 @@ export default {
state.canSearch = false state.canSearch = false
}, },
setFlagColls (state, flagcolls) { setFlagColls (state, flagcolls) {
console.log('User setFlagColls', flagcolls) console.log('User pre setFlagColls', state.flagcolls)
state.flagcolls = flagcolls state.flagcolls = flagcolls
// console.log('User post setFlagColls', state.flagcolls)
}, },
openFlagColl (state, collid) { openFlagColl (state, collid) {
state.openedCollid = collid state.openedCollid = collid
@ -96,7 +98,7 @@ export default {
console.log('setLoadedCollItems', data) console.log('setLoadedCollItems', data)
// if no data, we are just calling the mutation to trigger the component update // if no data, we are just calling the mutation to trigger the component update
if (data) { if (data) {
state.flagcolls[data.collid].loadedItems = data.items state.flagcollsLoadedItems[data.collid] = data.items
} }
} }
}, },
@ -236,66 +238,65 @@ export default {
}) })
}) })
}, },
flag ({ dispatch, commit, state }, args) { flagUnflag ({ dispatch, commit, state }, { action, uuid, collid }) {
console.log('user flag', args.uuid, args.collid) console.log('user flagUnflag', action, uuid, collid)
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const params = { const params = {
flagid: state.flagcolls[args.collid].flag_id, flagid: state.flagcolls[collid].flag_id,
uuid: args.uuid, uuid: uuid,
flagcollid: args.collid flagcollid: collid
} }
return MA.post('materio_flag/flag', params) return MA.post(`materio_flag/${action}`, params)
.then(({ data }) => { .then(({ data }) => {
console.log('user MA flag', data) console.log('user MA flag', data)
// reload the fulllist of flagcolleciton
dispatch('getUserFlagColls').then(() => { dispatch('getUserFlagColls').then(() => {
resolve() if (state.flagcolls[collid].items_uuids.length) {
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()
}
}) })
}) })
.catch(error => { .catch(error => {
console.warn('Issue USER MA flag', error) console.warn('Issue USER MA flagUnflag', error)
})
})
},
unFlag ({ dispatch, commit, state }, args) {
console.log('user unFlag', args.uuid, args.collid)
return new Promise((resolve, reject) => {
const params = {
flagid: state.flagcolls[args.collid].flag_id,
uuid: args.uuid,
flagcollid: args.collid
}
return MA.post('materio_flag/unflag', params)
.then(({ data }) => {
console.log('user MA unFlag', data)
dispatch('getUserFlagColls').then(() => {
resolve()
})
})
.catch(error => {
console.warn('Issue USER MA unFlag', error)
}) })
}) })
}, },
openFlagColl ({ commit, dispatch, state }, collid) { openFlagColl ({ commit, dispatch, state }, collid) {
console.log('user openFlagColl', collid) console.log('user openFlagColl', collid)
commit('openFlagColl', collid) commit('openFlagColl', collid)
if (typeof state.flagcolls[collid].loadedItems === 'undefined') { if (state.flagcolls[collid].items_uuids.length) {
// if no loadedItems, load them if (typeof state.flagcollsLoadedItems[collid] === 'undefined') {
// loadMaterials is on mixins console.log('loading flagcoll items')
// https://github.com/huybuidac/vuex-extensions // if no loadedItems, load them
dispatch('loadMaterials', { // loadMaterials is on mixins
uuids: state.flagcolls[collid].items_uuids, // https://github.com/huybuidac/vuex-extensions
imgStyle: 'card_medium_half', dispatch('loadMaterials', {
callBack: 'loadMaterialsCallBack', uuids: state.flagcolls[collid].items_uuids,
callBackArgs: { collid: collid } imgStyle: 'card_medium_half',
}) callBack: 'loadMaterialsCallBack',
} else { callBackArgs: { collid: collid }
// call the mutation without data to only trigger the FlagCollection component update })
commit('setLoadedCollItems') } else {
// call the mutation without data to only trigger the FlagCollection component update
console.log('committing setLoadedCollItems without args')
commit('setLoadedCollItems')
}
}else{
commit('setLoadedCollItems', { collid: collid, items: [] })
} }
}, },
loadMaterialsCallBack ({ commit }, { items, callBackArgs }) { loadMaterialsCallBack ({ commit }, { items, callBackArgs }) {
console.log('user loadMaterialsCallBack', items) console.log('user loadMaterialsCallBack', items, callBackArgs)
commit('setLoadedCollItems', { collid: callBackArgs.collid, items: items }) commit('setLoadedCollItems', { collid: callBackArgs.collid, items: items })
}, },
closeFlagColl ({ commit, dispatch }) { closeFlagColl ({ commit, dispatch }) {