Changed STore Type and corrected all Pages

Added HistoryDisplay.vue
Added NumberRanges

spaces/pages/vendors/[mode]/[[id]].vue

@@ -3,18 +3,13 @@ definePageMeta({
   middleware: "auth"
 })
 
-//
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
 
-
-//Store
-const {vendors } = storeToRefs(useDataStore())
-const {fetchVendors, getVendorById} = useDataStore()
-
 let currentItem = null
 
 
@@ -26,7 +21,7 @@ const itemInfo = ref({})
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = getVendorById(Number(useRoute().params.id))
+    currentItem = dataStore.getVendorById(Number(useRoute().params.id))
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem
@@ -47,7 +42,7 @@ const createItem = async () => {
     mode.value = "show"
     itemInfo.value = {}
     toast.add({title: "Lieferant erfolgreich erstellt"})
-    await fetchVendors()
+    await dataStore.fetchVendors()
     router.push(`/vendors/show/${data[0].id}`)
     setupPage()
   }
@@ -74,7 +69,7 @@ const updateItem = async () => {
     mode.value = "show"
     itemInfo.value = {}
     toast.add({title: "Lieferant erfolgreich gespeichert"})
-    fetchVendors()
+    dataStore.fetchVendors()
   }
 
 

spaces/pages/vendors/index.vue

@@ -29,9 +29,8 @@ definePageMeta({
   middleware: "auth"
 })
 
-
+const dataStore = useDataStore()
 const router = useRouter()
-const {vendors } = storeToRefs(useDataStore())
 const mode = ref("show")
 
 const itemColumns = [
@@ -58,10 +57,10 @@ const searchString = ref('')
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
-    return vendors.value
+    return dataStore.vendors
   }
 
-  return vendors.value.filter(item => {
+  return dataStore.vendors.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })