Initial

spaces/pages/projects/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div id="main">
+    <div id="left">
+
+      <UButton @click="showCreateProject = true">+ Projekt</UButton>
+      <UModal v-model="showCreateProject">
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+
+        </UCard>
+      </UModal>
+
+      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
+        <UCard class="listItem">
+          <UBadge>{{item.id}}</UBadge> {{item.attributes.name}}
+        </UCard>
+      </router-link>
+
+
+    </div>
+    <div id="right">
+      {{selectedItem}}
+      <UCard v-if="selectedItem.id">
+        <template #header>
+          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.attributes.name}}
+        </template>
+
+        Kunde:<br>
+        {{selectedItem.attributes.customer.data.attributes.name}}<br>
+
+        Notizen: <br>
+        {{selectedItem.attributes.notes}}
+
+<!--        Lieferantenrechnungen: <br>
+        <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
+        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}-->
+
+
+
+
+      </UCard>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create} = useStrapi4()
+const projects = (await find('projects',{populate: "*"})).data
+
+const showCreateProject = ref(false)
+const projectData = ref({})
+
+let selectedItem = ref({})
+
+const selectItem = (item) => {
+  selectedItem.value = item
+  console.log(item)
+}
+
+</script>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+}
+#left {
+  width: 25vw;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+</style>