models, types & persistent storage

package.json

@@ -21,6 +21,7 @@
     "laravel-vue-i18n": "^2.7.1",
     "openseadragon": "^4.1.0",
     "pinia": "^2.1.6",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5",
     "vue3-carousel": "^0.3.1"

src/app.ts

@@ -1,14 +1,14 @@
-import './bootstrap'
-import './css/style.css'
-
-import App from './App.vue'
+import '@/bootstrap'
+import '@/css/style.css'
 
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router/auto'
 import { i18nVue } from 'laravel-vue-i18n'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import * as Sentry from '@sentry/vue'
 
+import App from '@/App.vue'
 import { useLocaleStore } from '@/stores/LocaleStore'
 import { useHistoryStore } from '@/stores/HistoryStore'
 
@@ -29,7 +29,10 @@ const app = createApp(App)
 Sentry.init({ app, dsn: import.meta.env.VITE_SENTRY_DSN })
 
 app.use(router)
-app.use(createPinia())
+
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+app.use(pinia)
 
 const localeStore = useLocaleStore()
 app.use(i18nVue, {

src/components/author/AuthorDetails.vue

@@ -3,7 +3,9 @@
 </template>
 
 <script setup lang="ts">
+import Item from '@/models/Item'
+
 defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 </script>

src/components/author/AuthorSummary.vue

@@ -13,7 +13,9 @@
 </template>
 
 <script setup lang="ts">
+import Item from '@/models/Item'
+
 defineProps<{
-  item: any // TODO: add model
+  item: Item
 }>()
 </script>

src/components/author/AuthorityDetails.vue

@@ -42,12 +42,14 @@ import axios from 'axios'
 
 import ItemPreview from '@/components/general/ItemPreview.vue'
 import ItemImage from '@/components/general/ItemImage.vue'
+import Authority from '@/models/Authority'
+import Item from '@/models/Item'
 
 const props = defineProps<{
-  authority: any // TODO: add model
+  authority: Authority
 }>()
-const relatedItems = ref<any[]>([]) // TODO: add model
-const previewItem = ref<any | null>(null) // TODO: add model
+const relatedItems = ref<Item[]>([])
+const previewItem = ref<Item | null>(null)
 const isLoading = ref(true)
 
 onMounted(async () => {
@@ -56,7 +58,7 @@ onMounted(async () => {
       const response = await axios.get(
         `/api/related_items/${props.authority.related_items.join(',')}`
       )
-      relatedItems.value = response.data.data
+      relatedItems.value = response.data.data.map((item: any) => new Item(item))
     } catch (error) {
       console.error(error)
     } finally {

src/components/author/AuthoritySummary.vue

@@ -16,7 +16,9 @@
 </template>
 
 <script setup lang="ts">
+import Authority from '@/models/Authority'
+
 defineProps<{
-  authority: any // TODO: add model
+  authority: Authority
 }>()
 </script>

src/components/bucketlist/Bucketlist.vue

@@ -9,8 +9,8 @@
           unlocked
             ? $t('All artworks found')
             : $t(':found of :all artworks found', {
-                found: found.length,
-                all: bucketlist.items.length,
+                found: String(found?.length ?? 0),
+                all: String(bucketlist.items.length ?? 0),
               })
         }}
       </p>
@@ -58,7 +58,7 @@
         </Thumbnail>
       </router-link>
     </div>
-    <div v-if="found.length">
+    <div v-if="found?.length">
       <h3 class="text-1.5xl font-medium leading-6">{{ $t('Found') }}</h3>
       <div class="mt-4 flex flex-col gap-y-4">
         <router-link v-for="item in found" :key="item.id" :to="`/item/${item.id}`">
@@ -82,13 +82,14 @@ import ItemThumbnail from '@/components/general/ItemThumbnail.vue'
 import LockedItemThumbnail from '@/components/bucketlist/LockedItemThumbnail.vue'
 import ResponsiveImageWithSizes from '@/components/general/ResponsiveImageWithSizes.vue'
 import Thumbnail from '@/components/general/Thumbnail.vue'
+import Bucketlist from '@/models/Bucketlist'
 
 const props = defineProps<{
   id: string
 }>()
 const bucketlistStore = useBucketlistStore()
 const interactionStore = useInteractionStore()
-const bucketlist = ref<any | null>(null) // TODO: add model
+const bucketlist = ref<Bucketlist | null>(null)
 
 const found = computed(() => {
   return bucketlist.value?.items.filter((item) => interactionStore.isItemViewed(item.id))
@@ -98,10 +99,10 @@ const notFound = computed(() => {
   return bucketlist.value?.items.filter((item) => !interactionStore.isItemViewed(item.id))
 })
 
-const unlocked = computed(() => !notFound.value.length)
+const unlocked = computed(() => !notFound.value?.length)
 
 onMounted(async () => {
-  bucketlist.value = bucketlistStore.get(props.id)
+  bucketlist.value = bucketlistStore.get(props.id)!
   bucketlist.value = await bucketlistStore.load(props.id)
 })
 </script>

src/components/bucketlist/LockedItemThumbnail.vue

@@ -17,8 +17,9 @@
 <script setup lang="ts">
 import ResponsiveImageWithSizes from '@/components/general/ResponsiveImageWithSizes.vue'
 import Thumbnail from '@/components/general/Thumbnail.vue'
+import Item from '@/models/Item'
 
 defineProps<{
-  item: any // TODO: add model
+  item: Item
 }>()
 </script>

src/components/general/ImageLightbox.vue

@@ -16,7 +16,7 @@
     </button>
   </div>
   <div
-    v-if="visible"
+    v-if="visible && images"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
     @click="visible = false"
   >
@@ -42,16 +42,18 @@
 </template>
 
 <script setup lang="ts">
+import type { IImage } from '@/models/_Interfaces'
+
 import ZoomViewer from '@/components/misc/ZoomViewer.vue'
 import ItemImage from '@/components/general/ItemImage.vue'
 
 defineProps<{
   alt: string
-  offsetTop: number
   src: string
   srcset: string
-  images: string[]
-  imageAspectRatio: number
+  offsetTop?: number
+  images?: IImage[]
+  imageAspectRatio?: number
   imgClass?: string
 }>()
 

src/components/general/ItemImage.vue

@@ -21,7 +21,7 @@
 <script setup lang="ts">
 defineProps<{
   alt: string
-  offsetTop: number
+  offsetTop?: number
   src: string
   srcset: string
 }>()

src/components/general/ItemLoader.vue

@@ -3,11 +3,13 @@
 </template>
 
 <script setup lang="ts">
+import Item from '@/models/Item'
+
 const props = defineProps<{
   id: string
 }>()
 
-const item = ref<any | null>(null) // TODO: add model
+const item = ref<Item | null>(null)
 
 onMounted(async () => {
   const itemStore = useItemStore()

src/components/general/ItemPreview.vue

@@ -41,9 +41,10 @@
 <script setup lang="ts">
 import WebumeniaButton from '@/components/forms/WebumeniaButton.vue'
 import ConfirmButton from '@/components/forms/ConfirmButton.vue'
+import Item from '@/models/Item'
 
 defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 
 const emit = defineEmits<{

src/components/general/ItemThumbnail.vue

@@ -14,8 +14,9 @@
 <script setup lang="ts">
 import Thumbnail from '@/components/general/Thumbnail.vue'
 import ResponsiveImageWithSizes from '@/components/general/ResponsiveImageWithSizes.vue'
+import Item from '@/models/Item'
 
 defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 </script>

src/components/general/ResponsiveImage.vue

@@ -3,7 +3,9 @@
 </template>
 
 <script setup lang="ts">
+import type { IImage } from '@/models/_Interfaces'
+
 defineProps<{
-  image: any //TODO: add model
+  image: IImage
 }>()
 </script>

src/components/general/ResponsiveImageWithSizes.vue

@@ -11,8 +11,10 @@
 </template>
 
 <script setup lang="ts">
+import type { IImage } from '@/models/_Interfaces'
+
 defineProps<{
-  image: any //TODO: add model
+  image: IImage
 }>()
 
 const img = ref<any | null>(null)

src/components/general/ResponsiveVideoEmbed.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 defineProps<{
   src: string
-  width: number
-  height: number
+  width?: number
+  height?: number
 }>()
 </script>

src/components/general/VideoSummary.vue

@@ -13,10 +13,12 @@
 </template>
 
 <script setup lang="ts">
+import type { IImage } from '@/models/_Interfaces'
+
 import ResponsiveImage from '@/components/general/ResponsiveImage.vue'
 
 defineProps<{
-  thumbnail: any //TODO: add model
+  thumbnail: IImage
   title?: string
   subtitle?: string
 }>()

src/components/interactions/InteractionItem.vue

@@ -13,10 +13,14 @@
 </template>
 
 <script setup lang="ts">
+import type { Component } from 'vue'
+
+import Item from '@/models/Item'
+
 defineProps<{
-  item: any //TODO: add model
+  item: Item
   label: string
-  icon: any //TODO: add model
+  icon: Component
   iconClass?: string
 }>()
 </script>

src/components/interactions/InteractionItemFavourited.vue

@@ -4,15 +4,15 @@
     icon-class="fill-current"
     :label="$t('Saved')"
     v-bind="props"
-    item=""
   />
 </template>
 
 <script setup lang="ts">
 import SvgHeartSmall from '@/components/svg/SvgHeartSmall.vue'
 import InteractionItem from '@/components/interactions/InteractionItem.vue'
+import Item from '@/models/Item'
 
 const props = defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 </script>