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

This was the most stupid bug in the world, fixed in the smartest way ever
This bug has driven lots of coders completely mad. You won't believe how it ended up being fixed
2025-07-28 18:43:03 -04:00 · 2024-01-24 23:08:43 -05:00 · 2024-01-24 23:00:57 -05:00 · 2024-01-24 22:39:01 -05:00 · 2023-08-07 22:47:26 -04:00 · 2023-08-07 22:12:09 -04:00
20 changed files with 2610 additions and 1515 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+.idea/
+.dist/
+node_modules/
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v19.6.0
+v22.14.0
--- a/7
+++ b/7
@@ -0,0 +1,7 @@
+FROM node:22.14.0
+
+ADD . .
+RUN npm i && npm run build
+
+FROM caddy as http
+
--- a/README.md
+++ b/README.md
@@ -1,18 +1,6 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support For `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+```shell
+nvm use
+npm run build
+docker run -p 5173:80 -v $(PWD)/dist:/usr/share/caddy/ --rm caddy
+```
+[http://localhost:5173](http://localhost:5173)
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Load Data Manager</title>
+    <title>Gun Manager</title>
    <script src="https://kit.fontawesome.com/1a962b66c9.js" crossorigin="anonymous"></script>
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,11 @@
 <template>
-    <div class="flex flex-row flex-wrap m-10 justify-around">
-        <router-view />
-    </div>
+  <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>
-import { defineComponent } from "vue";
-
-export default defineComponent({})
+const Toast = defineAsyncComponent(() => import('primevue/toast'))
 </script>
-
-<style>
-body {
-  font-family: var(--font-family);
-}
-</style>
--- a/src/components/GunForm.vue
+++ b/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>
@@ -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 v-model="gun.date_purchased"/>
+            <Calendar date-format="mm/dd/yy" v-model="gun.date_purchased"/>
          </div>
        </div>
        <div class="w-full mt-5">
@@ -62,37 +62,80 @@
            <Textarea v-model="gun.notes"/>
          </div>
        </div>
-        <div class="w-full mt-5">
+        <div class="w-full mt-5" v-if="gun.id">
          <div class="flex gap-2" style="flex-direction: column">
            <label for="value_amount">Photos</label>
            <FileUpload
-                :showUploadButton="gun.id === false"
                :showCancelButton="false"
                accept="image/*"
-                :multiple="gun.id === null"
+                multiple
+                :url="`${url}/gun/photo/${gun.id}`"
+                @upload="$emit('upload')"
            />
          </div>
        </div>
        <div class="w-full mt-5">
-          <Button @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
+          <Button :loading="loading" @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
          <router-link to="/guns">
            <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
          </router-link>
+          <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: {
-    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
+  },
+  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>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,42 +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: {
+    preset: Aura,
+    prefix: "p-",
+  },
+})

-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';
-
-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);
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+app.use(ConfirmationService)
+app.use(ToastService)

 app.mount('#app')
--- a/src/pages/Add.vue
+++ b/src/pages/Add.vue
@@ -1,46 +1,35 @@
 <template>
  <div class="md:w-2/3">
-    <GunForm @save="save" :gun="gun" />
+    <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 {
-  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 => ({
-    gun: {
-      make: "",
-      model: "",
-      serial_number: "",
-      purchase_amount: 0,
-      value_amount: 0,
-      date_purchased: "",
-      notes: ""
-    }
-  }),
-  methods: {
-    save() {
-      axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => {
-        this.$router.push('/gun/' + r.data.payload.id)
-      })
-    }
-  }
-})
 </script>
--- a/src/pages/Edit.vue
+++ b/src/pages/Edit.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="w-full flex flex-row flex-wrap justify-around">
-    <div class="w-full lg:w-1/2 m-5">
-      <GunForm @save="save" :gun="gun"/>
+    <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">
      <Card>
@@ -9,57 +9,90 @@
          <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
+               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}`">
-                <img :alt="photo.file_name" :src="`${remoteUrl}/gun/photo/${photo.id}/100/${photo.file_name}`"/>
-                {{ photo.file_name }}
-              </a>
+              <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"/>
+                </template>
+              </Image>
            </div>
            <div>
-              <i style="color: red;" class="fa-regular fa-2x fa-trash"></i>
+              <ConfirmPopup />
+              <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>
      </Card>
    </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
+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 => ({
-    gun: null
-  }),
-  created() {
-    this.getGun()
-  },
-  computed: {
-    remoteUrl() {
-      return import.meta.env.VITE_API
-    }
-  },
-  methods: {
-    getGun() {
-      axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
-          .then((r: Response<Guns>) => {
-            this.gun = r.data.payload
-          })
-    },
-    save() {
+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>
--- a/src/pages/Guns.vue
+++ b/src/pages/Guns.vue
@@ -4,7 +4,15 @@
      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
+          sortField="make" :sortOrder="1"
+          :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>
@@ -30,36 +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>
+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: []
-  }),
-  computed: {
-    total() {
-      let total = 0;
-
-      this.guns.map(g => {
-        total += g.value_amount
-      })
-
-      return total
-    }
-  },
-  created() {
-     axios.get(import.meta.env.VITE_API + '/gun')
-         .then((r: Response<Array<Guns>>) => {
-            this.guns = r.data.payload
-         })
-  },
+onMounted(() => {
+  fetchGuns()
 })
 </script>
--- a/src/pages/Index.vue
+++ b/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>
--- a/src/router/index.ts
+++ b/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 = [
    {
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
--- a/src/types/guns.d.ts
+++ b/src/types/guns.d.ts
@@ -1,13 +1,13 @@
 export interface Guns {
-    id: Number
+    id: number
    make: string
    model: string
-    value_amount: Number
+    value_amount: number
    purchase_amount: number
    photos: Array<Photo>
 }

 export interface Photo {
-    id: Number
+    id: number
    file_name: string
 }
--- a/tailwind.config.js
+++ b/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: {},
  },
--- a/vite.config.ts
+++ b/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()],
 })
Author	SHA1	Message	Date
Ron Rise	c049df9a9f	Add Docker support and update project dependencies; refactor components to use async imports	2025-07-28 18:43:03 -04:00
Ron Rise	26f44fd4ab	This was the most stupid bug in the world, fixed in the smartest way ever	2024-01-24 23:08:43 -05:00
Ron Rise	d49e27bbb0	This bug has driven lots of coders completely mad. You won't believe how it ended up being fixed	2024-01-24 23:00:57 -05:00
Ron Rise	1fe91f4dfa	Never gonna make you cry	2024-01-24 22:39:01 -05:00
Ron Rise	d0803a69ea	Pig	2023-08-07 22:47:26 -04:00
Ron Rise	ac85b16cd8	Ugh. Bad rebase.	2023-08-07 22:12:09 -04:00
Ron Rise	1260cd5a8b	this is how we generate our shit.	2023-08-07 22:08:54 -04:00
Ron Rise	26da7c6281	last hope failed, maybe now	2023-08-07 22:04:04 -04:00
Ron Rise	b7b03f8bab	derp, helper method rename	2023-08-07 21:17:33 -04:00
Ron Rise	5183277554	REALLY FUCKING FIXED	2023-08-07 20:55:32 -04:00