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

strated to displaying falgcollection on the left of results

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

14
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@@ -26,6 +26,7 @@ import router from 'vuejs/route'
import VUserBlock from 'vuejs/components/Block/UserBlock'
import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock'
import VLeftContent from 'vuejs/components/Content/LeftContent'
import { mapState } from 'vuex'
@@ -36,7 +37,7 @@ import 'theme/assets/styles/main.scss'
const MaterioTheme = function () {
let _v_sitebranding_block, _v_user_block, _v_header_menu,
_v_pagetitle_block, _v_search_block,
_v_main_content
_v_main_content, _v_left_content
const _is_front = drupalSettings.path.isFront
console.log('drupalSettings', drupalSettings)
@@ -71,6 +72,7 @@ import 'theme/assets/styles/main.scss'
initVHeaderMenu()
initVMainContent()
initVSearchBlock()
initVLeftContent()
}
initVUserBlock()
}
@@ -268,7 +270,15 @@ import 'theme/assets/styles/main.scss'
render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
}).$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()
} // end MaterioTheme()

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

@@ -93,10 +93,22 @@ main[role="main"]{
flex:1 1 auto;
overflow-y: auto;
overflow-x: hidden;
&>.wrapper{
>.scroller{
width:100vw;
&>*{
>.wrapper{
@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;
}
}
}
}

14
web/themes/custom/materiotheme/assets/styles/main.scss
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;
}
}
// __ _
// / _|_ _ ___ _ _| |_
// | _| '_/ _ \ ' \ _|

1
web/themes/custom/materiotheme/materiotheme.info.yml
View File

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

31
web/themes/custom/materiotheme/templates/layout/page.html.twig
View File

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

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

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

49
web/themes/custom/materiotheme/vuejs/components/Content/LeftContent.vue Normal file
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>

60
web/themes/custom/materiotheme/vuejs/components/User/FlagCollection.vue Normal file
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>

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

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

18
web/themes/custom/materiotheme/vuejs/route/index.js
View File

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

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

@@ -1,5 +1,5 @@
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 qs from 'querystring-es3'
@@ -18,7 +18,8 @@ export default {
isAdherent: false,
canSearch: false,
roles: [],
flagcolls: false
flagcolls: false,
openedCollid: null
},
// getters
@@ -84,6 +85,13 @@ export default {
setFlagColls (state, flagcolls) {
console.log('User setFlagColls', 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 }) {
const credentials = qs.stringify({
token: state.csrf_token