borbad.s5l.ru/vue/app/shared/EventDetailModal

Компонент EventDetailModal - Полная документация

Назначение компонента

EventDetailModal - модальное окно для детального просмотра информации о мероприятиях. Компонент предоставляет полную информацию о событии, включая описание, даты, место проведения, цены, доступные билеты и галерею изображений. Поддерживает мультиязычность и адаптивный дизайн.

git репозитарий

https://gogs.osvoj.ru/s5l.ru/borbad.s5l.ru/src/master/vue/app/shared/EventDetailModal/

Импорт и регистрация

# В основном файле приложения (app/temp.coffee)
components:
    'event-detail-modal': require 'app/shared/EventDetailModal'

Базовое использование

Открытие модального окна

# Через глобальную шину событий
EventBus.emit('open_event_modal', eventData)

# Через метод родительского компонента
_.openModal(require('app/shared/EventDetailModal'), { event: eventData })

Props

event (обязательный)

• Тип: Object
• Описание: Объект события с полной информацией

• Структура:

  {
  _id: String
  type: "event"
  title: Array[String]  # мультиязычный массив
  content: Array[String]
  excerpt: Array[String]
  image: Array[String]
  gallery: Array[Array[String]]
  event_data: {
    event_date: ISOString
    end_date: ISOString
    location: Array[String]
    price: Array[Number]
    currency: String
    available_tickets: Number
    total_tickets: Number
    status: String
    registration_required: Boolean
    age_restriction: Array[String]
    organizer: Array[String]
    performers: Array[Array[String]]
    duration: Number
  }
  # ... другие поля
  }
  

show (опциональный)

• Тип: Boolean
• По умолчанию: false
• Описание: Управление видимостью модального окна

События (Events)

@close

• Описание: Событие закрытия модального окна
• Payload: null

• Использование:

  event-detail-modal(:event="eventData" @close="handleModalClose")
  

@register

• Описание: Событие регистрации на мероприятие
• Payload: { event: Object, tickets: Number }

• Использование:

  event-detail-modal(:event="eventData" @register="handleEventRegistration")
  

Слоты (Slots)

[header] (опциональный)

• Описание: Кастомный заголовок модального окна

• Пример:

  event-detail-modal(:event="eventData")
    template([header])
        div(class="custom-header")
            h2 Специальное мероприятие
            badge(type="premium")
  

[footer] (опциональный)

• Описание: Кастомный футер модального окна

• Пример:

  event-detail-modal(:event="eventData")
    template([footer])
        div(class="flex justify-between items-center")
            span Дополнительная информация
            button(@click="showExtraInfo") Подробнее
  

Методы компонента

open()

• Описание: Программное открытие модального окна

• Использование:

  modalRef = _.$refs.eventModal
  modalRef.open()
  

close()

• Описание: Программное закрытие модального окна

• Использование:

  modalRef = _.$refs.eventModal
  modalRef.close()
  

registerForEvent(tickets)

• Описание: Программная регистрация на мероприятие
• Параметры: tickets - количество билетов

• Использование:

  modalRef = _.$refs.eventModal
  modalRef.registerForEvent(2)
  

Полные примеры использования

1. Базовое использование в компоненте

//- Родительский компонент
div
    button(
        @click="openEventModal(event)"
        class="btn btn-primary"
    ) Подробнее о мероприятии
    
    event-detail-modal(
        v-if="selectedEvent"
        :event="selectedEvent"
        :show="showModal"
        @close="closeEventModal"
        @register="handleRegistration"
    )

# Логика родительского компонента
methods:
    openEventModal: (event) ->
        @selectedEvent = event
        @showModal = true
    
    closeEventModal: ->
        @showModal = false
        @selectedEvent = null
    
    handleRegistration: (data) ->
        debug.log "Регистрация на мероприятие: "+data.event.title
        debug.log "Билетов: "+data.tickets
        # Логика регистрации...

2. Использование с глобальной шиной событий

# В любом месте приложения
EventBus.emit('open_event_modal', {
    _id: "event_123"
    title: ["Концерт симфонической музыки", "Symphonic Concert"]
    content: ["Описание мероприятия...", "Event description..."]
    event_data: {
        event_date: "2024-03-20T19:00:00.000Z"
        location: ["Большой зал", "Main Hall"]
        price: [500, 500]
        currency: "TJS"
        available_tickets: 45
        status: "upcoming"
    }
    # ... другие поля
})

3. Программное управление

div
    event-detail-modal(
        ref="eventModal"
        :event="currentEvent"
        @close="onModalClose"
        @register="onEventRegister"
    )
    
    button(@click="openModalProgrammatically") Открыть программно

methods:
    openModalProgrammatically: ->
        @currentEvent = this.getEventData()
        this.$nextTick(() =>
            @$refs.eventModal.open()
        )
    
    onModalClose: ->
        debug.log "Модальное окно закрыто"
    
    onEventRegister: (data) ->
        # Обработка регистрации
        this.registerUserForEvent(data.event, data.tickets)

4. Использование с кастомными слотами

event-detail-modal(:event="eventData" :show="isModalOpen")
    template([header])
        div(class="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6")
            h1(class="text-2xl font-bold") {{ eventData.title }}
            div(class="flex items-center space-x-2 mt-2")
                icon(name="star" class="w-5 h-5")
                span Премиум мероприятие
    
    template([footer])
        div(class="bg-gray-50 p-4 border-t")
            div(class="flex justify-between items-center")
                span(class="text-sm text-gray-600") Нужна помощь?
                app-link(
                    to="/contacts"
                    class="text-blue-600 hover:text-blue-800 text-sm"
                ) Связаться с нами

5. Интеграция с системой бронирования

event-detail-modal(
    :event="event"
    @register="handleBooking"
    ref="bookingModal"
)

methods:
    handleBooking: (bookingData) ->
        # Интеграция с системой бронирования
        try
            result = await this.$api.events.register(
                eventId: bookingData.event._id
                tickets: bookingData.tickets
                userInfo: this.userData
            )
            
            if result.success
                this.showSuccessMessage("Регистрация успешна!")
                this.$refs.bookingModal.close()
            else
                this.showErrorMessage(result.message)
                
        catch error
            debug.log "Ошибка бронирования: "+error
            this.showErrorMessage("Ошибка при регистрации")

Особенности работы

Мультиязычность

Компонент автоматически обрабатывает мультиязычные массивы:

• title, content, excerpt - текстовые поля
• location, organizer, performers - информация о месте и участниках
• age_restriction - возрастные ограничения

Адаптивный дизайн

• Mobile-first подход
• Оптимизация для различных размеров экранов
• Горизонтальная прокрутка галереи на мобильных устройствах

Галерея изображений

• Поддержка multiple изображений
• Lightbox-просмотр при клике
• Оптимизированная загрузка изображений

Система бронирования

• Валидация количества билетов
• Проверка доступности
• Визуальная обратная связь

Стили и кастомизация

CSS-переменные для кастомизации

.event-modal
    --modal-bg: theme('colors.white')
    --modal-border: theme('colors.gray.200')
    --primary-color: theme('colors.blue.600')
    --success-color: theme('colors.green.600')
    --error-color: theme('colors.red.600')

Кастомные темы

event-detail-modal.event-modal--custom-theme(:event="eventData")

.event-modal--custom-theme
    --modal-bg: #1a202c
    --modal-border: #2d3748
    --primary-color: #9f7aea

Интеграция с аналитикой

Отслеживание событий

# В родительском компоненте
methods:
    handleModalOpen: (event) ->
        analytics.track('event_modal_opened', {
            event_id: event._id
            event_title: event.title
            category: event.category
        })
    
    handleRegistration: (data) ->
        analytics.track('event_registration_started', {
            event_id: data.event._id
            ticket_count: data.tickets
        })

Best Practices

1. Загрузка данных

# Правильно - предзагрузка данных
openEventModal: (eventId) ->
    try
        eventData = await AppDB.getDocumentById(eventId)
        @selectedEvent = eventData
        @showModal = true
    catch error
        debug.log "Ошибка загрузки мероприятия: "+error

# Неправильно - открытие до загрузки данных
openEventModal: (eventId) ->
    @showModal = true  # Модальное окно откроется пустым
    # затем загрузка данных...

2. Обработка ошибок

methods:
    handleRegistration: (data) ->
        try
            await this.processRegistration(data)
            this.showSuccessMessage("Успешная регистрация!")
        catch error
            debug.log "Ошибка регистрации: "+error
            this.showErrorMessage("Ошибка при регистрации")

3. Доступность

//- Правильно - с семантической разметкой
event-detail-modal(
    :event="eventData"
    aria-labelledby="event-modal-title"
    aria-describedby="event-modal-description"
)

4. Производительность

//- Lazy loading модального окна
event-detail-modal(
    v-if="showModal"
    :event="eventData"
    @close="showModal = false"
)

Отладка и разработка

Логирование событий

# В родительском компоненте
mounted: ->
    EventBus.on 'open_event_modal', (eventData) ->
        debug.log "Открытие модального окна мероприятия: "+eventData._id

Валидация props

# В дочерних компонентах при использовании
props:
    eventData:
        type: Object
        required: true
        validator: (value) ->
            return value && value._id && value.event_data

Компонент EventDetailModal предоставляет полнофункциональное решение для отображения детальной информации о мероприятиях с поддержкой мультиязычности, адаптивным дизайном и интеграцией с системой бронирования.