tagging release w.t.f.

frontend/src/components/FullScreenLoader.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="loader" v-if="loading">
+    <div class="flex flex-col justify-center items-center">
+      <ProgressSpinner :style="{ width: '50px', height: '50px' }" strokeWidth="5" />
+    </div>
+    <div class="flex flex-row justify-center items-center">
+      <span class="text-2xl">{{ message }}</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+const ProgressSpinner = defineAsyncComponent(() => import('primevue/progressspinner'))
+
+defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  message: {
+    type: String,
+    default: 'Loading...'
+  }
+})
+
+</script>
+<style scoped lang="scss">
+
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(9, 5, 5, 0.56);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .text-2xl {
+    margin-top: 10px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+}
+</style>

frontend/src/lib/icons.ts

@@ -5,4 +5,5 @@ export const icons = {
   upload: 'fa-thin fa-sharp fa-upload',
   save: 'fa-thin fa-sharp fa-floppy-disk',
   delete: 'fa-thin fa-sharp fa-trash',
+  loading: 'fa-solid fa-sharp fa-cog fa-spin',
 }

frontend/src/pages/loads/Add.vue

@@ -1,7 +1,8 @@
 <template>
   <Card class="md:w-2/3 w-full">
     <template #title>
-      Add New Load
+      <span v-if="route.params.id">Edit Load</span>
+      <span v-else>Add New Load</span>
     </template>
     <template #content>
       <div class="grid grid-cols-1">
@@ -103,6 +104,7 @@
     </template>
   </Dialog>
 
+  <FullScreenLoader :loading="loading" />
 </template>
 <script lang="ts">
 interface Select {
@@ -121,13 +123,16 @@ import { defineAsyncComponent, onMounted, ref } from 'vue'
 import { Primers } from '../../types/primers'
 import { Powder } from '../../types/powder'
 import axios from 'axios'
-import { Response } from '../../types/Response'
+import { Load, Response } from '../../types/Response'
 import { icons } from '../../lib/icons.ts'
 import { FileUploadSelectEvent } from 'primevue/fileupload'
 import useVuelidate from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useToast } from 'primevue/usetoast'
-import router from '../../router'
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
 
 const Card = defineAsyncComponent(() => import('primevue/card'))
 const Select = defineAsyncComponent(() => import('primevue/select'))
@@ -138,6 +143,7 @@ const InputMask = defineAsyncComponent(() => import('primevue/inputmask'))
 const FileUpload = defineAsyncComponent(() => import('primevue/fileupload'))
 const Dialog = defineAsyncComponent(() => import('primevue/dialog'))
 const Message = defineAsyncComponent(() => import('primevue/message'))
+const FullScreenLoader = defineAsyncComponent(() => import('../../components/FullScreenLoader.vue'))
 
 const toast = useToast()
 
@@ -145,6 +151,7 @@ const bullets = ref<Select[]>([])
 const primers = ref<Select[]>([])
 const powders = ref<Select[]>([])
 const cartridges = ref<Select[]>([])
+const loading = ref(false)
 
 const cartridgeName = ref('')
 const addCartridgeDialog = ref(false)
@@ -191,21 +198,18 @@ const fetchBullets = async () => {
     bullets.value.push({ label: `${bullet.manufacturer.name} ${bullet.weight}gr ${bullet.name}`, value: bullet.id })
   })
 }
-
 const fetchPrimers = async () => {
   const response = await axios.get<any, Response<Primers[]>>(`${import.meta.env.VITE_API}/primer`)
   response.data.payload.forEach((primer: Primers) => {
     primers.value.push({ label: `${primer.manufacturer.name} ${primer.name}`, value: primer.id })
   })
 }
-
 const fetchPowders = async () => {
   const response = await axios.get<any, Response<Powder[]>>(`${import.meta.env.VITE_API}/powder`)
   response.data.payload.forEach((powder: Powder) => {
     powders.value.push({ label: `${powder.manufacturer.name} ${powder.name}`, value: powder.id })
   })
 }
-
 const fetchCartridges = async () => {
   cartridges.value = []
 
@@ -214,7 +218,6 @@ const fetchCartridges = async () => {
     cartridges.value.push({ label: `${cartridge.name}`, value: cartridge.id })
   })
 }
-
 const addCartridgeName = async () => {
   if (cartridgeName.value === '') {
     return
@@ -237,7 +240,6 @@ const addCartridgeName = async () => {
   cartridgeName.value = ''
   addCartridgeDialog.value = false
 }
-
 const add = async () => {
   v$.value.$touch()
 
@@ -284,14 +286,46 @@ const add = async () => {
       life: 3000,
     })
   }
-
 }
 
+const fetchLoad = async () => {
+  if (!route.params.id) {
+    return
+  }
+
+  loading.value = true
+  const response = await axios.get<any, Response<Load>>(`${import.meta.env.VITE_API}/load/${route.params.id}`)
+
+  if (response.data.payload) {
+    load.value.cartridge = response.data.payload.cartridge_id
+    load.value.bullet = response.data.payload.bullet.id
+    load.value.powder = response.data.payload.powder.id
+    load.value.powderGrs = response.data.payload.powder_gr
+    load.value.primer = response.data.payload.primer.id
+  } else {
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Load not found',
+      life: 3000,
+    })
+
+    await router.push('/loads')
+  }
+
+  loading.value = false
+}
+
+
 onMounted(() => {
   fetchBullets()
   fetchPrimers()
   fetchPowders()
   fetchCartridges()
+
+  if (route.params.id) {
+    fetchLoad()
+  }
 })
 
 </script>

frontend/src/pages/loads/Search.vue

@@ -8,13 +8,15 @@
           :value="loads"
           filterDisplay="row"
           paginator
+          :rowsPerPageOptions="[5, 10, 20, 50]"
           size="small"
           :sortField="sortField"
           :sortOrder="sortOrder"
           @update:sortField="(e: string) => {sortField = e; fetchLoads()}"
           @update:sortOrder="(e: number | undefined) => {sortOrder = e; fetchLoads()}"
+          @page="updatePagination"
+          :rows="rowsPerPage"
           lazy
-          :rows="50"
           :totalRecords="total"
           :loading="loading"
       >
@@ -42,7 +44,9 @@
                          @change="fetchLoads" />
           </template>
           <template #body="{ data }">
-            {{ data.bullet.manufacturer.name }}
+            <a target="_blank" :href="data.bullet.manufacturer.url">
+              {{ data.bullet.manufacturer.name }}
+            </a>
           </template>
         </Column>
         <Column field="bullet_name" header="Bullet" :sortable="true" :showFilterMenu="false">
@@ -63,7 +67,9 @@
                          @change="fetchLoads" />
           </template>
           <template #body="{ data }">
-            {{ data.primer.manufacturer.name }}
+            <a target="_blank" :href="data.primer.manufacturer.url">
+              {{ data.primer.manufacturer.name }}
+            </a>
           </template>
         </Column>
         <Column field="primer_name" header="Primer" :sortable="true" :showFilterMenu="false">
@@ -83,7 +89,9 @@
                          @change="fetchLoads" />
           </template>
           <template #body="{ data }">
-            {{ data.powder.manufacturer.name }}
+            <a target="_blank" :href="data.powder.manufacturer.url">
+              {{ data.powder.manufacturer.name }}
+            </a>
           </template>
         </Column>
 
@@ -104,8 +112,13 @@
         </Column>
 
         <Column field="edit" header="Edit">
-          <template #body>
-            <Button size="small" text :icon="icons.edit" />
+          <template #body="{ data }">
+            <Button
+                size="small"
+                text
+                :icon="icons.edit"
+                @click="router.push('/loads/edit/' + data.id)"
+            />
           </template>
         </Column>
       </DataTable>
@@ -116,22 +129,13 @@
 import { Bullet } from '../../types/bullet'
 import { Powder } from '../../types/powder'
 import { Primers } from '../../types/primers'
+import { Load } from '../../types/Response'
 
 interface LoadResponse {
   total: number
   results: Load[]
 }
 
-interface Load {
-  id: string
-  bullet: Bullet
-  cartridge: string
-  powder: Powder
-  powder_gr: number
-  primer: Primers
-  col: number
-}
-
 interface Option {
   label: string
   value: string
@@ -143,6 +147,7 @@ import { Response } from '../../types/Response'
 import axios from 'axios'
 import Column from 'primevue/column'
 import { icons } from '../../lib/icons.ts'
+import router from '../../router'
 
 const DataTable = defineAsyncComponent(() => import('primevue/datatable'))
 const Card = defineAsyncComponent(() => import('primevue/card'))
@@ -151,6 +156,8 @@ const MultiSelect = defineAsyncComponent(() => import('primevue/multiselect'))
 
 const loads = ref<Load[]>([])
 const total = ref(0)
+const rowsPerPage = ref(50)
+const page = ref(1)
 const loading = ref(true)
 
 // use local storage to store the selected filters
@@ -181,6 +188,14 @@ const powderManufacturerSelected = ref<string[]>(localStorageFilters.powderManuf
 const powderOptions = ref<Option[]>([])
 const powderSelected = ref<string[]>(localStorageFilters.powderSelected ?? [])
 
+const updatePagination = (e: { page: number, rows: number }) => {
+  console.log(e)
+
+  page.value = e.page + 1
+  rowsPerPage.value = e.rows
+  fetchLoads()
+}
+
 const fetchLoads = async () => {
   loading.value = true
 
@@ -220,6 +235,9 @@ const fetchLoads = async () => {
     searchParams.unshift(`powder_id=${powderSelected.value.join(',')}`)
   }
 
+  searchParams.unshift(`limit=${rowsPerPage.value}`)
+  searchParams.unshift(`page=${page.value}`)
+
   localStorage.setItem(localStorageKey, JSON.stringify({
     cartridgeSelected: cartridgeSelected.value,
     bulletManufacturerSelected: bulletManufacturerSelected.value,
@@ -269,6 +287,11 @@ onMounted(() => {
       value: primer.manufacturer.id,
     }))
 
+    // dedupe the primer Manufacturer options
+    primerManufacturerOptions.value = primerManufacturerOptions.value.filter((option, index, self) =>
+      index === self.findIndex((o) => o.value === option.value)
+    )
+
     primerOptions.value = resp.data.payload.map((primer) => ({
       label: primer.name,
       value: primer.id,
@@ -281,6 +304,12 @@ onMounted(() => {
       value: powder.manufacturer.id,
     }))
 
+    // dedupe the powder Manufacturer options
+    powderManufacturerOptions.value = powderManufacturerOptions.value.filter((option, index, self) =>
+      index === self.findIndex((o) => o.value === option.value)
+    )
+
+
     powderOptions.value = resp.data.payload.map((powder) => ({
       label: powder.name,
       value: powder.id,

frontend/src/router/index.ts

@@ -61,6 +61,10 @@ const routes = [
     path: '/loads/search',
     component:  () => import('../pages/loads/Search.vue'),
   },
+  {
+    path: '/loads/edit/:id',
+    component:  () => import('../pages/loads/Add.vue'),
+  },
 ] as RouteRecordRaw[]
 
 const router = createRouter({

frontend/src/types/Response.d.ts

@@ -1,4 +1,18 @@
 import {AxiosResponse} from "axios";
+import { Bullet } from './bullet'
+import { Powder } from './powder'
+import { Primers } from './primers'
+
+interface Load {
+    id: string
+    bullet: Bullet
+    cartridge: string
+    cartridge_id: string
+    powder: Powder
+    powder_gr: number
+    primer: Primers
+    col: number
+}
 
 export interface Response<T> extends AxiosResponse {
     data: {