siteworxpro/gun-manager-frontend
1
Fork 0
Code Pull Requests Releases Activity

Compare commits

base: siteworxpro:108ec64b5fbc8c0fad0bcf63ca5b6b546860bf9a
Branches Tags
siteworxpro:master
..
compare: siteworxpro:c049df9a9fe336c14b6679dec5f39827be63b3be
Branches Tags
siteworxpro:master

10 Commits
108ec64b5f ... c049df9a9f

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
20 changed files with 2610 additions and 1515 deletions
Expand all files Collapse all files

3
.dockerignore Normal file
View File

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

2
.nvmrc
View File

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

7
Dockerfile Normal file
View File

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

24
README.md
View File

@@ -1,18 +1,6 @@
# Vue 3 + TypeScript + Vite ```shell
nvm use
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. npm run build
docker run -p 5173:80 -v $(PWD)/dist:/usr/share/caddy/ --rm caddy
## Recommended IDE Setup ```
[http://localhost:5173](http://localhost:5173)
- [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.

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <script src="https://kit.fontawesome.com/1a962b66c9.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>

3621
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
package.json
View File

@@ -9,19 +9,20 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "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": { "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"
} }
} }

6
postcss.config.js
View File

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

14
src/App.vue
View File

@@ -1,17 +1,11 @@
<template> <template>
<Toast />
<div class="flex flex-row flex-wrap m-10 justify-around"> <div class="flex flex-row flex-wrap m-10 justify-around">
<router-view /> <router-view />
</div> </div>
</template> </template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
<script> const Toast = defineAsyncComponent(() => import('primevue/toast'))
import { defineComponent } from "vue";
export default defineComponent({})
</script> </script>
<style>
body {
font-family: var(--font-family);
}
</style>

67
src/components/GunForm.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<Card> <Card>
<template #header> <template #title>
<div class="ml-5 pt-10"> <div class="ml-5 pt-10">
<h2 v-if="gun.id" class="text-3xl">Edit Gun</h2> <h2 v-if="gun.id" class="text-3xl">Edit Gun</h2>
<h2 v-else class="text-3xl">Add Gun</h2> <h2 v-else class="text-3xl">Add Gun</h2>
@@ -53,7 +53,7 @@
<div class="w-full mt-5"> <div class="w-full mt-5">
<div class="flex gap-2" style="flex-direction: column"> <div class="flex gap-2" style="flex-direction: column">
<label for="date_purchased">Date Purchased</label> <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> </div>
<div class="w-full mt-5"> <div class="w-full mt-5">
@@ -62,37 +62,80 @@
<Textarea v-model="gun.notes"/> <Textarea v-model="gun.notes"/>
</div> </div>
</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"> <div class="flex gap-2" style="flex-direction: column">
<label for="value_amount">Photos</label> <label for="value_amount">Photos</label>
<FileUpload <FileUpload
:showUploadButton="gun.id === false"
:showCancelButton="false" :showCancelButton="false"
accept="image/*" accept="image/*"
:multiple="gun.id === null" multiple
:url="`${url}/gun/photo/${gun.id}`"
@upload="$emit('upload')"
/> />
</div> </div>
</div> </div>
<div class="w-full mt-5"> <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"> <router-link to="/guns">
<Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/> <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
</router-link> </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>
</div> </div>
</template> </template>
</Card> </Card>
</template> </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
},
gun: { gun: {
type: Object, type: Object,
required: true 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> </script>

46
src/main.ts
View File

@@ -1,42 +1,24 @@
import { createApp } from 'vue' import { createApp } from 'vue'
// @ts-ignore import Aura from '@primeuix/themes/aura';
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import PrimeVue from 'primevue/config'; 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) const app = createApp(App)
app.use(router) app.use(router)
app.use(PrimeVue) app.use(PrimeVue, {
theme: {
preset: Aura,
prefix: "p-",
},
})
import Menubar from 'primevue/menubar'; import ConfirmationService from 'primevue/confirmationservice'
import Button from "primevue/button" import ToastService from 'primevue/toastservice'
import Card from 'primevue/card'; app.use(ConfirmationService)
import Calendar from "primevue/calendar"; app.use(ToastService)
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);
app.mount('#app') app.mount('#app')

47
src/pages/Add.vue
View File

@@ -1,31 +1,20 @@
<template> <template>
<div class="md:w-2/3"> <div class="md:w-2/3">
<GunForm @save="save" :gun="gun" /> <GunForm :loading="loading" @save="save" :gun="gun" :photos="photos" />
</div> </div>
</template> </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 axios from "axios";
import {Response} from "../types/Response"; import {Response} from "../types/Response";
import GunForm from "../components/GunForm.vue"; import { useRouter } from 'vue-router'
interface Data { const router = useRouter();
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);
gun: { const gun = ref({
make: "", make: "",
model: "", model: "",
serial_number: "", serial_number: "",
@@ -33,14 +22,14 @@ export default defineComponent({
value_amount: 0, value_amount: 0,
date_purchased: "", date_purchased: "",
notes: "" notes: ""
} });
}),
methods: { const photos = ref<Array<File>>([]);
save() {
axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => { function save() {
this.$router.push('/gun/' + r.data.payload.id) 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}`)
}) })
} }
}
})
</script> </script>

107
src/pages/Edit.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="w-full flex flex-row flex-wrap justify-around"> <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 @save="save" :gun="gun"/> <GunForm :loading="loading" @upload="getGun" v-if="gun" @save="save" :gun="gun"/>
</div> </div>
<div class="mt-10 w-full lg:w-1/2 m-5"> <div class="mt-10 w-full lg:w-1/2 m-5">
<Card> <Card>
@@ -9,57 +9,90 @@
<h3 class="text-lg font-bold"> <h3 class="text-lg font-bold">
Images Images
</h3> </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> <div>
<a target="_blank" :href="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`"> <Image preview zoomInDisabled zoomOutDisabled>
<img :alt="photo.file_name" :src="`${remoteUrl}/gun/photo/${photo.id}/100/${photo.file_name}`"/> <template #image>
{{ photo.file_name }} <img alt="image" :src="`${remoteUrl}/gun/photo/${photo.id}/200/${photo.file_name}`" />
</a> </template>
<template #preview>
<img :src="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`" alt="image"/>
</template>
</Image>
</div> </div>
<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>
</div> </div>
</template> </template>
</Card> </Card>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import {defineComponent} from "vue" import { computed, defineAsyncComponent, ref } from 'vue'
import axios from "axios" import axios from "axios"
import {Response} from "../types/Response" import {Response} from "../types/Response"
import {Guns} from "../types/guns"; 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'));
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({ function deletePhoto(photoId: number) {
components: {GunForm}, axios.delete(import.meta.env.VITE_API + `/gun/photo/${photoId}`)
data: (): Data => ({ .then(() => {
gun: null toast.add({
}), severity: 'success',
created() { summary: 'Success',
this.getGun() detail: 'Photo deleted successfully',
}, life: 3000
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
}) })
}, getGun()
save() { })
}
} 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> </script>

59
src/pages/Guns.vue
View File

@@ -4,7 +4,15 @@
Gun List Gun List
</template> </template>
<template #content> <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="id" header="ID"></Column>
<Column sortable field="make" header="Make"></Column> <Column sortable field="make" header="Make"></Column>
<Column sortable field="model" header="Model"></Column> <Column sortable field="model" header="Model"></Column>
@@ -30,36 +38,51 @@
</template> </template>
</Card> </Card>
</template> </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 {Guns} from "../types/guns";
import {Response} from "../types/Response"; import {Response} from "../types/Response";
import axios from 'axios' 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'));
} const InputText = defineAsyncComponent(() => import('primevue/inputtext'));
const DataTable = defineAsyncComponent(() => import('primevue/datatable'));
export default defineComponent({
data: (): Data => ({ const guns = ref<Guns[]>([])
guns: [] const loading = ref<boolean>(false)
}), const filters = ref<{global: DataTableFilterMetaData}>({
computed: { global: {
total() { value: "",
matchMode: "contains"
} as DataTableFilterMetaData
})
const total = computed(() => {
let total = 0; let total = 0;
this.guns.map(g => { guns.value.map(g => {
total += g.value_amount total += g.value_amount
}) })
return total return total
} })
},
created() { function fetchGuns() {
loading.value = true
axios.get(import.meta.env.VITE_API + '/gun') axios.get(import.meta.env.VITE_API + '/gun')
.then((r: Response<Array<Guns>>) => { .then((r: Response<Array<Guns>>) => {
this.guns = r.data.payload guns.value = r.data.payload
}) })
}, .finally(() => {
loading.value = false
})
}
onMounted(() => {
fetchGuns()
}) })
</script> </script>

7
src/pages/Index.vue
View File

@@ -8,8 +8,9 @@
</template> </template>
</Card> </Card>
</template> </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> </script>

15
src/router/index.ts
View File

@@ -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 = [ const routes = [
{ {

4
src/styles.css
View File

@@ -1,3 +1 @@
@tailwind base; @import "tailwindcss";
@tailwind components;
@tailwind utilities;

6
src/types/guns.d.ts vendored
View File

@@ -1,13 +1,13 @@
export interface Guns { export interface Guns {
id: Number id: number
make: string make: string
model: string model: string
value_amount: Number value_amount: number
purchase_amount: number purchase_amount: number
photos: Array<Photo> photos: Array<Photo>
} }
export interface Photo { export interface Photo {
id: Number id: number
file_name: string file_name: string
} }

6
tailwind.config.js
View File

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

3
vite.config.ts
View File

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