You've already forked reloading-manager
141 lines
3.7 KiB
Vue
141 lines
3.7 KiB
Vue
<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>
|