From 818bfd5b1cea9af8df2a86079a75134767d1fa2b Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Wed, 20 Nov 2024 21:10:20 +0100
Subject: [PATCH] Some Changes

---
 pages/projects/[mode]/[[id]].vue | 663 ++++++++++++++++---------------
 1 file changed, 338 insertions(+), 325 deletions(-)

diff --git a/pages/projects/[mode]/[[id]].vue b/pages/projects/[mode]/[[id]].vue
index 380fe19..e1adc54 100644
--- a/pages/projects/[mode]/[[id]].vue
+++ b/pages/projects/[mode]/[[id]].vue
@@ -159,9 +159,12 @@ const createProject = async () => {
 }
 
 const changeActivePhase = async (key) => {
-  console.log(key)
   let item = await useSupabaseSelectSingle("projects",itemInfo.value.id,'*')
 
+  console.log(key)
+
+  let phaseLabel = ""
+
   item.phases = item.phases.map(p => {
     if(p.active) p.active = false
 
@@ -169,15 +172,23 @@ const changeActivePhase = async (key) => {
       p.active = true
       p.activated_at = dayjs().format()
       p.activated_by = dataStore.activeProfile.id
+      phaseLabel = p.label
     }
 
-
     return p
   })
 
   console.log(item.phases)
 
-  await dataStore.updateItem("projects", item)
+  await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
+  const {error} = await supabase.from("historyitems").insert({
+    createdBy: dataStore.activeProfile.id,
+    tenant: dataStore.currentTenant,
+    text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
+    project: item.id
+  })
+  console.log(error)
+
   setupPage()
 }
 
@@ -260,153 +271,153 @@ const renderedPhases = computed(() => {
       </UButton>
     </template>
   </UDashboardNavbar>
-  <UTabs
-      :items="tabItems"
-      v-if="itemInfo.id && mode == 'show'"
-      class="p-5"
-      v-model="openTab"
-  >
-    <template #item="{ item }">
-      <div v-if="item.key === 'information'" class="flex flex-row">
-        <div class="w-1/2 mr-3">
-          <UCard class="mt-5">
-            <div class="text-wrap">
-              <p>Kunde: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer.name}}</nuxt-link></p>
-              <p>Objekt: <nuxt-link v-if="itemInfo.plant" :to="`/plants/show/${itemInfo.plant.id}`">{{itemInfo.plant ? itemInfo.plant.name : ""}}</nuxt-link><span v-else>-</span></p>
-              <p class="">Notizen: {{itemInfo.notes}}</p>
-            </div>
-          </UCard>
-          <UCard class="mt-3">
-            <h1 class="font-bold text-lg mb-3">Beteiligte Benutzer:</h1>
-            <UAlert
-                v-for="projectUser in itemInfo.users"
-                :avatar="{ alt: dataStore.getProfileById(projectUser).fullName }"
-                :title="dataStore.getProfileById(projectUser).fullName"
-                class="mb-3"
+  <UDashboardPanelContent>
+    <UTabs
+        :items="tabItems"
+        v-if="itemInfo.id && mode == 'show'"
+        v-model="openTab"
+    >
+      <template #item="{ item }">
+        <div v-if="item.key === 'information'" class="flex flex-row">
+          <div class="w-1/2 mr-3">
+            <UCard class="mt-5">
+              <div class="text-wrap">
+                <p>Kunde: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer.name}}</nuxt-link></p>
+                <p>Objekt: <nuxt-link v-if="itemInfo.plant" :to="`/plants/show/${itemInfo.plant.id}`">{{itemInfo.plant ? itemInfo.plant.name : ""}}</nuxt-link><span v-else>-</span></p>
+                <p class="">Notizen: {{itemInfo.notes}}</p>
+              </div>
+            </UCard>
+            <UCard class="mt-3">
+              <h1 class="font-bold text-lg mb-3">Beteiligte Benutzer:</h1>
+              <UAlert
+                  v-for="projectUser in itemInfo.users"
+                  :avatar="{ alt: dataStore.getProfileById(projectUser).fullName }"
+                  :title="dataStore.getProfileById(projectUser).fullName"
+                  class="mb-3"
+
+              />
+            </UCard>
+          </div>
+          <div class="w-1/2">
+            <UCard class="mt-5">
+              <HistoryDisplay
+                  type="project"
+                  v-if="itemInfo"
+                  :element-id="itemInfo.id"
+                  render-headline
+              />
+            </UCard>
+          </div>
+
+
 
-            />
-          </UCard>
         </div>
-        <div class="w-1/2">
+        <div v-if="item.key === 'phases'" class="space-y-3">
           <UCard class="mt-5">
-            <HistoryDisplay
-                type="project"
-                v-if="itemInfo"
-                :element-id="itemInfo.id"
-                render-headline
-            />
-          </UCard>
-        </div>
+            <UAccordion
+                :items="renderedPhases"
+            >
+              <template #default="{item,index,open}">
+                <UButton
+                    variant="ghost"
+                    :color="item.active ? 'primary' : 'white'"
+                    class="mb-1"
+                    :disabled="true"
+                >
+                  <template #leading>
+                    <div class="w-6 h-6  flex items-center justify-center -my-1">
+                      <UIcon :name="item.icon" class="w-4 h-4 " />
+                    </div>
+                  </template>
 
+                  <span class="truncate"> {{item.label}}</span>
 
+                  <template #trailing>
+                    <UIcon
+                        name="i-heroicons-chevron-right-20-solid"
+                        class="w-5 h-5 ms-auto transform transition-transform duration-200"
+                        :class="[open && 'rotate-90']"
+                    />
+                  </template>
 
-      </div>
-      <div v-if="item.key === 'phases'" class="space-y-3">
-        <UCard class="mt-5">
-          <UAccordion
-              :items="renderedPhases"
-          >
-            <template #default="{item,index,open}">
-              <UButton
-                  variant="ghost"
-                  :color="item.active ? 'primary' : 'white'"
-                  class="mb-1"
-                  :disabled="true"
-              >
-                <template #leading>
-                  <div class="w-6 h-6  flex items-center justify-center -my-1">
-                    <UIcon :name="item.icon" class="w-4 h-4 " />
+                </UButton>
+              </template>
+              <template #item="{item, index}">
+                <UCard class="mx-5">
+                  <template #header>
+                    <span class="text-black">{{item.label}}</span>
+                  </template>
+                  <InputGroup>
+                    <UButton
+                        v-if="!item.activated_at && index !== 0 "
+                        @click="changeActivePhase(item.key)"
+                    >
+                      Phase aktivieren
+                    </UButton>
+                    <UButton
+                        v-if="item.active"
+                        v-for="button in item.quickactions"
+                        @click="router.push(`${button.link}&customer=${itemInfo.customer.id}&project=${itemInfo.id}`)"
+                    >
+                      {{button.label}}
+                    </UButton>
+                  </InputGroup>
+
+                  <div>
+                    <p v-if="item.activated_at" class="text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
+                    <p v-if="item.activated_by" class="text-black">Aktiviert durch: {{dataStore.getProfileById(item.activated_by).fullName}}</p>
+                    <p v-if="item.description" class="text-black">Beschreibung: {{item.description}}</p>
                   </div>
-                </template>
+                </UCard>
 
-                <span class="truncate"> {{item.label}}</span>
-
-                <template #trailing>
-                  <UIcon
-                      name="i-heroicons-chevron-right-20-solid"
-                      class="w-5 h-5 ms-auto transform transition-transform duration-200"
-                      :class="[open && 'rotate-90']"
-                  />
-                </template>
 
+              </template>
+            </UAccordion>
+          </UCard>
+        </div>
+        <div v-if="item.key === 'tasks'" class="space-y-3">
+          <UCard class="mt-5">
+            <Toolbar>
+              <UButton
+                  @click="router.push(`/tasks/create?project=${itemInfo.id}`)"
+              >
+                + Aufgabe
               </UButton>
-            </template>
-            <template #item="{item, index}">
-              <UCard class="mx-5">
-                <template #header>
-                  <span class="text-black">{{item.label}}</span>
-                </template>
-                <InputGroup>
-                  <UButton
-                      v-if="!item.activated_at && index !== 0 "
-                      @click="changeActivePhase(item.key)"
-                  >
-                    Phase aktivieren
-                  </UButton>
-                  <UButton
-                      v-if="item.active"
-                    v-for="button in item.quickactions"
-                    @click="router.push(`${button.link}&customer=${itemInfo.customer.id}&project=${itemInfo.id}`)"
-                  >
-                    {{button.label}}
-                  </UButton>
-                </InputGroup>
+            </Toolbar>
 
-                <div>
-                  <p v-if="item.activated_at" class="text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
-                  <p v-if="item.activated_by" class="text-black">Aktiviert durch: {{dataStore.getProfileById(item.activated_by).fullName}}</p>
-                  <p v-if="item.description" class="text-black">Beschreibung: {{item.description}}</p>
-                </div>
-              </UCard>
+            <UTable
+                :rows="dataStore.getTasksByProjectId(itemInfo.id)"
+                :columns="[{key: 'name',label: 'Name'},{key: 'categorie',label: 'Kategorie'},{key: 'user',label: 'Benutzer'}]"
+                @select="(row) => router.push(`/tasks/show/${row.id}`)"
+                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
 
-
-            </template>
-          </UAccordion>
-        </UCard>
-      </div>
-      <div v-if="item.key === 'tasks'" class="space-y-3">
-        <UCard class="mt-5">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/tasks/create?project=${itemInfo.id}`)"
             >
-              + Aufgabe
-            </UButton>
-          </Toolbar>
-
-          <UTable
-              :rows="dataStore.getTasksByProjectId(itemInfo.id)"
-              :columns="[{key: 'name',label: 'Name'},{key: 'categorie',label: 'Kategorie'},{key: 'user',label: 'Benutzer'}]"
-              @select="(row) => router.push(`/tasks/show/${row.id}`)"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
-
-          >
-            <template #user-data="{row}">
-              {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
-            </template>
-          </UTable>
-        </UCard>
+              <template #user-data="{row}">
+                {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
+              </template>
+            </UTable>
+          </UCard>
 
 
 
-      </div>
-      <div v-else-if="item.key === 'documents'" class="space-y-3">
-        <UCard class="mt-5">
-          <Toolbar>
-            <DocumentUpload
-                type="project"
-                :element-id="itemInfo.id"
-            />
-            <UButton
-                @click="router.push(`/createDocument/edit?project=${itemInfo.id}&customer=${itemInfo.customer.id}`)"
-            >
-              + Dokument
-            </UButton>
-          </Toolbar>
+        </div>
+        <div v-else-if="item.key === 'documents'" class="space-y-3">
+          <UCard class="mt-5">
+            <Toolbar>
+              <DocumentUpload
+                  type="project"
+                  :element-id="itemInfo.id"
+              />
+              <UButton
+                  @click="router.push(`/createDocument/edit?project=${itemInfo.id}&customer=${itemInfo.customer.id}`)"
+              >
+                + Dokument
+              </UButton>
+            </Toolbar>
 
-          <UTable
-              :rows="dataStore.getCreatedDocumentsByProject(itemInfo.id)"
-              :columns="[
+            <UTable
+                :rows="dataStore.getCreatedDocumentsByProject(itemInfo.id)"
+                :columns="[
                 {
                   label: 'Typ',
                   key: 'type'
@@ -422,219 +433,221 @@ const renderedPhases = computed(() => {
                 }
 
             ]"
-              @select="(row) => row.state === 'Entwurf' ? router.push(`/createDocument/edit/${row.id}`) : router.push(`/createDocument/show/${row.id}`)"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen erstellten Dokumente' }"
+                @select="(row) => row.state === 'Entwurf' ? router.push(`/createDocument/edit/${row.id}`) : router.push(`/createDocument/show/${row.id}`)"
+                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen erstellten Dokumente' }"
 
-          >
-            <template #type-data="{row}">
-              <span v-if="row.type === 'invoices'">Rechnung</span>
-              <span v-if="row.type === 'quotes'">Angebot</span>
-              <span v-if="row.type === 'deliveryNotes'">Lieferschein</span>
-            </template>
-            <template #createdBy-data="{row}">
-              {{dataStore.getProfileById(row.createdBy).fullName}}
-            </template>
-          </UTable>
-
-          <DocumentList :documents="dataStore.getDocumentsByProjectId(itemInfo.id)"/>
-        </UCard>
-
-
-
-
-      </div>
-      <div v-else-if="item.key === 'timetracking'" class="space-y-3">
-        <UCard class="mt-5">
-          Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
-          <UTable
-              :rows="dataStore.getTimesByProjectId(itemInfo.id)"
-              :columns="timeTableRows"
-              :empty-state="{ icon: 'i-heroicons-clock', label: 'Noch keine Zeiten in diesem Projekt' }"
-          >
-            <template #user-data="{row}">
-              {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
-            </template>
-            <template #duration-data="{row}">
-              {{(row.start && row.end) ? `${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h` : ""}}
-            </template>
-            <template #start-data="{row}">
-              {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
-            </template>
-            <template #end-data="{row}">
-              {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
-            </template>
-
-          </UTable>
-        </UCard>
-
-
-      </div>
-      <div v-else-if="item.key === 'events'" class="space-y-3">
-        <UCard class="mt-5">
-          <Toolbar>
-            <UButton
-                @click="router.push(`/events/edit`)"
             >
-              + Termin
-            </UButton>
-          </Toolbar>
-          <UTable
-              :rows="dataStore.getEventsByProjectId(itemInfo.id)"
-              @select="(i) => router.push(`/events/show/${i.id}`)"
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Termine anzuzeigen' }"
-              :columns="[{key:'title',label:'Titel'},{key:'start',label:'Start'},{key:'end',label:'Ende'},{key:'type',label:'Typ'},{key:'resources',label:'Resourcen'}]"
-          >
-            <template #start-data="{row}">
-              {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
-            </template>
-            <template #end-data="{row}">
-              {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
-            </template>
-            <template #resources-data="{row}">
-              {{row.resources.map(i => i.title).join(", ")}}
-            </template>
-          </UTable>
-        </UCard>
-      </div>
-      <div v-else-if="item.key === 'material'" class="space-y-3">
+              <template #type-data="{row}">
+                <span v-if="row.type === 'invoices'">Rechnung</span>
+                <span v-if="row.type === 'quotes'">Angebot</span>
+                <span v-if="row.type === 'deliveryNotes'">Lieferschein</span>
+              </template>
+              <template #createdBy-data="{row}">
+                {{dataStore.getProfileById(row.createdBy).fullName}}
+              </template>
+            </UTable>
 
-      </div>
-
-    </template>
+            <DocumentList :documents="dataStore.getDocumentsByProjectId(itemInfo.id)"/>
+          </UCard>
 
 
-  </UTabs>
 
-  <UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5" >
-    <UFormGroup
-        label="Name:"
-    >
-      <UInput
-          v-model="itemInfo.name"
-      />
-    </UFormGroup>
 
-    <UFormGroup
-        label="Projektnummer:"
-    >
-      <UInput
-          v-model="itemInfo.projectNumber"
-          placeholder="Leer lassen für automatisch generierte Nummer"
-      />
-    </UFormGroup>
+        </div>
+        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
+          <UCard class="mt-5">
+            Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
+            <UTable
+                :rows="dataStore.getTimesByProjectId(itemInfo.id)"
+                :columns="timeTableRows"
+                :empty-state="{ icon: 'i-heroicons-clock', label: 'Noch keine Zeiten in diesem Projekt' }"
+            >
+              <template #user-data="{row}">
+                {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
+              </template>
+              <template #duration-data="{row}">
+                {{(row.start && row.end) ? `${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h` : ""}}
+              </template>
+              <template #start-data="{row}">
+                {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
+              </template>
+              <template #end-data="{row}">
+                {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
+              </template>
 
-    <UFormGroup
-        label="Objekt:"
-    >
-      <USelectMenu
-          v-model="itemInfo.plant"
-          :options="itemInfo.customer ? plants.filter(i => i.customer === itemInfo.customer) : plants"
-          option-attribute="name"
-          value-attribute="id"
-          searchable
-          :search-attributes="['name']"
-          @change="itemInfo.customer = plants.find(i => i.id === itemInfo.plant).customer,
+            </UTable>
+          </UCard>
+
+
+        </div>
+        <div v-else-if="item.key === 'events'" class="space-y-3">
+          <UCard class="mt-5">
+            <Toolbar>
+              <UButton
+                  @click="router.push(`/events/edit`)"
+              >
+                + Termin
+              </UButton>
+            </Toolbar>
+            <UTable
+                :rows="dataStore.getEventsByProjectId(itemInfo.id)"
+                @select="(i) => router.push(`/events/show/${i.id}`)"
+                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Termine anzuzeigen' }"
+                :columns="[{key:'title',label:'Titel'},{key:'start',label:'Start'},{key:'end',label:'Ende'},{key:'type',label:'Typ'},{key:'resources',label:'Resourcen'}]"
+            >
+              <template #start-data="{row}">
+                {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
+              </template>
+              <template #end-data="{row}">
+                {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
+              </template>
+              <template #resources-data="{row}">
+                {{row.resources.map(i => i.title).join(", ")}}
+              </template>
+            </UTable>
+          </UCard>
+        </div>
+        <div v-else-if="item.key === 'material'" class="space-y-3">
+
+        </div>
+
+      </template>
+
+
+    </UTabs>
+
+    <UForm v-else-if="mode === 'edit' || mode === 'create'"  >
+      <UFormGroup
+          label="Name:"
+      >
+        <UInput
+            v-model="itemInfo.name"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Projektnummer:"
+      >
+        <UInput
+            v-model="itemInfo.projectNumber"
+            placeholder="Leer lassen für automatisch generierte Nummer"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Objekt:"
+      >
+        <USelectMenu
+            v-model="itemInfo.plant"
+            :options="itemInfo.customer ? plants.filter(i => i.customer === itemInfo.customer) : plants"
+            option-attribute="name"
+            value-attribute="id"
+            searchable
+            :search-attributes="['name']"
+            @change="itemInfo.customer = plants.find(i => i.id === itemInfo.plant).customer,
                     disableCustomerSelection = true"
+        >
+          <template #label>
+            {{plants.find(i => i.id === itemInfo.plant) ? plants.find(i => i.id === itemInfo.plant).name : "Objekt auswählen"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Vertrag:"
       >
-        <template #label>
-          {{plants.find(i => i.id === itemInfo.plant) ? plants.find(i => i.id === itemInfo.plant).name : "Objekt auswählen"}}
-        </template>
-      </USelectMenu>
-    </UFormGroup>
-    <UFormGroup
-        label="Vertrag:"
-    >
-      <USelectMenu
-          v-model="itemInfo.contract"
-          :options="itemInfo.customer ? contracts.filter(i => i.customer === itemInfo.customer) : contracts"
-          option-attribute="name"
-          value-attribute="id"
-          searchable
-          :search-attributes="['name']"
-          @change="itemInfo.customer = contracts.find(i => i.id === itemInfo.contract).customer,
+        <USelectMenu
+            v-model="itemInfo.contract"
+            :options="itemInfo.customer ? contracts.filter(i => i.customer === itemInfo.customer) : contracts"
+            option-attribute="name"
+            value-attribute="id"
+            searchable
+            :search-attributes="['name']"
+            @change="itemInfo.customer = contracts.find(i => i.id === itemInfo.contract).customer,
                     disableCustomerSelection = true"
+        >
+          <template #label>
+            {{contracts.find(i => i.id === itemInfo.contract) ? contracts.find(i => i.id === itemInfo.contract).name : "Vertrag auswählen"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+
+      <UFormGroup
+          label="Kundennummer:"
       >
-        <template #label>
-          {{contracts.find(i => i.id === itemInfo.contract) ? contracts.find(i => i.id === itemInfo.contract).name : "Vertrag auswählen"}}
-        </template>
-      </USelectMenu>
-    </UFormGroup>
+        <USelectMenu
+            v-model="itemInfo.customer"
+            :options="dataStore.customers"
+            option-attribute="name"
+            value-attribute="id"
+            searchable
+            :search-attributes="['name']"
+            :disabled="disableCustomerSelection"
+        >
+          <template #label>
+            {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kunde auswählen"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
 
-    <UFormGroup
-        label="Kundennummer:"
-    >
-      <USelectMenu
-          v-model="itemInfo.customer"
-          :options="dataStore.customers"
-          option-attribute="name"
-          value-attribute="id"
-          searchable
-          :search-attributes="['name']"
-          :disabled="disableCustomerSelection"
+      <UFormGroup
+          label="Typ:"
       >
-        <template #label>
-          {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kunde auswählen"}}
-        </template>
-      </USelectMenu>
-    </UFormGroup>
+        <USelectMenu
+            v-model="itemInfo.projecttype"
+            :options="projecttypes"
+            option-attribute="name"
+            value-attribute="id"
+            searchable
+            :search-attributes="['label']"
+            :disabled="oldItemInfo.projecttype"
+        >
+        </USelectMenu>
+      </UFormGroup>
 
-    <UFormGroup
-        label="Typ:"
-    >
-      <USelectMenu
-          v-model="itemInfo.projecttype"
-          :options="projecttypes"
-          option-attribute="name"
-          value-attribute="id"
-          searchable
-          :search-attributes="['label']"
-          :disabled="oldItemInfo.projecttype"
+      <UFormGroup
+          label="Gewerk:"
       >
-      </USelectMenu>
-    </UFormGroup>
+        <USelectMenu
+            v-model="itemInfo.measure"
+            :options="dataStore.getMeasures"
+            option-attribute="name"
+            value-attribute="short"
+            searchable
+            :search-attributes="['name']"
+        >
 
-    <UFormGroup
-        label="Gewerk:"
-    >
-      <USelectMenu
-          v-model="itemInfo.measure"
-          :options="dataStore.getMeasures"
-          option-attribute="name"
-          value-attribute="short"
-          searchable
-          :search-attributes="['name']"
+        </USelectMenu>
+      </UFormGroup>
+
+
+      <UFormGroup
+          label="Beteiligte Benutzer:"
       >
+        <USelectMenu
+            v-model="itemInfo.users"
+            :options="dataStore.profiles"
+            option-attribute="fullName"
+            value-attribute="id"
+            searchable
+            multiple
+            :search-attributes="['fullName']"
+        >
+          <template #label>
+            {{itemInfo.users.length > 0 ? itemInfo.users.map(i => dataStore.getProfileById(i).fullName).join(", ") : "Kein Benutzer ausgewählt"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
 
-      </USelectMenu>
-    </UFormGroup>
-
-
-    <UFormGroup
-        label="Beteiligte Benutzer:"
-    >
-      <USelectMenu
-          v-model="itemInfo.users"
-          :options="dataStore.profiles"
-          option-attribute="fullName"
-          value-attribute="id"
-          searchable
-          multiple
-          :search-attributes="['fullName']"
+      <UFormGroup
+          label="Notizen:"
       >
-        <template #label>
-          {{itemInfo.users.length > 0 ? itemInfo.users.map(i => dataStore.getProfileById(i).fullName).join(", ") : "Kein Benutzer ausgewählt"}}
-        </template>
-      </USelectMenu>
-    </UFormGroup>
+        <UTextarea
+            v-model="itemInfo.notes"
+        />
+      </UFormGroup>
+    </UForm>
+  </UDashboardPanelContent>
 
-    <UFormGroup
-        label="Notizen:"
-    >
-      <UTextarea
-          v-model="itemInfo.notes"
-      />
-    </UFormGroup>
-  </UForm>
 
 </template>