@ozdao/martyrs 0.2.491 → 0.2.492

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

@@ -0,0 +1,163 @@
+<template>
+  <div class="flex-nowrap w-100 flex bg-light pd-small radius-medium mn-b-small">
+    <div class="flex w-100 gap-micro flex-v-center flex-nowrap">
+      <Tab
+        :selected="view"
+        :tabs="tabs"
+        @tab-click="$emit('update:view', $event.tab.value)"
+        class="mn-r-auto h-100 flex-child-default o-hidden pd-nano radius-small bg-white"
+        classTab="pd-thin radius-thin"
+      />
+
+      <Button 
+        @click="navPrev" 
+        class="bg-white aspect-1x1 pd-small radius-small"
+        aria-label="Previous period"
+      >
+        <IconChevronLeft class="i-small"/>
+      </Button>
+      
+      <div class="flex h-100 flex-v-center">
+        <Dropdown 
+          :label="dateLabel"
+          align="left"
+          class="pos-relative h-100 bg-white radius-small pd-thin"
+        >
+          <Calendar 
+            v-model:date="selectedDate"
+            @update:date="updateDate"
+            class="bg-white radius-small pd-small"
+          />
+        </Dropdown>
+      </div>
+      
+      <Button 
+        @click="navNext" 
+        class="bg-white aspect-1x1 pd-small radius-small"
+        aria-label="Next period"
+      >
+        <IconChevronRight class="i-small"/>
+      </Button>
+      
+      <Button 
+        @click="$emit('today')" 
+        class="pd-r-small pd-l-small radius-small bg-second t-white mn-l-thin"
+      >
+        Today
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import dayjs from 'dayjs'
+
+import Tab from '@martyrs/src/components/Tab/Tab.vue'
+import Button from '@martyrs/src/components/Button/Button.vue'
+import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'
+import Calendar from '@martyrs/src/components/Calendar/Calendar.vue'
+import DateLabel from './DateLabel.vue'
+
+import IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue'
+import IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue'
+
+const props = defineProps({
+  view: { type: String, required: true },
+  views: { type: Array, required: true },
+  date: { type: Date, required: true }
+})
+
+const emit = defineEmits(['update:view', 'update:date', 'today'])
+
+// View tabs
+const tabs = computed(() => 
+  props.views.map(v => ({
+    name: v.name,
+    label: v.name,
+    value: v.value
+  }))
+)
+
+// Date label based on view
+const dateLabel = computed(() => {
+  const d = dayjs(props.date)
+  
+  let dateText
+  switch (props.view) {
+    case 'hours':
+      dateText = d.format('DD/MM/YYYY')
+      break
+    case 'days':
+      dateText = d.format('MMMM YYYY')
+      break
+    case 'weeks':
+      dateText = d.format('MMMM YYYY')
+      break
+    default:
+      dateText = d.format('MMMM YYYY')
+  }
+  
+  return {
+    component: DateLabel,
+    props: {
+      dateText
+    },
+    class: 'cursor-pointer'
+  }
+})
+
+// Selected date for calendar
+const selectedDate = ref(props.date)
+
+// Navigation
+const navPrev = () => {
+  const d = dayjs(props.date)
+  let newDate
+  
+  switch (props.view) {
+    case 'hours':
+      newDate = d.subtract(1, 'day').toDate()
+      break
+    case 'days':
+      newDate = d.subtract(1, 'month').toDate()
+      break
+    case 'weeks':
+      newDate = d.subtract(1, 'month').toDate()
+      break
+  }
+  
+  emit('update:date', newDate)
+}
+
+const navNext = () => {
+  const d = dayjs(props.date)
+  let newDate
+  
+  switch (props.view) {
+    case 'hours':
+      newDate = d.add(1, 'day').toDate()
+      break
+    case 'days':
+      newDate = d.add(1, 'month').toDate()
+      break
+    case 'weeks':
+      newDate = d.add(1, 'month').toDate()
+      break
+  }
+  
+  emit('update:date', newDate)
+}
+
+const updateDate = (newSelectedDate) => {
+  if (newSelectedDate) {
+    const newDate = new Date(newSelectedDate)
+    emit('update:date', newDate)
+  }
+}
+
+// Watch for props.date changes to update selectedDate
+watch(() => props.date, (newDate) => {
+  selectedDate.value = newDate
+})
+</script>

package/src/modules/rents/views/components/pages/Gant/README.md

@@ -0,0 +1,221 @@
+# Документация компонента GanttChart
+
+## Обзор
+
+GanttChart - это Vue 3 компонент для отображения диаграммы Ганта с поддержкой различных временных масштабов (часы, дни, недели) и динамической подгрузкой данных при прокрутке.
+
+## Архитектура компонента
+
+### Основные компоненты:
+- **GanttChart.vue** - главный компонент
+- **GanttToolbar.vue** - панель управления с переключателями вида и навигацией
+- **GanttHeaderCell.vue** - ячейки заголовка временной шкалы
+- **GanttBar.vue** - визуализация задач/элементов
+
+## Способ создания сетки
+
+### 1. Генерация ячеек временной шкалы
+
+Сетка создается динамически в computed свойстве `visibleCells` на основе текущего вида (`view`) и диапазона дат (`dateRange`):
+
+```javascript
+const visibleCells = computed(() => {
+  const cells = []
+  
+  switch (props.view) {
+    case 'hours':
+      // Генерация 24 ячеек на каждый день
+      for (let d = new Date(start); d <= end;) {
+        for (let h = 0; h < 24; h++) {
+          cells.push({
+            type: 'hour',
+            date: new Date(d),
+            hour: h,
+            key: `${d.getTime()}-${h}`
+          })
+        }
+        d.setDate(d.getDate() + 1)
+      }
+      break
+      
+    case 'days':
+      // Генерация ячейки на каждый день
+      for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+        cells.push({
+          type: 'day',
+          date: new Date(d),
+          key: d.getTime()
+        })
+      }
+      break
+      
+    case 'weeks':
+      // Генерация ячеек по неделям
+      const ws = new Date(start)
+      ws.setDate(start.getDate() - start.getDay()) // Начало недели
+      
+      for (let w = new Date(ws); w <= end;) {
+        const we = new Date(w)
+        we.setDate(w.getDate() + 6)
+        
+        cells.push({
+          type: 'week',
+          start: new Date(w),
+          end: we,
+          key: w.getTime()
+        })
+        
+        w.setDate(w.getDate() + 7)
+      }
+      break
+  }
+  
+  return cells
+})
+```
+
+### 2. Отрисовка сетки
+
+Сетка состоит из двух слоев:
+- **Заголовок** - фиксированная строка с временными метками
+- **Тело** - строки с фоновыми ячейками и барами задач
+
+```vue
+<!-- Заголовок -->
+<div class="gantt-timeline flex">
+  <div
+    v-for="(cell, i) in visibleCells"
+    :key="cell.key"
+    class="gantt-cell"
+    :style="{ width: cellWidth + 'px' }"
+  >
+    <GanttHeaderCell :cell="cell" :view="view" :index="i" />
+  </div>
+</div>
+
+<!-- Фоновые ячейки в теле -->
+<div class="gantt-cells flex pos-absolute h-100">
+  <div
+    v-for="cell in visibleCells"
+    :key="cell.key + '-bg'"
+    class="gantt-cell h-100"
+    :style="{ width: cellWidth + 'px' }"
+  />
+</div>
+```
+
+## Механизм переключения видов
+
+### 1. Доступные виды
+```javascript
+views: [
+  { name: 'Hours', value: 'hours', width: 40 },
+  { name: 'Days', value: 'days', width: 60 },
+  { name: 'Weeks', value: 'weeks', width: 120 }
+]
+```
+
+### 2. Переключение вида
+При изменении вида:
+1. Обновляется ширина ячеек через `cellWidth`
+2. Пересчитываются видимые ячейки в `visibleCells`
+3. Происходит центрирование на текущей дате
+4. Пересчитываются позиции всех баров
+
+### 3. Навигация по времени
+В `GanttToolbar` реализована навигация:
+- **Часовой вид**: переход по дням
+- **Дневной/недельный вид**: переход по месяцам
+- Кнопка "Today" центрирует вид на текущей дате
+
+## Выявленные проблемы и ошибки
+
+### 1. Проблемы с мутацией дат
+**Ошибка**: В старой версии (`GanttChart.vue` строки 157-163, 242-244) происходит мутация объектов Date в циклах:
+```javascript
+// Проблемный код
+for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+  cells.push({
+    date: new Date(d), // Правильно - создается копия
+    key: d.getTime()
+  })
+}
+```
+
+### 2. Проблемы с позиционированием баров в недельном виде
+**Ошибка**: В новой версии (`Gant/GanttChart.vue` строки 319-348) сложная логика определения индексов недель может давать неверные результаты для граничных случаев.
+
+### 3. Отсутствие обработки ошибок
+**Проблема**: Нет проверок на корректность дат и обработки исключений при парсинге дат из строк.
+
+### 4. Проблемы производительности
+**Проблема**: При большом количестве элементов пересчет позиций баров происходит синхронно, что может вызывать задержки.
+
+### 5. Некорректная работа с часовыми поясами
+**Проблема**: Использование локального времени без учета часовых поясов может привести к смещению при работе с данными с сервера.
+
+### 6. Дублирование стилей
+**Проблема**: В обеих версиях есть дублирование CSS классов для позиционирования и стилизации.
+
+## Рекомендации по улучшению
+
+1. **Использовать библиотеку для работы с датами** (dayjs уже используется в новой версии)
+2. **Добавить виртуализацию** для больших наборов данных
+3. **Вынести расчеты позиций** в отдельные функции с мемоизацией
+4. **Добавить обработку ошибок** для некорректных дат
+5. **Использовать CSS переменные** для динамических стилей вместо inline styles
+6. **Добавить поддержку часовых поясов**
+7. **Оптимизировать перерисовки** через shallowRef для больших массивов
+
+## Пример использования
+
+```vue
+<template>
+  <GanttChart
+    :items="rentals"
+    :view="currentView"
+    :date="currentDate"
+    :date-range="dateRange"
+    :views="availableViews"
+    start-key="startDate"
+    end-key="endDate"
+    title-key="productDetails.name"
+    status-key="status"
+    group-by="productDetails.name"
+    @update:view="currentView = $event"
+    @update:date="currentDate = $event"
+    @load-more="handleLoadMore"
+    @item-click="handleItemClick"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import GanttChart from './Gant/GanttChart.vue'
+
+const currentView = ref('days')
+const currentDate = ref(new Date())
+const dateRange = ref({
+  start: new Date(2024, 0, 1),
+  end: new Date(2024, 11, 31)
+})
+
+const rentals = ref([
+  {
+    id: 1,
+    productDetails: { name: 'Product A' },
+    startDate: new Date(2024, 0, 15),
+    endDate: new Date(2024, 0, 25),
+    status: 'active'
+  }
+])
+
+const handleLoadMore = async (direction) => {
+  // Загрузка дополнительных данных
+}
+
+const handleItemClick = (item) => {
+  // Обработка клика по элементу
+}
+</script>
+```

package/src/modules/rents/views/components/pages/Gant/TIMEZONE_ISSUES.md

@@ -0,0 +1,149 @@
+# Проблемы с часовыми поясами в GanttChart
+
+## Основные проблемы
+
+### 1. Несоответствие часовых поясов между клиентом и сервером
+
+**Проблема:**
+```javascript
+// Сервер возвращает дату в UTC
+{
+  startDate: "2024-01-15T10:00:00.000Z", // 10:00 UTC
+  endDate: "2024-01-15T18:00:00.000Z"    // 18:00 UTC
+}
+
+// Клиент в Москве (UTC+3) видит:
+new Date("2024-01-15T10:00:00.000Z") // 13:00 по местному времени
+```
+
+**Как ломается:**
+- Событие, запланированное на 10:00 утра, отображается как 13:00
+- Бары сдвигаются на количество часов разницы с UTC
+- События могут "перепрыгивать" на следующий день
+
+### 2. Переход на летнее/зимнее время
+
+**Проблема:**
+```javascript
+// Март: переход на летнее время
+const date1 = new Date(2024, 2, 30); // 30 марта
+const date2 = new Date(2024, 2, 31); // 31 марта
+// Разница может быть не 24 часа, а 23 или 25!
+```
+
+**Как ломается:**
+- Неправильный расчет длительности в днях
+- Сдвиг позиций баров после перехода времени
+- Некорректная ширина баров
+
+### 3. Сравнение дат без учета времени
+
+**Проблема в коде:**
+```javascript
+// Текущий код (строки 301-302)
+const visibleStartDay = itemStartDate < props.dateRange.start ? props.dateRange.start : itemStartDate
+const visibleEndDay = itemEndDate > props.dateRange.end ? props.dateRange.end : itemEndDate
+```
+
+**Как ломается:**
+- Даты с разным временем могут некорректно сравниваться
+- События на границе дней могут отображаться неправильно
+
+### 4. Использование setHours без учета часового пояса
+
+**Проблема:**
+```javascript
+firstDayStart.setHours(0, 0, 0, 0) // Устанавливает 00:00 по местному времени
+```
+
+**Как ломается:**
+- При работе с UTC датами это может дать неожиданный день
+- Пример: `2024-01-15T23:00:00Z` в UTC+3 это уже 16 января
+
+### 5. Расчет недель
+
+**Проблема:**
+```javascript
+// Начало недели зависит от локали
+weekStart.setDate(start.getDate() - start.getDay())
+```
+
+**Как ломается:**
+- В разных странах неделя начинается в разные дни
+- Воскресенье (США) vs Понедельник (Европа)
+
+## Реальные сценарии поломок
+
+### Сценарий 1: Международная команда
+- Менеджер в Нью-Йорке создает задачу на 9:00 EST
+- Разработчик в Москве видит её на 17:00 MSK
+- В Gantt Chart задача отображается в разных днях
+
+### Сценарий 2: Ночная смена
+- Рабочая смена: 22:00 - 06:00
+- Пересекает границу дня
+- В дневном виде отображается некорректно
+
+### Сценарий 3: Путешествие
+- Пользователь создал событие в Москве
+- Открыл приложение в Лондоне
+- События сдвинулись на 3 часа
+
+## Решения
+
+### 1. Работа в UTC
+```javascript
+// Всегда конвертировать в UTC для расчетов
+const startUTC = dayjs(item.startDate).utc()
+const endUTC = dayjs(item.endDate).utc()
+
+// Расчет позиций в UTC
+const firstDayUTC = dayjs(visibleCells.value[0].date).utc().startOf('day')
+const diffDays = endUTC.diff(firstDayUTC, 'days')
+```
+
+### 2. Нормализация дат
+```javascript
+// Функция для нормализации даты к началу дня в UTC
+const normalizeToUTCDay = (date) => {
+  return dayjs(date).utc().startOf('day').toDate()
+}
+
+// Использование
+const normalizedStart = normalizeToUTCDay(startDate)
+```
+
+### 3. Явное указание часового пояса
+```javascript
+// В props компонента
+timezone: { type: String, default: 'UTC' }
+
+// При расчетах
+const localStart = dayjs(item.startDate).tz(props.timezone)
+```
+
+### 4. Сохранение контекста времени
+```javascript
+// Сохранять не только дату, но и часовой пояс
+{
+  startDate: "2024-01-15T10:00:00.000Z",
+  timezone: "Europe/Moscow",
+  isAllDay: false
+}
+```
+
+## Рекомендации
+
+1. **Всегда работать в UTC** для внутренних расчетов
+2. **Конвертировать в локальное время** только для отображения
+3. **Использовать dayjs** с плагинами timezone и utc
+4. **Тестировать** с разными часовыми поясами
+5. **Документировать** в каком формате ожидаются даты
+
+## Текущие проблемы в коде
+
+1. Использование `new Date()` без указания часового пояса
+2. Прямое сравнение дат без нормализации
+3. Использование `setHours()` для установки начала дня
+4. Отсутствие обработки перехода на летнее/зимнее время
+5. Предположение, что день всегда 24 часа