No changes made

frontend/src/pages/loads/Search.vue

@@ -0,0 +1,140 @@
+<template>
+  <Card class="w-11/12">
+    <template #title>
+      Loads
+    </template>
+    <template #content>
+      <DataTable
+          :value="loads"
+          filterDisplay="row"
+          paginator
+          lazy
+          :rows="50"
+          :totalRecords="total"
+          :loading="loading"
+      >
+        <template #empty>
+          <div class="p-4">
+            <p>No loads found</p>
+          </div>
+        </template>
+
+        <Column field="cartridge" header="Name" :sortable="true" :showFilterMenu="false">
+          <template #filter>
+            <Select />
+          </template>
+          <template #body="{ data }">
+            {{ data.cartridge }}
+          </template>
+
+        </Column>
+
+        <Column field="bulletManufacturer" header="Bullet Manufacturer" :sortable="true" :showFilterMenu="false">
+          <template #filter>
+            <Select />
+          </template>
+          <template #body="{ data }">
+            {{ data.bullet.manufacturer.name }}
+          </template>
+        </Column>
+        <Column header="Bullet" :sortable="true" :showFilterMenu="false">
+          <template #filter>
+            <Select />
+          </template>
+          <template #body="{ data }">
+            {{ data.bullet.name }}
+            {{ data.bullet.weight }}gr
+            .{{ data.bullet.diameter }}
+          </template>
+        </Column>
+        <Column field="name" header="Primer Manufacturer" :sortable="true">
+          <template #body="{ data }">
+            {{ data.primer.manufacturer.name }}
+          </template>
+        </Column>
+        <Column field="name" header="Primer" :sortable="true">
+          <template #body="{ data }">
+            {{ data.primer.name }}
+          </template>
+        </Column>
+
+        <Column field="name" header="Powder Manufacturer" :sortable="true">
+          <template #body="{ data }">
+            {{ data.powder.manufacturer.name }}
+          </template>
+        </Column>
+
+        <Column field="name" header="Powder" :sortable="true">
+          <template #body="{ data }">
+            {{ data.powder.name }}
+          </template>
+        </Column>
+
+        <Column field="name" header="Powder Grs" :sortable="true">
+          <template #body="{ data }">
+            {{ data.powder_gr }}gr
+          </template>
+        </Column>
+
+        <Column field="name" header="Edit">
+          <template #body="{ data }">
+            <Button size="small" text :icon="icons.edit" />
+          </template>
+        </Column>
+      </DataTable>
+    </template>
+  </Card>
+</template>
+<script lang="ts">
+import { Bullet } from '../../types/bullet'
+import { Powder } from '../../types/powder'
+import { Primers } from '../../types/primers'
+
+interface LoadResponse {
+  total: number
+  results: Load[]
+}
+
+interface Load {
+  id: string
+  bullet: Bullet
+  cartridge: string
+  powder: Powder
+  powder_gr: number
+  primer: Primers
+  col: number
+}
+</script>
+<script lang="ts" setup>
+import { defineAsyncComponent, onMounted, ref } from 'vue'
+import { Response } from '../../types/Response'
+import axios from 'axios'
+import Column from 'primevue/column'
+import { icons } from '../../lib/icons.ts'
+
+const DataTable = defineAsyncComponent(() => import('primevue/datatable'))
+const Card = defineAsyncComponent(() => import('primevue/card'))
+const Button = defineAsyncComponent(() => import('primevue/button'))
+const Select = defineAsyncComponent(() => import('primevue/select'))
+
+const loads = ref<Load[]>([])
+const total = ref(0)
+const page = ref(1)
+const loading = ref(true)
+
+const fetchLoads = async () => {
+  loading.value = true
+
+  const resp = await axios.get<any, Response<LoadResponse>>(`${import.meta.env.VITE_API}/load`)
+
+  loads.value = resp.data.payload.results
+  total.value = resp.data.payload.total
+
+  loading.value = false
+}
+
+onMounted(() => {
+  fetchLoads()
+})
+
+</script>