Cleanup code & make sure it has a common code style
This commit is contained in:
kolaente
parent
4a8b15e7be
commit
a8a7f70a3c
GPG key ID:
F40E70337AB24C9B
132 changed files with 6821 additions and 6595 deletions
|
|
@ -2,21 +2,22 @@
|
|||
<div class="gantt-chart box">
|
||||
<div class="dates">
|
||||
<template v-for="(y, yk) in days">
|
||||
<div class="months" :key="yk + 'year'">
|
||||
<div class="month" v-for="(m, mk) in days[yk]" :key="mk + 'month'">
|
||||
{{new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', { month: 'long' })}}, {{(new Date(yk)).getFullYear()}}
|
||||
<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 class="days">
|
||||
<div
|
||||
class="day"
|
||||
v-for="(d, dk) in days[yk][mk]"
|
||||
:key="dk + 'day'"
|
||||
:style="{'width': dayWidth + 'px'}"
|
||||
:class="{'today': d.toDateString() === now.toDateString()}">
|
||||
:class="{'today': d.toDateString() === now.toDateString()}"
|
||||
:key="dk + 'day'"
|
||||
:style="{'width': dayWidth + 'px'}"
|
||||
class="day"
|
||||
v-for="(d, dk) in days[yk][mk]">
|
||||
<span class="theday" v-if="dayWidth > 25">
|
||||
{{d.getDate()}}
|
||||
{{ 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>
|
||||
|
|
@ -24,38 +25,42 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tasks" :style="{'width': fullWidth + 'px'}">
|
||||
<div class="row" v-for="(t, k) in theTasks" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
|
||||
<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)'}"
|
||||
class="row"
|
||||
v-for="(t, k) in theTasks">
|
||||
<VueDragResize
|
||||
class="task"
|
||||
:class="{
|
||||
: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)
|
||||
}"
|
||||
:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
|
||||
:isActive="canWrite"
|
||||
:x="t.offsetDays * dayWidth - 6"
|
||||
:y="0"
|
||||
:w="t.durationDays * dayWidth"
|
||||
:h="31"
|
||||
:minw="dayWidth"
|
||||
:snapToGrid="true"
|
||||
:gridX="dayWidth"
|
||||
:sticks="['mr', 'ml']"
|
||||
axis="x"
|
||||
:parentLimitation="true"
|
||||
:parentW="fullWidth"
|
||||
@resizestop="resizeTask"
|
||||
@dragstop="resizeTask"
|
||||
@clicked="setTaskDragged(t)"
|
||||
:gridX="dayWidth"
|
||||
:h="31"
|
||||
:isActive="canWrite"
|
||||
:minw="dayWidth"
|
||||
:parentLimitation="true"
|
||||
:parentW="fullWidth"
|
||||
:snapToGrid="true"
|
||||
:sticks="['mr', 'ml']"
|
||||
:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
|
||||
:w="t.durationDays * dayWidth"
|
||||
:x="t.offsetDays * dayWidth - 6"
|
||||
:y="0"
|
||||
@clicked="setTaskDragged(t)"
|
||||
@dragstop="resizeTask"
|
||||
@resizestop="resizeTask"
|
||||
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>
|
||||
}">{{ 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">
|
||||
|
|
@ -64,26 +69,30 @@
|
|||
</VueDragResize>
|
||||
</div>
|
||||
<template v-if="showTaskswithoutDates">
|
||||
<div class="row" v-for="(t, k) in tasksWithoutDates" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
|
||||
<div
|
||||
:key="t.id"
|
||||
: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">
|
||||
<VueDragResize
|
||||
class="task nodate"
|
||||
:isActive="canWrite"
|
||||
:x="dayOffsetUntilToday * dayWidth - 6"
|
||||
:y="0"
|
||||
:h="31"
|
||||
:minw="dayWidth"
|
||||
:snapToGrid="true"
|
||||
:gridX="dayWidth"
|
||||
:sticks="['mr', 'ml']"
|
||||
axis="x"
|
||||
:parentLimitation="true"
|
||||
:parentW="fullWidth"
|
||||
@resizestop="resizeTask"
|
||||
@dragstop="resizeTask"
|
||||
@clicked="setTaskDragged(t)"
|
||||
v-tooltip="'This task has no dates set.'"
|
||||
:gridX="dayWidth"
|
||||
:h="31"
|
||||
:isActive="canWrite"
|
||||
:minw="dayWidth"
|
||||
:parentLimitation="true"
|
||||
:parentW="fullWidth"
|
||||
:snapToGrid="true"
|
||||
:sticks="['mr', 'ml']"
|
||||
:x="dayOffsetUntilToday * dayWidth - 6"
|
||||
:y="0"
|
||||
@clicked="setTaskDragged(t)"
|
||||
@dragstop="resizeTask"
|
||||
@resizestop="resizeTask"
|
||||
axis="x"
|
||||
class="task nodate"
|
||||
v-tooltip="'This task has no dates set.'"
|
||||
>
|
||||
<span>{{t.title}}</span>
|
||||
<span>{{ t.title }}</span>
|
||||
</VueDragResize>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -91,16 +100,16 @@
|
|||
<form @submit.prevent="addNewTask()" class="add-new-task" v-if="canWrite">
|
||||
<transition name="width">
|
||||
<input
|
||||
type="text"
|
||||
v-model="newTaskTitle"
|
||||
class="input"
|
||||
v-if="newTaskFieldActive"
|
||||
ref="newTaskTitleField"
|
||||
@keyup.esc="newTaskFieldActive = false"
|
||||
@blur="hideCrateNewTask"
|
||||
@keyup.esc="newTaskFieldActive = false"
|
||||
class="input"
|
||||
ref="newTaskTitleField"
|
||||
type="text"
|
||||
v-if="newTaskFieldActive"
|
||||
v-model="newTaskTitle"
|
||||
/>
|
||||
</transition>
|
||||
<button class="button is-primary noshadow" @click="showCreateNewTask">
|
||||
<button @click="showCreateNewTask" class="button is-primary noshadow">
|
||||
<span class="icon is-small">
|
||||
<icon icon="plus"/>
|
||||
</span>
|
||||
|
|
@ -113,7 +122,7 @@
|
|||
<p class="card-header-title">
|
||||
Edit Task
|
||||
</p>
|
||||
<a class="card-header-icon" @click="() => {isTaskEdit = false; taskToEdit = null}">
|
||||
<a @click="() => {isTaskEdit = false; taskToEdit = null}" class="card-header-icon">
|
||||
<span class="icon">
|
||||
<icon icon="times"/>
|
||||
</span>
|
||||
|
|
@ -130,258 +139,258 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import VueDragResize from 'vue-drag-resize'
|
||||
import EditTask from './edit-task'
|
||||
import VueDragResize from 'vue-drag-resize'
|
||||
import EditTask from './edit-task'
|
||||
|
||||
import TaskService from '../../services/task'
|
||||
import TaskModel from '../../models/task'
|
||||
import priorities from '../../models/priorities'
|
||||
import PriorityLabel from './partials/priorityLabel'
|
||||
import TaskCollectionService from '../../services/taskCollection'
|
||||
import {mapState} from 'vuex'
|
||||
import Rights from '../../models/rights.json'
|
||||
import TaskService from '../../services/task'
|
||||
import TaskModel from '../../models/task'
|
||||
import priorities from '../../models/priorities'
|
||||
import PriorityLabel from './partials/priorityLabel'
|
||||
import TaskCollectionService from '../../services/taskCollection'
|
||||
import {mapState} from 'vuex'
|
||||
import Rights from '../../models/rights.json'
|
||||
|
||||
export default {
|
||||
name: 'GanttChart',
|
||||
components: {
|
||||
PriorityLabel,
|
||||
EditTask,
|
||||
VueDragResize,
|
||||
export default {
|
||||
name: 'GanttChart',
|
||||
components: {
|
||||
PriorityLabel,
|
||||
EditTask,
|
||||
VueDragResize,
|
||||
},
|
||||
props: {
|
||||
listId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
props: {
|
||||
listId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
showTaskswithoutDates: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
dateFrom: {
|
||||
default: new Date((new Date()).setDate((new Date()).getDate() - 15))
|
||||
},
|
||||
dateTo: {
|
||||
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: {
|
||||
type: Number,
|
||||
default: 35,
|
||||
}
|
||||
showTaskswithoutDates: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
days: [],
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
|
||||
tasksWithoutDates: [],
|
||||
taskService: TaskService,
|
||||
taskDragged: null, // Saves to currently dragged task to be able to update it
|
||||
fullWidth: 0,
|
||||
now: null,
|
||||
dayOffsetUntilToday: 0,
|
||||
isTaskEdit: false,
|
||||
taskToEdit: null,
|
||||
newTaskTitle: '',
|
||||
newTaskFieldActive: false,
|
||||
priorities: {},
|
||||
taskCollectionService: TaskCollectionService,
|
||||
}
|
||||
dateFrom: {
|
||||
default: new Date((new Date()).setDate((new Date()).getDate() - 15)),
|
||||
},
|
||||
watch: {
|
||||
'dateFrom': 'buildTheGanttChart',
|
||||
'dateTo': 'buildTheGanttChart',
|
||||
'listId': 'parseTasks',
|
||||
dateTo: {
|
||||
default: new Date((new Date()).setDate((new Date()).getDate() + 30)),
|
||||
},
|
||||
created() {
|
||||
this.now = new Date()
|
||||
this.taskCollectionService = new TaskCollectionService()
|
||||
this.taskService = new TaskService()
|
||||
this.priorities = priorities
|
||||
// The width of a day in pixels, used to calculate all sorts of things.
|
||||
dayWidth: {
|
||||
type: Number,
|
||||
default: 35,
|
||||
},
|
||||
mounted() {
|
||||
this.buildTheGanttChart()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
days: [],
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
|
||||
tasksWithoutDates: [],
|
||||
taskService: TaskService,
|
||||
taskDragged: null, // Saves to currently dragged task to be able to update it
|
||||
fullWidth: 0,
|
||||
now: null,
|
||||
dayOffsetUntilToday: 0,
|
||||
isTaskEdit: false,
|
||||
taskToEdit: null,
|
||||
newTaskTitle: '',
|
||||
newTaskFieldActive: false,
|
||||
priorities: {},
|
||||
taskCollectionService: TaskCollectionService,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'dateFrom': 'buildTheGanttChart',
|
||||
'dateTo': 'buildTheGanttChart',
|
||||
'listId': 'parseTasks',
|
||||
},
|
||||
created() {
|
||||
this.now = new Date()
|
||||
this.taskCollectionService = new TaskCollectionService()
|
||||
this.taskService = new TaskService()
|
||||
this.priorities = priorities
|
||||
},
|
||||
mounted() {
|
||||
this.buildTheGanttChart()
|
||||
},
|
||||
computed: mapState({
|
||||
canWrite: state => state.currentList.maxRight > Rights.READ,
|
||||
}),
|
||||
methods: {
|
||||
buildTheGanttChart() {
|
||||
this.setDates()
|
||||
this.prepareGanttDays()
|
||||
this.parseTasks()
|
||||
},
|
||||
computed: mapState({
|
||||
canWrite: state => state.currentList.maxRight > Rights.READ,
|
||||
}),
|
||||
methods: {
|
||||
buildTheGanttChart() {
|
||||
this.setDates()
|
||||
this.prepareGanttDays()
|
||||
this.parseTasks()
|
||||
},
|
||||
setDates() {
|
||||
this.startDate = new Date(this.dateFrom)
|
||||
this.endDate = new Date(this.dateTo)
|
||||
setDates() {
|
||||
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
|
||||
},
|
||||
prepareGanttDays() {
|
||||
// Layout: years => [months => [days]]
|
||||
let years = {};
|
||||
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) {
|
||||
years[date.getFullYear() + ''][date.getMonth() + ''] = []
|
||||
}
|
||||
years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
|
||||
this.fullWidth += this.dayWidth
|
||||
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)) {
|
||||
let date = new Date(d)
|
||||
if (years[date.getFullYear() + ''] === undefined) {
|
||||
years[date.getFullYear() + ''] = {}
|
||||
}
|
||||
this.$set(this, 'days', years)
|
||||
},
|
||||
parseTasks() {
|
||||
this.setDates()
|
||||
this.prepareTasks()
|
||||
},
|
||||
prepareTasks() {
|
||||
|
||||
const getAllTasks = (page = 1) => {
|
||||
return this.taskCollectionService.getAll({listId: this.listId}, {}, page)
|
||||
.then(tasks => {
|
||||
if(page < this.taskCollectionService.totalPages) {
|
||||
return getAllTasks(page + 1)
|
||||
.then(nextTasks => {
|
||||
return tasks.concat(nextTasks)
|
||||
})
|
||||
} else {
|
||||
return tasks
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
return Promise.reject(e)
|
||||
})
|
||||
if (years[date.getFullYear() + ''][date.getMonth() + ''] === undefined) {
|
||||
years[date.getFullYear() + ''][date.getMonth() + ''] = []
|
||||
}
|
||||
years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
|
||||
this.fullWidth += this.dayWidth
|
||||
}
|
||||
this.$set(this, 'days', years)
|
||||
},
|
||||
parseTasks() {
|
||||
this.setDates()
|
||||
this.prepareTasks()
|
||||
},
|
||||
prepareTasks() {
|
||||
|
||||
getAllTasks()
|
||||
const getAllTasks = (page = 1) => {
|
||||
return this.taskCollectionService.getAll({listId: this.listId}, {}, page)
|
||||
.then(tasks => {
|
||||
this.theTasks = tasks
|
||||
.filter(t => {
|
||||
if(t.startDate === null && !t.done) {
|
||||
this.tasksWithoutDates.push(t)
|
||||
}
|
||||
return t.startDate >= this.startDate && t.endDate <= this.endDate
|
||||
})
|
||||
.map(t => {
|
||||
return this.addGantAttributes(t)
|
||||
})
|
||||
.sort(function(a,b) {
|
||||
if (a.startDate < b.startDate)
|
||||
return -1
|
||||
if (a.startDate > b.startDate)
|
||||
return 1
|
||||
return 0
|
||||
})
|
||||
if (page < this.taskCollectionService.totalPages) {
|
||||
return getAllTasks(page + 1)
|
||||
.then(nextTasks => {
|
||||
return tasks.concat(nextTasks)
|
||||
})
|
||||
} else {
|
||||
return tasks
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
return Promise.reject(e)
|
||||
})
|
||||
},
|
||||
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
|
||||
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 startDate = new Date(this.startDate)
|
||||
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)
|
||||
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.
|
||||
for (const tt in this.theTasks) {
|
||||
if (this.theTasks[tt].id === this.taskDragged.id) {
|
||||
this.$set(this, 'taskDragged', this.theTasks[tt])
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
if (this.tasksWithoutDates[t].id === r.id) {
|
||||
this.tasksWithoutDates.splice(t, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
this.theTasks.push(this.addGantAttributes(r))
|
||||
} else {
|
||||
for (const tt in this.theTasks) {
|
||||
if (this.theTasks[tt].id === r.id) {
|
||||
this.$set(this.theTasks, tt, this.addGantAttributes(r))
|
||||
break
|
||||
}
|
||||
}
|
||||
getAllTasks()
|
||||
.then(tasks => {
|
||||
this.theTasks = tasks
|
||||
.filter(t => {
|
||||
if (t.startDate === null && !t.done) {
|
||||
this.tasksWithoutDates.push(t)
|
||||
}
|
||||
return t.startDate >= this.startDate && t.endDate <= this.endDate
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
.map(t => {
|
||||
return this.addGantAttributes(t)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
editTask(task) {
|
||||
this.taskToEdit = task
|
||||
this.isTaskEdit = true
|
||||
},
|
||||
showCreateNewTask() {
|
||||
if(!this.newTaskFieldActive) {
|
||||
// Timeout to not send the form if the field isn't even shown
|
||||
setTimeout(() => {
|
||||
this.newTaskFieldActive = true
|
||||
this.$nextTick(() => this.$refs.newTaskTitleField.focus())
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
hideCrateNewTask() {
|
||||
if(this.newTaskTitle === '') {
|
||||
this.$nextTick(() => this.newTaskFieldActive = false)
|
||||
}
|
||||
},
|
||||
addNewTask() {
|
||||
if (!this.newTaskFieldActive) {
|
||||
.sort(function (a, b) {
|
||||
if (a.startDate < b.startDate)
|
||||
return -1
|
||||
if (a.startDate > b.startDate)
|
||||
return 1
|
||||
return 0
|
||||
})
|
||||
})
|
||||
.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
|
||||
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 task = new TaskModel({title: this.newTaskTitle, listId: this.listId})
|
||||
this.taskService.create(task)
|
||||
|
||||
let didntHaveDates = this.taskDragged.startDate === null ? true : false
|
||||
|
||||
let startDate = new Date(this.startDate)
|
||||
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)
|
||||
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.
|
||||
for (const tt in this.theTasks) {
|
||||
if (this.theTasks[tt].id === this.taskDragged.id) {
|
||||
this.$set(this, 'taskDragged', this.theTasks[tt])
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
this.taskService.update(this.taskDragged)
|
||||
.then(r => {
|
||||
this.tasksWithoutDates.push(this.addGantAttributes(r))
|
||||
this.newTaskTitle = ''
|
||||
this.hideCrateNewTask()
|
||||
// If the task didn't have dates before, we'll update the list
|
||||
if (didntHaveDates) {
|
||||
for (const t in this.tasksWithoutDates) {
|
||||
if (this.tasksWithoutDates[t].id === r.id) {
|
||||
this.tasksWithoutDates.splice(t, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
this.theTasks.push(this.addGantAttributes(r))
|
||||
} else {
|
||||
for (const tt in this.theTasks) {
|
||||
if (this.theTasks[tt].id === r.id) {
|
||||
this.$set(this.theTasks, tt, this.addGantAttributes(r))
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
}, 100)
|
||||
},
|
||||
}
|
||||
editTask(task) {
|
||||
this.taskToEdit = task
|
||||
this.isTaskEdit = true
|
||||
},
|
||||
showCreateNewTask() {
|
||||
if (!this.newTaskFieldActive) {
|
||||
// Timeout to not send the form if the field isn't even shown
|
||||
setTimeout(() => {
|
||||
this.newTaskFieldActive = true
|
||||
this.$nextTick(() => this.$refs.newTaskTitleField.focus())
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
hideCrateNewTask() {
|
||||
if (this.newTaskTitle === '') {
|
||||
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 => {
|
||||
this.tasksWithoutDates.push(this.addGantAttributes(r))
|
||||
this.newTaskTitle = ''
|
||||
this.hideCrateNewTask()
|
||||
})
|
||||
.catch(e => {
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Reference in a new issue