frontend-elite-data-analysis/src/components/data-analysis/file-container/FileContainer.vue

<template>
  <va-card>
    <va-card-content>
      <va-button @click="showModal">FILE</va-button>
      <p>X: {{ channelStore.xAxisSelected.name }} Y: {{ channelStore.yAxisSelected.name }}</p>
      <va-list class="py-2" fit>
        <va-list-label> </va-list-label>
        <template v-for="(file, i) in selectedFiles" :key="'item' + file.id">
          <va-list-item>
            <va-list-item-section>
              <va-list-item-label>
                {{ file.name }}
              </va-list-item-label>
            </va-list-item-section>
          </va-list-item>

          <va-list-separator v-if="i < selectedFiles.length - 1" :key="'separator' + i" class="my-1" fit />
        </template>
      </va-list>
      <Suspense>
        <FileSlide ref="file_modal_ref"></FileSlide>
      </Suspense>
    </va-card-content>
  </va-card>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { useChannelStore } from '@/stores/data-analysis/channel'
  import { useFileViewStore } from '@/stores/data-analysis/file-view'
  import FileSlide from './FileSlider.vue'

  const channelStore = useChannelStore()
  const fileViewStore = useFileViewStore()
  const selectedFiles = reactive(fileViewStore.selectedFiles)

  /* File Modal Handling */
  const file_modal_ref = ref<InstanceType<typeof FileSlide> | null>(null)
  const showModal = function () {
    file_modal_ref.value?.showModal()
  }

  defineExpose({ file_modal_ref, showModal })
</script>