reloading-manager/frontend/src/pages/primers/List.vue

<template>
  <Card class="w-2/3">
    <template #title>
      Primers
    </template>
    <template #content>
      <DataTable :value="primers">
        <template #empty>
          <div class="p-4">
            <p>No primers found</p>
          </div>
        </template>
        <Column field="name" header="Name">
          <template #body="{ data }">
            {{ data.manufacturer.name }} {{ data.name }}
          </template>
        </Column>
        <Column field="name" header="Edit">
          <template #body="{ data }">
            <Button
                text
                small
                color="primary"
                :icon="icons.edit"
                @click="router.push(`/primers/edit/${data.id}`)"
            />
          </template>
        </Column>
      </DataTable>
    </template>
  </Card>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { defineAsyncComponent, ref } from 'vue'
import Column from 'primevue/column'
import { Response } from '../../types/Response'
import { Primers } from '../../types/primers'
import { icons } from '../../lib/icons.ts'
import { useRouter } from 'vue-router'

const router = useRouter()

const Card = defineAsyncComponent(() => import('primevue/card'))
const Button = defineAsyncComponent(() => import('primevue/button'))
const DataTable = defineAsyncComponent(() => import('primevue/datatable'))

const primers = ref<Primers[]>([])

const getPrimers = () => {
  axios.get(`${import.meta.env.VITE_API}/primer`)
    .then((response: Response<Primers[]>) => {
      primers.value = response.data.payload
    })
    .catch((error) => {
      console.error(error)
    })
}

getPrimers()
</script>