strated to displaying falgcollection on the left of results

This commit is contained in:
Bachir Soussi Chiadmi 2020-11-26 22:45:46 +01:00
parent ed9e62718c
commit 6d9d18b7ba
13 changed files with 4627 additions and 38 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -26,6 +26,7 @@ import router from 'vuejs/route'
import VUserBlock from 'vuejs/components/Block/UserBlock' import VUserBlock from 'vuejs/components/Block/UserBlock'
import VMainContent from 'vuejs/components/Content/MainContent' import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock' import VSearchBlock from 'vuejs/components/Block/SearchBlock'
import VLeftContent from 'vuejs/components/Content/LeftContent'
import { mapState } from 'vuex' import { mapState } from 'vuex'
@ -36,7 +37,7 @@ import 'theme/assets/styles/main.scss'
const MaterioTheme = function () { const MaterioTheme = function () {
let _v_sitebranding_block, _v_user_block, _v_header_menu, let _v_sitebranding_block, _v_user_block, _v_header_menu,
_v_pagetitle_block, _v_search_block, _v_pagetitle_block, _v_search_block,
_v_main_content _v_main_content, _v_left_content
const _is_front = drupalSettings.path.isFront const _is_front = drupalSettings.path.isFront
console.log('drupalSettings', drupalSettings) console.log('drupalSettings', drupalSettings)
@ -71,6 +72,7 @@ import 'theme/assets/styles/main.scss'
initVHeaderMenu() initVHeaderMenu()
initVMainContent() initVMainContent()
initVSearchBlock() initVSearchBlock()
initVLeftContent()
} }
initVUserBlock() initVUserBlock()
} }
@ -268,7 +270,15 @@ import 'theme/assets/styles/main.scss'
render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } }) render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
}).$mount('#' + id) }).$mount('#' + id)
} }
function initVLeftContent () {
const id = 'content-left'
const $leftContent = document.getElementById(id)
// in any case create the vue
_v_left_content = new Vue({
store,
render: h => h(VLeftContent, { props: { id: id } })
}).$mount('#' + id)
}
init() init()
} // end MaterioTheme() } // end MaterioTheme()

View File

@ -93,10 +93,22 @@ main[role="main"]{
flex:1 1 auto; flex:1 1 auto;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
&>.wrapper{ >.scroller{
width:100vw; width:100vw;
&>*{ >.wrapper{
@extend %grided-width; @extend %grided-width;
display: flex;
flex-direction: row-reverse;
#content-left{
flex-basis: $column_width*2+$column_goutiere;
// width:$column_width*2+$column_goutiere;
>*{
width:$column_width*2+$column_goutiere;
}
}
#content-center{
flex-basis: $column_width*10+$column_goutiere*9;
}
} }
} }
} }

View File

@ -390,6 +390,20 @@ aside.messages{
// } // }
// ___ _ _ _ __ _
// / __|___ _ _| |_ ___ _ _| |_ ___| | ___ / _| |_
// | (__/ _ \ ' \ _/ -_) ' \ _|___| |__/ -_) _| _|
// \___\___/_||_\__\___|_||_\__| |____\___|_| \__|
#content-left{
max-width:1px;
overflow-x: hidden;
transition: all 0.3s ease-in-out;
&.opened{
max-width: 500px;
}
}
// __ _ // __ _
// / _|_ _ ___ _ _| |_ // / _|_ _ ___ _ _| |_
// | _| '_/ _ \ ' \ _| // | _| '_/ _ \ ' \ _|

View File

@ -13,6 +13,7 @@ regions:
header_left: 'Header left' header_left: 'Header left'
header_right: 'Header right' header_right: 'Header right'
header_bottom: 'Header bottom' header_bottom: 'Header bottom'
content_left: 'Content Left'
content_top: 'Content Top' content_top: 'Content Top'
content: Content content: Content
footer_left: 'Footer Left' footer_left: 'Footer Left'

View File

@ -58,19 +58,28 @@
</header> </header>
<main role="main"> <main role="main">
<div class="wrapper"> <div class="scroller">
{% if page.content.messages %} <div class="wrapper">
<aside class="messages"> <div id="content-left">
{{ page.content.messages }} {% if page.content_left %}
</aside> {{ page.content_left }}
{% endif %} {% endif %}
</div>
<div id="content-center">
{% if page.content.messages %}
<aside class="messages">
{{ page.content.messages }}
</aside>
{% endif %}
<div id="content-top"> <div id="content-top">
{{ page.content_top }} {{ page.content_top }}
</div>
<div id="main-content">
{{ page.content|without('messages') }}
</div>{# /.layout-content #}
</div>
</div> </div>
<div id="main-content">
{{ page.content|without('messages') }}
</div>{# /.layout-content #}
</div> </div>
</main> </main>

View File

@ -138,7 +138,6 @@ export default {
this.loadingFlag = false; this.loadingFlag = false;
}) })
}else{ }else{
this.flag({uuid: this.item.uuid, collid: collid}) this.flag({uuid: this.item.uuid, collid: collid})
.then(data => { .then(data => {
console.log("onFlagActionCard then", data); console.log("onFlagActionCard then", data);

View File

@ -0,0 +1,49 @@
<template lang="html">
<div
:id="id"
:class="{opened: isopened}"
>
<FlagCollection v-if='openedCollid' :collection='flagcolls[openedCollid]'/>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { MA } from 'vuejs/api/ma-axios'
import router from 'vuejs/route'
import FlagCollection from 'vuejs/components/User/FlagCollection'
export default {
router,
props:['id'],
data() {
return {
// isOpened: false
}
},
computed: {
...mapState({
flagcolls: state => state.User.flagcolls,
openedCollid: state => state.User.openedCollid
}),
isopened () {
return this.openedCollid
}
},
beforeMount() {
},
methods: {
},
components: {
FlagCollection
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,60 @@
<template>
<section class="flag-collection">
<h3>{{collection.name}}</h3>
<ul v-if="loadedItems">
<li
v-for="item in loadedItems"
:key="item.id"
>{{item.attributes.title}}</li>
</ul>
<span v-else class="loading">Loading</span>
</section>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: "FlagCollection",
props: ['collection'],
data: () => ({
loadedItems: false
}),
computed: {
...mapState({
flagcolls: state => state.User.flagcolls
// openedCollid: state => state.User.openedCollid
})
},
// watch: {
// flagcolls (newv, oldv) {
// console.log('watching flagcolls');
// if( typeof this.flagcolls[this.collection.id].loadedItems !== 'undefined' ) {
// this.loadedItems = this.flagcolls[this.collection.id].loadedItems
// }
// }
// },
created() {
this.unsubscribe = this.$store.subscribe((mutation, state) => {
if (mutation.type === 'User/setLoadedCollItems') {
this.loadedItems = state.User.flagcolls[this.collection.id].loadedItems
}
});
},
beforeDestroy() {
this.unsubscribe()
},
// beforeMount () {
// if (typeof this.flagcolls[collection.id].loadedItems === 'undefined') {
// this.
// }
// },
// methods: {
// ...mapActions({
// loadFlagCollItems: 'User/loadFlagCollItems'
// })
// }
}
</script>
<style lang="scss" scoped>
</style>

View File

@ -4,8 +4,11 @@
class="mdi mdi-folder-outline" class="mdi mdi-folder-outline"
>My folders</h2> >My folders</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>{{ coll.name }} ({{ coll.items.length }})</h5> <h5
:flagcollid="coll.id"
@click.prevent="onOpenFlagColl"
>{{ coll.name }} ({{ coll.items.length }})</h5>
<div class="actions"> <div class="actions">
<span <span
class="delete-btn mdi" class="delete-btn mdi"
@ -64,7 +67,8 @@ export default {
methods: { methods: {
...mapActions({ ...mapActions({
createFlagColl: 'User/createFlagColl', createFlagColl: 'User/createFlagColl',
deleteFlagColl: 'User/deleteFlagColl' deleteFlagColl: 'User/deleteFlagColl',
openFlagColl: 'User/openFlagColl'
}), }),
onCreateFlagColl () { onCreateFlagColl () {
console.log("UserFlags onCreateFlagColl", this.new_folder_name) console.log("UserFlags onCreateFlagColl", this.new_folder_name)
@ -77,7 +81,7 @@ export default {
}) })
}, },
onDeleteFlagColl (e) { onDeleteFlagColl (e) {
let flagcollid = e.target.getAttribute('flagcollid'); const flagcollid = e.target.getAttribute('flagcollid');
console.log("UserFlags onDeleteFlagColl", flagcollid); console.log("UserFlags onDeleteFlagColl", flagcollid);
this.is_deleting_folder = flagcollid; this.is_deleting_folder = flagcollid;
this.deleteFlagColl(flagcollid) this.deleteFlagColl(flagcollid)
@ -85,6 +89,14 @@ export default {
// console.log("onDeleteFlagColl then", data); // console.log("onDeleteFlagColl then", data);
this.is_deleting_folder = false; this.is_deleting_folder = false;
}) })
},
onOpenFlagColl (e) {
const flagcollid = e.target.getAttribute('flagcollid');
console.log("UserFlags onDeleteFlagColl", flagcollid);
this.openFlagColl(flagcollid)
.then(() => {
// console.log("onDeleteFlagColl then", data);
})
} }
} }
} }

View File

@ -18,7 +18,7 @@ Vue.use(VueRouter)
// const languages = ['en', 'fr']; // const languages = ['en', 'fr'];
// console.log('path aliases', (() => languages.map(l => `/${l}/base`))() ); // console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix; const basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
const routes = [ const routes = [
{ {
@ -32,11 +32,11 @@ const routes = [
// } // }
}, },
{ {
name:'base', name: 'base',
path: `${basePath}base`, path: `${basePath}base`,
// path: `/base`, // path: `/base`,
// alias: (() => languages.map(l => `/${l}/base`))(), // alias: (() => languages.map(l => `/${l}/base`))(),
component: Base, component: Base
// components: { // components: {
// 'base': Base // 'base': Base
// } // }
@ -53,20 +53,20 @@ const routes = [
// ] // ]
// } // }
{ {
name:'blabla', name: 'blabla',
path: `${basePath}blabla`, path: `${basePath}blabla`,
component: Blabla component: Blabla
}, },
{ {
name:'article', name: 'article',
path: `${basePath}blabla/:alias`, path: `${basePath}blabla/:alias`,
component: Article, component: Article
// meta: { uuid:null } // meta: { uuid:null }
}, },
{ {
name:'showrooms', name: 'showrooms',
path: `${basePath}showrooms`, path: `${basePath}showrooms`,
component: Showrooms, component: Showrooms
// meta: { uuid:null } // meta: { uuid:null }
}, },
// { // {
@ -77,7 +77,7 @@ const routes = [
// } // }
// }, // },
{ {
name:'pricing', name: 'pricing',
path: `${basePath}pricing`, path: `${basePath}pricing`,
component: Pricing component: Pricing
} }

View File

@ -1,5 +1,5 @@
import { REST } from 'vuejs/api/rest-axios' import { REST } from 'vuejs/api/rest-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'; import { JSONAPI } from 'vuejs/api/json-axios'
import { MA } from 'vuejs/api/ma-axios' import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring-es3' import qs from 'querystring-es3'
@ -18,7 +18,8 @@ export default {
isAdherent: false, isAdherent: false,
canSearch: false, canSearch: false,
roles: [], roles: [],
flagcolls: false flagcolls: false,
openedCollid: null
}, },
// getters // getters
@ -84,6 +85,13 @@ export default {
setFlagColls (state, flagcolls) { setFlagColls (state, flagcolls) {
console.log('User setFlagColls', flagcolls) console.log('User setFlagColls', flagcolls)
state.flagcolls = flagcolls state.flagcolls = flagcolls
},
openFlagColl (state, collid) {
state.openedCollid = collid
},
setLoadedCollItems (state, data) {
console.log('setLoadedCollItems', data)
state.flagcolls[data.collid].loadedItems = data.items
} }
}, },
@ -262,6 +270,39 @@ export default {
}) })
}) })
}, },
openFlagColl ({ commit, dispatch }, collid) {
console.log('user openFlagColl', collid)
commit('openFlagColl', collid)
dispatch('loadFlagCollItems', collid)
},
loadFlagCollItems ({ commit, state }, collid) {
console.log('loadFlagCollItems', state.flagcolls[collid].items_uuids)
const params = {
'filter[uuids-groupe][group][conjunction]': 'OR'
}
const uuids = state.flagcolls[collid].items_uuids
// console.log('uuids', uuids)
for (let i = 0; i < uuids.length; i++) {
let uuid = uuids[i]
// console.log('uuid', uuid)
params[`filter[${uuid}][condition][path]`] = 'id'
params[`filter[${uuid}][condition][value]`] = uuid
params[`filter[${uuid}][condition][operator]`] = '='
params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
}
console.log('search JSONAPI params', params);
const q = qs.stringify(params)
return JSONAPI.get('node/materiau?' + q)
.then(({ data }) => {
console.log('user loadFlagCollItems data', data)
// dispatch('parseItems', { data: data.data, uuids: uuids })
commit('setLoadedCollItems', {collid: collid, items: data.data})
})
.catch((error) => {
console.warn('Issue with loadFlagCollItems', error)
Promise.reject(error)
})
},
userLogout ({ commit, state }) { userLogout ({ commit, state }) {
const credentials = qs.stringify({ const credentials = qs.stringify({
token: state.csrf_token token: state.csrf_token