astracorp/app/components/AuthorPanel.vue

<template>
  <div>
    <v-expansion-panel
      class="my-1"
      @group:selected="fetchSongs"
    >
      <v-expansion-panel-title class="font-weight-bold">
        {{ author.name }}
      </v-expansion-panel-title>

      <v-expansion-panel-text>
        <v-card v-if="loadingSongs" class="text-center pa-4">
          <v-progress-circular :indeterminate="true" />
          <div class="mt-2">
            Loading songs...
          </div>
        </v-card>

        <v-card v-else-if="songError" class="text-center pa-4 error--text">
          <v-icon color="error" large>mdi-alert-circle</v-icon>
          <div class="mt-2">
            Error loading songs: {{ songError }}
          </div>
        </v-card>

        <v-list v-else>
          <v-list-item v-for="song in songs" :key="song.id">
            <v-list-item-title>
              - {{ song.title }}
            </v-list-item-title>
          </v-list-item>

          <v-list-item v-if="songs.length === 0">
            <v-list-item-title class="text-center">No songs found for this author</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-expansion-panel-text>
    </v-expansion-panel>
  </div>
</template>

<script setup lang="ts">
import { ref, PropType } from 'vue'
import type Author from '~/types/interfaces'

// Define props
const props = defineProps({
  author: {
    type: Object as PropType<Author>,
    required: true
  }
})

const runtimeConfig = useRuntimeConfig()

const apiBaseUrl = runtimeConfig.apiBaseUrl ?? runtimeConfig.public.apiBaseUrl

const songs = ref<Song[]>([]);
const loadingSongs = ref(false);
const songError = ref<string | null>(null);

// Fetch songs for the author
const fetchSongs = async () => {
  console.log('fetchSongs', props.author.id)

  // Skip if already loaded
  if (songs.value.length > 0) {
    return
  }

  loadingSongs.value = true

  try {
    const response = await fetch( apiBaseUrl + `/api/songs?author=${props.author.id}`)
    if (!response.ok) {
      throw new Error(`HTTP error. Status: ${response.status}`)
    }
    const data = await response.json()
    songs.value = data.member || []
  } catch (err) {
    songError.value = err instanceof Error ? err.message : 'Unknown error';
    console.error(`Error fetching songs for author ${props.author.id}:`, err)
  } finally {
    loadingSongs.value = false
  }
}

// Expose methods to parent component
defineExpose({
  fetchSongs
})
</script>