@ozdao/martyrs 0.2.604 → 0.2.605

package/src/modules/rents/views/components/pages/Gant/GanttChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-100" :style="{ '--cell-width': cellWidth + 'px' }">
+  <div class="w-100" :style="{ '--cell-width': cellWidth + 'px', '--product-col-width': productColWidth + 'px' }">
     <GanttToolbar
       :view="view"
       :views="views"
@@ -10,24 +10,37 @@
       @load-more="$emit('load-more', $event)"
     />
     
-    <div 
-      class="gantt-container scroller o-scroll bg-white radius-small br-1px br-black-transp-10"
-      ref="container"
-      @scroll="handleScroll"
-    >
-      <div class="gantt-content">
-        <!-- Header -->
-        <div class="gantt-header pos-sticky top-0 z-index-2 bg-white br-b-1px br-black-transp-10">
-          <div class="flex">
-            <div class="gantt-product-col pos-sticky left-0 z-index-3 bg-light pd-small br-r-1px br-black-transp-10">
-              Product
-            </div>
-            
+    <div class="pos-relative">
+      <!-- Resize handle overlay — full height, sticks to column edge -->
+      <div
+        class="gantt-resize-overlay"
+        :style="{ left: productColWidth + 'px' }"
+      >
+        <div
+          class="gantt-resize-handle"
+          @mousedown.prevent="onResizeStart"
+          @touchstart.prevent="onResizeStart"
+        />
+      </div>
+
+      <div
+        class="gantt-container scroller o-scroll bg-white radius-small"
+        ref="container"
+        @scroll="handleScroll"
+      >
+        <div class="gantt-content">
+          <!-- Header -->
+          <div class="gantt-header pos-sticky top-0 z-index-2 bg-white">
+            <div class="flex">
+              <div class="gantt-product-col gantt-border-r pos-sticky left-0 bg-light pd-small" style="z-index: 30">
+                Product
+              </div>
+
             <div class="gantt-timeline flex">
               <div
                 v-for="(cell, i) in visibleCells"
                 :key="cell.key"
-                class="gantt-cell br-r-1px br-black-transp-10 t-center pd-small"
+                class="gantt-cell gantt-border-r t-center pd-small"
                 :class="getCellClass(cell)"
                 :style="{ width: cellWidth + 'px' }"
               >
@@ -39,30 +52,32 @@
 
         <!-- Body -->
         <div class="gantt-body">
-          <div 
-            v-for="(group, i) in groups" 
-            :key="group.key" 
-            class="gantt-row flex br-b-1px br-black-transp-10"
+          <div
+            v-for="(group, i) in groups"
+            :key="group.key"
+            class="gantt-row flex"
             :class="i % 2 === 0 ? 'bg-light-transp' : ''"
             :style="{ height: rowHeight + 'px' }"
           >
-            <div class="gantt-product-col pos-sticky left-0 z-index-1 bg-white pd-small br-r-1px br-black-transp-10">
-              <div class="fw-medium mn-b-micro">{{ group.title }}</div>
-              <div class="t-micro" :class="statusClass(group)">{{ group.status }}</div>
+            <div class="gantt-product-col gantt-border-r pos-sticky left-0 pd-small flex-v-center flex" :class="i % 2 === 0 ? 'bg-light' : 'bg-white'" style="z-index: 20">
+              <slot name="product-col" :group="group" :index="i">
+                <div class="fw-medium truncate">{{ group.title }}</div>
+              </slot>
             </div>
-            
+
             <div class="gantt-timeline pos-relative">
               <!-- Background cells -->
               <div class="gantt-cells flex pos-absolute h-100">
                 <div
                   v-for="cell in visibleCells"
                   :key="cell.key + '-bg'"
-                  class="gantt-cell h-100 br-r-1px br-black-transp-10"
-                  :class="getCellClass(cell)"
+                  class="gantt-cell h-100 gantt-border-r"
+                  :class="[getCellClass(cell), { 'gantt-cell-interactive': (!group.data?.isProductRow || !group.data?.hasVariants) && !isCellOccupied(group, cell) }]"
                   :style="{ width: cellWidth + 'px' }"
+                  @click="(!group.data?.isProductRow || !group.data?.hasVariants) && !isCellOccupied(group, cell) && $emit('cell-click', { group, cell })"
                 />
               </div>
-              
+
               <!-- Bars -->
               <div class="gantt-bars pos-absolute h-100">
                 <GanttBar
@@ -76,13 +91,14 @@
             </div>
           </div>
         </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onUnmounted, watch, nextTick, shallowRef, onMounted } from 'vue'
+import { ref, computed, onUnmounted, watch, nextTick, shallowRef, onMounted, onBeforeUnmount } from 'vue'
 import dayjs from 'dayjs'
 // import utc from 'dayjs/plugin/utc'
 // import timezone from 'dayjs/plugin/timezone'
@@ -90,10 +106,13 @@ import dayjs from 'dayjs'
 // dayjs.extend(utc)
 // dayjs.extend(timezone)
 
+import { mixins } from '@martyrs/src/modules/core/core.client.js'
 import GanttToolbar from './GanttToolbar.vue'
 import GanttHeaderCell from './GanttHeaderCell.vue'
 import GanttBar from './GanttBar.vue'
 
+const { isPhone } = mixins.useGlobalMixins()
+
 const props = defineProps({
   items: { type: Array, required: true },
   view: { type: String, default: 'days' },
@@ -114,15 +133,17 @@ const props = defineProps({
   idKey: { type: String, default: 'id' },
   groupBy: { type: String, default: 'title' },
   loading: { type: Boolean, default: false },
-  rowHeight: { type: Number, default: 60 }
+  rowHeight: { type: Number, default: 60 },
+  externalGroups: { type: Array, default: () => [] }
 })
 
 const emit = defineEmits([
   'update:view',
-  'update:date', 
+  'update:date',
   'update:dateRange',
   'load-more',
   'item-click',
+  'cell-click',
   'today'
 ])
 
@@ -130,6 +151,43 @@ const emit = defineEmits([
 const container = ref(null)
 const scrollLeft = ref(0)
 
+// Product column resize
+const productColWidth = ref(isPhone() ? 100 : 200)
+const isResizing = ref(false)
+let resizeStartX = 0
+let resizeStartWidth = 0
+
+const onResizeStart = (e) => {
+  isResizing.value = true
+  const event = e.touches ? e.touches[0] : e
+  resizeStartX = event.clientX
+  resizeStartWidth = productColWidth.value
+  document.addEventListener('mousemove', onResizeMove)
+  document.addEventListener('mouseup', onResizeEnd)
+  document.addEventListener('touchmove', onResizeMove, { passive: false })
+  document.addEventListener('touchend', onResizeEnd)
+}
+
+const onResizeMove = (e) => {
+  if (!isResizing.value) return
+  if (e.touches) e.preventDefault()
+  const event = e.touches ? e.touches[0] : e
+  const diff = event.clientX - resizeStartX
+  productColWidth.value = Math.max(60, Math.min(400, resizeStartWidth + diff))
+}
+
+const onResizeEnd = () => {
+  isResizing.value = false
+  document.removeEventListener('mousemove', onResizeMove)
+  document.removeEventListener('mouseup', onResizeEnd)
+  document.removeEventListener('touchmove', onResizeMove)
+  document.removeEventListener('touchend', onResizeEnd)
+}
+
+onBeforeUnmount(() => {
+  onResizeEnd()
+})
+
 // Cell width
 const cellWidth = computed(() => {
   const view = props.views.find(v => v.value === props.view)
@@ -207,15 +265,29 @@ const getNestedValue = (obj, path) => {
 
 // Groups
 const groups = computed(() => {
+  if (props.externalGroups.length > 0) {
+    // Merge items from props.items into external groups by groupBy key
+    const itemsByGroup = new Map()
+    props.items.forEach(item => {
+      const key = getNestedValue(item, props.groupBy) || 'Ungrouped'
+      if (!itemsByGroup.has(key)) itemsByGroup.set(key, [])
+      itemsByGroup.get(key).push(item)
+    })
+    return props.externalGroups.map(g => ({
+      ...g,
+      items: itemsByGroup.get(g.key) || []
+    }))
+  }
+
   const map = new Map()
-  
+
   props.items.forEach(item => {
     const key = getNestedValue(item, props.groupBy) || 'Ungrouped'
     
     if (!map.has(key)) {
       map.set(key, {
         key,
-        title: key,
+        title: getNestedValue(item, props.titleKey) || key,
         items: [],
         status: getNestedValue(item, props.statusKey)
       })
@@ -264,11 +336,34 @@ const statusClass = (group) => {
     active: 't-green',
     completed: 't-blue',
     canceled: 't-red',
-    default: 't-transp'
+    default: 'opacity-50'
   }
   return map[s] || map.default
 }
 
+// Check if a cell is occupied by any bar in the group
+const isCellOccupied = (group, cell) => {
+  if (!group.items?.length) return false
+  const cellDate = new Date(cell.date)
+  let cellStart, cellEnd
+  if (cell.type === 'hour') {
+    cellStart = cellDate
+    cellEnd = new Date(cellDate.getTime() + 60 * 60 * 1000)
+  } else if (cell.type === 'day') {
+    cellStart = new Date(cellDate); cellStart.setHours(0, 0, 0, 0)
+    cellEnd = new Date(cellDate); cellEnd.setHours(23, 59, 59, 999)
+  } else {
+    cellStart = cellDate
+    cellEnd = new Date(cellDate.getTime() + 7 * 24 * 60 * 60 * 1000)
+  }
+  return group.items.some(item => {
+    const s = new Date(getNestedValue(item, props.startKey))
+    const e = new Date(getNestedValue(item, props.endKey))
+    if (isNaN(s.getTime()) || isNaN(e.getTime())) return false
+    return s < cellEnd && e > cellStart
+  })
+}
+
 // Get bars
 const getBars = (group) => {
   const result = []
@@ -437,7 +532,6 @@ const getBars = (group) => {
     }
   })
   
-  console.log('Final bars result:', result)
   return result
 }
 
@@ -556,8 +650,7 @@ watch(() => props.dateRange, () => {
 <style>
 .gantt-container {
   --cell-width: 60px;
-  height: 500px;
-  position: relative;
+  border: 1px solid rgba(var(--black), 0.1);
 }
 
 .gantt-content {
@@ -566,17 +659,55 @@ watch(() => props.dateRange, () => {
 }
 
 .gantt-header {
-  height: 60px;
+  border-bottom: 1px solid rgba(var(--black), 0.1);
 }
 
 .gantt-product-col {
-  width: 200px;
-  min-width: 200px;
+  width: var(--product-col-width, 200px);
+  min-width: var(--product-col-width, 200px);
   flex-shrink: 0;
 }
 
+.gantt-resize-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  z-index: 40;
+  pointer-events: none;
+}
+
+.gantt-resize-handle {
+  position: absolute;
+  left: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  pointer-events: auto;
+}
+
+.gantt-resize-handle::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: rgba(var(--black), 0.15);
+}
+
+.gantt-resize-handle:hover::after,
+.gantt-resize-handle:active::after {
+  background: rgba(var(--second), 0.5);
+  width: 3px;
+}
+
+.gantt-border-r {
+  border-right: 1px solid rgba(var(--black), 0.1);
+}
+
 .gantt-timeline {
-  position: relative;
   min-width: fit-content;
 }
 
@@ -586,7 +717,7 @@ watch(() => props.dateRange, () => {
 }
 
 .gantt-row {
-  position: relative;
+  border-bottom: 1px solid rgba(var(--black), 0.06);
 }
 
 .gantt-cells,
@@ -594,4 +725,33 @@ watch(() => props.dateRange, () => {
   width: fit-content;
   left: 0;
 }
+
+.gantt-cell-interactive {
+  cursor: pointer;
+  position: relative;
+}
+
+.gantt-cell-interactive:hover::after {
+  content: '+';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 18px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+}
+
+.gantt-cell-interactive:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.bg-light-transp {
+  background: rgba(var(--light), 0.5);
+}
+
+.bg-blue-transp {
+  background: rgba(var(--second), 0.08);
+}
 </style>

package/src/modules/rents/views/components/pages/Gant/GanttHeaderCell.vue

@@ -14,7 +14,7 @@
         {{ dayjs(cell.date).format('MMM YYYY') }}
       </div> -->
       <div class="fw-medium">{{ cell.date.getDate() }}</div>
-      <div class="t-micro t-transp">{{ dayjs(cell.date).format('ddd') }}</div>
+      <div class="t-micro opacity-50">{{ dayjs(cell.date).format('ddd') }}</div>
     </template>
     
     <!-- Week view -->
@@ -23,7 +23,7 @@
         {{ dayjs(cell.start).format('MMM YYYY') }}
       </div> -->
       <div class="t-small">{{ dayjs(cell.start).format('D') }}-{{ dayjs(cell.end).format('D') }}</div>
-      <div class="t-micro t-transp">W{{ weekNumber }}</div>
+      <div class="t-micro opacity-50">W{{ weekNumber }}</div>
     </template>
   </div>
 </template>

package/src/modules/rents/views/components/pages/Gant/GanttToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-nowrap w-100 flex bg-light pd-small radius-medium mn-b-small">
+  <div class="flex-nowrap w-100 flex bg-light pd-small radius-medium mn-b-small o-x-scroll scroll-hide">
     <div class="flex w-100 gap-micro flex-v-center flex-nowrap">
       <Tab
         :selected="view"
@@ -103,7 +103,7 @@ const dateLabel = computed(() => {
     props: {
       dateText
     },
-    class: 'cursor-pointer'
+    class: 'cursor-pointer ws-nowrap'
   }
 })