Compare commits

...

3 Commits

  1. 2
      package.json
  2. 79
      src/components/tasks/gantt-component.vue
  3. 4
      src/styles/gantt.scss
  4. 8
      yarn.lock

2
package.json

@ -14,7 +14,7 @@
"v-tooltip": "^2.0.0-rc.33",
"verte": "^0.0.12",
"vue": "^2.5.17",
"vue-drag-resize": "^1.3.2"
"vue-draggable-resizable": "^2.0.0-rc2"
},
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^1",

79
src/components/tasks/gantt-component.vue

@ -26,25 +26,25 @@
</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)'}">
<VueDragResize
<vue-draggable-resizable
class="task"
:class="{'done': t.done, 'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id, 'has-light-text': !t.hasDarkColor(), 'has-dark-text': t.hasDarkColor()}"
:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
:isActive="true"
:active="true"
:x="t.offsetDays * dayWidth - 6"
:y="0"
:w="t.durationDays * dayWidth"
:w="calcWidth(t)"
:h="31"
:minw="dayWidth"
:snapToGrid="true"
:gridX="dayWidth"
:sticks="['mr', 'ml']"
:minWidth="dayWidth"
:grid="[dayWidth, 1]"
:handles="['mr', 'ml']"
axis="x"
:parentLimitation="true"
parent=".row"
:parentW="fullWidth"
:onDragStart="setDraggedTask(t)"
:onResizeStart="setDraggedTask(t)"
@resizestop="resizeTask"
@dragstop="resizeTask"
@clicked="taskDragged = t"
>
<span :class="{
'has-high-priority': t.priority >= priorities.HIGH,
@ -66,30 +66,31 @@
<a @click="editTask(theTasks[k])" class="edit-toggle">
<icon icon="pen"/>
</a>
</VueDragResize>
</vue-draggable-resizable>
</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)'}">
<VueDragResize
<vue-draggable-resizable
class="task nodate"
:isActive="true"
:active="true"
:x="dayOffsetUntilToday * dayWidth - 6"
:y="0"
:h="31"
:minw="dayWidth"
:minWidth="dayWidth"
:snapToGrid="true"
:gridX="dayWidth"
:sticks="['mr', 'ml']"
:grid="[dayWidth, 1]"
:handles="['mr', 'ml']"
axis="x"
:parentLimitation="true"
:parent="true"
:parentW="fullWidth"
:onDragStart="setDraggedTask(t)"
:onResizeStart="setDraggedTask(t)"
@resizestop="resizeTask"
@dragstop="resizeTask"
@clicked="taskDragged = t"
v-tooltip="'This task has no dates set.'"
>
<span>{{t.text}}</span>
</VueDragResize>
</vue-draggable-resizable>
</div>
</template>
</div>
@ -135,7 +136,7 @@
</template>
<script>
import VueDragResize from 'vue-drag-resize'
import VueDraggableResizable from 'vue-draggable-resizable'
import message from '../../message'
import EditTask from './edit-task'
@ -148,7 +149,7 @@
name: 'GanttChart',
components: {
EditTask,
VueDragResize,
VueDraggableResizable,
},
props: {
list: {
@ -258,32 +259,58 @@
return 0
})
},
calcWidth(t) {
return t.durationDays * this.dayWidth
},
addGantAttributes(t) {
t.endDate === null ? this.endDate : t.endDate
t.endDate = (t.endDate === null || t.endDate === 0) ? 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
},
resizeTask(newRect) {
setDraggedTask(t) {
this.taskDragged = t
// eslint-disable-next-line
console.log('set task dragged')
},
resizeTask(x, y, width) {
// Timeout to definitly catch if the user clicked on taskedit
setTimeout(() => {
let tt = setInterval(() => {
// We let the interval here run as long as taskDragged is not set, which means this function has been called
// before setDraggedTask.
// Once taskDragged is not empty, we run the actual code and cancel the timeout loop.
// This is pretty ugly...
if(this.taskDragged === null || typeof this.taskDragged === 'undefined' || typeof this.taskDragged (undefined)) {
// eslint-disable-next-line
console.log('fckin js')
return
}
clearInterval(tt)
if(this.isTaskEdit) {
return
}
// eslint-disable-next-line
console.log('finally doing stuff', this.taskDragged)
// If the function was called from the drag handler, we need to calculate the width ourselves
if (parseInt(width) === 0 || width === undefined) {
width = this.taskDragged.durationDays * this.dayWidth
}
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() + x / this.dayWidth + 1)
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(endDate.getDate() + width / this.dayWidth)
this.taskDragged.startDate = startDate
this.taskDragged.endDate = endDate

4
src/styles/gantt.scss

@ -58,17 +58,17 @@ $gantt-vertical-border-color: lighten($grey, 45);
.row {
height: 45px;
padding: 0.5em;
.task {
display: inline-block;
border: 2px solid $primary;
background: lighten($primary, 40);
font-size: 0.85em;
margin: 0.5em;
border-radius: 6px;
padding: 0.25em 0.5em;
cursor: grab;
position: relative;
position: relative !important;
-webkit-touch-callout: none; // iOS Safari
-webkit-user-select: none; // Safari

8
yarn.lock

@ -9338,10 +9338,10 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
vue-drag-resize@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/vue-drag-resize/-/vue-drag-resize-1.3.2.tgz#99132a99746c878e4596fad08d36c98f604930a3"
integrity sha512-XiSEep3PPh9IPQqa4vIy/YENBpYch2SIPNipcPAEGhaSa0V8A8gSq9s7JQ66p/hiINdnR7f5ZqAkOdm6zU/4Gw==
vue-draggable-resizable@^2.0.0-rc2:
version "2.0.0-rc2"
resolved "https://registry.yarnpkg.com/vue-draggable-resizable/-/vue-draggable-resizable-2.0.0-rc2.tgz#492925541eabebeb5b805b2fafb358ff27927d24"
integrity sha512-ctVl5elVhRT3Py1vFqCOcbdCyFdbPq9Y0SQJ/96/MWcBQ4vod2pJNwWe00BS8H2iT7hCUaUJfMcMH8200L1jmg==
vue-eslint-parser@^2.0.3:
version "2.0.3"

Loading…
Cancel
Save