vikunja/frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

chore: move all logic for building related tasks and search results to a computed prop
Some checks failed
continuous-integration/drone/pr Build is failing
Details

Browse Source
This commit is contained in:
kolaente 2021-11-02 19:52:36 +01:00
parent 143e7fb7fc
commit 4e913af56d
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 73 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/tasks/partials/relatedTasks.vue
View File

@ -29,7 +29,7 @@
:placeholder="$t('task.relation.searchPlaceholder')"
@search="findTasks"
:loading="taskService.loading"
:search-results="foundTasks"
:search-results="mappedFoundTasks"
label="title"
v-model="newTaskRelationTask"
:creatable="true"
@ -43,16 +43,14 @@
v-if="props.option.listId !== listId"
>
<span
v-if="namespaceIsDifferent(props.option.listId)"
v-if="props.option.differentNamespace !== null"
v-tooltip="$t('task.relation.differentNamespace')">
{{
$store.getters['namespaces/getListAndNamespaceById'](props.option.listId).namespace.title
}} >
{{ props.option.differentNamespace }} >
</span>
<span v-tooltip="$t('task.relation.differentList')">
{{
$store.getters['lists/getListById'](props.option.listId)?.title || ''
}} >
<span
v-if="props.option.differentList !== null"
v-tooltip="$t('task.relation.differentList')">
{{ props.option.differentList }} >
</span>
</span>
{{ props.option.title }}
@ -81,42 +79,38 @@
</template>
</transition-group>
<div :key="kind" class="related-tasks" v-for="(rts, kind ) in relatedTasks">
<template v-if="rts.length > 0">
<span class="title">{{ relationKindTitle(kind, rts.length) }}</span>
<div class="tasks noborder">
<div :key="t.id" class="task" v-for="t in rts.filter(t => t)">
<router-link :to="{ name: $route.name, params: { id: t.id } }">
<span :class="{ 'done': t.done}" class="tasktext">
<div :key="kind" class="related-tasks" v-for="(rts, kind ) in mappedRelatedTasks">
<span class="title">{{ rts.title }}</span>
<div class="tasks noborder">
<div :key="t.id" class="task" v-for="t in rts.tasks">
<router-link :to="{ name: $route.name, params: { id: t.id } }">
<span :class="{ 'done': t.done}" class="tasktext">
<span
class="different-list"
v-if="t.listId !== listId"
>
<span
class="different-list"
v-if="t.listId !== listId"
>
<span
v-if="namespaceIsDifferent(t.listId)"
v-tooltip="$t('task.relation.differentNamespace')">
{{
$store.getters['namespaces/getListAndNamespaceById'](t.listId).namespace.title
}} >
</span>
<span v-tooltip="$t('task.relation.differentList')">
{{
$store.getters['lists/getListById'](t.listId)?.title || ''
}} >
</span>
v-if="t.differentNamespace !== null"
v-tooltip="$t('task.relation.differentNamespace')">
{{ t.differentNamespace }} >
</span>
<span
v-if="t.differentList !== null"
v-tooltip="$t('task.relation.differentList')">
{{ t.differentList }} >
</span>
{{ t.title }}
</span>
</router-link>
<a
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}"
class="remove"
v-if="editEnabled">
<icon icon="trash-alt"/>
</a>
</div>
{{ t.title }}
</span>
</router-link>
<a
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}"
class="remove"
v-if="editEnabled">
<icon icon="trash-alt"/>
</a>
</div>
</template>
</div>
</div>
<p class="none" v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0">
{{ $t('task.relation.noneYet') }}
@ -204,13 +198,16 @@ export default {
return Object.keys(this.relatedTasks).length === 0 || this.showNewRelationForm
},
namespace() {
return this.$store.getters['namespaces/getListAndNamespaceById'](this.listId)?.namespace
return this.$store.getters['namespaces/getListAndNamespaceById'](this.listId, true)?.namespace
},
namespaceIsDifferent() {
return listId => {
const namespace = this.$store.getters['namespaces/getListAndNamespaceById'](listId)
return namespace !== null && namespace.id !== this.namespace.id
}
mappedRelatedTasks() {
return Object.keys(this.relatedTasks).map(kind => ({
title: this.$tc(`task.relation.kinds.${kind}`, this.relatedTasks[kind].length),
tasks: this.mapRelatedTasks(this.relatedTasks[kind]),
}))
},
mappedFoundTasks() {
return this.mapRelatedTasks(this.foundTasks.filter(t => t.id !== this.taskId))
},
},
methods: {
@ -274,6 +271,29 @@ export default {
relationKindTitle(kind, length) {
return this.$tc(`task.relation.kinds.${kind}`, length)
},
mapRelatedTasks(tasks) {
return tasks
.map(task => {
// by doing this here once we can save a lot of duplicate calls in the template
const {
list,
namespace,
} = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
return {
...task,
differentNamespace:
(namespace !== null &&
namespace.id !== this.namespace.id &&
namespace?.title) || null,
differentList:
(list !== null &&
task.listId !== this.listId &&
list?.title) || null,
}
})
},
},
}
</script>

7
src/store/modules/namespaces.js
View File

@ -76,8 +76,13 @@ export default {
},
},
getters: {
getListAndNamespaceById: state => listId => {
getListAndNamespaceById: state => (listId, ignorePseudoNamespaces = false) => {
for (const n in state.namespaces) {
if(ignorePseudoNamespaces && state.namespaces[n].id < 0) {
continue
}
for (const l in state.namespaces[n].lists) {
if (state.namespaces[n].lists[l].id === listId) {
return {