No changes made

frontend/src/pages/primers/List.vue

@@ -0,0 +1,61 @@
+<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>