Move buttons to separate component (#380)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/380 Co-authored-by: konrad <konrad@kola-entertainments.de> Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
@ -4,7 +4,7 @@
|
||||
<label class="label" for="tasktext">Task Text</label>
|
||||
<div class="control">
|
||||
<input
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
:class="{ disabled: taskService.loading }"
|
||||
:disabled="taskService.loading"
|
||||
@change="editTaskSubmit()"
|
||||
class="input"
|
||||
@ -12,7 +12,8 @@
|
||||
placeholder="The task text is here..."
|
||||
type="text"
|
||||
v-focus
|
||||
v-model="taskEditTask.title"/>
|
||||
v-model="taskEditTask.title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
@ -29,20 +30,24 @@
|
||||
</div>
|
||||
|
||||
<b>Reminder Dates</b>
|
||||
<reminders @change="editTaskSubmit()" v-model="taskEditTask.reminderDates"/>
|
||||
<reminders
|
||||
@change="editTaskSubmit()"
|
||||
v-model="taskEditTask.reminderDates"
|
||||
/>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="taskduedate">Due Date</label>
|
||||
<div class="control">
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
:class="{ disabled: taskService.loading }"
|
||||
:config="flatPickerConfig"
|
||||
:disabled="taskService.loading"
|
||||
@on-close="editTaskSubmit()"
|
||||
class="input"
|
||||
id="taskduedate"
|
||||
placeholder="The tasks due date is here..."
|
||||
v-model="taskEditTask.dueDate">
|
||||
v-model="taskEditTask.dueDate"
|
||||
>
|
||||
</flat-pickr>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,26 +57,28 @@
|
||||
<div class="control columns">
|
||||
<div class="column">
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
:class="{ disabled: taskService.loading }"
|
||||
:config="flatPickerConfig"
|
||||
:disabled="taskService.loading"
|
||||
@on-close="editTaskSubmit()"
|
||||
class="input"
|
||||
id="taskduedate"
|
||||
placeholder="Start date"
|
||||
v-model="taskEditTask.startDate">
|
||||
v-model="taskEditTask.startDate"
|
||||
>
|
||||
</flat-pickr>
|
||||
</div>
|
||||
<div class="column">
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
:class="{ disabled: taskService.loading }"
|
||||
:config="flatPickerConfig"
|
||||
:disabled="taskService.loading"
|
||||
@on-close="editTaskSubmit()"
|
||||
class="input"
|
||||
id="taskduedate"
|
||||
placeholder="End date"
|
||||
v-model="taskEditTask.endDate">
|
||||
v-model="taskEditTask.endDate"
|
||||
>
|
||||
</flat-pickr>
|
||||
</div>
|
||||
</div>
|
||||
@ -79,27 +86,36 @@
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="">Repeat after</label>
|
||||
<repeat-after @change="editTaskSubmit()" v-model="taskEditTask.repeatAfter"/>
|
||||
<repeat-after
|
||||
@change="editTaskSubmit()"
|
||||
v-model="taskEditTask.repeatAfter"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="">Priority</label>
|
||||
<div class="control priority-select">
|
||||
<priority-select @change="editTaskSubmit()" v-model="taskEditTask.priority"/>
|
||||
<priority-select
|
||||
@change="editTaskSubmit()"
|
||||
v-model="taskEditTask.priority"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Percent Done</label>
|
||||
<div class="control">
|
||||
<percent-done-select @change="editTaskSubmit()" v-model="taskEditTask.percentDone"/>
|
||||
<percent-done-select
|
||||
@change="editTaskSubmit()"
|
||||
v-model="taskEditTask.percentDone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Color</label>
|
||||
<div class="control">
|
||||
<color-picker v-model="taskEditTask.hexColor"/>
|
||||
<color-picker v-model="taskEditTask.hexColor" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -109,7 +125,7 @@
|
||||
<li :key="a.id" v-for="(a, index) in taskEditTask.assignees">
|
||||
{{ a.getDisplayName() }}
|
||||
<a @click="deleteAssigneeByIndex(index)">
|
||||
<icon icon="times"/>
|
||||
<icon icon="times" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -120,14 +136,18 @@
|
||||
<edit-assignees
|
||||
:initial-assignees="taskEditTask.assignees"
|
||||
:list-id="taskEditTask.listId"
|
||||
:task-id="taskEditTask.id"/>
|
||||
:task-id="taskEditTask.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Labels</label>
|
||||
<div class="control">
|
||||
<edit-labels :task-id="taskEditTask.id" v-model="taskEditTask.labels"/>
|
||||
<edit-labels
|
||||
:task-id="taskEditTask.id"
|
||||
v-model="taskEditTask.labels"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -138,10 +158,13 @@
|
||||
class="is-narrow"
|
||||
/>
|
||||
|
||||
<button :class="{ 'is-loading': taskService.loading}" class="button is-primary is-fullwidth" type="submit">
|
||||
<x-button
|
||||
:loading="taskService.loading"
|
||||
class="is-fullwidth"
|
||||
@click="editTaskSubmit()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</x-button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@ -199,7 +222,9 @@ export default {
|
||||
PrioritySelect,
|
||||
flatPickr,
|
||||
editor: () => ({
|
||||
component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
|
||||
component: import(
|
||||
/* webpackChunkName: "editor" */ '../../components/input/editor'
|
||||
),
|
||||
loading: LoadingComponent,
|
||||
error: ErrorComponent,
|
||||
timeout: 60000,
|
||||
@ -226,24 +251,30 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initTaskFields() {
|
||||
this.taskEditTask.dueDate = +new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
|
||||
this.taskEditTask.startDate = +new Date(this.task.startDate) === 0 ? null : this.task.startDate
|
||||
this.taskEditTask.endDate = +new Date(this.task.endDate) === 0 ? null : this.task.endDate
|
||||
this.taskEditTask.dueDate =
|
||||
+new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
|
||||
this.taskEditTask.startDate =
|
||||
+new Date(this.task.startDate) === 0
|
||||
? null
|
||||
: this.task.startDate
|
||||
this.taskEditTask.endDate =
|
||||
+new Date(this.task.endDate) === 0 ? null : this.task.endDate
|
||||
// This makes the editor trigger its mounted function again which makes it forget every input
|
||||
// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
|
||||
// which made it impossible to detect change from the outside. Therefore the component would
|
||||
// not update if new content from the outside was made available.
|
||||
// See https://github.com/NikulinIlya/vue-easymde/issues/3
|
||||
this.editorActive = false
|
||||
this.$nextTick(() => this.editorActive = true)
|
||||
this.$nextTick(() => (this.editorActive = true))
|
||||
},
|
||||
editTaskSubmit() {
|
||||
this.taskService.update(this.taskEditTask)
|
||||
.then(r => {
|
||||
this.taskService
|
||||
.update(this.taskEditTask)
|
||||
.then((r) => {
|
||||
this.$set(this, 'taskEditTask', r)
|
||||
this.initTaskFields()
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
|
||||
@ -2,12 +2,13 @@
|
||||
<div class="gantt-chart box">
|
||||
<div class="filter-container">
|
||||
<div class="items">
|
||||
<button @click.prevent.stop="showTaskFilter = !showTaskFilter" class="button">
|
||||
<span class="icon is-small">
|
||||
<icon icon="filter"/>
|
||||
</span>
|
||||
<x-button
|
||||
@click.prevent.stop="showTaskFilter = !showTaskFilter"
|
||||
type="secondary"
|
||||
icon="filter"
|
||||
>
|
||||
Filters
|
||||
</button>
|
||||
</x-button>
|
||||
</div>
|
||||
<filter-popup
|
||||
@change="loadTasks"
|
||||
@ -18,21 +19,37 @@
|
||||
<div class="dates">
|
||||
<template v-for="(y, yk) in days">
|
||||
<div :key="yk + 'year'" class="months">
|
||||
<div :key="mk + 'month'" class="month" v-for="(m, mk) in days[yk]">
|
||||
{{ new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', {month: 'long'}) }},
|
||||
{{ (new Date(yk)).getFullYear() }}
|
||||
<div
|
||||
:key="mk + 'month'"
|
||||
class="month"
|
||||
v-for="(m, mk) in days[yk]"
|
||||
>
|
||||
{{
|
||||
new Date(
|
||||
new Date(yk).setMonth(mk)
|
||||
).toLocaleString('en-us', {month: 'long'})
|
||||
}},
|
||||
{{ new Date(yk).getFullYear() }}
|
||||
<div class="days">
|
||||
<div
|
||||
:class="{'today': d.toDateString() === now.toDateString()}"
|
||||
:class="{
|
||||
today:
|
||||
d.toDateString() === now.toDateString(),
|
||||
}"
|
||||
:key="dk + 'day'"
|
||||
:style="{'width': dayWidth + 'px'}"
|
||||
:style="{ width: dayWidth + 'px' }"
|
||||
class="day"
|
||||
v-for="(d, dk) in days[yk][mk]">
|
||||
v-for="(d, dk) in days[yk][mk]"
|
||||
>
|
||||
<span class="theday" v-if="dayWidth > 25">
|
||||
{{ d.getDate() }}
|
||||
</span>
|
||||
<span class="weekday" v-if="dayWidth > 25">
|
||||
{{ d.toLocaleString('en-us', {weekday: 'short'}) }}
|
||||
{{
|
||||
d.toLocaleString('en-us', {
|
||||
weekday: 'short',
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -40,19 +57,29 @@
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div :style="{'width': fullWidth + 'px'}" class="tasks">
|
||||
<div :style="{ width: fullWidth + 'px' }" class="tasks">
|
||||
<div
|
||||
:key="t.id"
|
||||
:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
|
||||
:style="{
|
||||
background:
|
||||
'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' +
|
||||
(k % 2 === 0
|
||||
? '#fafafa 1px, #fafafa '
|
||||
: '#fff 1px, #fff ') +
|
||||
dayWidth +
|
||||
'px)',
|
||||
}"
|
||||
class="row"
|
||||
v-for="(t, k) in theTasks">
|
||||
v-for="(t, k) in theTasks"
|
||||
>
|
||||
<VueDragResize
|
||||
:class="{
|
||||
'done': t.done,
|
||||
'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id,
|
||||
'has-light-text': !colorIsDark(t.hexColor),
|
||||
'has-dark-text': colorIsDark(t.hexColor)
|
||||
}"
|
||||
done: t.done,
|
||||
'is-current-edit':
|
||||
taskToEdit !== null && taskToEdit.id === t.id,
|
||||
'has-light-text': !colorIsDark(t.hexColor),
|
||||
'has-dark-text': colorIsDark(t.hexColor),
|
||||
}"
|
||||
:gridX="dayWidth"
|
||||
:h="31"
|
||||
:isActive="canWrite"
|
||||
@ -61,7 +88,10 @@
|
||||
:parentW="fullWidth"
|
||||
:snapToGrid="true"
|
||||
:sticks="['mr', 'ml']"
|
||||
:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
|
||||
:style="{
|
||||
'border-color': t.hexColor,
|
||||
'background-color': t.hexColor,
|
||||
}"
|
||||
:w="t.durationDays * dayWidth"
|
||||
:x="t.offsetDays * dayWidth - 6"
|
||||
:y="0"
|
||||
@ -71,11 +101,16 @@
|
||||
axis="x"
|
||||
class="task"
|
||||
>
|
||||
<span :class="{
|
||||
'has-high-priority': t.priority >= priorities.HIGH,
|
||||
'has-not-so-high-priority': t.priority === priorities.HIGH,
|
||||
'has-super-high-priority': t.priority === priorities.DO_NOW
|
||||
}">{{ t.title }}</span>
|
||||
<span
|
||||
:class="{
|
||||
'has-high-priority': t.priority >= priorities.HIGH,
|
||||
'has-not-so-high-priority':
|
||||
t.priority === priorities.HIGH,
|
||||
'has-super-high-priority':
|
||||
t.priority === priorities.DO_NOW,
|
||||
}"
|
||||
>{{ t.title }}</span
|
||||
>
|
||||
<priority-label :priority="t.priority"/>
|
||||
<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
|
||||
<a @click="editTask(theTasks[k])" class="edit-toggle">
|
||||
@ -86,9 +121,18 @@
|
||||
<template v-if="showTaskswithoutDates">
|
||||
<div
|
||||
:key="t.id"
|
||||
:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
|
||||
:style="{
|
||||
background:
|
||||
'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' +
|
||||
(k % 2 === 0
|
||||
? '#fafafa 1px, #fafafa '
|
||||
: '#fff 1px, #fff ') +
|
||||
dayWidth +
|
||||
'px)',
|
||||
}"
|
||||
class="row"
|
||||
v-for="(t, k) in tasksWithoutDates">
|
||||
v-for="(t, k) in tasksWithoutDates"
|
||||
>
|
||||
<VueDragResize
|
||||
:gridX="dayWidth"
|
||||
:h="31"
|
||||
@ -112,7 +156,11 @@
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<form @submit.prevent="addNewTask()" class="add-new-task" v-if="canWrite">
|
||||
<form
|
||||
@submit.prevent="addNewTask()"
|
||||
class="add-new-task"
|
||||
v-if="canWrite"
|
||||
>
|
||||
<transition name="width">
|
||||
<input
|
||||
@blur="hideCrateNewTask"
|
||||
@ -124,31 +172,20 @@
|
||||
v-model="newTaskTitle"
|
||||
/>
|
||||
</transition>
|
||||
<button @click="showCreateNewTask" class="button is-primary has-no-shadow">
|
||||
<span class="icon is-small">
|
||||
<icon icon="plus"/>
|
||||
</span>
|
||||
<x-button @click="showCreateNewTask" :shadow="false" icon="plus">
|
||||
Add a new task
|
||||
</button>
|
||||
</x-button>
|
||||
</form>
|
||||
<transition name="fade">
|
||||
<div class="card taskedit" v-if="isTaskEdit">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Edit Task
|
||||
</p>
|
||||
<a @click="() => {isTaskEdit = false; taskToEdit = null}" class="card-header-icon">
|
||||
<span class="icon">
|
||||
<icon icon="times"/>
|
||||
</span>
|
||||
</a>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<edit-task :task="taskToEdit"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<card
|
||||
v-if="isTaskEdit"
|
||||
class="taskedit"
|
||||
title="Edit Task"
|
||||
@close="() => {isTaskEdit = false;taskToEdit = null}"
|
||||
:has-close="true"
|
||||
>
|
||||
<edit-task :task="taskToEdit"/>
|
||||
</card>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
@ -184,10 +221,10 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
dateFrom: {
|
||||
default: new Date((new Date()).setDate((new Date()).getDate() - 15)),
|
||||
default: new Date(new Date().setDate(new Date().getDate() - 15)),
|
||||
},
|
||||
dateTo: {
|
||||
default: new Date((new Date()).setDate((new Date()).getDate() + 30)),
|
||||
default: new Date(new Date().setDate(new Date().getDate() + 30)),
|
||||
},
|
||||
// The width of a day in pixels, used to calculate all sorts of things.
|
||||
dayWidth: {
|
||||
@ -226,9 +263,9 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'dateFrom': 'buildTheGanttChart',
|
||||
'dateTo': 'buildTheGanttChart',
|
||||
'listId': 'parseTasks',
|
||||
dateFrom: 'buildTheGanttChart',
|
||||
dateTo: 'buildTheGanttChart',
|
||||
listId: 'parseTasks',
|
||||
},
|
||||
created() {
|
||||
this.now = new Date()
|
||||
@ -240,7 +277,7 @@ export default {
|
||||
this.buildTheGanttChart()
|
||||
},
|
||||
computed: mapState({
|
||||
canWrite: state => state.currentList.maxRight > Rights.READ,
|
||||
canWrite: (state) => state.currentList.maxRight > Rights.READ,
|
||||
}),
|
||||
methods: {
|
||||
buildTheGanttChart() {
|
||||
@ -252,17 +289,26 @@ export default {
|
||||
this.startDate = new Date(this.dateFrom)
|
||||
this.endDate = new Date(this.dateTo)
|
||||
|
||||
this.dayOffsetUntilToday = Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) + 1
|
||||
this.dayOffsetUntilToday =
|
||||
Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) +
|
||||
1
|
||||
},
|
||||
prepareGanttDays() {
|
||||
// Layout: years => [months => [days]]
|
||||
let years = {}
|
||||
for (let d = this.startDate; d <= this.endDate; d.setDate(d.getDate() + 1)) {
|
||||
for (
|
||||
let d = this.startDate;
|
||||
d <= this.endDate;
|
||||
d.setDate(d.getDate() + 1)
|
||||
) {
|
||||
let date = new Date(d)
|
||||
if (years[date.getFullYear() + ''] === undefined) {
|
||||
years[date.getFullYear() + ''] = {}
|
||||
}
|
||||
if (years[date.getFullYear() + ''][date.getMonth() + ''] === undefined) {
|
||||
if (
|
||||
years[date.getFullYear() + ''][date.getMonth() + ''] ===
|
||||
undefined
|
||||
) {
|
||||
years[date.getFullYear() + ''][date.getMonth() + ''] = []
|
||||
}
|
||||
years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
|
||||
@ -279,79 +325,86 @@ export default {
|
||||
this.$set(this, 'tasksWithoutDates', [])
|
||||
|
||||
const getAllTasks = (page = 1) => {
|
||||
return this.taskCollectionService.getAll({listId: this.listId}, this.params, page)
|
||||
.then(tasks => {
|
||||
return this.taskCollectionService
|
||||
.getAll({listId: this.listId}, this.params, page)
|
||||
.then((tasks) => {
|
||||
if (page < this.taskCollectionService.totalPages) {
|
||||
return getAllTasks(page + 1)
|
||||
.then(nextTasks => {
|
||||
return tasks.concat(nextTasks)
|
||||
})
|
||||
return getAllTasks(page + 1).then((nextTasks) => {
|
||||
return tasks.concat(nextTasks)
|
||||
})
|
||||
} else {
|
||||
return tasks
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
return Promise.reject(e)
|
||||
})
|
||||
}
|
||||
|
||||
getAllTasks()
|
||||
.then(tasks => {
|
||||
.then((tasks) => {
|
||||
this.theTasks = tasks
|
||||
.filter(t => {
|
||||
.filter((t) => {
|
||||
if (t.startDate === null && !t.done) {
|
||||
this.tasksWithoutDates.push(t)
|
||||
}
|
||||
return t.startDate >= this.startDate && t.endDate <= this.endDate
|
||||
return (
|
||||
t.startDate >= this.startDate &&
|
||||
t.endDate <= this.endDate
|
||||
)
|
||||
})
|
||||
.map(t => {
|
||||
.map((t) => {
|
||||
return this.addGantAttributes(t)
|
||||
})
|
||||
.sort(function (a, b) {
|
||||
if (a.startDate < b.startDate)
|
||||
return -1
|
||||
if (a.startDate > b.startDate)
|
||||
return 1
|
||||
if (a.startDate < b.startDate) return -1
|
||||
if (a.startDate > b.startDate) return 1
|
||||
return 0
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
addGantAttributes(t) {
|
||||
t.endDate === null ? this.endDate : t.endDate
|
||||
t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
|
||||
t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1
|
||||
t.durationDays =
|
||||
Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
|
||||
t.offsetDays =
|
||||
Math.floor(
|
||||
(t.startDate - this.startDate) / 1000 / 60 / 60 / 24
|
||||
) + 1
|
||||
return t
|
||||
},
|
||||
setTaskDragged(t) {
|
||||
this.taskDragged = t
|
||||
},
|
||||
resizeTask(newRect) {
|
||||
|
||||
// Timeout to definitly catch if the user clicked on taskedit
|
||||
setTimeout(() => {
|
||||
|
||||
if (this.isTaskEdit) {
|
||||
return
|
||||
}
|
||||
|
||||
let didntHaveDates = this.taskDragged.startDate === null ? true : false
|
||||
let didntHaveDates =
|
||||
this.taskDragged.startDate === null ? true : false
|
||||
|
||||
let startDate = new Date(this.startDate)
|
||||
startDate.setDate(startDate.getDate() + newRect.left / this.dayWidth)
|
||||
startDate.setDate(
|
||||
startDate.getDate() + newRect.left / this.dayWidth
|
||||
)
|
||||
startDate.setUTCHours(0)
|
||||
startDate.setUTCMinutes(0)
|
||||
startDate.setUTCSeconds(0)
|
||||
startDate.setUTCMilliseconds(0)
|
||||
this.taskDragged.startDate = startDate
|
||||
let endDate = new Date(startDate)
|
||||
endDate.setDate(startDate.getDate() + newRect.width / this.dayWidth)
|
||||
endDate.setDate(
|
||||
startDate.getDate() + newRect.width / this.dayWidth
|
||||
)
|
||||
this.taskDragged.startDate = startDate
|
||||
this.taskDragged.endDate = endDate
|
||||
|
||||
|
||||
// We take the task from the overall tasks array because the one in it has bad data after it was updated once.
|
||||
// FIXME: This is a workaround. We should use a better mechanism to get the task or, even better,
|
||||
// prevent it from containing outdated Data in the first place.
|
||||
@ -362,8 +415,9 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
this.taskService.update(this.taskDragged)
|
||||
.then(r => {
|
||||
this.taskService
|
||||
.update(this.taskDragged)
|
||||
.then((r) => {
|
||||
// If the task didn't have dates before, we'll update the list
|
||||
if (didntHaveDates) {
|
||||
for (const t in this.tasksWithoutDates) {
|
||||
@ -376,13 +430,17 @@ export default {
|
||||
} else {
|
||||
for (const tt in this.theTasks) {
|
||||
if (this.theTasks[tt].id === r.id) {
|
||||
this.$set(this.theTasks, tt, this.addGantAttributes(r))
|
||||
this.$set(
|
||||
this.theTasks,
|
||||
tt,
|
||||
this.addGantAttributes(r)
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
}, 100)
|
||||
@ -402,21 +460,25 @@ export default {
|
||||
},
|
||||
hideCrateNewTask() {
|
||||
if (this.newTaskTitle === '') {
|
||||
this.$nextTick(() => this.newTaskFieldActive = false)
|
||||
this.$nextTick(() => (this.newTaskFieldActive = false))
|
||||
}
|
||||
},
|
||||
addNewTask() {
|
||||
if (!this.newTaskFieldActive) {
|
||||
return
|
||||
}
|
||||
let task = new TaskModel({title: this.newTaskTitle, listId: this.listId})
|
||||
this.taskService.create(task)
|
||||
.then(r => {
|
||||
let task = new TaskModel({
|
||||
title: this.newTaskTitle,
|
||||
listId: this.listId,
|
||||
})
|
||||
this.taskService
|
||||
.create(task)
|
||||
.then((r) => {
|
||||
this.tasksWithoutDates.push(this.addGantAttributes(r))
|
||||
this.newTaskTitle = ''
|
||||
this.hideCrateNewTask()
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="attachments">
|
||||
<h3>
|
||||
<span class="icon is-grey">
|
||||
<icon icon="paperclip"/>
|
||||
<icon icon="paperclip" />
|
||||
</span>
|
||||
Attachments
|
||||
</h3>
|
||||
@ -14,12 +14,14 @@
|
||||
multiple
|
||||
ref="files"
|
||||
type="file"
|
||||
v-if="editEnabled"/>
|
||||
v-if="editEnabled"
|
||||
/>
|
||||
<progress
|
||||
:value="attachmentService.uploadProgress"
|
||||
class="progress is-primary"
|
||||
max="100"
|
||||
v-if="attachmentService.uploadProgress > 0">
|
||||
v-if="attachmentService.uploadProgress > 0"
|
||||
>
|
||||
{{ attachmentService.uploadProgress }}%
|
||||
</progress>
|
||||
|
||||
@ -28,13 +30,22 @@
|
||||
class="attachment"
|
||||
v-for="a in attachments"
|
||||
:key="a.id"
|
||||
@click="viewOrDownload(a)">
|
||||
@click="viewOrDownload(a)"
|
||||
>
|
||||
<div class="filename">{{ a.file.name }}</div>
|
||||
<div class="info">
|
||||
<p class="collapses">
|
||||
<span>
|
||||
created <span v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</span> by
|
||||
<user :avatar-size="24" :user="a.createdBy" :is-inline="true"/>
|
||||
created
|
||||
<span v-tooltip="formatDate(a.created)">{{
|
||||
formatDateSince(a.created)
|
||||
}}</span>
|
||||
by
|
||||
<user
|
||||
:avatar-size="24"
|
||||
:user="a.createdBy"
|
||||
:is-inline="true"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
{{ a.file.getHumanSize() }}
|
||||
@ -46,13 +57,20 @@
|
||||
<p>
|
||||
<a
|
||||
@click="downloadAttachment(a)"
|
||||
v-tooltip="'Download this attachment'">
|
||||
v-tooltip="'Download this attachment'"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
<a
|
||||
@click="() => {attachmentToDelete = a; showDeleteModal = true}"
|
||||
@click="
|
||||
() => {
|
||||
attachmentToDelete = a
|
||||
showDeleteModal = true
|
||||
}
|
||||
"
|
||||
v-if="editEnabled"
|
||||
v-tooltip="'Delete this attachment'">
|
||||
v-tooltip="'Delete this attachment'"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</p>
|
||||
@ -60,24 +78,29 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
<x-button
|
||||
v-if="editEnabled"
|
||||
:disabled="attachmentService.loading"
|
||||
@click="$refs.files.click()"
|
||||
class="button mb-4 has-no-shadow"
|
||||
v-if="editEnabled">
|
||||
<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
|
||||
class="mb-4"
|
||||
icon="cloud-upload-alt"
|
||||
type="secondary"
|
||||
:shadow="false"
|
||||
>
|
||||
Upload attachment
|
||||
</a>
|
||||
</x-button>
|
||||
|
||||
<!-- Dropzone -->
|
||||
<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">
|
||||
<div
|
||||
:class="{ hidden: !showDropzone }"
|
||||
class="dropzone"
|
||||
v-if="editEnabled"
|
||||
>
|
||||
<div class="drop-hint">
|
||||
<div class="icon">
|
||||
<icon icon="cloud-upload-alt"/>
|
||||
</div>
|
||||
<div class="hint">
|
||||
Drop files here to upload
|
||||
<icon icon="cloud-upload-alt" />
|
||||
</div>
|
||||
<div class="hint">Drop files here to upload</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -85,18 +108,27 @@
|
||||
<modal
|
||||
@close="showDeleteModal = false"
|
||||
v-if="showDeleteModal"
|
||||
@submit="deleteAttachment()">
|
||||
@submit="deleteAttachment()"
|
||||
>
|
||||
<span slot="header">Delete attachment</span>
|
||||
<p slot="text">Are you sure you want to delete the attachment {{ attachmentToDelete.file.name }}?<br/>
|
||||
<b>This CANNOT BE UNDONE!</b></p>
|
||||
<p slot="text">
|
||||
Are you sure you want to delete the attachment
|
||||
{{ attachmentToDelete.file.name }}?<br />
|
||||
<b>This CANNOT BE UNDONE!</b>
|
||||
</p>
|
||||
</modal>
|
||||
|
||||
<transition name="modal">
|
||||
<modal
|
||||
@close="() => {showImageModal = false; attachmentImageBlobUrl = null}"
|
||||
@close="
|
||||
() => {
|
||||
showImageModal = false
|
||||
attachmentImageBlobUrl = null
|
||||
}
|
||||
"
|
||||
v-if="showImageModal"
|
||||
>
|
||||
<img :src="attachmentImageBlobUrl" alt=""/>
|
||||
<img :src="attachmentImageBlobUrl" alt="" />
|
||||
</modal>
|
||||
</transition>
|
||||
</div>
|
||||
@ -106,7 +138,7 @@
|
||||
import AttachmentService from '../../../services/attachment'
|
||||
import AttachmentModel from '../../../models/attachment'
|
||||
import User from '../../misc/user'
|
||||
import {mapState} from 'vuex'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'attachments',
|
||||
@ -141,28 +173,28 @@ export default {
|
||||
this.attachmentService = new AttachmentService()
|
||||
},
|
||||
computed: mapState({
|
||||
attachments: state => state.attachments.attachments,
|
||||
attachments: (state) => state.attachments.attachments,
|
||||
}),
|
||||
mounted() {
|
||||
document.addEventListener('dragenter', e => {
|
||||
document.addEventListener('dragenter', (e) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.showDropzone = true
|
||||
})
|
||||
|
||||
window.addEventListener('dragleave', e => {
|
||||
window.addEventListener('dragleave', (e) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.showDropzone = false
|
||||
})
|
||||
|
||||
document.addEventListener('dragover', e => {
|
||||
document.addEventListener('dragover', (e) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.showDropzone = true
|
||||
})
|
||||
|
||||
document.addEventListener('drop', e => {
|
||||
document.addEventListener('drop', (e) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
||||
@ -183,32 +215,40 @@ export default {
|
||||
this.uploadFiles(this.$refs.files.files)
|
||||
},
|
||||
uploadFiles(files) {
|
||||
const attachmentModel = new AttachmentModel({taskId: this.taskId})
|
||||
this.attachmentService.create(attachmentModel, files)
|
||||
.then(r => {
|
||||
const attachmentModel = new AttachmentModel({ taskId: this.taskId })
|
||||
this.attachmentService
|
||||
.create(attachmentModel, files)
|
||||
.then((r) => {
|
||||
if (r.success !== null) {
|
||||
r.success.forEach(a => {
|
||||
r.success.forEach((a) => {
|
||||
this.$store.commit('attachments/add', a)
|
||||
this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
|
||||
this.$store.dispatch('tasks/addTaskAttachment', {
|
||||
taskId: this.taskId,
|
||||
attachment: a,
|
||||
})
|
||||
})
|
||||
}
|
||||
if (r.errors !== null) {
|
||||
r.errors.forEach(m => {
|
||||
r.errors.forEach((m) => {
|
||||
this.error(m)
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteAttachment() {
|
||||
this.attachmentService.delete(this.attachmentToDelete)
|
||||
.then(r => {
|
||||
this.$store.commit('attachments/removeById', this.attachmentToDelete.id)
|
||||
this.attachmentService
|
||||
.delete(this.attachmentToDelete)
|
||||
.then((r) => {
|
||||
this.$store.commit(
|
||||
'attachments/removeById',
|
||||
this.attachmentToDelete.id
|
||||
)
|
||||
this.success(r, this)
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
.finally(() => {
|
||||
@ -216,15 +256,16 @@ export default {
|
||||
})
|
||||
},
|
||||
viewOrDownload(attachment) {
|
||||
if (attachment.file.name.endsWith('.jpg') ||
|
||||
if (
|
||||
attachment.file.name.endsWith('.jpg') ||
|
||||
attachment.file.name.endsWith('.png') ||
|
||||
attachment.file.name.endsWith('.bmp') ||
|
||||
attachment.file.name.endsWith('.gif')) {
|
||||
attachment.file.name.endsWith('.gif')
|
||||
) {
|
||||
this.showImageModal = true
|
||||
this.attachmentService.getBlobUrl(attachment)
|
||||
.then(url => {
|
||||
this.attachmentImageBlobUrl = url
|
||||
})
|
||||
this.attachmentService.getBlobUrl(attachment).then((url) => {
|
||||
this.attachmentImageBlobUrl = url
|
||||
})
|
||||
} else {
|
||||
this.downloadAttachment(attachment)
|
||||
}
|
||||
|
||||
@ -2,33 +2,70 @@
|
||||
<div class="content details">
|
||||
<h3 v-if="canWrite || comments.length > 0">
|
||||
<span class="icon is-grey">
|
||||
<icon :icon="['far', 'comments']"/>
|
||||
<icon :icon="['far', 'comments']" />
|
||||
</span>
|
||||
Comments
|
||||
</h3>
|
||||
<div class="comments">
|
||||
<span class="is-inline-flex is-align-items-center" v-if="taskCommentService.loading && saving === null && !creating">
|
||||
<span
|
||||
class="is-inline-flex is-align-items-center"
|
||||
v-if="
|
||||
taskCommentService.loading && saving === null && !creating
|
||||
"
|
||||
>
|
||||
<span class="loader is-inline-block mr-2"></span>
|
||||
Loading comments...
|
||||
</span>
|
||||
<div :key="c.id" class="media comment" v-for="c in comments">
|
||||
<figure class="media-left is-hidden-mobile">
|
||||
<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="48"/>
|
||||
<img
|
||||
:src="c.author.getAvatarUrl(48)"
|
||||
alt=""
|
||||
class="image is-avatar"
|
||||
height="48"
|
||||
width="48"
|
||||
/>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="comment-info">
|
||||
<img :src="c.author.getAvatarUrl(20)" alt="" class="image is-avatar" height="20" width="20"/>
|
||||
<strong>{{ c.author.getDisplayName() }}</strong>
|
||||
<span v-tooltip="formatDate(c.created)">{{ formatDateSince(c.created) }}</span>
|
||||
<span v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)">
|
||||
<img
|
||||
:src="c.author.getAvatarUrl(20)"
|
||||
alt=""
|
||||
class="image is-avatar"
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
<strong>{{ c.author.getDisplayName() }}</strong
|
||||
>
|
||||
<span v-tooltip="formatDate(c.created)">{{
|
||||
formatDateSince(c.created)
|
||||
}}</span>
|
||||
<span
|
||||
v-if="+new Date(c.created) !== +new Date(c.updated)"
|
||||
v-tooltip="formatDate(c.updated)"
|
||||
>
|
||||
· edited {{ formatDateSince(c.updated) }}
|
||||
</span>
|
||||
<transition name="fade">
|
||||
<span class="is-inline-flex" v-if="taskCommentService.loading && saving === c.id">
|
||||
<span class="loader is-inline-block mr-2"></span>
|
||||
<span
|
||||
class="is-inline-flex"
|
||||
v-if="
|
||||
taskCommentService.loading &&
|
||||
saving === c.id
|
||||
"
|
||||
>
|
||||
<span
|
||||
class="loader is-inline-block mr-2"
|
||||
></span>
|
||||
Saving...
|
||||
</span>
|
||||
<span class="has-text-success" v-if="!taskCommentService.loading && saved === c.id">
|
||||
<span
|
||||
class="has-text-success"
|
||||
v-if="
|
||||
!taskCommentService.loading &&
|
||||
saved === c.id
|
||||
"
|
||||
>
|
||||
Saved!
|
||||
</span>
|
||||
</transition>
|
||||
@ -38,7 +75,12 @@
|
||||
:is-edit-enabled="canWrite"
|
||||
:upload-callback="attachmentUpload"
|
||||
:upload-enabled="true"
|
||||
@change="() => {toggleEdit(c);editComment()}"
|
||||
@change="
|
||||
() => {
|
||||
toggleEdit(c)
|
||||
editComment()
|
||||
}
|
||||
"
|
||||
v-model="c.comment"
|
||||
:has-edit-bottom="true"
|
||||
:bottom-actions="actions[c.id]"
|
||||
@ -47,19 +89,34 @@
|
||||
</div>
|
||||
<div class="media comment" v-if="canWrite">
|
||||
<figure class="media-left is-hidden-mobile">
|
||||
<img :src="userAvatar" alt="" class="image is-avatar" height="48" width="48"/>
|
||||
<img
|
||||
:src="userAvatar"
|
||||
alt=""
|
||||
class="image is-avatar"
|
||||
height="48"
|
||||
width="48"
|
||||
/>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="form">
|
||||
<transition name="fade">
|
||||
<span class="is-inline-flex" v-if="taskCommentService.loading && creating">
|
||||
<span class="loader is-inline-block mr-2"></span>
|
||||
<span
|
||||
class="is-inline-flex"
|
||||
v-if="taskCommentService.loading && creating"
|
||||
>
|
||||
<span
|
||||
class="loader is-inline-block mr-2"
|
||||
></span>
|
||||
Creating comment...
|
||||
</span>
|
||||
</transition>
|
||||
<div class="field">
|
||||
<editor
|
||||
:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
|
||||
:class="{
|
||||
'is-loading':
|
||||
taskCommentService.loading &&
|
||||
!isCommentEdit,
|
||||
}"
|
||||
:has-preview="false"
|
||||
:upload-callback="attachmentUpload"
|
||||
:upload-enabled="true"
|
||||
@ -69,10 +126,15 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<button :class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
|
||||
:disabled="newComment.comment === ''"
|
||||
@click="addComment()" class="button is-primary">Comment
|
||||
</button>
|
||||
<x-button
|
||||
:loading="
|
||||
taskCommentService.loading && !isCommentEdit
|
||||
"
|
||||
:disabled="newComment.comment === ''"
|
||||
@click="addComment()"
|
||||
>
|
||||
Comment
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -81,10 +143,13 @@
|
||||
<modal
|
||||
@close="showDeleteModal = false"
|
||||
@submit="deleteComment()"
|
||||
v-if="showDeleteModal">
|
||||
v-if="showDeleteModal"
|
||||
>
|
||||
<span slot="header">Delete this comment</span>
|
||||
<p slot="text">Are you sure you want to delete this comment?
|
||||
<br/>This <b>CANNOT BE UNDONE!</b></p>
|
||||
<p slot="text">
|
||||
Are you sure you want to delete this comment? <br />This
|
||||
<b>CANNOT BE UNDONE!</b>
|
||||
</p>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
@ -100,15 +165,15 @@ export default {
|
||||
name: 'comments',
|
||||
components: {
|
||||
editor: () => ({
|
||||
component: import(/* webpackChunkName: "editor" */ '../../input/editor'),
|
||||
component: import(
|
||||
/* webpackChunkName: "editor" */ '../../input/editor'
|
||||
),
|
||||
loading: LoadingComponent,
|
||||
error: ErrorComponent,
|
||||
timeout: 60000,
|
||||
}),
|
||||
},
|
||||
mixins: [
|
||||
attachmentUpload,
|
||||
],
|
||||
mixins: [attachmentUpload],
|
||||
props: {
|
||||
taskId: {
|
||||
type: Number,
|
||||
@ -140,9 +205,9 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.taskCommentService = new TaskCommentService()
|
||||
this.newComment = new TaskCommentModel({taskId: this.taskId})
|
||||
this.commentEdit = new TaskCommentModel({taskId: this.taskId})
|
||||
this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
|
||||
this.newComment = new TaskCommentModel({ taskId: this.taskId })
|
||||
this.commentEdit = new TaskCommentModel({ taskId: this.taskId })
|
||||
this.commentToDelete = new TaskCommentModel({ taskId: this.taskId })
|
||||
this.comments = []
|
||||
},
|
||||
mounted() {
|
||||
@ -163,12 +228,13 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
loadComments() {
|
||||
this.taskCommentService.getAll({taskId: this.taskId})
|
||||
.then(r => {
|
||||
this.taskCommentService
|
||||
.getAll({ taskId: this.taskId })
|
||||
.then((r) => {
|
||||
this.$set(this, 'comments', r)
|
||||
this.makeActions()
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
@ -183,16 +249,20 @@ export default {
|
||||
// not update if new content from the outside was made available.
|
||||
// See https://github.com/NikulinIlya/vue-easymde/issues/3
|
||||
this.editorActive = false
|
||||
this.$nextTick(() => this.editorActive = true)
|
||||
this.$nextTick(() => (this.editorActive = true))
|
||||
this.creating = true
|
||||
|
||||
this.taskCommentService.create(this.newComment)
|
||||
.then(r => {
|
||||
this.taskCommentService
|
||||
.create(this.newComment)
|
||||
.then((r) => {
|
||||
this.comments.push(r)
|
||||
this.newComment.comment = ''
|
||||
this.success({message: 'The comment was added successfully.'}, this)
|
||||
this.success(
|
||||
{ message: 'The comment was added successfully.' },
|
||||
this
|
||||
)
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
.finally(() => {
|
||||
@ -215,8 +285,9 @@ export default {
|
||||
this.saving = this.commentEdit.id
|
||||
|
||||
this.commentEdit.taskId = this.taskId
|
||||
this.taskCommentService.update(this.commentEdit)
|
||||
.then(r => {
|
||||
this.taskCommentService
|
||||
.update(this.commentEdit)
|
||||
.then((r) => {
|
||||
for (const c in this.comments) {
|
||||
if (this.comments[c].id === this.commentEdit.id) {
|
||||
this.$set(this.comments, c, r)
|
||||
@ -227,7 +298,7 @@ export default {
|
||||
this.saved = null
|
||||
}, 2000)
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
.finally(() => {
|
||||
@ -236,7 +307,8 @@ export default {
|
||||
})
|
||||
},
|
||||
deleteComment() {
|
||||
this.taskCommentService.delete(this.commentToDelete)
|
||||
this.taskCommentService
|
||||
.delete(this.commentToDelete)
|
||||
.then(() => {
|
||||
for (const a in this.comments) {
|
||||
if (this.comments[a].id === this.commentToDelete.id) {
|
||||
@ -244,7 +316,7 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
.finally(() => {
|
||||
@ -253,14 +325,16 @@ export default {
|
||||
},
|
||||
makeActions() {
|
||||
if (this.canWrite) {
|
||||
this.comments.forEach(c => {
|
||||
this.$set(this.actions, c.id, [{
|
||||
action: () => this.toggleDelete(c.id),
|
||||
title: 'Remove',
|
||||
}])
|
||||
this.comments.forEach((c) => {
|
||||
this.$set(this.actions, c.id, [
|
||||
{
|
||||
action: () => this.toggleDelete(c.id),
|
||||
title: 'Remove',
|
||||
},
|
||||
])
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,34 @@
|
||||
<template>
|
||||
<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
|
||||
<div
|
||||
:class="{ 'is-loading': taskService.loading }"
|
||||
class="defer-task loading-container"
|
||||
>
|
||||
<label class="label">Defer due date</label>
|
||||
<div class="defer-days">
|
||||
<button @click="() => deferDays(1)" class="button has-no-shadow">1 day</button>
|
||||
<button @click="() => deferDays(3)" class="button has-no-shadow">3 days</button>
|
||||
<button @click="() => deferDays(7)" class="button has-no-shadow">1 week</button>
|
||||
<x-button
|
||||
@click.prevent.stop="() => deferDays(1)"
|
||||
:shadow="false"
|
||||
type="secondary"
|
||||
>
|
||||
1 day
|
||||
</x-button>
|
||||
<x-button
|
||||
@click.prevent.stop="() => deferDays(3)"
|
||||
:shadow="false"
|
||||
type="secondary"
|
||||
>
|
||||
3 days
|
||||
</x-button>
|
||||
<x-button
|
||||
@click.prevent.stop="() => deferDays(7)"
|
||||
:shadow="false"
|
||||
type="secondary"
|
||||
>
|
||||
1 week
|
||||
</x-button>
|
||||
</div>
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': taskService.loading}"
|
||||
:class="{ disabled: taskService.loading }"
|
||||
:config="flatPickerConfig"
|
||||
:disabled="taskService.loading"
|
||||
class="input"
|
||||
@ -97,13 +118,14 @@ export default {
|
||||
}
|
||||
|
||||
this.task.dueDate = new Date(this.dueDate)
|
||||
this.taskService.update(this.task)
|
||||
.then(r => {
|
||||
this.taskService
|
||||
.update(this.task)
|
||||
.then((r) => {
|
||||
this.lastValue = r.dueDate
|
||||
this.task = r
|
||||
this.$emit('input', r)
|
||||
})
|
||||
.catch(e => {
|
||||
.catch((e) => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="task-relations">
|
||||
<button
|
||||
class="button is-pulled-right add-task-relation-button"
|
||||
:class="{'is-active': showNewRelationForm}"
|
||||
@click="showNewRelationForm = !showNewRelationForm"
|
||||
v-tooltip="'Add a New Task Relation'"
|
||||
<x-button
|
||||
v-if="Object.keys(relatedTasks).length > 0"
|
||||
>
|
||||
<icon icon="plus"/>
|
||||
</button>
|
||||
@click="showNewRelationForm = !showNewRelationForm"
|
||||
class="is-pulled-right add-task-relation-button"
|
||||
:class="{'is-active': showNewRelationForm}"
|
||||
v-tooltip="'Add a New Task Relation'"
|
||||
type="secondary"
|
||||
icon="plus"
|
||||
/>
|
||||
<transition-group name="fade">
|
||||
<template v-if="editEnabled && showCreate">
|
||||
<label class="label" key="label">
|
||||
@ -48,7 +48,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a @click="addTaskRelation()" class="button is-primary">Add Task Relation</a>
|
||||
<x-button @click="addTaskRelation()">Add Task Relation</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -248,7 +248,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
@import '@/styles/theme/variables';
|
||||
|
||||
.add-task-relation-button {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="control repeat-after-input">
|
||||
<div class="buttons has-addons is-centered mt-2">
|
||||
<button class="button is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</button>
|
||||
<button class="button is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</button>
|
||||
<button class="button is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</button>
|
||||
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</x-button>
|
||||
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</x-button>
|
||||
<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</x-button>
|
||||
</div>
|
||||
<div class="columns is-align-items-center">
|
||||
<div class="is-flex column">
|
||||
|
||||
Reference in New Issue
Block a user