Opening one modal from another one and share ref variable beetween them

[emelyanovkr]

Hello,

I'm opening first modal with the button as usual, then I want to open another modal like confirmation window, and when I do it with calling .show() function and changing z-index, it's opening successfully, however, this two modals doesn't share eventIdToDelete value. What I mean by that, is that I'm changing value of this variable in one function. When calling another modal and this variable have null value, but it should have a proper value it was set too. Like I didn't even called the first modal.

My main purpose is to get confirmation from user to delete event, that why I am calling another modal to open up.
However, I am looking for other methods to get confirmation

My parent component EventCard.vue:

<script setup lang="ts">
import * as bootstrap from 'bootstrap'
import EventInfoModal from '@/components/eventCard/EventInfoModal.vue'

export interface EventCardProps {
  id: number
  eventName: string
  hostName: string
  description: string
  date: string
  time: string
  location: string
}

defineProps<{ eventData: EventCardProps }>()

const descriptionPreviewLimit = 100

const truncateDescription = (description: string, limit: number) => {
  return description.length > limit ? description.slice(0, limit) + '...' : description
}

const formatDate = (date: string) => {
  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(date).toLocaleDateString('en-US', options)
}

const formatTime = (time: string) => {
  return time.slice(0, 5)
}

const showModal = (modalId: string) => {
  const modalElement = document.getElementById(modalId) as HTMLElement
  if (modalElement) {
    const infoModal = new bootstrap.Modal(modalElement)
    infoModal.show()
  } else {
    console.error('Modal element not found:', modalId)
  }
}
</script>

<template>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
  />

  <div class="card event-card">
    <div class="card-header">
      <h5 class="event-title">{{ eventData.eventName }}</h5>
      <small class="text-muted">Hosted by {{ eventData.hostName }}</small>
    </div>

    <div class="card-body">
      <p class="event-description">
        {{ truncateDescription(eventData.description, descriptionPreviewLimit) }}
      </p>
    </div>

    <div class="card-footer d-flex justify-content-between">
      <span class="event-date-time">
        <i class="bi bi-clock card-icons" /> {{ formatDate(eventData.date) }} -
        {{ formatTime(eventData.time) }}
      </span>
      <span class="event-location">
        <i class="bi bi-geo-alt card-icons" /> {{ eventData.location }}
      </span>
    </div>

    <a
      href="#"
      class="stretched-link"
      @click.prevent="showModal('eventInfoModal-' + eventData.id)"
    />

    <EventInfoModal :event-data="eventData" :modal-id="'eventInfoModal-' + eventData.id" />
  </div>
</template>

<style scoped>
.event-card {
  margin-bottom: 1.5rem;
  border-radius: 10px;
  border: 1px solid #182e6e;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.event-title {
  margin: 0;
  font-weight: 600;
}

.event-description {
  margin: 0;
}

.card-footer {
  font-size: 0.85rem;
  color: #555;
}

.card-icons {
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
  margin-left: 0;
}
</style>

Child component - EventInfoModal.vue

<script setup lang="ts">
import { type EventCardProps } from './EventCard.vue'
import * as bootstrap from 'bootstrap'
import { ref } from 'vue'

const props = defineProps<{ eventData: EventCardProps; modalId: string }>()

const closeModal = () => {
  const closeButton = document.getElementById('deleteModalCloseBtn') as HTMLElement
  if (closeButton) {
    closeButton.click()
  }
}

const eventIdToDelete = ref<number | null>(null)

const openDeleteModal = () => {
  eventIdToDelete.value = props.eventData.id
  console.log('OPEN: ' + eventIdToDelete.value)
  const confirmDeleteModal = new bootstrap.Modal(
    document.getElementById('confirmDeleteModal') as HTMLElement
  )
  confirmDeleteModal.show()
}

const deleteEvent = async () => {
  console.log('INSIDE DELETE: ' + eventIdToDelete.value)
  console.log('PROPS ID: ' + props.modalId + ' ' + props.eventData.id)
  if (eventIdToDelete.value === 5000) {
    const response = await fetch(`/api/manage/delete/${eventIdToDelete.value}`, {
      method: 'DELETE'
    })
    if (response.ok) {
      console.log('Successfully deleted')
    } else {
      console.error('Failed to delete event: ' + response.body)
    }
    closeModal()
  }
}

const editEvent = () => {
  console.log('EVENT EDIT:', props.eventData.eventName, props.eventData.id)
  closeModal()
}
</script>

<template>
  <div
    class="modal fade"
    :id="modalId"
    tabindex="-1"
    aria-labelledby="eventInfoModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header" :id="modalId + 'Header'">
          <h5 class="event-title mb-0 text-start" id="eventInfoModalLabel">
            {{ eventData.eventName }}<br />
            <small class="text-muted">Hosted by {{ eventData.hostName }}</small>
          </h5>
          <button
            type="button"
            class="btn-close"
            id="deleteModalCloseBtn"
            @click="closeModal"
            data-bs-dismiss="modal"
          ></button>
        </div>
        <div class="modal-body text-start">
          <strong>Description:</strong> {{ eventData.description }}<br />
          <strong>Date:</strong> {{ eventData.date }} - {{ eventData.time.substring(0, 5) }}<br />
          <strong>Location:</strong> {{ eventData.location }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" @click="openDeleteModal">
            Delete Event
          </button>
          <button type="button" class="btn btn-primary" @click="editEvent">Edit Event</button>
        </div>
      </div>
    </div>
  </div>

  <div
    class="modal fade"
    id="confirmDeleteModal"
    tabindex="-1"
    aria-labelledby="confirmDeleteLabel"
    aria-hidden="true"
    data-bs-backdrop="static"
    style="z-index: 1100"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="confirmDeleteLabel">Confirm Delete</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">Are you sure you want to delete this event?</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-danger" @click="deleteEvent">Delete</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>