Changed STore Type and corrected all Pages

Added HistoryDisplay.vue
Added NumberRanges

spaces/pages/projects/index.vue

@@ -19,7 +19,7 @@
         >
           <USelectMenu
               v-model="createProjectData.customer"
-              :options="customers"
+              :options="dataStore.customers"
               option-attribute="name"
               value-attribute="id"
               searchable
@@ -45,103 +45,17 @@
     </UModal>
     <!-- TODO: USelect im Modal anpassen -->
     <UTable
-        :rows="projects"
+        :rows="dataStore.projects"
         :columns="projectColumns"
         @select="selectProject"
 
     >
       <template #customer-data="{row}">
-        {{customers.find(customer => customer.id == row.customer ) ? customers.find(customer => customer.id == row.customer ).name : row.id}}
+        {{dataStore.customers.find(customer => customer.id == row.customer ) ? dataStore.customers.find(customer => customer.id == row.customer ).name : row.id}}
       </template>
 
 
     </UTable>
-
-
-
-<!--    <div id="left">
-      <UButton @click="showCreateProject = true">+ Projekt</UButton>
-      <UModal v-model="showCreateProject">
-        <UCard>
-          <template #header>
-            Projekt erstellen
-          </template>
-
-          <UFormGroup
-            label="Name:"
-          >
-            <UInput
-              v-model="createProjectData.name"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Kunde:"
-          >
-            <USelectMenu
-              v-model="createProjectData.customer"
-              :options="customers"
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              :search-attributes="['name']"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Notizen:"
-          >
-            <UTextarea
-              v-model="createProjectData.notes"
-            />
-          </UFormGroup>
-
-          <template #footer>
-            <UButton
-              @click="createProject"
-            >
-              Erstellen
-            </UButton>
-          </template>
-        </UCard>
-      </UModal>
-
-      <UTable
-          :rows="projects"
-          @select="selectCustomer"
-
-      />
-
-
-      &lt;!&ndash;      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
-        <UCard class="listItem">
-          <UBadge>{{item.id}}</UBadge> {{item.name}}
-        </UCard>
-      </router-link>&ndash;&gt;
-
-
-    </div>
-    <div id="right">
-      {{selectedItem}}
-      <UCard v-if="selectedItem.id">
-        <template #header>
-          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.name}}
-        </template>
-
-        Kunde:<br>
-        {{selectedItem.customer.data.name}}<br>
-
-        Notizen: <br>
-        {{selectedItem.notes}}
-
-&lt;!&ndash;        Lieferantenrechnungen: <br>
-        <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
-        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}&ndash;&gt;
-
-
-
-
-      </UCard>
-    </div>-->
-
   </div>
 
 </template>
@@ -152,10 +66,9 @@ definePageMeta({
   middleware: "auth"
 })
 
+const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const router = useRouter()
-const {projects,customers} = storeToRefs(useDataStore())
-const {fetchProjects} = useDataStore()
 
 const projectColumns = [
   {
@@ -184,10 +97,6 @@ const selectProject = (project) => {
   router.push(`/projects/${project.id} `)
 }
 
-
-//const projects = (await supabase.from("projects").select()).data
-//const customers = (await supabase.from("customers").select()).data
-
 const showCreateProject = ref(false)
 const createProjectData = ref({
   phases: []
@@ -210,7 +119,7 @@ const createProject = async () => {
 
   showCreateProject.value = false
   createProjectData.value = {phases: []}
-  fetchProjects()
+  dataStore.fetchProjects()
 
 
 }