updated page layouts and format

package.json

@@ -23,6 +23,7 @@
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
     "vite": "^7.0.6",
+    "vite-plugin-vue-devtools": "^8.0.0",
     "vue-tsc": "^3.0.4"
   }
 }

src/components/GunForm.vue

@@ -53,7 +53,7 @@
         <div class="w-full mt-5">
           <div class="flex gap-2" style="flex-direction: column">
             <label for="date_purchased">Date Purchased</label>
-            <Calendar date-format="mm/dd/yy" v-model="gun.date_purchased"/>
+            <DatePicker date-format="mm/dd/yy" v-model="gun.date_purchased"/>
           </div>
         </div>
         <div class="w-full mt-5">
@@ -98,7 +98,7 @@ const router = useRouter()
 const ConfirmPopup = defineAsyncComponent(() => import('primevue/confirmpopup'))
 const InputText = defineAsyncComponent(() => import('primevue/inputtext'))
 const InputNumber = defineAsyncComponent(() => import('primevue/inputnumber'))
-const Calendar = defineAsyncComponent(() => import('primevue/calendar'))
+const DatePicker = defineAsyncComponent(() => import('primevue/datepicker'))
 const Textarea = defineAsyncComponent(() => import('primevue/textarea'))
 const FileUpload = defineAsyncComponent(() => import('primevue/fileupload'))
 const Button = defineAsyncComponent(() => import('primevue/button'))

src/localstorage/index.ts

@@ -0,0 +1,21 @@
+export function SaveToLocalStorage<T>(key: string, value: T): void {
+  try {
+    const serializedValue = JSON.stringify(value);
+    localStorage.setItem(key, serializedValue);
+  } catch (error) {
+    console.error("Error saving to localStorage", error);
+  }
+}
+
+export function GetFromLocalStorage<T>(key: string): T | null {
+  try {
+    const serializedValue = localStorage.getItem(key);
+    if (serializedValue === null) {
+      return null;
+    }
+    return JSON.parse(serializedValue) as T;
+  } catch (error) {
+    console.error("Error reading from localStorage", error);
+    return null;
+  }
+}

src/pages/Edit.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="w-full flex flex-row flex-wrap justify-around">
-    <div class="w-full lg:w-1/2 m-5">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+    <div class="w-full">
       <GunForm :loading="loading" @upload="getGun" v-if="gun" @save="save" :gun="gun"/>
     </div>
-    <div class="mt-10 w-full lg:w-1/2 m-5">
+
+    <div class="">
       <Card>
         <template #content v-if="gun != null">
           <h3 class="text-lg font-bold">
@@ -12,12 +13,16 @@
           <div
                class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
             <div>
-              <Image preview zoomInDisabled zoomOutDisabled>
-                <template #image>
-                  <img alt="image" :src="`${remoteUrl}/gun/photo/${photo.id}/200/${photo.file_name}`" />
-                </template>
-                <template #preview>
-                  <img :src="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`" alt="image"/>
+              <Image
+                  preview
+                  :src="`${remoteUrl}/gun/photo/${photo.id}/200/${photo.file_name}`"
+              >
+                <template #original="slotProps">
+                  <img
+                      :style="slotProps.style"
+                      :src="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`"
+                      alt="Gun Photo"
+                  />
                 </template>
               </Image>
             </div>
@@ -40,6 +45,7 @@ import {Response} from "../types/Response"
 import {Guns} from "../types/guns";
 import { useRoute } from 'vue-router'
 import { useToast } from 'primevue'
+import { useConfirm } from 'primevue/useconfirm'
 
 const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'))
 const ConfirmPopup = defineAsyncComponent(() => import('primevue/confirmpopup'));
@@ -49,6 +55,7 @@ const Card = defineAsyncComponent(() => import('primevue/card'));
 
 const route = useRoute()
 const toast = useToast()
+const confirm = useConfirm()
 
 const loading = ref(false)
 const gun = ref<Guns | null>(null)
@@ -65,6 +72,19 @@ function getGun() {
 }
 
 function deletePhoto(photoId: number) {
+  confirm.require({
+    message: 'Are you sure you want to delete this photo?',
+    acceptClass: 'p-button-danger',
+    acceptIcon: 'fa-solid fa-trash',
+    rejectIcon: 'fa-solid fa-ban',
+    accept: () => {
+      deletePhotoConfirmed(photoId)
+    },
+    reject: () => {}
+  })
+}
+
+function deletePhotoConfirmed(photoId: number) {
   axios.delete(import.meta.env.VITE_API + `/gun/photo/${photoId}`)
   .then(() => {
     toast.add({

src/pages/Guns.vue

@@ -1,22 +1,39 @@
 <template>
-  <Card>
+  <Card class="w-full">
     <template #title>
       Gun List
     </template>
     <template #content>
       <span class="p-input-icon-left w-full">
-        <i class="fa-regular fa-magnifying-glass"></i>
-        <InputText v-model="filters.global.value" class="w-full mb-3" placeholder="Search"/>
+        <InputGroup class="mb-2">
+          <InputGroupAddon>
+            <i class="fa-solid fa-2x fa-magnifying-glass"></i>
+          </InputGroupAddon>
+          <InputText
+              size="small"
+              v-model="filters.global.value"
+              class="w-full mb-3"
+              placeholder="Search"
+          />
+        </InputGroup>
+
       </span>
       <DataTable
-          sortField="make" :sortOrder="1"
+          v-if="sortField"
+          :sortField="sortField.field"
+          :sortOrder="sortField.direction"
           :globalFilterFields="['make', 'model']"
           :loading="loading"
-          filterDisplay="row" v-model:filters="filters" class="p-datatable-sm" :value="guns">
-        <Column sortable field="id" header="ID"></Column>
-        <Column sortable field="make" header="Make"></Column>
-        <Column sortable field="model" header="Model"></Column>
-        <Column sortable field="value_amount" header="Value">
+          filterDisplay="row"
+          v-model:filters="filters"
+          :value="guns"
+          size="small"
+          @sort="onSortChange"
+      >
+        <Column :sortable="true" field="id" header="ID"></Column>
+        <Column :sortable="true" field="make" header="Make"></Column>
+        <Column :sortable="true" field="model" header="Model"></Column>
+        <Column :sortable="true" field="value_amount" header="Value">
           <template #body="slotProps">
             ${{ slotProps.data.value_amount }}
           </template>
@@ -38,19 +55,24 @@
     </template>
   </Card>
 </template>
+<script lang="ts">
+const LocalStorageKey = 'sortField'
+</script>
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
 import {Guns} from "../types/guns";
 import {Response} from "../types/Response";
 import axios from 'axios'
-import {DataTableFilterMetaData} from "primevue/datatable";
+import { DataTableFilterMetaData, DataTableSortEvent } from 'primevue/datatable'
 import Column from 'primevue/column';
+import { GetFromLocalStorage, SaveToLocalStorage } from '../localstorage'
 
 const Button = defineAsyncComponent(() => import('primevue/button'));
 const Card = defineAsyncComponent(() => import('primevue/card'));
 const InputText = defineAsyncComponent(() => import('primevue/inputtext'));
 const DataTable = defineAsyncComponent(() => import('primevue/datatable'));
-
+const InputGroup = defineAsyncComponent(() => import('primevue/inputgroup'));
+const InputGroupAddon = defineAsyncComponent(() => import('primevue/inputgroupaddon'));
 
 const guns = ref<Guns[]>([])
 const loading = ref<boolean>(false)
@@ -61,6 +83,12 @@ const filters = ref<{global: DataTableFilterMetaData}>({
   } as DataTableFilterMetaData
 })
 
+const sortField = ref<{ field: string, direction: number } | null>(GetFromLocalStorage(LocalStorageKey))
+
+if (!sortField.value) {
+  sortField.value = { field: 'id', direction: 1 }
+}
+
 const total = computed(() => {
   let total = 0;
 
@@ -82,6 +110,26 @@ function fetchGuns() {
       })
 }
 
+function onSortChange(event: DataTableSortEvent) {
+  let field = event.sortField || 'id'
+  let direction = event.sortOrder || 1
+
+  if (typeof field !== 'string') {
+    field = 'id'
+  }
+
+  if (!direction || typeof direction === 'undefined') {
+    direction = 1
+  }
+
+  SaveToLocalStorage<{ field: string, direction: number }>(LocalStorageKey, {
+    field: field,
+    direction: direction
+  })
+
+  console.log('onSortChange', event)
+}
+
 onMounted(() => {
   fetchGuns()
 })

src/pages/Index.vue

@@ -1,9 +1,10 @@
 <template>
-<Card class="w-full lg:w-1/2 text-center">
-  <template #title> Welcome to Your Gun Database </template>
+<Card class="w-full md:w-1/2 text-center">
+  <template #title> Welcome to Your Gun Database</template>
   <template #content>
+    <img :src="imgUrl" alt="Gun Database Logo" />
     <router-link to="/guns">
-      <Button>Go To Gun List</Button>
+      <Button class="mt-3">Go To Gun List</Button>
     </router-link>
   </template>
 </Card>
@@ -11,6 +12,8 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue'
 
+import imgUrl from '../assets/guns.gif'
+
 const Card = defineAsyncComponent(() => import('primevue/card'));
 const Button = defineAsyncComponent(() => import('primevue/button'));
 </script>

vite.config.ts

@@ -1,8 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), tailwindcss()],
+  plugins: [vue(), tailwindcss(), vueDevTools(
+    {
+      launchEditor: 'webstorm'
+    }
+  )],
 })