derp, helper method rename

src/App.vue

@@ -1,4 +1,5 @@
 <template>
+  <confirm-dialog/>
   <div class="flex flex-row flex-wrap m-10 justify-around">
     <router-view/>
   </div>

src/components/GunForm.vue

@@ -79,12 +79,11 @@
           <router-link to="/guns">
             <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
           </router-link>
-          <Button @click="deleteGun" v-if="gun.id" class="p-button-danger ml-3" icon="fa-sharp fa-light fa-trash" label="Delete"/>
+          <Button @click="confirm" v-if="gun.id" class="p-button-danger ml-3" icon="fa-sharp fa-light fa-trash" label="Delete"/>
         </div>
       </div>
     </template>
   </Card>
-
 </template>
 <script lang="ts">
 import {defineComponent} from "vue"
@@ -109,6 +108,18 @@ export default defineComponent({
     }
   },
   methods: {
+    confirm() {
+      this.$confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+          this.deleteGun()
+        },
+        reject: () => {
+        }
+      });
+    },
     deleteGun() {
       axios.delete(`${import.meta.env.VITE_API}/gun/${this.gun.id}`)
           .then(() => {

src/main.ts

@@ -24,6 +24,9 @@ import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import ColumnGroup from 'primevue/columngroup';
 import Row from 'primevue/row';
+import Image from 'primevue/image';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ConfirmationService from 'primevue/confirmationservice';
 
 app.component('Button', Button);
 app.component('Card', Card);
@@ -38,5 +41,9 @@ app.component('ColumnGroup', ColumnGroup);
 app.component('Calendar', Calendar);
 app.component('Row', Row);
 app.component('Textarea', Textarea);
+app.component('Image', Image);
+app.component('ConfirmDialog', ConfirmDialog);
+
+app.use(ConfirmationService)
 
 app.mount('#app')

src/pages/Edit.vue

@@ -9,12 +9,14 @@
           <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;" class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
+          <div style="border-top: 1px rgba(123,123,123,0.4) solid; border-bottom: 1px rgba(123,123,123,0.4) solid;"
+               class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
             <div>
-              <a target="_blank" :href="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`">
+              <Image :src="`${remoteUrl}/gun/photo/${photo.id}/200/${photo.file_name}`" preview>
-                <img :alt="photo.file_name" :src="`${remoteUrl}/gun/photo/${photo.id}/100/${photo.file_name}`"/>
+                <template #preview>
-                {{ photo.file_name }}
+                  <img :src="`${remoteUrl}/gun/photo/${photo.id}/1200/${photo.file_name}`" alt="image"/>
-              </a>
+                </template>
+              </Image>
             </div>
             <div @click="deletePhoto(photo.id)">
               <i style="color: red;" class="fa-regular fa-2x fa-trash"></i>
@@ -24,7 +26,6 @@
       </Card>
     </div>
   </div>
-
 </template>
 <script lang="ts">
 import {defineComponent} from "vue"