2019-04-29 21:41:39 +00:00
|
|
|
<template>
|
2024-02-07 11:18:19 +00:00
|
|
|
<ProjectWrapper
|
|
|
|
class="project-list"
|
|
|
|
:project-id="projectId"
|
2024-03-18 23:46:18 +00:00
|
|
|
:view-id
|
2024-02-07 11:18:19 +00:00
|
|
|
>
|
2021-11-14 20:33:53 +00:00
|
|
|
<template #header>
|
2024-03-13 16:19:15 +00:00
|
|
|
<div class="filter-container">
|
|
|
|
<FilterPopup
|
|
|
|
v-if="!isSavedFilter(project)"
|
|
|
|
v-model="params"
|
|
|
|
@update:modelValue="prepareFiltersAndLoadTasks()"
|
|
|
|
/>
|
2020-01-31 10:05:53 +00:00
|
|
|
</div>
|
2021-11-14 20:33:53 +00:00
|
|
|
</template>
|
2020-03-04 19:27:27 +00:00
|
|
|
|
2021-11-14 20:33:53 +00:00
|
|
|
<template #default>
|
2024-02-07 11:18:19 +00:00
|
|
|
<div
|
|
|
|
:class="{ 'is-loading': loading }"
|
|
|
|
class="loader-container is-max-width-desktop list-view"
|
|
|
|
>
|
|
|
|
<card
|
|
|
|
:padding="false"
|
|
|
|
:has-content="false"
|
|
|
|
class="has-overflow"
|
|
|
|
>
|
|
|
|
<AddTask
|
|
|
|
v-if="!project.isArchived && canWrite"
|
|
|
|
ref="addTaskRef"
|
|
|
|
class="list-view__add-task d-print-none"
|
|
|
|
:default-position="firstNewPosition"
|
|
|
|
@taskAdded="updateTaskList"
|
|
|
|
/>
|
2019-04-29 21:41:39 +00:00
|
|
|
|
2024-02-07 11:18:19 +00:00
|
|
|
<Nothing v-if="ctaVisible && tasks.length === 0 && !loading">
|
|
|
|
{{ $t('project.list.empty') }}
|
|
|
|
<ButtonLink
|
|
|
|
v-if="project.id > 0"
|
|
|
|
@click="focusNewTaskInput()"
|
|
|
|
>
|
|
|
|
{{ $t('project.list.newTaskCta') }}
|
|
|
|
</ButtonLink>
|
|
|
|
</Nothing>
|
2020-07-04 17:12:15 +00:00
|
|
|
|
2022-11-17 15:35:18 +00:00
|
|
|
|
2024-02-07 11:18:19 +00:00
|
|
|
<draggable
|
|
|
|
v-if="tasks && tasks.length > 0"
|
|
|
|
v-bind="DRAG_OPTIONS"
|
|
|
|
v-model="tasks"
|
|
|
|
group="tasks"
|
|
|
|
handle=".handle"
|
2021-07-29 11:05:33 +00:00
|
|
|
:disabled="!canWrite"
|
2024-02-07 11:18:19 +00:00
|
|
|
item-key="id"
|
|
|
|
tag="ul"
|
|
|
|
:component-data="{
|
|
|
|
class: {
|
|
|
|
tasks: true,
|
|
|
|
'dragging-disabled': !canWrite || isAlphabeticalSorting
|
|
|
|
},
|
|
|
|
type: 'transition-group'
|
|
|
|
}"
|
|
|
|
@start="() => drag = true"
|
|
|
|
@end="saveTaskPosition"
|
2020-09-05 20:16:17 +00:00
|
|
|
>
|
2024-02-07 11:18:19 +00:00
|
|
|
<template #item="{element: t}">
|
|
|
|
<SingleTaskInProject
|
|
|
|
:show-list-color="false"
|
|
|
|
:disabled="!canWrite"
|
|
|
|
:can-mark-as-done="canWrite || isSavedFilter(project)"
|
|
|
|
:the-task="t"
|
|
|
|
:all-tasks="allTasks"
|
|
|
|
@taskUpdated="updateTasks"
|
|
|
|
>
|
|
|
|
<template v-if="canWrite">
|
|
|
|
<span class="icon handle">
|
2024-03-18 23:46:18 +00:00
|
|
|
<icon icon="grip-lines" />
|
2024-02-07 11:18:19 +00:00
|
|
|
</span>
|
|
|
|
</template>
|
|
|
|
</SingleTaskInProject>
|
2021-08-20 13:46:41 +00:00
|
|
|
</template>
|
2024-02-07 11:18:19 +00:00
|
|
|
</draggable>
|
2019-12-03 18:09:12 +00:00
|
|
|
|
2024-03-13 16:19:15 +00:00
|
|
|
<Pagination
|
2024-02-07 11:18:19 +00:00
|
|
|
:total-pages="totalPages"
|
|
|
|
:current-page="currentPage"
|
|
|
|
/>
|
|
|
|
</card>
|
|
|
|
</div>
|
2021-11-14 20:33:53 +00:00
|
|
|
</template>
|
2022-11-13 21:04:57 +00:00
|
|
|
</ProjectWrapper>
|
2019-04-29 21:41:39 +00:00
|
|
|
</template>
|
|
|
|
|
2022-02-15 12:07:34 +00:00
|
|
|
<script lang="ts">
|
2024-03-13 16:19:15 +00:00
|
|
|
export default {name: 'List'}
|
2022-09-28 16:08:23 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2023-09-07 11:43:03 +00:00
|
|
|
import {ref, computed, nextTick, onMounted, watch} from 'vue'
|
2022-09-28 16:08:23 +00:00
|
|
|
import draggable from 'zhyswan-vuedraggable'
|
2021-10-25 20:17:23 +00:00
|
|
|
|
2022-11-13 21:04:57 +00:00
|
|
|
import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
|
2022-06-22 19:53:20 +00:00
|
|
|
import ButtonLink from '@/components/misc/ButtonLink.vue'
|
2022-07-12 09:59:39 +00:00
|
|
|
import AddTask from '@/components/tasks/add-task.vue'
|
2022-11-13 21:04:57 +00:00
|
|
|
import SingleTaskInProject from '@/components/tasks/partials/singleTaskInProject.vue'
|
|
|
|
import FilterPopup from '@/components/project/partials/filter-popup.vue'
|
2021-07-25 13:27:15 +00:00
|
|
|
import Nothing from '@/components/misc/nothing.vue'
|
2021-09-21 19:03:38 +00:00
|
|
|
import Pagination from '@/components/misc/pagination.vue'
|
2022-11-13 21:04:57 +00:00
|
|
|
import {ALPHABETICAL_SORT} from '@/components/project/partials/filters.vue'
|
2019-04-29 21:41:39 +00:00
|
|
|
|
2022-10-27 13:47:48 +00:00
|
|
|
import {useTaskList} from '@/composables/useTaskList'
|
2022-09-28 16:08:23 +00:00
|
|
|
import {RIGHTS as Rights} from '@/constants/rights'
|
|
|
|
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
|
2022-09-06 09:36:01 +00:00
|
|
|
import type {ITask} from '@/modelTypes/ITask'
|
2022-10-27 19:56:14 +00:00
|
|
|
import {isSavedFilter} from '@/services/savedFilter'
|
2022-09-24 13:20:40 +00:00
|
|
|
|
|
|
|
import {useBaseStore} from '@/stores/base'
|
2022-09-23 10:55:53 +00:00
|
|
|
|
2022-11-13 21:04:57 +00:00
|
|
|
import type {IProject} from '@/modelTypes/IProject'
|
2024-03-15 21:18:44 +00:00
|
|
|
import type {IProjectView} from '@/modelTypes/IProjectView'
|
2024-03-16 10:54:59 +00:00
|
|
|
import TaskPositionService from '@/services/taskPosition'
|
|
|
|
import TaskPositionModel from '@/models/taskPosition'
|
2021-07-28 19:56:29 +00:00
|
|
|
|
2023-06-20 12:39:59 +00:00
|
|
|
const {
|
|
|
|
projectId,
|
2024-03-16 14:00:00 +00:00
|
|
|
viewId,
|
2023-06-20 12:39:59 +00:00
|
|
|
} = defineProps<{
|
|
|
|
projectId: IProject['id'],
|
2024-03-16 14:00:00 +00:00
|
|
|
viewId: IProjectView['id'],
|
2023-06-20 12:39:59 +00:00
|
|
|
}>()
|
2021-12-10 14:29:28 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
const ctaVisible = ref(false)
|
2021-07-28 19:56:29 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
const drag = ref(false)
|
|
|
|
const DRAG_OPTIONS = {
|
|
|
|
animation: 100,
|
2022-11-17 15:35:18 +00:00
|
|
|
ghostClass: 'task-ghost',
|
2022-09-28 16:08:23 +00:00
|
|
|
} as const
|
2021-10-03 13:54:24 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
const {
|
2023-09-07 11:43:03 +00:00
|
|
|
tasks: allTasks,
|
2022-09-28 16:08:23 +00:00
|
|
|
loading,
|
|
|
|
totalPages,
|
|
|
|
currentPage,
|
|
|
|
loadTasks,
|
|
|
|
params,
|
2022-11-08 15:16:11 +00:00
|
|
|
sortByParam,
|
2024-03-16 14:00:00 +00:00
|
|
|
} = useTaskList(() => projectId, () => viewId, {position: 'asc'})
|
2021-11-01 17:19:59 +00:00
|
|
|
|
2024-03-16 10:54:59 +00:00
|
|
|
const taskPositionService = ref(new TaskPositionService())
|
|
|
|
|
2023-09-07 11:43:03 +00:00
|
|
|
const tasks = ref<ITask[]>([])
|
|
|
|
watch(
|
|
|
|
allTasks,
|
|
|
|
() => {
|
2023-12-13 18:22:28 +00:00
|
|
|
tasks.value = [...allTasks.value]
|
|
|
|
if (projectId < 0) {
|
|
|
|
return
|
|
|
|
}
|
2024-01-15 20:46:47 +00:00
|
|
|
const tasksById = {}
|
|
|
|
tasks.value.forEach(t => tasksById[t.id] = true)
|
|
|
|
|
|
|
|
tasks.value = tasks.value.filter(t => {
|
|
|
|
if (typeof t.relatedTasks?.parenttask === 'undefined') {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
|
|
|
|
// If the task is a subtask, make sure the parent task is available in the current view as well
|
|
|
|
for (const pt of t.relatedTasks.parenttask) {
|
2024-03-13 16:19:15 +00:00
|
|
|
if (typeof tasksById[pt.id] === 'undefined') {
|
2024-01-15 20:46:47 +00:00
|
|
|
return true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return false
|
|
|
|
})
|
2023-09-07 11:43:03 +00:00
|
|
|
},
|
|
|
|
)
|
2021-07-28 19:56:29 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
const isAlphabeticalSorting = computed(() => {
|
|
|
|
return params.value.sort_by.find(sortBy => sortBy === ALPHABETICAL_SORT) !== undefined
|
|
|
|
})
|
2021-12-21 16:29:49 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
const firstNewPosition = computed(() => {
|
|
|
|
if (tasks.value.length === 0) {
|
|
|
|
return 0
|
|
|
|
}
|
2021-10-11 17:37:20 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
return calculateItemPosition(null, tasks.value[0].position)
|
|
|
|
})
|
2021-11-13 19:48:06 +00:00
|
|
|
|
2022-09-24 13:20:40 +00:00
|
|
|
const baseStore = useBaseStore()
|
2022-11-13 21:04:57 +00:00
|
|
|
const project = computed(() => baseStore.currentProject)
|
2021-11-13 19:48:06 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
const canWrite = computed(() => {
|
2022-11-13 21:04:57 +00:00
|
|
|
return project.value.maxRight > Rights.READ && project.value.id > 0
|
2022-09-28 16:08:23 +00:00
|
|
|
})
|
2021-09-07 15:04:46 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
onMounted(async () => {
|
|
|
|
await nextTick()
|
|
|
|
ctaVisible.value = true
|
2021-12-10 14:29:28 +00:00
|
|
|
})
|
2022-09-28 16:08:23 +00:00
|
|
|
|
|
|
|
const addTaskRef = ref<typeof AddTask | null>(null)
|
2024-03-13 16:19:15 +00:00
|
|
|
|
2022-09-28 16:08:23 +00:00
|
|
|
function focusNewTaskInput() {
|
|
|
|
addTaskRef.value?.focusTaskInput()
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateTaskList(task: ITask) {
|
2024-03-13 16:19:15 +00:00
|
|
|
if (isAlphabeticalSorting.value) {
|
2022-09-28 16:08:23 +00:00
|
|
|
// reload tasks with current filter and sorting
|
2022-11-04 13:39:14 +00:00
|
|
|
loadTasks()
|
2024-03-13 16:19:15 +00:00
|
|
|
} else {
|
2023-12-13 18:15:48 +00:00
|
|
|
allTasks.value = [
|
2022-09-28 16:08:23 +00:00
|
|
|
task,
|
2023-12-13 18:15:48 +00:00
|
|
|
...allTasks.value,
|
2022-09-28 16:08:23 +00:00
|
|
|
]
|
|
|
|
}
|
|
|
|
|
2022-09-24 13:20:40 +00:00
|
|
|
baseStore.setHasTasks(true)
|
2022-09-28 16:08:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function updateTasks(updatedTask: ITask) {
|
|
|
|
for (const t in tasks.value) {
|
|
|
|
if (tasks.value[t].id === updatedTask.id) {
|
|
|
|
tasks.value[t] = updatedTask
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function saveTaskPosition(e) {
|
|
|
|
drag.value = false
|
|
|
|
|
|
|
|
const task = tasks.value[e.newIndex]
|
|
|
|
const taskBefore = tasks.value[e.newIndex - 1] ?? null
|
|
|
|
const taskAfter = tasks.value[e.newIndex + 1] ?? null
|
|
|
|
|
2024-03-16 10:54:59 +00:00
|
|
|
const position = calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null)
|
|
|
|
|
|
|
|
await taskPositionService.value.update(new TaskPositionModel({
|
|
|
|
position,
|
2024-03-16 14:00:00 +00:00
|
|
|
projectViewId: viewId,
|
2024-03-16 10:54:59 +00:00
|
|
|
taskId: task.id,
|
|
|
|
}))
|
|
|
|
tasks.value[e.newIndex] = {
|
2022-09-28 16:08:23 +00:00
|
|
|
...task,
|
2024-03-16 10:54:59 +00:00
|
|
|
position,
|
2022-09-28 16:08:23 +00:00
|
|
|
}
|
|
|
|
}
|
2022-11-08 15:16:11 +00:00
|
|
|
|
|
|
|
function prepareFiltersAndLoadTasks() {
|
2024-03-13 16:19:15 +00:00
|
|
|
if (isAlphabeticalSorting.value) {
|
|
|
|
sortByParam.value = {}
|
2022-11-08 15:16:11 +00:00
|
|
|
sortByParam.value[ALPHABETICAL_SORT] = 'asc'
|
|
|
|
}
|
2024-01-26 20:33:20 +00:00
|
|
|
|
2022-11-08 15:16:11 +00:00
|
|
|
loadTasks()
|
|
|
|
}
|
2021-07-17 21:21:46 +00:00
|
|
|
</script>
|
2021-10-18 12:21:02 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2022-11-17 15:35:18 +00:00
|
|
|
.tasks {
|
|
|
|
padding: .5rem;
|
|
|
|
}
|
2021-10-18 12:22:47 +00:00
|
|
|
|
2022-11-17 15:35:18 +00:00
|
|
|
.task-ghost {
|
|
|
|
border-radius: $radius;
|
|
|
|
background: var(--grey-100);
|
|
|
|
border: 2px dashed var(--grey-300);
|
2024-03-13 16:19:15 +00:00
|
|
|
|
2022-11-17 15:35:18 +00:00
|
|
|
* {
|
|
|
|
opacity: 0;
|
2021-10-18 12:22:47 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-17 15:35:18 +00:00
|
|
|
.list-view__add-task {
|
2021-10-18 12:21:02 +00:00
|
|
|
padding: 1rem 1rem 0;
|
|
|
|
}
|
2022-05-08 09:13:19 +00:00
|
|
|
|
|
|
|
.link-share-view .card {
|
2024-03-13 16:19:15 +00:00
|
|
|
border: none;
|
|
|
|
box-shadow: none;
|
2022-05-08 09:13:19 +00:00
|
|
|
}
|
2023-04-14 19:21:49 +00:00
|
|
|
|
|
|
|
.control.has-icons-left .icon,
|
|
|
|
.control.has-icons-right .icon {
|
|
|
|
transition: all $transition;
|
|
|
|
}
|
2024-02-06 17:29:17 +00:00
|
|
|
|
|
|
|
:deep(.single-task) {
|
|
|
|
.handle {
|
|
|
|
opacity: 1;
|
|
|
|
transition: opacity $transition;
|
|
|
|
margin-right: .25rem;
|
|
|
|
cursor: grab;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media(hover: hover) and (pointer: fine) {
|
|
|
|
& .handle {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover .handle {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-10-18 12:22:47 +00:00
|
|
|
</style>
|