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

fix: related tasks add button and task dates in read only view #1268

Merged
konrad merged 5 commits from fix/read-only-layout into main 2022-02-06 15:58:53 +00:00
Conversation 2 Commits 5 Files Changed 3 +69 -52
3 changed files with 69 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/tasks/partials/createdUpdated.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<p class="created">
<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
<i18n-t keypath="task.detail.created">
<span>{{ formatDateSince(task.created) }}</span>
{{ task.createdBy.getDisplayName() }}
</i18n-t>
</time>
<template v-if="+new Date(task.created) !== +new Date(task.updated)">
<br/>
<!-- Computed properties to show the actual date every time it gets updated -->
<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
<i18n-t keypath="task.detail.updated">
<span>{{ updatedSince }}</span>
</i18n-t>
</time>
</template>
<template v-if="task.done">
<br/>
<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
<i18n-t keypath="task.detail.doneAt">
<span>{{ doneSince }}</span>
</i18n-t>
</time>
</template>
</p>
</template>
konrad marked this conversation as resolved Outdated
dpschen commented 2022-01-04 20:36:22 +00:00
Outdated
Review
Copy Link

As the failing test says:

/drone/src/src/components/tasks/partials/createdUpdated.vue
  28:7  error  Destructuring the `props` will cause the value to lose reactivity  vue/no-setup-props-destructure
  32:3  error  Missing trailing comma                                             comma-dangle

*EDIT: you can however use toRefs and then use task.value

As the failing test says: ``` /drone/src/src/components/tasks/partials/createdUpdated.vue 28:7 error Destructuring the `props` will cause the value to lose reactivity vue/no-setup-props-destructure 32:3 error Missing trailing comma comma-dangle ``` ***EDIT:** you can however use [toRefs](https://v3.vuejs.org/api/refs-api.html#torefs) and then use `task.value`
konrad commented 2022-01-08 11:41:43 +00:00
Outdated
Review
Copy Link

Changed it to use toRefs.

Changed it to use `toRefs`.
<script lang="ts" setup>
import {computed, toRefs} from 'vue'
import TaskModel from '@/models/task'
import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
const props = defineProps({
task: {
type: TaskModel,
required: true,
},
})
const {task} = toRefs(props)
const updatedSince = computed(() => formatDateSince(task.value.updated))
const updatedFormatted = computed(() => formatDateLong(task.value.updated))
const doneSince = computed(() => formatDateSince(task.value.doneAt))
const doneFormatted = computed(() => formatDateLong(task.value.doneAt))
</script>

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

@ -1,7 +1,7 @@
<template>
<div class="task-relations">
<x-button
v-if="Object.keys(relatedTasks).length > 0"
v-if="editEnabled && Object.keys(relatedTasks).length > 0"
@click="showNewRelationForm = !showNewRelationForm"
class="is-pulled-right add-task-relation-button"
:class="{'is-active': showNewRelationForm}"

50
src/views/tasks/TaskDetailView.vue
View File

@ -246,11 +246,11 @@
<!-- Comments -->
<comments :can-write="canWrite" :task-id="taskId"/>
</div>
<div class="column is-one-third action-buttons">
<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4" v-if="shouldShowClosePopup">
<div class="column is-one-third action-buttons" v-if="canWrite || shouldShowClosePopup">
<BaseButton @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4 has-text-primary" v-if="shouldShowClosePopup">
konrad marked this conversation as resolved Outdated
dpschen commented 2022-01-04 20:38:02 +00:00
Outdated
Review
Copy Link

Should be a <BaseButton>

Should be a `<BaseButton>`
konrad commented 2022-01-08 11:45:52 +00:00
Outdated
Review
Copy Link

Done.

Done.
<icon icon="arrow-left"/>
{{ $t('task.detail.closePopup') }}
</a>
</BaseButton>
<template v-if="canWrite">
<x-button
:class="{'is-success': !task.done}"
@ -386,33 +386,11 @@
</template>
<!-- Created / Updated [by] -->
<p class="created">
<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
<i18n-t keypath="task.detail.created">
<span>{{ formatDateSince(task.created) }}</span>
{{ task.createdBy.getDisplayName() }}
</i18n-t>
</time>
<template v-if="+new Date(task.created) !== +new Date(task.updated)">
<br/>
<!-- Computed properties to show the actual date every time it gets updated -->
<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
<i18n-t keypath="task.detail.updated">
<span>{{ updatedSince }}</span>
</i18n-t>
</time>
</template>
<template v-if="task.done">
<br/>
<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
<i18n-t keypath="task.detail.doneAt">
<span>{{ doneSince }}</span>
</i18n-t>
</time>
</template>
</p>
<created-updated :task="task"/>
</div>
</div>
<!-- Created / Updated [by] -->
<created-updated :task="task" v-if="!canWrite && !shouldShowClosePopup"/>
</div>
<transition name="modal">
@ -453,18 +431,22 @@ import description from '@/components/tasks/partials/description.vue'
import ColorPicker from '../../components/input/colorPicker'
import heading from '@/components/tasks/partials/heading.vue'
import Datepicker from '@/components/input/datepicker.vue'
import BaseButton from '@/components/base/BaseButton'
import {playPop} from '@/helpers/playPop'
import TaskSubscription from '@/components/misc/subscription.vue'
import {CURRENT_LIST} from '@/store/mutation-types'
import {uploadFile} from '@/helpers/attachments'
import ChecklistSummary from '../../components/tasks/partials/checklist-summary'
import CreatedUpdated from '@/components/tasks/partials/createdUpdated'
export default {
name: 'TaskDetailView',
compatConfig: { ATTR_FALSE_VALUE: false },
components: {
BaseButton,
CreatedUpdated,
ChecklistSummary,
TaskSubscription,
Datepicker,
@ -560,18 +542,6 @@ export default {
canWrite() {
return typeof this.task !== 'undefined' && typeof this.task.maxRight !== 'undefined' && this.task.maxRight > rights.READ
},
updatedSince() {
return this.formatDateSince(this.task.updated)
},
updatedFormatted() {
return this.formatDate(this.task.updated)
},
doneSince() {
return this.formatDateSince(this.task.doneAt)
},
doneFormatted() {
return this.formatDate(this.task.doneAt)
},
hasAttachments() {
return this.$store.state.attachments.attachments.length > 0
},