Add Docker support and update project dependencies; refactor components to use async imports

.dockerignore

@@ -0,0 +1,3 @@
+.idea/
+.dist/
+node_modules/

.nvmrc

@@ -1 +1 @@
-v19.6.0
+v22.14.0

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:22.14.0
+
+ADD . .
+RUN npm i && npm run build
+
+FROM caddy as http
+

package.json

@@ -9,19 +9,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.4.0",
-    "primevue": "^3.30.2",
-    "sass": "^1.62.1",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "@primeuix/themes": "^1.2.2",
+    "@tailwindcss/vite": "^4.1.11",
+    "axios": "^1.11.0",
+    "primevue": "^4.3.6",
+    "sass": "^1.89.2",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.2",
-    "vue-tsc": "^1.4.2"
+    "@vitejs/plugin-vue": "^6.0.1",
+    "autoprefixer": "^10.4.21",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vue-tsc": "^3.0.4"
   }
 }

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/App.vue

@@ -1,22 +1,11 @@
 <template>
-  <confirm-dialog/>
+  <Toast />
   <div class="flex flex-row flex-wrap m-10 justify-around">
-    <router-view/>
+    <router-view />
   </div>
 </template>
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
 
-<script>
-import {defineComponent} from "vue";
-
-export default defineComponent({})
+const Toast = defineAsyncComponent(() => import('primevue/toast'))
 </script>
-
-<style>
-body {
-  font-family: var(--font-family);
-}
-
-.svg-inline--fa{
-  top: 40% !important;
-}
-</style>

src/components/GunForm.vue

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <template #header>
+    <template #title>
       <div class="ml-5 pt-10">
         <h2 v-if="gun.id" class="text-3xl">Edit Gun</h2>
         <h2 v-else class="text-3xl">Add Gun</h2>
@@ -79,51 +79,63 @@
           <router-link to="/guns">
             <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
           </router-link>
-          <Button @click="confirm" v-if="gun.id" class="p-button-danger ml-3" icon="fa-sharp fa-light fa-trash" label="Delete"/>
+          <ConfirmPopup />
+          <Button @click="confirmDelete" 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"
+<script lang="ts" setup>
+import { computed, defineAsyncComponent } from 'vue'
 import axios from "axios"
+import { useConfirm } from 'primevue/useconfirm'
+import { useRouter } from 'vue-router'
 
-export default defineComponent({
-  props: {
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    gun: {
-      type: Object,
-      required: true
-    },
+const confirm = useConfirm()
+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 Textarea = defineAsyncComponent(() => import('primevue/textarea'))
+const FileUpload = defineAsyncComponent(() => import('primevue/fileupload'))
+const Button = defineAsyncComponent(() => import('primevue/button'))
+const Card = defineAsyncComponent(() => import('primevue/card'))
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
   },
-  computed: {
-    url() {
-      return import.meta.env.VITE_API
-    }
-  },
-  methods: {
-    confirm() {
-      this.$confirm.require({
-        message: 'Are you sure you want to delete this gun?',
-        header: 'Confirmation',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-          this.deleteGun()
-        },
-        reject: () => {
-        }
-      });
-    },
-    deleteGun() {
-      axios.delete(`${import.meta.env.VITE_API}/gun/${this.gun.id}`)
-          .then(() => {
-            this.$router.push('/guns')
-          })
-    }
+  gun: {
+    type: Object,
+    required: true
   }
 })
+
+const url = computed(() => {
+  return import.meta.env.VITE_API
+})
+
+function confirmDelete() {
+  confirm.require({
+    message: 'Are you sure you want to delete this gun?',
+    header: 'Confirmation',
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      deleteGun()
+    },
+    reject: () => {
+    }
+  });
+}
+
+function deleteGun() {
+  axios.delete(`${import.meta.env.VITE_API}/gun/${props.gun.id}`)
+      .then(() => {
+        router.push('/guns')
+      })
+}
 </script>

src/main.ts

@@ -1,49 +1,24 @@
 import { createApp } from 'vue'
-// @ts-ignore
+import Aura from '@primeuix/themes/aura';
+
 import App from './App.vue'
 import router from './router'
 import PrimeVue from 'primevue/config';
-import "primevue/resources/primevue.min.css";
-import "primevue/resources/themes/viva-dark/theme.css";
-import "./styles.css"
+
+import './styles.css'
 
 const app = createApp(App)
 app.use(router)
-app.use(PrimeVue)
-
-import Menubar from 'primevue/menubar';
-import Button from "primevue/button"
-import Card from 'primevue/card';
-import Calendar from "primevue/calendar";
-import Dropdown from 'primevue/dropdown';
-import InputNumber from 'primevue/inputnumber';
-import Textarea from 'primevue/textarea';
-import FileUpload from 'primevue/fileupload';
-import InputText from 'primevue/inputtext';
-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);
-app.component('Menubar', Menubar);
-app.component('Dropdown', Dropdown);
-app.component('InputNumber', InputNumber);
-app.component('FileUpload', FileUpload);
-app.component('InputText', InputText);
-app.component('DataTable', DataTable);
-app.component('Column', Column);
-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(PrimeVue, {
+  theme: {
+    preset: Aura,
+    prefix: "p-",
+  },
+})
 
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
 app.use(ConfirmationService)
+app.use(ToastService)
 
 app.mount('#app')

src/pages/Add.vue

@@ -3,49 +3,33 @@
     <GunForm :loading="loading" @save="save" :gun="gun" :photos="photos" />
   </div>
 </template>
-<script lang="ts">
-import {defineComponent} from "vue";
-import {Nullable} from "primevue/ts-helpers";
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from 'vue'
 import axios from "axios";
 import {Response} from "../types/Response";
-import GunForm from "../components/GunForm.vue";
+import { useRouter } from 'vue-router'
 
-interface Data {
-  loading: boolean
-  photos: Array<File>
-  gun: {
-    make: string
-    model: string
-    serial_number: string
-    purchase_amount: Nullable<number>
-    value_amount: Nullable<number>
-    date_purchased: string
-    notes: string
-  }
+const router = useRouter();
+
+const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'));
+
+const loading = ref(false);
+const gun = ref({
+  make: "",
+  model: "",
+  serial_number: "",
+  purchase_amount: 0,
+  value_amount: 0,
+  date_purchased: "",
+  notes: ""
+});
+
+const photos = ref<Array<File>>([]);
+
+function save() {
+  loading.value = true
+  axios.post(import.meta.env.VITE_API + '/gun', gun.value).then((r: Response<{ id: number }>) => {
+    router.push(`/edit/${r.data.payload.id}`)
+  })
 }
-
-export default defineComponent({
-  components: {GunForm},
-  data: (): Data => ({
-    loading: false,
-    gun: {
-      make: "",
-      model: "",
-      serial_number: "",
-      purchase_amount: 0,
-      value_amount: 0,
-      date_purchased: "",
-      notes: ""
-    },
-    photos: []
-  }),
-  methods: {
-    save() {
-      this.loading = true
-      axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => {
-        this.$router.push(`/edit/${r.data.payload.id}`)
-      })
-    }
-  }
-})
 </script>

src/pages/Edit.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full flex flex-row flex-wrap justify-around">
-    <div class="w-full lg:w-1/2 m-5">
+    <div class="w-1/2 lg:w-1/2 m-5">
       <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">
@@ -22,6 +22,7 @@
               </Image>
             </div>
             <div>
+              <ConfirmPopup />
               <Button @click="deletePhoto(photo.id)">
                 <i style="color: red;" class="fa-regular fa-2x fa-trash mr-5"></i> Delete Photo
               </Button>
@@ -32,55 +33,66 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import {defineComponent} from "vue"
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref } from 'vue'
 import axios from "axios"
 import {Response} from "../types/Response"
 import {Guns} from "../types/guns";
-import GunForm from "../components/GunForm.vue";
+import { useRoute } from 'vue-router'
+import { useToast } from 'primevue'
 
-interface Data {
-  gun: Guns | null
-  loading: boolean
+const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'))
+const ConfirmPopup = defineAsyncComponent(() => import('primevue/confirmpopup'));
+const Image = defineAsyncComponent(() => import('primevue/image'));
+const Button = defineAsyncComponent(() => import('primevue/button'));
+const Card = defineAsyncComponent(() => import('primevue/card'));
+
+const route = useRoute()
+const toast = useToast()
+
+const loading = ref(false)
+const gun = ref<Guns | null>(null)
+
+const remoteUrl = computed(() => {
+  return import.meta.env.VITE_API
+})
+
+function getGun() {
+  axios.get(import.meta.env.VITE_API + `/gun/${route.params.id}`)
+      .then((r: Response<Guns>) => {
+        gun.value = r.data.payload
+      })
 }
 
-export default defineComponent({
-  components: {GunForm},
-  data: (): Data => ({
-    loading: false,
-    gun: null
-  }),
-  created() {
-    this.getGun()
-  },
-  computed: {
-    remoteUrl() {
-      return import.meta.env.VITE_API
-    }
-  },
-  methods: {
-    deletePhoto(id: number) {
-      axios.delete(import.meta.env.VITE_API + `/gun/photo/${id}`)
-          .then(() => {
-            this.getGun()
-          })
-    },
-    getGun() {
-      axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
-          .then((r: Response<Guns>) => {
-            this.gun = r.data.payload
-          })
-    },
-    save() {
-      this.loading = true
-      axios.put(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`, this.gun)
-          .then(() => {
-            this.getGun()
-          })
-          .finally(() => {
-            this.loading = false
-          })
-    }
-  }
-})
+function deletePhoto(photoId: number) {
+  axios.delete(import.meta.env.VITE_API + `/gun/photo/${photoId}`)
+      .then(() => {
+        toast.add({
+          severity: 'success',
+          summary: 'Success',
+          detail: 'Photo deleted successfully',
+          life: 3000
+        })
+        getGun()
+      })
+}
+
+function save() {
+  loading.value = true
+  axios.put(import.meta.env.VITE_API + `/gun/${route.params.id}`, gun.value)
+      .then(() => {
+        toast.add({
+          severity: 'success',
+          summary: 'Success',
+          detail: 'Gun updated successfully',
+          life: 3000
+        })
+        getGun()
+      })
+      .finally(() => {
+        loading.value = false
+      })
+}
+
+getGun()
 </script>

src/pages/Guns.vue

@@ -38,52 +38,51 @@
     </template>
   </Card>
 </template>
-<script lang="ts">
-import {defineComponent} from "vue";
+<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 Column from 'primevue/column';
 
-interface Data {
-  guns: Array<Guns>
-  filters: {
-    global: DataTableFilterMetaData
-  }
-  loading: boolean
+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 guns = ref<Guns[]>([])
+const loading = ref<boolean>(false)
+const filters = ref<{global: DataTableFilterMetaData}>({
+  global: {
+    value: "",
+    matchMode: "contains"
+  } as DataTableFilterMetaData
+})
+
+const total = computed(() => {
+  let total = 0;
+
+  guns.value.map(g => {
+    total += g.value_amount
+  })
+
+  return total
+})
+
+function fetchGuns() {
+  loading.value = true
+  axios.get(import.meta.env.VITE_API + '/gun')
+      .then((r: Response<Array<Guns>>) => {
+        guns.value = r.data.payload
+      })
+      .finally(() => {
+        loading.value = false
+      })
 }
 
-export default defineComponent({
-  data: (): Data => ({
-    guns: [],
-    loading: false,
-    filters: {
-      global: {
-        value: "",
-        matchMode: "contains"
-      } as DataTableFilterMetaData
-    }
-  }),
-  computed: {
-    total() {
-      let total = 0;
-
-      this.guns.map(g => {
-        total += g.value_amount
-      })
-
-      return total
-    }
-  },
-  created() {
-    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
-        })
-  },
+onMounted(() => {
+  fetchGuns()
 })
 </script>

src/pages/Index.vue

@@ -8,8 +8,9 @@
   </template>
 </Card>
 </template>
-<script lang="ts">
-import {defineComponent} from "vue";
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue'
 
-export default defineComponent({})
+const Card = defineAsyncComponent(() => import('primevue/card'));
+const Button = defineAsyncComponent(() => import('primevue/button'));
 </script>

src/router/index.ts

@@ -1,14 +1,9 @@
-import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 
-// @ts-ignore
-import Index from "../pages/Index.vue";
-// @ts-ignore
-import BulletCreate from "../pages/bullets/Create.vue";
-// @ts-ignore
-import BulletList from "../pages/bullets/List.vue";
-import Guns from "../pages/Guns.vue";
-import Add from "../pages/Add.vue";
-import Edit from "../pages/Edit.vue";
+const Index = () => import('../pages/Index.vue');
+const Guns = () => import('../pages/Guns.vue');
+const Add  = () => import('../pages/Add.vue');
+const Edit = () => import('../pages/Edit.vue');
 
 const routes = [
     {

src/styles.css

@@ -1,7 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.p-button {
-    color: inherit;
-}
+@import "tailwindcss";

tailwind.config.js

@@ -1,5 +1,9 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js,vue}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {},
   },

vite.config.ts

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