Extracted API type into its own file

* Fixed typo
eurofurence · Oct 2, 2024 · 189791a · 189791a
1 parent 99b9e0d
commit 189791a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/resources/interface/Gallery/Fursuit.ts b/resources/interface/Gallery/Fursuit.ts
@@ -0,0 +1,29 @@
+/**
+ * API Item for the gallery used by the backend
+ *
+ * Fursuit interface for usage for the gallery items
+ */
+export interface Fursuit {
+    /**
+     * Database ID of the fursuit
+     */
+    id: number,
+    /**
+     * Name of the fursuit
+     */
+    name: string,
+    /**
+     * Species of the fursuit
+     */
+    species: string,
+    /**
+     * Image url of the fursuit (Temporary link)
+     */
+    image: string,
+    /**
+     * Fursuit got caught X times
+     */
+    scoring: number,
+}
+
+export default Fursuit;
diff --git a/resources/js/Components/Gallery/GalleryItem.vue b/resources/js/Components/Gallery/GalleryItem.vue
@@ -1,6 +1,8 @@
 <script setup>
+import Fursuit from "../../../interface/Gallery/Fursuit.js";
+
 const props = defineProps({
-    fursuit: Object,
+    fursuit: Fursuit,
 });
 </script>
 

diff --git a/resources/js/Pages/Gallery/GalleryIndex.vue b/resources/js/Pages/Gallery/GalleryIndex.vue
@@ -1,21 +1,16 @@
 <script setup lang="ts">
 // @ts-ignore
 import Layout from "@/Layouts/Layout.vue";
-import {Head, router} from '@inertiajs/vue3'
+// @ts-ignore
 import GalleryItem from "@/Components/Gallery/GalleryItem.vue";
+// @ts-ignore
+import Pagination from "@/Components/Gallery/Pagination.vue";
+import {Head, router} from '@inertiajs/vue3'
 import {ref} from "vue";
-import Pagnation from "@/Components/Gallery/Pagination.vue";
+import Fursuit from "../../../interface/Gallery/Fursuit";
 
 defineOptions({layout: Layout})
 
-interface Fursuit {
-    id: number,
-    name: string,
-    species: string,
-    image: string,
-    scoring: string,
-}
-
 const props = defineProps({
     fursuit: Array<Fursuit>,
     site: Number,
@@ -45,7 +40,6 @@ function openImageInNewTab() {
 </script>
 
 <template>
-
     <Head title="Gallery"/>
     <div class="py-16">
         <div class="text-xl">Gallery</div>
@@ -82,7 +76,7 @@ function openImageInNewTab() {
         </div>
     </div>
     <!-- Pagnation -->
-    <Pagnation
+    <Pagination
         :site="props.site"
         :maxSite="props.maxSite"
         :routeForwards="() => {router.visit(route('gallery.site', { site: props.site + 1 }));}"