Compare commits

..

1 Commits

Author SHA1 Message Date
kolaente e5918ac488
revert: import bulma utilities global (#718)
Ref: 0ed3cf25
2021-09-10 17:09:04 +02:00
4 changed files with 55 additions and 71 deletions

View File

@ -11,7 +11,7 @@
</x-button> </x-button>
</div> </div>
<filter-popup <filter-popup
@change="loadTasks()" @change="loadTasks"
:visible="showTaskFilter" :visible="showTaskFilter"
v-model="params" v-model="params"
/> />

View File

@ -1,4 +1,4 @@
import TaskCollectionService from '@/services/taskCollection' import TaskCollectionService from '../../../services/taskCollection'
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition' import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
@ -12,59 +12,16 @@ const DEFAULT_PARAMS = {
filter_concat: 'and', 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. * This mixin provides a base set of methods and properties to get tasks on a list.
*/ */
export default { export default {
data() { data() {
return { return {
taskCollectionService: new TaskCollectionService(), taskCollectionService: TaskCollectionService,
tasks: [], tasks: [],
pages: [],
currentPage: 0, currentPage: 0,
loadedList: null, loadedList: null,
@ -77,17 +34,16 @@ export default {
} }
}, },
watch: { watch: {
// Only listen for query path changes '$route.query': 'loadTasksForPage', // Only listen for query path changes
'$route.query': {
handler: 'loadTasksForPage',
immediate: true,
},
'$route.path': 'loadTasksOnSavedFilter', '$route.path': 'loadTasksOnSavedFilter',
}, },
computed: { beforeMount() {
pages() { // Triggering loading the tasks in beforeMount lets the component maintain the current page, therefore the page
return createPagination(this.taskCollectionService.totalPages, this.currentPage) // is not lost after navigating back from a task detail page for example.
}, this.loadTasksForPage(this.$route.query)
},
created() {
this.taskCollectionService = new TaskCollectionService()
}, },
methods: { methods: {
loadTasks( loadTasks(
@ -127,20 +83,48 @@ export default {
return return
} }
this.tasks = [] this.$set(this, 'tasks', [])
this.taskCollectionService.getAll(list, params, page) this.taskCollectionService.getAll(list, params, page)
.then(r => { .then(r => {
this.tasks = r this.$set(this, 'tasks', r)
this.$set(this, 'pages', [])
this.currentPage = page 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) this.loadedList = cloneDeep(currentList)
}) })
.catch(e => { .catch(e => {
this.error(e) this.error(e)
}) })
}, },
loadTasksForPage(e) { loadTasksForPage(e) {
// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu // 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) let page = Number(e.page)
@ -196,6 +180,17 @@ export default {
this.showTaskSearch = false this.showTaskSearch = false
}, 200) }, 200)
}, },
getRouteForPagination(page = 1, type = 'list') {
return {
name: 'list.' + type,
params: {
type: type,
},
query: {
page: page,
},
}
},
saveTaskPosition(e) { saveTaskPosition(e) {
this.drag = false this.drag = false
@ -213,6 +208,5 @@ export default {
this.error(e) this.error(e)
}) })
}, },
getRouteForPagination,
}, },
} }

View File

@ -1,12 +1,4 @@
// utilities are imported in variables.scss @import "../../../node_modules/bulma/bulma";
@import "../../../node_modules/bulma/sass/base/_all";
@import "../../../node_modules/bulma/sass/elements/_all";
@import "../../../node_modules/bulma/sass/form/_all";
@import "../../../node_modules/bulma/sass/components/_all";
@import "../../../node_modules/bulma/sass/grid/_all";
@import "../../../node_modules/bulma/sass/helpers/_all";
@import "../../../node_modules/bulma/sass/layout/_all";
@import "fonts"; @import "fonts";

View File

@ -1,5 +1,3 @@
@import "../../../node_modules/bulma/sass/utilities/_all";
@import 'colors'; @import 'colors';
@import 'shadows'; @import 'shadows';
@import 'variables'; @import 'variables';