From ba318235a903b766231356f79b51fad536f09482 Mon Sep 17 00:00:00 2001
From: Marko Zunic <marko.zunic06@gmail.com>
Date: Tue, 2 Jun 2020 14:20:56 +0200
Subject: [PATCH] HTML content can be dropped on g-gantt-rows now. The drop
 event returns the native event, the bar dropped on and the time dropped on

---
 src/GGanttRow.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/GGanttRow.vue b/src/GGanttRow.vue
index be95cc8..331990d 100644
--- a/src/GGanttRow.vue
+++ b/src/GGanttRow.vue
@@ -3,6 +3,7 @@
     class="g-gantt-row"
     ref="g-gantt-row"
     :style="{height: `${$parent.rowHeight}px`}"
+    v-on="$listeners"
   >
     <div 
       class="g-gantt-row-label"
@@ -16,6 +17,8 @@
       class="g-gantt-row-bars-container"
       ref="barContainer"
       :style="barsContainerStyle"
+      @dragover="onDragover($event)"
+      @drop="onDrop($event)"
       @mouseover="onMouseover()"
       @mouseleave="onMouseleave()"
     > 
@@ -42,6 +45,7 @@
 
 <script>
 import GGanttBar from './GGanttBar.vue'
+import moment from 'moment'
 
 export default {
 
@@ -59,7 +63,13 @@ export default {
     highlightOnHover: Boolean,
   },
 
-  inject: ["ganttChartProps", "getThemeColors"],
+  inject: [
+    "ganttChartProps",
+    "getThemeColors",
+    "getHourCount",
+    "getChartStart",
+    "getChartEnd"
+  ],
 
   data(){
     return {
@@ -93,6 +103,19 @@ export default {
 
   methods:{
 
+    onDragover(e) {
+      e.preventDefault()   // enables dropping content on row
+    },
+
+    onDrop(e){
+      let barContainer = this.$refs.barContainer.getBoundingClientRect()
+      let xPos = e.clientX - barContainer.left
+      let hourDiffFromStart = (xPos/barContainer.width) * this.getHourCount()
+      let time = moment(this.getChartStart()).add(hourDiffFromStart, "hours")
+      let bar = this.bars.find(bar => time.isBetween(bar[this.barStart], bar[this.barEnd]))
+      this.$emit("drop", {event: e, bar, time: time.format("YYYY-MM-DD HH:mm:ss")})
+    },
+
     onMouseover(){
       if(this.highlightOnHover){
         this.$refs["g-gantt-row"].style.backgroundColor = this.getThemeColors().hoverHighlight