This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit 0017d992d26a52cdc6e5b7112938b62d2ec3a4a4 Author: Benjamin <poussin@codelutin.com> Date: Fri May 22 03:45:03 2020 +0200 Navigation fonctionnel (par tag ou offset) --- web/src/App.vue | 10 +++- web/src/components/CloudTags.vue | 75 +++++++++++++++--------------- web/src/components/bookmark/Tags.vue | 9 +--- web/src/components/layout/Header.vue | 24 +--------- web/src/components/layout/Sidebar.vue | 8 ---- web/src/main.js | 87 +++++++++++++++++++++++++++++++++++ web/src/store/index.js | 17 ++++--- web/src/views/Home.vue | 14 +++--- web/src/views/Login.vue | 2 +- 9 files changed, 154 insertions(+), 92 deletions(-) diff --git a/web/src/App.vue b/web/src/App.vue index 4b2d485..0ab65db 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -41,10 +41,16 @@ class App extends Vue { } } + reload() { + this.$store.commit('user', this.$storage.get('bow-user') || {}) + this.$store.commit('authenticated', !!this.$storage.getCookie('bow-token')) + this.insertOpenSearch() + } + beforeMount() { console.log('beforeMounted App') - this.insertOpenSearch() - this.$storage.addListener('bow-user', this.insertOpenSearch, this) + this.reload() + this.$storage.addListener('bow-user', this.reload, this) } } export default App diff --git a/web/src/components/CloudTags.vue b/web/src/components/CloudTags.vue index 8bf9d7b..9ed0d8d 100644 --- a/web/src/components/CloudTags.vue +++ b/web/src/components/CloudTags.vue @@ -1,7 +1,7 @@ <template> - <div class="cloud-tags"> - <span class="tag" v-for="(tag, i) in tags" :key="tag" :style="{fontSize: getFont(counts[i]) + 'px'}">{{ tag }}</span> - </div> + <div class="cloud-tags"> + <span class="tag" v-for="(tag, i) in tags" :key="tag" :style="{ fontSize: getFont(i) + 'px' }" @click="addTagToQuery(tag)">{{ tag }}</span> + </div> </template> <script> @@ -12,35 +12,35 @@ import { Component, Vue } from 'vue-property-decorator' components: {} }) class CloudTags extends Vue { - - get user() { - return this.$storage.get('bow-user') - } - - get tags() { - return this.$store.state.tags[0].slice(0, this.user.maxtagincloud) - } - - get counts() { - return this.$store.state.tags[1] - } - - get tmax() { - return this.counts[0] || 1 - } - - get tmin() { - return this.counts[this.counts.length - 1] || 0 + addTagToQuery(tag) { + this.addTagsAndGo([tag]) + } + + get tags() { + return this.queryTags.slice(0, this.user.maxtagincloud) + } + + get counts() { + return this.queryTagsCount + } + + get tmax() { + return this.queryTagsCount[0] || 1 + } + + get tmin() { + return this.queryTagsCount[this.queryTagsCount.length - 1] || 0 + } + + getFont(index) { + let count = this.counts[index] + let result = (30 * (count - this.tmin)) / (this.tmax - this.tmin) + if (result < 10) { + result = 10 } - getFont(count) { - let result = 30 * (count - this.tmin) / (this.tmax - this.tmin) - if (result < 10) { - result = 10 - } - - return result - } + return result + } } export default CloudTags @@ -48,12 +48,15 @@ export default CloudTags <style lang="less" scoped> .cloud-tags { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; } .tag { - margin: 4px; + margin: 4px; +} +.tag:hover { + color: wheat; } -</style> \ No newline at end of file +</style> diff --git a/web/src/components/bookmark/Tags.vue b/web/src/components/bookmark/Tags.vue index c3b892c..ff0b67f 100644 --- a/web/src/components/bookmark/Tags.vue +++ b/web/src/components/bookmark/Tags.vue @@ -16,14 +16,7 @@ class Tags extends Vue { @Prop tags addTag(tag) { - console.log(tag) - let tags; - if (this.$route.query.tags) { - tags = this.$route.query.tags + ' ' + tag - } else { - tags = tag - } - this.$router.push({ name: 'Home', query: { tags } }) + this.addTagsAndGo([tag]) } } diff --git a/web/src/components/layout/Header.vue b/web/src/components/layout/Header.vue index 221ffbe..851d84b 100644 --- a/web/src/components/layout/Header.vue +++ b/web/src/components/layout/Header.vue @@ -7,7 +7,7 @@ <SearchInput></SearchInput> <div id="header-user-infos"> - <span v-if="authenticated" v-on:authenticated="loadData()"> + <span v-if="authenticated"> <router-link to="/preferences"> {{ this.user.login }} (bow user since {{ new Date(this.user.creationdate).getFullYear() }}) </router-link> @@ -34,34 +34,12 @@ import SearchInput from '@/components/SearchInput' components: { SearchInput } }) class Header extends Vue { - user = {} - authenticated = false - logout() { this.$fetch .delete(`/users/${this.user.id}/auth`) - .then(() => this.loadData()) .then(() => this.$storage.delete('bow-user')) .then(() => this.$router.push({ name: 'Login' })) } - - loadData() { - console.log('loadData Header') - this.user = this.$storage.get('bow-user') || {} - this.authenticated = !!this.$storage.getCookie('bow-token') - } - - beforeMount() { - console.log('beforeMounted Header') - this.loadData() - this.$storage.addListener('bow-user', this.loadData, this) - } - - // beforeUpdate() { - // console.log('beforeUpdate Header') - // this.user = this.$storage.get('bow-user') - // this.token = this.$storage.getCookie('bow-token') - // } } export default Header diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue index 13d7c22..495f8d9 100644 --- a/web/src/components/layout/Sidebar.vue +++ b/web/src/components/layout/Sidebar.vue @@ -29,22 +29,14 @@ import { Component, Vue } from 'vue-property-decorator' components: {} }) class Sidebar extends Vue { - user = {} statsUrl = '' add() { this.$router.push({ name: 'Edit', params: { id: 'new' } }) } - loadData() { - console.log('loadData Header') - this.user = this.$storage.get('bow-user') || {} - } - beforeMount() { this.statsUrl = this.$fetch.createUrl('/system/stats') - this.loadData() - this.$storage.addListener('bow-user', this.loadData, this) } } diff --git a/web/src/main.js b/web/src/main.js index 4a0ecfe..c017a64 100644 --- a/web/src/main.js +++ b/web/src/main.js @@ -24,6 +24,93 @@ Vue.config.productionTip = false Vue.prototype.$fetch = FetchHelper Vue.prototype.$storage = StoreHelper +Vue.mixin({ + methods: { + getCurrentQuery() { + let query = {} + query.tags = this.queryInfo.tags + query.fulltext = this.queryInfo.fulltext + query.query = this.queryInfo.query + query.orderby = this.queryInfo.orderby + query.orderdesc = this.queryInfo.orderdesc + query.first = this.queryInfo.first + return query + }, + go: function(query) { + console.log('go', query) + this.$router.push({ name: 'Home', query }) + }, + goFirst: function() { + let query = { ...this.currentQuery } + query.first = 0 + this.go(query) + }, + goNext: function() { + let query = { ...this.currentQuery } + query.first = query.first + this.user.maxresult + if (query.first > this.queryInfo.total - this.user.maxresult) { + query.first = this.queryInfo.total - this.user.maxresult + } + this.go(query) + }, + goPrev: function() { + let query = { ...this.currentQuery } + query.first = query.first - this.user.maxresult + if (query.first < 0) { + query.first = 0 + } + this.go(query) + }, + goLast: function() { + let query = { ...this.currentQuery } + query.first = this.queryInfo.total - this.user.maxresult + if (query.first < 0) { + query.first = 0 + } + this.go(query) + }, + addTagsAndGo: function(tags) { + console.log('addTagsAndGo', tags) + + let query = { ...this.currentQuery } + query.tags = query.tags.concat(tags) + this.go(query) + } + }, + computed: { + authenticated: function() { + return this.$store.state.authenticated + }, + user: function() { + return this.$store.state.user + }, + currentQuery: function() { + let i = this.queryInfo + // id ? uri ? + return { + first: i.first, + tags: i.tags, + fulltext: i.fulltext, + query: i.query, + orderby: i.orderby, + orderdesc: i.orderdesc + } + }, + queryInfo: function() { + return this.$store.state.query.info + }, + queryTags: function() { + return this.$store.state.query.tags[0] + }, + queryTagsCount: function() { + return this.$store.state.query.tags[1] + }, + queryResult: function() { + return this.$store.state.query.result + } + } +}) + new Vue({ router, store, diff --git a/web/src/store/index.js b/web/src/store/index.js index bbbbc16..b78a3ce 100644 --- a/web/src/store/index.js +++ b/web/src/store/index.js @@ -5,17 +5,20 @@ Vue.use(Vuex) export default new Vuex.Store({ state: { + authenticated: false, user: {}, - tags: [[],[]], - result: [], - size: 0 + query: {info: {}, tags:[[],[]], result: []} }, getters: {}, mutations: { - queryResponse(state, payload) { - state.tags = payload.tags - state.result = payload.result - state.size = payload.size + query(state, payload) { + state.query = payload + }, + user(state, payload) { + state.user = payload + }, + authenticated(state, payload) { + state.authenticated = payload } }, actions: {} diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue index 541995e..5fb0141 100644 --- a/web/src/views/Home.vue +++ b/web/src/views/Home.vue @@ -3,11 +3,11 @@ <div>{{ errorMsg }}</div> <CloudTags></CloudTags> <div class="navigation"> - <button><<</button> - <button><</button> - {{ 1 + queryResponse.info.first }}-{{ queryResponse.info.first + queryResponse.info.limit }} - <button>></button> - <button>>></button> + <button @click="goFirst()"><<</button> + <button @click="goPrev()"><</button> + {{ 1 + queryInfo.first }}-{{ queryInfo.first + queryInfo.limit }} + <button @click="goNext()">></button> + <button @click="goLast()">>></button> / {{ queryResponse.info.total }} </div> <div class="bookmarks-list"> @@ -47,7 +47,7 @@ class Home extends Vue { queryResponse = {info:{}, tags:{}, result: {}} get bookmarks() { - return this.queryResponse.result + return this.queryResult } forceArrayTags(tags) { @@ -71,7 +71,7 @@ class Home extends Vue { this.$fetch.get(`/bookmarks?${searchParams.toString()}`).then( (data) => { this.queryResponse = data - this.$store.commit('queryResponse', data) + this.$store.commit('query', data) }, (err) => { this.errorMsg = err.cause diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue index 8d647bc..b4a1406 100644 --- a/web/src/views/Login.vue +++ b/web/src/views/Login.vue @@ -44,7 +44,7 @@ class Login extends Vue { this.$fetch.post('/users/auth', this.data).then( (user) => { console.log('ok', user) - this.$storage.set('bow-user', user) + this.$storage.set('bow-user', user) // tout se recharge dans App.vue, suite a cette modif if (this.$route.params.nextUrl != null) { this.$router.push(this.$route.params.nextUrl) -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.