AnalysisList.vue

<script setup lang="ts">
import { computed } from 'vue'
import { Analysis } from "composables/useFetchAnalysis";

const { data: analyses } = await useFetch<Analysis[]>("/api/analysis/");



const sanitizedAnalyses = computed(() => {
  return analyses !== null ? analyses.value?.map(a => {

    const createTimeDate = new Date(a.create_time)

    return {
      ...a,
      create_time: createTimeDate.toLocaleString()
    }
  }) ?? [] : []
})

</script>
<template>
  <v-card>
    <v-card-title>Analyses</v-card-title>
    <v-card-text v-if="sanitizedAnalyses !== null">
      <v-list-item v-for="analysis in sanitizedAnalyses" :key="analysis.id" :title="analysis.name"
        :subtitle="analysis.create_time" :to="`/analyses/${analysis.id}/systems`">
        <template #append>
          <AnalysisState :state="analysis.status"></AnalysisState>
        </template>
      </v-list-item>
    </v-card-text>
  </v-card>
</template>