krzysiej/biblio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Migrated progress bar and progress editor to vuex.

Browse Source
This commit is contained in:
krzysiej
2022-06-14 15:19:21 +02:00
parent 8dbd63478d
commit 5350c5c46b
10 changed files with 131 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/js/api/book.js
View File

@@ -6,5 +6,18 @@ export default {
params: {title: searchTitle},
headers: {'accept': 'application/json'}
})
},
bookUpdateProgress(bookId, progress) {
console.info(bookId);
console.info(progress);
return axios.post('/progress/update', {
bookId: bookId,
progress: progress
}, {
headers: {
'content-type': 'text/json'
}
})
}
}

3
assets/js/files.js
View File

@@ -2,8 +2,9 @@ import Vue from 'vue';
import Files from "./pages/files";
import Progressbar from "./pages/progressbar";
import Progresseditor from "./pages/progresseditor";
import store from "./store/index";
Vue.component('Files', Files);
Vue.component('Progressbar', Progressbar);
Vue.component('Progresseditor', Progresseditor);
new Vue().$mount('#app');
new Vue({store}).$mount('#app');

3
assets/js/pages/booklisting.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<input type="text" class="form-control" v-model="searchTerm" @keydown.enter="search"/>
<input type="text" class="form-control" placeholder="search by title" v-model="searchTerm" @keydown.enter="search"/>
<table class="table">
<thead>
<tr>
@@ -58,7 +58,6 @@ export default {
'findAll'
]),
search: function () {
this.$store.commit('increment')
this.updateHistory();
this.findAll(this.searchTerm);
},

5
assets/js/pages/booklistingheader.vue
View File

@@ -1,12 +1,12 @@
<template>
<div>
<h1 v-if="searchTitle" v-html="'Book search: '+searchTitle"></h1>
<h1 v-if="isSearching" v-html="'Book search: '+searchTitle"></h1>
<h1 v-else>Book list</h1>
</div>
</template>
<script>
import {mapState} from "vuex";
import {mapGetters, mapState} from "vuex";
export default {
name: 'BookListingHeader',
@@ -17,6 +17,7 @@ export default {
},
computed: {
...mapState('booksmodule', ['searchTitle']),
...mapGetters('booksmodule', ['isSearching'])
},
}
</script>

28
assets/js/pages/progressbar.vue
View File

@@ -1,41 +1,31 @@
<template>
<div>
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" :style="{width:progress+'%'}"></div>
<div class="progress-bar bg-secondary bg-opacity-10" role="progressbar" :style="{width:100-progress+'%'}"></div>
<div class="progress-bar" role="progressbar" :style="{width:progressPercent+'%'}"></div>
<div class="progress-bar bg-secondary bg-opacity-10" role="progressbar"
:style="{width:100-progressPercent+'%'}"></div>
</div>
</div>
</template>
<script>
import {EventBus} from "../event-bus";
import {UPDATING_PROGRESS_SUCCESS} from '../store/mutation-types'
import {mapState} from "vuex";
export default {
name: 'Progressbar',
components: {
EventBus
},
props: {
totalPages: Number,
readPages: Number
},
data() {
return {
newProgress: this.readPages
}
},
computed: {
progress() {
return Math.round(this.newProgress / this.totalPages * 100);
...mapState('bookprogressmodule', ['progress']),
progressPercent() {
return Math.round(this.progress / this.totalPages * 100);
}
},
mounted() {
},
created() {
window.EventBus.$on('updateProgress', (data) => {
this.newProgress = data.readPages;
});
this.$store.commit('bookprogressmodule/' + UPDATING_PROGRESS_SUCCESS, this.readPages);
},
methods: {}
}
</script>

33
assets/js/pages/progresseditor.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<span @click="edit" v-if="!editmode">
<span @click="edit" v-if="!isEditMode">
{{ newProgress }} pages | {{ progress }}%
</span>
<span v-show="editmode">
<span v-show="isEditMode">
<input type="number" @keydown.esc="cancelEdit" @keydown.enter="submit" ref="readPagesInput" min="0"
:max="totalPages" v-model.number="newProgress"/>
</span>
@@ -12,7 +12,8 @@
<script>
import {EventBus} from "../event-bus";
import axios from "axios";
import {mapActions, mapGetters} from "vuex";
import {TURN_ON_EDIT_MODE, TURN_OFF_EDIT_MODE} from '../store/mutation-types'
export default {
name: 'Progresseditor',
@@ -26,40 +27,32 @@ export default {
},
data() {
return {
editmode: false,
newProgress: this.readPages
}
},
computed: {
progress() {
return Math.round(this.newProgress / this.totalPages * 100);
}
},
mounted() {
},
...mapGetters('bookprogressmodule', ['isEditMode'])
},
created() {
this.newProgress = this.readPages;
},
methods: {
...mapActions('bookprogressmodule', [
'updateProgress'
]),
edit: function () {
this.editmode = true;
this.$store.commit('bookprogressmodule/' + TURN_ON_EDIT_MODE);
setTimeout(() => this.$refs.readPagesInput.focus(), 1)
},
cancelEdit: function () {
this.editmode = false;
this.$store.commit('bookprogressmodule/' + TURN_OFF_EDIT_MODE);
},
submit: function () {
this.editmode = false;
axios.post('/progress/update', {
bookId: this.bookId,
progress: this.newProgress
}, {
headers: {
'content-type': 'text/json'
}
}).then(() => {
window.EventBus.$emit('updateProgress', {readPages: this.newProgress});
})
this.$store.commit('bookprogressmodule/' + TURN_OFF_EDIT_MODE);
this.updateProgress({'bookId': this.bookId, 'progress': this.newProgress});
}
}
}

12
assets/js/store/index.js
View File

@@ -1,20 +1,14 @@
import Vue from 'vue'
import Vuex from 'vuex'
import booksmodule from './modules/books';
import bookprogressmodule from './modules/bookprogress';
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
modules:{
booksmodule
booksmodule,
bookprogressmodule
}
})

70
assets/js/store/modules/bookprogress.js Normal file
View File

@@ -0,0 +1,70 @@
import BookApi from "../../api/book";
import {
UPDATING_PROGRESS,
UPDATING_PROGRESS_SUCCESS,
UPDATING_PROGRESS_ERROR,
TURN_ON_EDIT_MODE,
TURN_OFF_EDIT_MODE
} from '../mutation-types.js'
export default {
namespaced: true,
state: {
isUpdating: false,
error: null,
progress: null,
editMode: false
},
getters: {
isEditMode(state) {
return state.editMode;
},
isUpdating(state) {
return state.isUpdating;
},
hasError(state) {
return state.error !== null;
},
error(state) {
return state.error;
},
progress(state) {
return state.progress;
},
},
mutations: {
[UPDATING_PROGRESS](state) {
state.isUpdating = true;
state.error = null;
state.progress = null;
},
[UPDATING_PROGRESS_SUCCESS](state, progress) {
state.isLoading = false;
state.error = null;
state.progress = progress;
},
[UPDATING_PROGRESS_ERROR](state, error) {
state.isLoading = false;
state.error = error;
state.progress = null;
},
[TURN_ON_EDIT_MODE](state) {
state.editMode = true;
},
[TURN_OFF_EDIT_MODE](state) {
state.editMode = false;
}
},
actions: {
async updateProgress({commit}, data) {
commit(UPDATING_PROGRESS);
try {
let response = await BookApi.bookUpdateProgress(data.bookId, data.progress);
commit(UPDATING_PROGRESS_SUCCESS, response.data.progress);
return response.data;
} catch (error) {
commit(UPDATING_PROGRESS_ERROR, error);
}
},
}
};

13
assets/js/store/modules/books.js
View File

@@ -3,7 +3,9 @@ import BookApi from "../../api/book";
const
FETCHING_BOOKS = "FETCHING_BOOKS",
FETCHING_BOOKS_SUCCESS = "FETCHING_BOOKS_SUCCESS",
FETCHING_BOOKS_ERROR = "FETCHING_BOOKS_ERROR";
FETCHING_BOOKS_ERROR = "FETCHING_BOOKS_ERROR",
SETTING_SEARCH_TERM = "SETTING_SEARCH_TERM"
;
export default {
namespaced: true,
@@ -28,9 +30,15 @@ export default {
},
books(state) {
return state.books;
},
isSearching(state) {
return !!state.searchTitle;
}
},
mutations: {
[SETTING_SEARCH_TERM](state, searchTitle) {
state.searchTitle = searchTitle;
},
[FETCHING_BOOKS](state) {
state.isLoading = true;
state.error = null;
@@ -51,8 +59,7 @@ export default {
async findAll({commit, state}, searchTitle) {
commit(FETCHING_BOOKS);
try {
state.searchTitle = searchTitle;
console.info(state.searchTitle);
commit(SETTING_SEARCH_TERM, searchTitle);
let response = await BookApi.booksFetch(state.searchTitle);
commit(FETCHING_BOOKS_SUCCESS, response.data);
return response.data;

7
assets/js/store/mutation-types.js Normal file
View File

@@ -0,0 +1,7 @@
export const
UPDATING_PROGRESS = "UPDATING_PROGRESS",
UPDATING_PROGRESS_SUCCESS = "UPDATING_PROGRESS_SUCCESS",
UPDATING_PROGRESS_ERROR = "UPDATING_PROGRESS_ERROR",
TURN_ON_EDIT_MODE = "TURN_ON_EDIT_MODE",
TURN_OFF_EDIT_MODE = "TURN_OFF_EDIT_MODE"
;