Never gonna make you cry

src/App.vue

@@ -15,4 +15,8 @@ export default defineComponent({})
 body {
   font-family: var(--font-family);
 }
+
+.svg-inline--fa{
+  top: 40% !important;
+}
 </style>

src/pages/Edit.vue

@@ -9,7 +9,7 @@
           <h3 class="text-lg font-bold">
             Images
           </h3>
-          <div style="border-top: 1px rgba(123,123,123,0.4) solid; border-bottom: 1px rgba(123,123,123,0.4) solid;"
+          <div
                class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
             <div>
               <Image preview zoomInDisabled zoomOutDisabled>
@@ -21,8 +21,10 @@
                 </template>
               </Image>
             </div>
-            <div @click="deletePhoto(photo.id)">
-              <i style="color: red;" class="fa-regular fa-2x fa-trash"></i>
+            <div>
+              <Button @click="deletePhoto(photo.id)">
+                <i style="color: red;" class="fa-regular fa-2x fa-trash mr-5"></i> Delete Photo
+              </Button>
             </div>
           </div>
         </template>

src/pages/Guns.vue

@@ -4,7 +4,14 @@
       Gun List
     </template>
     <template #content>
-      <DataTable class="p-datatable-sm"  :value="guns">
+      <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"/>
+      </span>
+      <DataTable
+          :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>
@@ -35,14 +42,24 @@ import {defineComponent} from "vue";
 import {Guns} from "../types/guns";
 import {Response} from "../types/Response";
 import axios from 'axios'
+import {DataTableFilterMeta, DataTableFilterMetaData} from "primevue/datatable";
 
 interface Data {
   guns: Array<Guns>
+  filters: DataTableFilterMeta
+  loading: boolean
 }
 
 export default defineComponent({
   data: (): Data => ({
-    guns: []
+    guns: [],
+    loading: false,
+    filters: {
+      global: {
+        value: "",
+        matchMode: "contains"
+      } as DataTableFilterMetaData
+    } as DataTableFilterMeta
   }),
   computed: {
     total() {
@@ -56,10 +73,14 @@ export default defineComponent({
     }
   },
   created() {
-     axios.get(import.meta.env.VITE_API + '/gun')
-         .then((r: Response<Array<Guns>>) => {
-            this.guns = r.data.payload
-         })
+    this.loading = true
+    axios.get(import.meta.env.VITE_API + '/gun')
+        .then((r: Response<Array<Guns>>) => {
+          this.guns = r.data.payload
+        })
+        .finally(() => {
+          this.loading = false
+        })
   },
 })
 </script>