systems.vue

<script setup lang="ts">
import { useFetch, useRoute } from "#imports";


const route = useRoute();
const { data: systems, error } = await useFetch<SystemsOut>(
  `/api/analysis/${route.params.analysisId}/systems`
);

const headers = ref([
  { title: "type", align: "end", key: "type", fixed: true, },
  { title: "System id", align: "end", key: "sys_id" },
  { title: "subtype", align: "end", key: "subtype" },
  { title: "sys_beg", align: "end", key: "sys_beg" },
  { title: "sys_end", align: "end", key: "sys_end" },
  { title: "protein_in_syst", align: "end", key: "protein_in_syst" },
]);

const sanitizedSystems = computed(() => {
  if (systems.value?.systems) {
    return systems.value.systems.map((system) => {
      if (system.type === 'CasFinder') return { ...system, type: 'Cas' }
      return system
    })
  } else { return [] }
})

</script>
<template>
  <AnalysisResultDataTable v-if="sanitizedSystems.length > 0" :items="sanitizedSystems" :headers="headers" />
</template>