bachir/gdp_vuewp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

history is functionnal and with state transition

Browse Source
This commit is contained in:
bachir
2019-09-25 16:08:58 +02:00
parent 1957aa3dc5
commit b272bca0ca
12 changed files with 279 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.scss
+92 -36
View File
@@ -61,6 +61,57 @@ footer[role="tools"]{
z-index: 8;
background-color: $or;
padding:1.2em $side-padding;
max-height: $list-item-h;
@include accordeon-transition($list-item-h);
>header{
}
.history-list{
overflow-x: hidden;
.wrapper{
height:100%;
// hidding the scrollbar
overflow-y: auto;
width:calc(100% + 1em);
padding-right: 1em;
>ul{
padding:0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
li.item{
box-sizing: border-box;
flex-basis: percentage(2/$default_sum);
height: $list-item-h;
overflow: hidden;
padding-bottom: 1em;
padding-right: 0.7em;
article{
max-height: 100%;
overflow: hidden;
}
}
article.history.item{
header{
h1{
font-size: 0.882em;
font-weight: normal;
margin:0 0 0.5em 0;
}
}
.extract{
p{
font-size: 0.882em;
margin:0;
}
code{
background-color: lighten(desaturate($rouge,20%), 20%);
}
}
}
}
}
#results{
z-index: 9;
@@ -69,56 +120,61 @@ footer[role="tools"]{
max-height: $list-item-h * 3;
@include accordeon-transition($list-item-h * 3);
>header{
.search-keys{
font-size: 0.756em;
font-weight: 500;
}
.results-count{
font-size: 0.756em;
}
}
.results-list{
overflow-x: hidden;
.wrapper{
height:100%;
overflow-y: auto;
width:calc(100% + 1em);
padding-right: 1em;
>ul{
padding:0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-x: hidden;
.wrapper{
height:100%;
// hidding the scrollbar
overflow-y: auto;
width:calc(100% + 1em);
padding-right: 1em;
>ul{
padding:0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
}
li.result{
box-sizing: border-box;
flex-basis: percentage(2/$default_sum);
height: $list-item-h;
overflow: hidden;
padding-bottom: 1em;
padding-right: 0.7em;
article{
max-height: 100%;
li.result{
box-sizing: border-box;
flex-basis: percentage(2/$default_sum);
height: $list-item-h;
overflow: hidden;
}
}
article.result.item{
header{
h1{
font-size: 0.882em;
font-weight: normal;
margin:0 0 0.5em 0;
padding-bottom: 1em;
padding-right: 0.7em;
article{
max-height: 100%;
overflow: hidden;
}
}
.extract{
p{
font-size: 0.882em;
margin:0;
article.result.item{
header{
h1{
font-size: 0.882em;
font-weight: normal;
margin:0 0 0.5em 0;
}
}
code{
background-color: lighten(desaturate($rouge,20%), 20%);
.extract{
p{
font-size: 0.882em;
margin:0;
}
code{
background-color: lighten(desaturate($rouge,20%), 20%);
}
}
}
}
}
}
#footer-bottom{
z-index: 10;
padding:0 $side-padding;
src/App.vue
+2 -2
View File
@@ -6,7 +6,7 @@
class="site-title"
tabindex="0"
>
Les Guides de Paris
<router-link :to="{ name:'home' }">Les Guides de Paris</router-link>
</h1>
<HeaderMenu />
</div>
@@ -58,7 +58,7 @@ export default {
<style lang="scss" scoped>
.container{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
// font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
max-width: 1200px;
}
src/components/Content/HistoryItem.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<article class="history item">
<header>
<h1>
<a
:href="item.url"
@click.prevent="onclick"
@keyup.enter="onclick"
v-html="item.textId"
/>
</h1>
</header>
<div class="extract" v-html="item.extract" />
</article>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'HistoryItem',
props: {
item: {
type: Object,
required: true
}
},
methods: {
...mapActions({
navigateToHistoryItem: 'History/navigateToItem'
}),
onclick () {
console.log('clicked on history item', this.item)
this.navigateToHistoryItem(this.item)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/components/Content/ResultItem.vue
+11 -7
View File
@@ -15,6 +15,9 @@
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'ResultItem',
props: {
@@ -23,16 +26,17 @@ export default {
required: true
}
},
data: () => ({
}),
methods: {
...mapActions({
addHistoryItem: 'History/addItem'
}),
onclick () {
console.log('clicked on result item', this.result)
this.$router.push({
name: `item`,
params: { uuid: this.result.uuid }
})
this.addHistoryItem(this.result)
// this.$router.push({
// name: `item`,
// params: { uuid: this.result.uuid }
// })
}
}
}
src/components/nav/FooterTabs.vue
+19 -2
View File
@@ -3,7 +3,16 @@
<ul>
<li class="history">
<div class="wrapper">
<span>Historique de consultation</span>
<transition name="fade" appear>
<span
v-if="historyItems.length && !historyOpened"
title="Ouvrir l'historique'"
@click.prevent="openHistory"
@keydown.enter.prevent="openHistory"
>
Historique de consultation
</span>
</transition>
</div>
</li>
<li class="results">
@@ -35,13 +44,21 @@ export default {
get () { return this.$store.state.Search.opened },
set (value) { this.$store.commit('Search/setOpened', value) }
},
historyOpened: {
get () { return this.$store.state.History.opened },
set (value) { this.$store.commit('History/setOpened', value) }
},
...mapState({
resultsItems: state => state.Search.results
resultsItems: state => state.Search.results,
historyItems: state => state.History.items
})
},
methods: {
openResults () {
this.resultsOpened = true
},
openHistory () {
this.historyOpened = true
}
}
}
src/components/nav/History.vue
+46 -24
View File
@@ -1,35 +1,57 @@
<template>
<div id="history" class="row">
<header class="col-1">
<h2>Historique de consultation</h2>
</header>
<section class="col-10 history-list">
<div class="wrapper">
<ul>
<li>item</li>
</ul>
</div>
</section>
<nav class="col-1 tools">
<span
class="mdi mdi-close"
title="close"
@click.prevent="close"
@keydown.enter.prevent="close"
/>
</nav>
</div>
<transition name="accordeon" appear>
<div
v-if="opened"
id="history"
class="row"
>
<header class="col-1">
<h2>Historique de consultation</h2>
</header>
<section class="col-10 history-list">
<div class="wrapper">
<ul v-if="items.length">
<li v-for="item in items" :key="item.uuid" class="item">
<HistoryItem :item="item" />
</li>
</ul>
</div>
</section>
<nav class="col-1 tools">
<span
class="mdi mdi-close"
title="close"
@click.prevent="close"
@keydown.enter.prevent="close"
/>
</nav>
</div>
</transition>
</template>
<script>
import HistoryItem from '../Content/HistoryItem'
import { mapState } from 'vuex'
export default {
name: 'History',
data: () => ({
}),
components: {
HistoryItem
},
computed: {
opened: {
get () { return this.$store.state.History.opened },
set (value) { this.$store.commit('History/setOpened', value) }
},
...mapState({
items: state => state.History.items
})
},
methods: {
close () {
console.log('clicked on close history')
// this.opened = false
this.opened = false
}
}
}
src/components/nav/Results.vue
+1
View File
@@ -7,6 +7,7 @@
>
<header class="col-1">
<h2>Resultats</h2>
<span class="search-keys">{{ keys }}</span><br />
<span class="results-count">{{ results.length }} resultat(s)</span>
</header>
<section class="col-10 results-list">
src/index.js
+3
View File
@@ -1,6 +1,7 @@
import Vue from 'vue'
import router from './router'
import store from './store'
// import { sync } from 'vuex-router-sync'
import Meta from 'vue-meta'
import App from './App'
@@ -10,6 +11,8 @@ import 'assets/css/app.scss'
Vue.use(Meta)
// sync(store, router) // done. Returns an unsync callback fn
new Vue({
router,
store,
src/components/Content/Item.vue → src/pages/Item.vue
View File
src/router/index.js
+14 -14
View File
@@ -2,13 +2,13 @@ import Vue from 'vue'
import Router from 'vue-router'
import Home from 'pages/Home'
import Item from 'components/Content/Item'
import Item from 'pages/Item'
import Corpus from 'pages/Corpus'
import Nominum from 'pages/Nominum'
import NominumItem from 'components/Content/NominumItem'
// import NominumItem from 'pages/NominumItem'
import Locorum from 'pages/Locorum'
import Operum from 'pages/Operum'
import OperumItem from 'components/Content/OperumItem'
// import OperumItem from 'pages/OperumItem'
import Bibliographie from 'pages/Bibliographie'
Vue.use(Router)
@@ -21,7 +21,7 @@ const routes = [
},
{
name: 'item',
path: '/items/:uuid',
path: '/babar/:uuid',
component: Item,
props: true
},
@@ -35,11 +35,11 @@ const routes = [
path: '/nominum',
component: Nominum
},
{
name: 'nominumItem',
path: '/nominum/:id',
component: NominumItem
},
// {
// name: 'nominumItem',
// path: '/nominum/:id',
// component: NominumItem
// },
{
name: 'locorum',
path: '/locorum',
@@ -50,11 +50,11 @@ const routes = [
path: '/operum',
component: Operum
},
{
name: 'operumItem',
path: '/operum/:id',
component: OperumItem
},
// {
// name: 'operumItem',
// path: '/operum/:id',
// component: OperumItem
// },
{
name: 'bibliographie',
path: '/bibliographie',
src/store/index.js
+3 -1
View File
@@ -3,11 +3,13 @@ import Vuex from 'vuex'
import Corpus from './modules/corpus'
import Search from './modules/search'
import History from './modules/history'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
Corpus,
Search
Search,
History
}
})
src/store/modules/history.js
+46
View File
@@ -0,0 +1,46 @@
// import { REST } from 'api/rest-axios'
import router from '../../router'
export default {
namespaced: true,
router,
// initial state
state: {
items: [],
opened: false
},
// getters
getters: {},
// mutations
mutations: {
addItem (state, item) {
state.items.push(item)
},
setOpened (state, opened) {
state.opened = opened
}
},
// actions
actions: {
addItem ({ dispatch, commit, state }, item) {
console.log('history add item', item, router)
commit('addItem', item)
commit('setOpened', true)
router.push({
name: `item`,
params: { uuid: item.uuid }
})
},
navigateToItem ({ dispatch, commit, state }, item) {
console.log('history navigate to item', item, router)
// commit('addItem', item)
router.push({
name: `item`,
params: { uuid: item.uuid }
})
}
}
}