[schedule] Clip/snap child items when a parent bar is moved

src/components/pages/ProductionSchedule.vue

@@ -475,6 +475,17 @@
     @confirm="applyToProduction()"
     v-if="modals.applyScheduleVersion"
   />
+  <confirm-modal
+    active
+    :text="
+      $t('schedule.confirm_move_children', {
+        count: pendingParentChange ? pendingParentChange.affected.length : 0
+      })
+    "
+    @cancel="cancelChildMove"
+    @confirm="confirmChildMove"
+    v-if="modals.confirmChildMove"
+  />
 </template>
 
 <script>
@@ -623,8 +634,10 @@ export default {
       modals: {
         editScheduleVersion: false,
         deleteScheduleVersion: false,
-        applyScheduleVersion: false
-      }
+        applyScheduleVersion: false,
+        confirmChildMove: false
+      },
+      pendingParentChange: null
     }
   },
 
@@ -1340,14 +1353,24 @@ export default {
           this.saveScheduleItem(item.parentElement)
         }
       } else if (!item.parentElement) {
-        const minDate = this.getMinDate(item)
-        const maxDate = this.getMaxDate(item)
-        if (item.startDate.isAfter(minDate)) {
-          item.startDate = minDate
+        if (!Array.isArray(item.children)) {
+          await this.updateScheduleItem(item)
+          return
         }
-        if (item.endDate.isBefore(maxDate)) {
-          item.endDate = maxDate
+        const affected = item.children.filter(
+          child =>
+            child._dragOrigStartDate &&
+            child._dragOrigEndDate &&
+            (!child.startDate.isSame(child._dragOrigStartDate) ||
+              !child.endDate.isSame(child._dragOrigEndDate))
+        )
+        if (!affected.length) {
+          await this.updateScheduleItem(item)
+          return
         }
+        this.pendingParentChange = { item, affected }
+        this.modals.confirmChildMove = true
+        return
       }
 
       await this.updateScheduleItem(item)
@@ -1368,6 +1391,28 @@ export default {
       }
     },
 
+    async confirmChildMove() {
+      const { item, affected } = this.pendingParentChange
+      await this.updateScheduleItem(item)
+      for (const child of affected) {
+        await this.updateScheduleItem(child)
+      }
+      this.pendingParentChange = null
+      this.modals.confirmChildMove = false
+    },
+
+    cancelChildMove() {
+      const { item, affected } = this.pendingParentChange
+      item.startDate = item._dragOrigStartDate.clone()
+      item.endDate = item._dragOrigEndDate.clone()
+      affected.forEach(child => {
+        child.startDate = child._dragOrigStartDate.clone()
+        child.endDate = child._dragOrigEndDate.clone()
+      })
+      this.pendingParentChange = null
+      this.modals.confirmChildMove = false
+    },
+
     getMinDate(parentElement) {
       let minDate = this.endDate.clone()
       parentElement.children.forEach(item => {

src/components/widgets/Schedule.vue

@@ -1492,6 +1492,9 @@ const changeDates = event => {
           item.startDate = item.startDate.clone().add(dateDiffVal)
           item.endDate = item.endDate.clone().add(dateDiffVal)
         })
+        selection.value.forEach(item => {
+          propagateClipToChildren(item)
+        })
         if (props.multiline || props.subchildren) {
           const parentElements = [
             ...new Set(selection.value.map(item => item.parentElement))
@@ -1546,6 +1549,7 @@ const changeStartDate = event => {
   ) {
     currentElement.value.startDate = newStartDate.clone()
     updateItemEstimation(currentElement.value)
+    propagateClipToChildren(currentElement.value)
     refreshItemPositions(currentElement.value.parentElement)
     resetSelection([currentElement.value])
   }
@@ -1600,11 +1604,44 @@ const changeEndDate = event => {
   ) {
     currentElement.value.endDate = newEndDate.clone()
     updateItemEstimation(currentElement.value)
+    propagateClipToChildren(currentElement.value)
     refreshItemPositions(currentElement.value.parentElement)
     resetSelection([currentElement.value])
   }
 }
 
+const propagateClipToChildren = item => {
+  if (item.parentElement || !Array.isArray(item.children)) return
+  const newStart = item.startDate
+  const newEnd = item.endDate
+  item.children.forEach(child => {
+    const origStart = child._dragOrigStartDate
+    const origEnd = child._dragOrigEndDate
+    if (!origStart || !origEnd) return
+
+    // restore from orig before applying clip to prevent drift on back-drag
+    child.startDate = origStart.clone()
+    child.endDate = origEnd.clone()
+
+    if (origEnd.isSameOrBefore(newStart)) {
+      // entirely before new start: snap to 1-day bar at start
+      child.startDate = newStart.clone()
+      child.endDate = newStart.clone().add(1, 'days')
+    } else if (origStart.isBefore(newStart)) {
+      // overlaps start: clip start
+      child.startDate = newStart.clone()
+    } else if (origStart.isSameOrAfter(newEnd)) {
+      // entirely after new end: snap to 1-day bar at end
+      child.startDate = newEnd.clone().subtract(1, 'days')
+      child.endDate = newEnd.clone()
+    } else if (origEnd.isAfter(newEnd)) {
+      // overlaps end: clip end
+      child.endDate = newEnd.clone()
+    }
+    // else: child fully inside new bounds — already restored, leave untouched
+  })
+}
+
 const updateItemEstimation = item => {
   if (props.isEstimationLinked) {
     const estimation = getBusinessDays(
@@ -1673,6 +1710,14 @@ const moveTimebar = (timeElement, event) => {
     initialClientX = getClientX(event)
     document.body.style.cursor = props.reassignable ? 'all-scroll' : 'ew-resize'
 
+    timeElement._dragOrigStartDate = timeElement.startDate.clone()
+    timeElement._dragOrigEndDate = timeElement.endDate.clone()
+    if (!timeElement.parentElement && Array.isArray(timeElement.children)) {
+      timeElement.children.forEach(child => {
+        child._dragOrigStartDate = child.startDate.clone()
+        child._dragOrigEndDate = child.endDate.clone()
+      })
+    }
     updateSelection(timeElement, event)
   }
 }
@@ -1692,6 +1737,14 @@ const moveTimebarLeftSide = (timeElement, event) => {
     initialClientX = getClientX(event)
     document.body.style.cursor = 'w-resize'
 
+    timeElement._dragOrigStartDate = timeElement.startDate.clone()
+    timeElement._dragOrigEndDate = timeElement.endDate.clone()
+    if (!timeElement.parentElement && Array.isArray(timeElement.children)) {
+      timeElement.children.forEach(child => {
+        child._dragOrigStartDate = child.startDate.clone()
+        child._dragOrigEndDate = child.endDate.clone()
+      })
+    }
     updateSelection(timeElement, event)
   }
 }
@@ -1715,6 +1768,14 @@ const moveTimebarRightSide = (timeElement, event) => {
     initialClientX = getClientX(event)
     document.body.style.cursor = 'e-resize'
 
+    timeElement._dragOrigStartDate = timeElement.startDate.clone()
+    timeElement._dragOrigEndDate = timeElement.endDate.clone()
+    if (!timeElement.parentElement && Array.isArray(timeElement.children)) {
+      timeElement.children.forEach(child => {
+        child._dragOrigStartDate = child.startDate.clone()
+        child._dragOrigEndDate = child.endDate.clone()
+      })
+    }
     updateSelection(timeElement, event)
   }
 }

src/locales/en.js

@@ -1785,6 +1785,8 @@ export default {
     md: 'md',
     today: 'Today',
     zoom_level: 'Zoom level',
+    confirm_move_children:
+      'Moving this bar will clip or snap {count} sub-item(s) to fit the new bounds. Continue?',
     milestone: {
       add_milestone: 'Add milestone for',
       delete_milestone: 'Delete milestone',