model_snc/app/pages/index.vue

<template>
  <div>
    <h1 class="text-center mb-6">
      Authors
    </h1>

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

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

    <v-card v-else-if="authors.length === 0" class="text-center pa-4">
      <div>No authors found</div>
    </v-card>

    <v-card v-else class="pa-4">
      <v-expansion-panels class="w-80 flex-column" multiple>
        <AuthorPanel
          v-for="author in authors"
          :key="author.id"
          :author="author"
        />
      </v-expansion-panels>
    </v-card>
  </div>
</template>

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

useHead({
  title: 'Authors'
})

const runtimeConfig = useRuntimeConfig()

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

const authors = ref<Author[]>([])
const error = ref<string | null>(null)
const pending = ref(true)

onMounted(async () => {
  try {
    const response = await fetch(apiBaseUrl + '/api/authors')
    if (!response.ok) {
      throw new Error(`HTTP error. Status: ${response.status}`)
    }
    const data = await response.json()
    authors.value = data.member || []
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Unknown error'
    console.error('Error fetching authors:', err)
  } finally {
    pending.value = false
  }
})
</script>