local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: task sorting in table

Browse source 
Resolves https://kolaente.dev/vikunja/frontend/issues/2118
This commit is contained in:
kolaente 2022-07-13 16:19:58 +02:00
parent 579cff647d
commit 4a8b7a726a
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 190 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/composables/taskList.ts
View file

@ -108,5 +108,6 @@ export function useTaskList(listId) {
loadTasks, loadTasks,
searchTerm: search, searchTerm: search,
params, params,
sortByParam: sortBy,
} }
} }

44
src/views/list/ListTable.vue
View file

@ -55,7 +55,7 @@
</card> </card>
</template> </template>
</popup> </popup>
<filter-popup v-model="params" /> <filter-popup v-model="params"/>
</div> </div>
</div> </div>
</template> </template>
@ -131,7 +131,7 @@
</router-link> </router-link>
</td> </td>
<td v-if="activeColumns.done"> <td v-if="activeColumns.done">
<Done :is-done="t.done" variant="small" /> <Done :is-done="t.done" variant="small"/>
</td> </td>
<td v-if="activeColumns.title"> <td v-if="activeColumns.title">
<router-link :to="taskDetailRoutes[t.id]">{{ t.title }}</router-link> <router-link :to="taskDetailRoutes[t.id]">{{ t.title }}</router-link>
@ -180,9 +180,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { toRef, computed, Ref } from 'vue' import {toRef, computed, Ref} from 'vue'
import { useStorage } from '@vueuse/core' import {useStorage} from '@vueuse/core'
import ListWrapper from './ListWrapper.vue' import ListWrapper from './ListWrapper.vue'
import Done from '@/components/misc/Done.vue' import Done from '@/components/misc/Done.vue'
@ -196,7 +196,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
import Pagination from '@/components/misc/pagination.vue' import Pagination from '@/components/misc/pagination.vue'
import Popup from '@/components/misc/popup.vue' import Popup from '@/components/misc/popup.vue'
import { useTaskList } from '@/composables/taskList' import {useTaskList} from '@/composables/taskList'
import TaskModel from '@/models/task' import TaskModel from '@/models/task'
const ACTIVE_COLUMNS_DEFAULT = { const ACTIVE_COLUMNS_DEFAULT = {
@ -225,24 +225,24 @@ const props = defineProps({
type Order = 'asc' | 'desc' | 'none' type Order = 'asc' | 'desc' | 'none'
interface SortBy { interface SortBy {
id : Order id: Order
done? : Order done?: Order
title? : Order title?: Order
priority? : Order priority?: Order
due_date? : Order due_date?: Order
start_date? : Order start_date?: Order
end_date? : Order end_date?: Order
percent_done? : Order percent_done?: Order
created? : Order created?: Order
updated? : Order updated?: Order
} }
const SORT_BY_DEFAULT : SortBy = { const SORT_BY_DEFAULT: SortBy = {
id: 'desc', id: 'desc',
} }
const activeColumns = useStorage('tableViewColumns', { ...ACTIVE_COLUMNS_DEFAULT }) const activeColumns = useStorage('tableViewColumns', {...ACTIVE_COLUMNS_DEFAULT})
const sortBy = useStorage<SortBy>('tableViewSortBy', { ...SORT_BY_DEFAULT }) const sortBy = useStorage<SortBy>('tableViewSortBy', {...SORT_BY_DEFAULT})
const taskList = useTaskList(toRef(props, 'listId')) const taskList = useTaskList(toRef(props, 'listId'))
@ -251,8 +251,9 @@ const {
params, params,
totalPages, totalPages,
currentPage, currentPage,
sortByParam,
} = taskList } = taskList
const tasks : Ref<TaskModel[]> = taskList.tasks const tasks: Ref<TaskModel[]> = taskList.tasks
Object.assign(params.value, { Object.assign(params.value, {
filter_by: [], filter_by: [],
@ -261,7 +262,7 @@ Object.assign(params.value, {
}) })
// FIXME: by doing this we can have multiple sort orders // FIXME: by doing this we can have multiple sort orders
function sort(property : keyof SortBy) { function sort(property: keyof SortBy) {
const order = sortBy.value[property] const order = sortBy.value[property]
if (typeof order === 'undefined' || order === 'none') { if (typeof order === 'undefined' || order === 'none') {
sortBy.value[property] = 'desc' sortBy.value[property] = 'desc'
@ -270,6 +271,7 @@ function sort(property : keyof SortBy) {
} else { } else {
delete sortBy.value[property] delete sortBy.value[property]
} }
sortByParam.value = sortBy.value
} }
// TODO: re-enable opening task detail in modal // TODO: re-enable opening task detail in modal
@ -279,7 +281,7 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
id, id,
{ {
name: 'task.detail', name: 'task.detail',
params: { id }, params: {id},
// state: { backdropView: router.currentRoute.value.fullPath }, // state: { backdropView: router.currentRoute.value.fullPath },
}, },
])), ])),