From 3a55c80ae2110aa31051c8c7ba73c03b02bc1e78 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Fri, 8 Nov 2024 17:45:14 +0100
Subject: [PATCH] Tidying in Plants

---
 components/Tiptap.vue          |   2 +-
 pages/plants/[mode]/[[id]].vue | 187 ++++++++++++++++++---------------
 pages/plants/index.vue         |   3 +-
 3 files changed, 104 insertions(+), 88 deletions(-)

diff --git a/components/Tiptap.vue b/components/Tiptap.vue
index e9aee22..0adeb65 100644
--- a/components/Tiptap.vue
+++ b/components/Tiptap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-3 mt-3 editor">
+  <div class="p-3 editor">
     <div v-if="editor">
       <InputGroup class="mb-3">
         <UButton
diff --git a/pages/plants/[mode]/[[id]].vue b/pages/plants/[mode]/[[id]].vue
index 8fc40e3..96a2d97 100644
--- a/pages/plants/[mode]/[[id]].vue
+++ b/pages/plants/[mode]/[[id]].vue
@@ -9,66 +9,74 @@ definePageMeta({
 })
 
 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 )
 
-const editor = useEditor({
-  content: "<p>Hier kann deine Projektdokumentation stehen</p>",
-  extensions: [TiptapStarterKit],
-});
 
-let currentItem = ref(null)
 
 //Working
 const mode = ref(route.params.mode || "show")
-const itemInfo = ref({})
+const itemInfo = ref({
+  description: {
+    html: ""
+  }
+})
 
 const tabItems = [
   {
     label: "Informationen"
-  },{
-    label: "Logbuch"
   },{
     label: "Projekte"
   },{
     label: "Aufgaben"
   },{
     label: "Dokumente"
-  },{
-    label: "Dokumentation"
   }
 ]
 
 //Functions
-const setupPage = () => {
-  if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = dataStore.getPlantById(Number(useRoute().params.id))
+const setupPage = async () => {
+  if(mode.value === "show"){
+    itemInfo.value = (await supabase.from("plants").select("*, customer(*)").eq("id",useRoute().params.id).single()).data
+  } else if(mode.value === "edit") {
+    itemInfo.value = (await supabase.from("plants").select().eq("id",useRoute().params.id).single()).data
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem.value
-
   if(mode.value === "create") {
     let query = route.query
     if(query.customer) itemInfo.value.customer = Number(query.customer)
   }
 }
 
-const cancelEditorCreate = () => {
-  if(currentItem.value) {
-    router.push(`/plants/show/${currentItem.value.id}`)
-  } else {
-    router.push(`/plants`)
-  }
-
+const contentChanged = (content) => {
+  itemInfo.value.description.html = content.html
+  itemInfo.value.description.text = content.text
+  itemInfo.value.description.json = content.json
 }
 
 setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Objekt erstellen' : 'Objekt bearbeiten')">
+  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Objekt erstellen' : 'Objekt bearbeiten')">
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/plants`)"
+      >
+        Objekte
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          :class="['text-xl','font-medium']"
+      >{{itemInfo ? `Objekt: ${itemInfo.name}` : (mode === 'create' ? 'Objekt erstellen' : 'Objekt bearbeiten')}}</h1>
+    </template>
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -83,7 +91,7 @@ setupPage()
         Erstellen
       </UButton>
       <UButton
-          @click="cancelEditorCreate"
+          @click="router.push(itemInfo.id ? `/plants/show/${itemInfo.value.id}` : `/plants/`)"
           color="red"
           class="ml-2"
           v-if="mode === 'edit' || mode === 'create'"
@@ -92,93 +100,92 @@ setupPage()
       </UButton>
       <UButton
           v-if="mode === 'show'"
-          @click="router.push(`/plants/edit/${currentItem.id}`)"
+          @click="router.push(`/plants/edit/${itemInfo.id}`)"
       >
         Bearbeiten
       </UButton>
     </template>
   </UDashboardNavbar>
-
   <UTabs
       :items="tabItems"
       v-if="mode === 'show'"
       class="p-5"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div v-if="item.label === 'Informationen'">
+      <div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
+        <UCard class="w-1/2 mr-5">
           <div class="text-wrap">
-            <p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
+            <table>
+              <tr>
+                <td>Kunde:</td>
+                <td><nuxt-link v-if="itemInfo.customer" :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer.name}}</nuxt-link></td>
+              </tr>
+            </table>
           </div>
-
-        </div>
-        <div v-else-if="item.label === 'Logbuch'">
+          <div v-if="itemInfo.description.html">
+            <p>Notizen:</p>
+            <span v-html="itemInfo.description.html"></span>
+          </div>
+        </UCard>
+        <UCard class="w-1/2">
           <HistoryDisplay
               type="plant"
-              v-if="currentItem"
-              :element-id="currentItem.id"
+              v-if="itemInfo"
+              :element-id="itemInfo.id"
+              render-headline
           />
-        </div>
-        <div v-else-if="item.label === 'Projekte'">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/projects/create?plant=${currentItem.id}`)"
-            >
-              + Projekt
-            </UButton>
-          </Toolbar>
-
-          <UTable
-              :rows="dataStore.getProjectsByPlantId(currentItem.id)"
-              :columns="[{key: 'name', label: 'Name'}]"
-              @select="(row) => router.push(`/projects/show/${row.id}`)"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
+        </UCard>
+      </div>
+      <div v-else-if="item.label === 'Projekte'">
+        <Toolbar>
+          <UButton
+              @click="router.push(`/projects/create?plant=${itemInfo.id}`)"
           >
+            + Projekt
+          </UButton>
+        </Toolbar>
 
-          </UTable>
+        <UTable
+            :rows="dataStore.getProjectsByPlantId(itemInfo.id)"
+            :columns="[{key: 'name', label: 'Name'}]"
+            @select="(row) => router.push(`/projects/show/${row.id}`)"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
+        >
 
-        </div>
-        <div v-else-if="item.label === 'Aufgaben'">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/tasks/create?plant=${currentItem.id}`)"
-            >
-              + Aufgabe
-            </UButton>
-          </Toolbar>
-          <UTable
-              :rows="dataStore.getTasksByPlantId(currentItem.id)"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
-              :columns="[{key: 'name', label: 'Name'},{key: 'categore', label: 'Kategorie'}]"
-              @select="(row) => router.push(`/tasks/show/${row.id}`)"
+        </UTable>
+
+      </div>
+      <div v-else-if="item.label === 'Aufgaben'">
+        <Toolbar>
+          <UButton
+              @click="router.push(`/tasks/create?plant=${itemInfo.id}`)"
           >
+            + Aufgabe
+          </UButton>
+        </Toolbar>
+        <UTable
+            :rows="dataStore.getTasksByPlantId(itemInfo.id)"
+            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
+            :columns="[{key: 'name', label: 'Name'},{key: 'categore', label: 'Kategorie'}]"
+            @select="(row) => router.push(`/tasks/show/${row.id}`)"
+        >
 
-          </UTable>
-        </div>
-        <div v-else-if="item.label === 'Dokumente'" class="space-y-3">
-          <Toolbar>
-            <DocumentUpload
-                type="plant"
-                :element-id="currentItem.id"
-            />
-          </Toolbar>
+        </UTable>
+      </div>
+      <div v-else-if="item.label === 'Dokumente'" class="space-y-3">
+        <Toolbar>
+          <DocumentUpload
+              type="plant"
+              :element-id="itemInfo.id"
+          />
+        </Toolbar>
 
-          <DocumentList :documents="dataStore.getDocumentsByPlantId(currentItem.id)"/>
-
-        </div>
-        <div v-if="item.label === 'Dokumentation'">
-
-          <Editor/>
-
-        </div>
-      </UCard>
+        <DocumentList :documents="dataStore.getDocumentsByPlantId(itemInfo.id)"/>
 
+      </div>
     </template>
   </UTabs>
 
-  <div v-if="currentItem && mode == 'show'">
-
-  </div>
 
   <UForm
       v-else-if="mode === 'edit' || mode === 'create'"
@@ -208,6 +215,16 @@ setupPage()
         </template>
       </USelectMenu>
     </UFormGroup>
+    <UFormGroup
+      label="Notizen:"
+    >
+      <Tiptap
+          v-if="itemInfo.description"
+          @updateContent="contentChanged"
+          :preloadedContent="itemInfo.description.html"
+      />
+    </UFormGroup>
+
   </UForm>
 </template>
 
diff --git a/pages/plants/index.vue b/pages/plants/index.vue
index aaeba02..f7e47ad 100644
--- a/pages/plants/index.vue
+++ b/pages/plants/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <UDashboardNavbar title="Objekte" >
+  <UDashboardNavbar title="Objekte" :badge="filteredRows.length" >
     <template #right>
       <UInput
           id="searchinput"
@@ -105,7 +105,6 @@ const selectedItem = ref(0)
 
 const setupPage = async () => {
   items.value = await useSupabaseSelect("plants","*, customer(id,name)")
-  console.log(items.value)
 }
 
 setupPage()