Rebuild General Layout to Nuxt UI PRO Dashboard

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

@@ -1,4 +1,6 @@
 <script setup>
+import dayjs from "dayjs";
+
 definePageMeta({
   middleware: "auth"
 })
@@ -75,7 +77,177 @@ setupPage()
 </script>
 
 <template>
-  <h1
+  <UDashboardPage>
+    <UDashboardPanel grow>
+      <UDashboardNavbar :title="currentItem ? currentItem.name : ''">
+        <template #right>
+          <UButton
+              v-if="mode === 'edit'"
+              @click="dataStore.updateItem('tasks',itemInfo)"
+          >
+            Speichern
+          </UButton>
+          <UButton
+              v-else-if="mode === 'create'"
+              @click="dataStore.createNewItem('tasks',itemInfo)"
+          >
+            Erstellen
+          </UButton>
+          <UButton
+              @click="cancelEditorCreate"
+              color="red"
+              class="ml-2"
+              v-if="mode === 'edit' || mode === 'create'"
+          >
+            Abbrechen
+          </UButton>
+          <UButton
+              v-if="mode === 'show' && currentItem.id"
+              @click="editItem"
+          >
+            Bearbeiten
+          </UButton>
+        </template>
+      </UDashboardNavbar>
+
+<!--      <UDashboardToolbar>
+        <template #left>
+          &lt;!&ndash;          <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
+
+                    <UInput
+                        v-model="searchString"
+                        placeholder="Suche..."
+                    />&ndash;&gt;
+
+          <UCheckbox
+              label="Erledigte Anzeigen"
+              v-model="showDone"
+          />
+        </template>
+
+        <template #right>
+          <USelectMenu
+              v-model="selectedColumns"
+              icon="i-heroicons-adjustments-horizontal-solid"
+              :options="templateColumns"
+              multiple
+              class="hidden lg:block"
+          >
+            <template #label>
+              Spalten
+            </template>
+          </USelectMenu>
+        </template>
+      </UDashboardToolbar>-->
+
+
+      <UTabs
+          :items="[{label: 'Informationen'},{label: 'Logbuch'}]"
+          v-if="currentItem && mode === 'show'"
+          class="p-5"
+      >
+        <template #item="{item}">
+          <UCard class="mt-5">
+            <div v-if="item.label === 'Informationen'">
+
+
+              <div class="truncate">
+                <p>Kategorie: {{currentItem.categorie}}</p>
+                <p v-if="currentItem.project">Projekt: <nuxt-link :to="`/projects/show/${currentItem.project}`">{{dataStore.getProjectById(currentItem.project).name}}</nuxt-link></p>
+                <p>Beschreibung: {{currentItem.description}}</p>
+              </div>
+
+            </div>
+            <!-- TODO: Logbuch Tasks -->
+          </UCard>
+        </template>
+      </UTabs>
+
+      <UForm v-else-if="mode === 'edit' || mode === 'create' " class="p-5">
+        <UFormGroup
+            label="Name:"
+        >
+          <UInput
+              v-model="itemInfo.name"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Kategorie:"
+        >
+          <USelectMenu
+              v-model="itemInfo.categorie"
+              :options="categories"
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Benutzer:"
+        >
+          <USelectMenu
+              v-model="itemInfo.user"
+              :options="dataStore.profiles"
+              option-attribute="fullName"
+              value-attribute="id"
+              searchable-placeholder="Suche..."
+              searchable
+              :search-attributes="['fullName']"
+          >
+            <template #label>
+              {{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Kein Benutzer ausgewählt"}}
+            </template>
+          </USelectMenu>
+        </UFormGroup>
+        <UFormGroup
+            label="Projekt:"
+        >
+          <USelectMenu
+              v-model="itemInfo.project"
+              :options="dataStore.projects"
+              option-attribute="name"
+              value-attribute="id"
+              searchable-placeholder="Suche..."
+              searchable
+              :search-attributes="['name']"
+          >
+            <template #label>
+              {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
+            </template>
+          </USelectMenu>
+        </UFormGroup>
+        <UFormGroup
+            label="Objekt:"
+        >
+          <USelectMenu
+              v-model="itemInfo.plant"
+              :options="dataStore.plants"
+              option-attribute="name"
+              value-attribute="id"
+              searchable-placeholder="Suche..."
+              searchable
+              :search-attributes="['name']"
+          >
+            <template #label>
+              {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Kein Objekt ausgewählt"}}
+            </template>
+          </USelectMenu>
+        </UFormGroup>
+
+        <UFormGroup
+            label="Beschreibung:"
+        >
+          <UTextarea
+              v-model="itemInfo.description"
+          />
+        </UFormGroup>
+      </UForm>
+
+
+
+    </UDashboardPanel>
+  </UDashboardPage>
+
+<!--  <h1
       class="mb-3 truncate font-bold text-2xl"
       v-if="currentItem"
   >Aufgabe: {{currentItem.name}}</h1>
@@ -108,7 +280,7 @@ setupPage()
           </div>
 
         </div>
-        <!-- TODO: Logbuch Tasks -->
+        &lt;!&ndash; TODO: Logbuch Tasks &ndash;&gt;
       </UCard>
     </template>
   </UTabs>
@@ -220,7 +392,7 @@ setupPage()
       </UButton>
     </template>
 
-  </UCard>
+  </UCard>-->
 </template>
 
 <style scoped>