Changed Backend to Supabase

spaces/pages/projects/[id].vue

@@ -13,6 +13,9 @@ const tabItems = [
   },{
     key: "forms",
     label: "Formulare"
+  },{
+    key: "timetracking",
+    label: "Zeiterfassung"
   }
 ]
 const selectedPhase = ref({})
@@ -51,8 +54,35 @@ const addPhase = async (phaseBefore) => {
 </script>
 
 <template>
-  <div id="main">
-    <div id="left">
+  <div>
+    <UTabs :items="tabItems" class="w-full">
+      <template #item="{ item }">
+        <div v-if="item.key === 'phases'" class="space-y-3">
+          <div id="phaseList">
+            <a
+                v-for="phase in project.attributes.phases"
+                @click="selectedPhase = phase"
+            >
+              <div
+                  class="phaseContainer"
+              >
+                <span>{{phase.name}} - {{phase.position}}</span>
+              </div>
+
+              <a class="plusIcon" @click="addPhase(phase)">
+
+                <UDivider icon="i-heroicons-plus-circle"/>
+              </a>
+            </a>
+          </div>
+
+        </div>
+        <div v-else-if="item.key === 'password'" class="space-y-3">
+
+        </div>
+      </template>
+    </UTabs>
+<!--    <div id="left">
       <a
           v-for="phase in project.attributes.phases"
           @click="selectedPhase = phase"
@@ -64,7 +94,7 @@ const addPhase = async (phaseBefore) => {
         </div>
 
         <a class="plusIcon" @click="addPhase(phase)">
-<!--          <UIcon name="i-heroicons-plus-circle" />-->
+&lt;!&ndash;          <UIcon name="i-heroicons-plus-circle" />&ndash;&gt;
           <UDivider icon="i-heroicons-plus-circle"/>
         </a>
       </a>
@@ -101,7 +131,7 @@ const addPhase = async (phaseBefore) => {
       </UButton>
 
       {{selectedPhase}}
-    </div>
+    </div>-->
   </div>
 </template>
 
@@ -134,6 +164,17 @@ const addPhase = async (phaseBefore) => {
 .phaseContainer:hover {
   border: 1px solid #69c350;
 }
+#phaseList {
+  height: 70vh;
+  overflow: auto;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+#phaseList::-webkit-scrollbar {
+  display: none;
+}
+
 
 .notesTextarea {
   margin-top: 1em

spaces/pages/projects/index.vue

@@ -4,14 +4,51 @@
 
       <UButton @click="showCreateProject = true">+ Projekt</UButton>
       <UModal v-model="showCreateProject">
-        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <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>
 
       <router-link v-for="item in projects" :to="`/projects/${item.id}`">
         <UCard class="listItem">
-          <UBadge>{{item.id}}</UBadge> {{item.attributes.name}}
+          <UBadge>{{item.id}}</UBadge> {{item.name}}
         </UCard>
       </router-link>
 
@@ -21,14 +58,14 @@
       {{selectedItem}}
       <UCard v-if="selectedItem.id">
         <template #header>
-          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.attributes.name}}
+          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.name}}
         </template>
 
         Kunde:<br>
-        {{selectedItem.attributes.customer.data.attributes.name}}<br>
+        {{selectedItem.customer.data.name}}<br>
 
         Notizen: <br>
-        {{selectedItem.attributes.notes}}
+        {{selectedItem.notes}}
 
 <!--        Lieferantenrechnungen: <br>
         <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
@@ -50,11 +87,15 @@ definePageMeta({
   middleware: "auth"
 })
 
-const {find,create} = useStrapi4()
-const projects = (await find('projects',{populate: "*"})).data
+const supabase = useSupabaseClient()
+
+const projects = (await supabase.from("projects").select()).data
+const customers = (await supabase.from("customers").select()).data
 
 const showCreateProject = ref(false)
-const projectData = ref({})
+const createProjectData = ref({
+  phases: []
+})
 
 let selectedItem = ref({})
 
@@ -63,6 +104,19 @@ const selectItem = (item) => {
   console.log(item)
 }
 
+const createProject = async () => {
+  const {data,error} = await supabase
+      .from("projects")
+      .insert([createProjectData.value])
+      .select()
+
+  if(error) console.log(error)
+
+  showCreateProject.value = false
+  createProjectData.value = {phases: []}
+
+}
+
 </script>
 
 <style scoped>