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",
+    "@primeuix/themes": "^1.2.2",
-    "primevue": "^3.30.2",
+    "@tailwindcss/vite": "^4.1.11",
-    "sass": "^1.62.1",
+    "axios": "^1.11.0",
-    "vue": "^3.3.4",
+    "primevue": "^4.3.6",
-    "vue-router": "^4.2.4"
+    "sass": "^1.89.2",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^6.0.1",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.21",
-    "postcss": "^8.4.23",
+    "tailwindcss": "^4.1.11",
-    "tailwindcss": "^3.3.3",
+    "typescript": "^5.8.3",
-    "typescript": "^5.0.2",
+    "vite": "^7.0.6",
-    "vite": "^4.3.2",
+    "vue-tsc": "^3.0.4"
-    "vue-tsc": "^1.4.2"
   }
 }

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 />
   </div>
 </template>
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
 
-<script>
+const Toast = defineAsyncComponent(() => import('primevue/toast'))
-import {defineComponent} from "vue";
-
-export default defineComponent({})
 </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,18 +79,32 @@
           <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">
+<script lang="ts" setup>
-import {defineComponent} from "vue"
+import { computed, defineAsyncComponent } from 'vue'
 import axios from "axios"
+import { useConfirm } from 'primevue/useconfirm'
+import { useRouter } from 'vue-router'
 
-export default defineComponent({
+const confirm = useConfirm()
-  props: {
+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
@@ -98,32 +112,30 @@ export default defineComponent({
   gun: {
     type: Object,
     required: true
-    },
-  },
-  computed: {
-    url() {
-      return import.meta.env.VITE_API
   }
-  },
+})
-  methods: {
+
-    confirm() {
+const url = computed(() => {
-      this.$confirm.require({
+  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: () => {
-          this.deleteGun()
+      deleteGun()
     },
     reject: () => {
     }
   });
-    },
+}
-    deleteGun() {
+
-      axios.delete(`${import.meta.env.VITE_API}/gun/${this.gun.id}`)
+function deleteGun() {
+  axios.delete(`${import.meta.env.VITE_API}/gun/${props.gun.id}`)
       .then(() => {
-            this.$router.push('/guns')
+        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)
+app.use(PrimeVue, {
-
+  theme: {
-import Menubar from 'primevue/menubar';
+    preset: Aura,
-import Button from "primevue/button"
+    prefix: "p-",
-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);
 
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
 app.use(ConfirmationService)
+app.use(ToastService)
 
 app.mount('#app')

src/pages/Add.vue

@@ -3,32 +3,18 @@
     <GunForm :loading="loading" @save="save" :gun="gun" :photos="photos" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-import {defineComponent} from "vue";
+import { defineAsyncComponent, ref } from 'vue'
-import {Nullable} from "primevue/ts-helpers";
 import axios from "axios";
 import {Response} from "../types/Response";
-import GunForm from "../components/GunForm.vue";
+import { useRouter } from 'vue-router'
 
-interface Data {
+const router = useRouter();
-  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
-  }
-}
 
-export default defineComponent({
+const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'));
-  components: {GunForm},
+
-  data: (): Data => ({
+const loading = ref(false);
-    loading: false,
+const gun = ref({
-    gun: {
   make: "",
   model: "",
   serial_number: "",
@@ -36,16 +22,14 @@ export default defineComponent({
   value_amount: 0,
   date_purchased: "",
   notes: ""
-    },
+});
-    photos: []
+
-  }),
+const photos = ref<Array<File>>([]);
-  methods: {
+
-    save() {
+function save() {
-      this.loading = true
+  loading.value = true
-      axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => {
+  axios.post(import.meta.env.VITE_API + '/gun', gun.value).then((r: Response<{ id: number }>) => {
-        this.$router.push(`/edit/${r.data.payload.id}`)
+    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">
+<script lang="ts" setup>
-import {defineComponent} from "vue"
+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 {
+const GunForm = defineAsyncComponent(() => import('../components/GunForm.vue'))
-  gun: Guns | null
+const ConfirmPopup = defineAsyncComponent(() => import('primevue/confirmpopup'));
-  loading: boolean
+const Image = defineAsyncComponent(() => import('primevue/image'));
-}
+const Button = defineAsyncComponent(() => import('primevue/button'));
+const Card = defineAsyncComponent(() => import('primevue/card'));
 
-export default defineComponent({
+const route = useRoute()
-  components: {GunForm},
+const toast = useToast()
-  data: (): Data => ({
+
-    loading: false,
+const loading = ref(false)
-    gun: null
+const gun = ref<Guns | null>(null)
-  }),
+
-  created() {
+const remoteUrl = computed(() => {
-    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() {
+function getGun() {
-      axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
+  axios.get(import.meta.env.VITE_API + `/gun/${route.params.id}`)
       .then((r: Response<Guns>) => {
-            this.gun = r.data.payload
+        gun.value = r.data.payload
       })
-    },
+}
-    save() {
+
-      this.loading = true
+function deletePhoto(photoId: number) {
-      axios.put(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`, this.gun)
+  axios.delete(import.meta.env.VITE_API + `/gun/photo/${photoId}`)
       .then(() => {
-            this.getGun()
+        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(() => {
-            this.loading = false
+        loading.value = false
       })
 }
-  }
+
-})
+getGun()
 </script>

src/pages/Guns.vue

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

src/pages/Index.vue

@@ -8,8 +8,9 @@
   </template>
 </Card>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-import {defineComponent} from "vue";
+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
+const Index = () => import('../pages/Index.vue');
-import Index from "../pages/Index.vue";
+const Guns = () => import('../pages/Guns.vue');
-// @ts-ignore
+const Add  = () => import('../pages/Add.vue');
-import BulletCreate from "../pages/bullets/Create.vue";
+const Edit = () => import('../pages/Edit.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 routes = [
     {

src/styles.css

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

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()],
 })