diff --git a/package.json b/package.json
index be80935be..49bbd92b9 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
"vue-shortkey": "3.1.7",
"vuedraggable": "2.24.3",
"vuex": "3.6.2",
- "workbox-precaching": "6.2.4"
+ "workbox-precaching": "6.3.0"
},
"devDependencies": {
"@4tw/cypress-drag-drop": "2.0.0",
@@ -53,7 +53,7 @@
"babel-eslint": "10.1.0",
"cypress": "8.3.1",
"cypress-file-upload": "5.0.8",
- "esbuild": "0.12.25",
+ "esbuild": "0.12.26",
"eslint": "7.32.0",
"eslint-plugin-vue": "7.17.0",
"express": "4.17.1",
@@ -61,7 +61,7 @@
"jest": "27.1.1",
"rollup-plugin-terser": "7.0.2",
"rollup-plugin-visualizer": "5.5.2",
- "sass": "1.39.0",
+ "sass": "1.39.2",
"ts-jest": "27.0.5",
"typescript": "4.4.2",
"vite": "2.5.6",
@@ -72,7 +72,7 @@
"vue-router": "3.5.2",
"vue-template-compiler": "2.6.14",
"wait-on": "6.0.0",
- "workbox-cli": "6.2.4"
+ "workbox-cli": "6.3.0"
},
"eslintConfig": {
"root": true,
diff --git a/src/App.vue b/src/App.vue
index f11135358..a02b72695 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,11 +23,9 @@
diff --git a/src/components/tasks/mixins/taskList.js b/src/components/tasks/mixins/taskList.js
index de55f9940..cd67e7ce1 100644
--- a/src/components/tasks/mixins/taskList.js
+++ b/src/components/tasks/mixins/taskList.js
@@ -1,17 +1,70 @@
-import TaskCollectionService from '../../../services/taskCollection'
+import TaskCollectionService from '@/services/taskCollection'
import cloneDeep from 'lodash/cloneDeep'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
+// FIXME: merge with DEFAULT_PARAMS in filters.vue
+const DEFAULT_PARAMS = {
+ sort_by: ['position', 'id'],
+ order_by: ['asc', 'desc'],
+ filter_by: ['done'],
+ filter_value: ['false'],
+ filter_comparator: ['equals'],
+ filter_concat: 'and',
+}
+
+function createPagination(totalPages, currentPage) {
+ const pages = []
+ for (let i = 0; i < totalPages; i++) {
+
+ // Show ellipsis instead of all pages
+ if (
+ i > 0 && // Always at least the first page
+ (i + 1) < totalPages && // And the last page
+ (
+ // And the current with current + 1 and current - 1
+ (i + 1) > currentPage + 1 ||
+ (i + 1) < currentPage - 1
+ )
+ ) {
+ // Only add an ellipsis if the last page isn't already one
+ if (pages[i - 1] && !pages[i - 1].isEllipsis) {
+ pages.push({
+ number: 0,
+ isEllipsis: true,
+ })
+ }
+ continue
+ }
+
+ pages.push({
+ number: i + 1,
+ isEllipsis: false,
+ })
+ }
+ return pages
+}
+
+export function getRouteForPagination(page = 1, type = 'list') {
+ return {
+ name: 'list.' + type,
+ params: {
+ type: type,
+ },
+ query: {
+ page: page,
+ },
+ }
+}
+
/**
* This mixin provides a base set of methods and properties to get tasks on a list.
*/
export default {
data() {
return {
- taskCollectionService: TaskCollectionService,
+ taskCollectionService: new TaskCollectionService(),
tasks: [],
- pages: [],
currentPage: 0,
loadedList: null,
@@ -20,27 +73,21 @@ export default {
searchTerm: '',
showTaskFilter: false,
- params: {
- sort_by: ['position', 'id'],
- order_by: ['asc', 'desc'],
- filter_by: ['done'],
- filter_value: ['false'],
- filter_comparator: ['equals'],
- filter_concat: 'and',
- },
+ params: DEFAULT_PARAMS,
}
},
watch: {
- '$route.query': 'loadTasksForPage', // Only listen for query path changes
+ // Only listen for query path changes
+ '$route.query': {
+ handler: 'loadTasksForPage',
+ immediate: true,
+ },
'$route.path': 'loadTasksOnSavedFilter',
},
- beforeMount() {
- // Triggering loading the tasks in beforeMount lets the component maintain the current page, therefore the page
- // is not lost after navigating back from a task detail page for example.
- this.loadTasksForPage(this.$route.query)
- },
- created() {
- this.taskCollectionService = new TaskCollectionService()
+ computed: {
+ pages() {
+ return createPagination(this.taskCollectionService.totalPages, this.currentPage)
+ },
},
methods: {
loadTasks(
@@ -80,48 +127,20 @@ export default {
return
}
- this.$set(this, 'tasks', [])
+ this.tasks = []
this.taskCollectionService.getAll(list, params, page)
.then(r => {
- this.$set(this, 'tasks', r)
- this.$set(this, 'pages', [])
+ this.tasks = r
this.currentPage = page
- for (let i = 0; i < this.taskCollectionService.totalPages; i++) {
-
- // Show ellipsis instead of all pages
- if (
- i > 0 && // Always at least the first page
- (i + 1) < this.taskCollectionService.totalPages && // And the last page
- (
- // And the current with current + 1 and current - 1
- (i + 1) > this.currentPage + 1 ||
- (i + 1) < this.currentPage - 1
- )
- ) {
- // Only add an ellipsis if the last page isn't already one
- if (this.pages[i - 1] && !this.pages[i - 1].isEllipsis) {
- this.pages.push({
- number: 0,
- isEllipsis: true,
- })
- }
- continue
- }
-
- this.pages.push({
- number: i + 1,
- isEllipsis: false,
- })
- }
-
this.loadedList = cloneDeep(currentList)
})
.catch(e => {
this.error(e)
})
},
+
loadTasksForPage(e) {
// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
let page = Number(e.page)
@@ -177,17 +196,6 @@ export default {
this.showTaskSearch = false
}, 200)
},
- getRouteForPagination(page = 1, type = 'list') {
- return {
- name: 'list.' + type,
- params: {
- type: type,
- },
- query: {
- page: page,
- },
- }
- },
saveTaskPosition(e) {
this.drag = false
@@ -205,5 +213,6 @@ export default {
this.error(e)
})
},
+ getRouteForPagination,
},
}
\ No newline at end of file
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index d96769559..e211df741 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -7,16 +7,17 @@
{{ $t('misc.saving') }}
-
+
{{ $t('misc.saved') }}
@@ -25,22 +26,22 @@