From 673bcb279ad052c101da85934d767408ac29fcac Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Wed, 25 Sep 2024 19:29:35 +0200
Subject: [PATCH] Added Scrollcontainer

---
 pages/customers/[mode]/[[id]].vue | 420 +++++++++++++++---------------
 1 file changed, 212 insertions(+), 208 deletions(-)

diff --git a/pages/customers/[mode]/[[id]].vue b/pages/customers/[mode]/[[id]].vue
index c960714..d646946 100644
--- a/pages/customers/[mode]/[[id]].vue
+++ b/pages/customers/[mode]/[[id]].vue
@@ -128,234 +128,238 @@ setupPage()
     </template>
   </UDashboardNavbar>
 
-  <UTabs
-      v-if="itemInfo.id && mode == 'show'"
-      :items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
-      class="p-5"
-      v-model="openTab"
-  >
-    <template #item="{item}">
-      <div v-if="item.label === 'Informationen'" class="flex mt-5">
-        <div class="w-1/2 mr-5">
-          <UCard >
-            <div class="text-wrap">
-              <p>Kundennummer: {{itemInfo.customerNumber}}</p>
-              <p>Typ: {{itemInfo.isCompany ? 'Firma' : 'Privatperson'}}</p>
-              <p v-if="itemInfo.infoData.street">Straße + Hausnummer: {{itemInfo.infoData.street}}</p>
-              <p v-if="itemInfo.infoData.zip && itemInfo.infoData.city">PLZ + Ort: {{itemInfo.infoData.zip}} {{itemInfo.infoData.city}}</p>
-              <p v-if="itemInfo.infoData.tel">Telefon: {{itemInfo.infoData.tel}}</p>
-              <p v-if="itemInfo.infoData.email">E-Mail: {{itemInfo.infoData.email}}</p>
-              <p v-if="itemInfo.infoData.web">Web: {{itemInfo.infoData.web}}</p>
-              <p v-if="itemInfo.infoData.ustid">USt-Id: {{itemInfo.infoData.ustid}}</p>
-              <p>Notizen:<br> {{itemInfo.notes}}</p>
-            </div>
+  <UDashboardPanelContent>
+    <UTabs
+        v-if="itemInfo.id && mode == 'show'"
+        :items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
+        class="p-5"
+        v-model="openTab"
+    >
+      <template #item="{item}">
+        <div v-if="item.label === 'Informationen'" class="flex mt-5">
+          <div class="w-1/2 mr-5">
+            <UCard >
+              <div class="text-wrap">
+                <p>Kundennummer: {{itemInfo.customerNumber}}</p>
+                <p>Typ: {{itemInfo.isCompany ? 'Firma' : 'Privatperson'}}</p>
+                <p v-if="itemInfo.infoData.street">Straße + Hausnummer: {{itemInfo.infoData.street}}</p>
+                <p v-if="itemInfo.infoData.zip && itemInfo.infoData.city">PLZ + Ort: {{itemInfo.infoData.zip}} {{itemInfo.infoData.city}}</p>
+                <p v-if="itemInfo.infoData.tel">Telefon: {{itemInfo.infoData.tel}}</p>
+                <p v-if="itemInfo.infoData.email">E-Mail: {{itemInfo.infoData.email}}</p>
+                <p v-if="itemInfo.infoData.web">Web: {{itemInfo.infoData.web}}</p>
+                <p v-if="itemInfo.infoData.ustid">USt-Id: {{itemInfo.infoData.ustid}}</p>
+                <p>Notizen:<br> {{itemInfo.notes}}</p>
+              </div>
 
-          </UCard>
-          <UCard class="mt-5">
+            </UCard>
+            <UCard class="mt-5">
+              <Toolbar>
+                <UButton
+                    @click="router.push(`/contacts/create?customer=${itemInfo.id}`)"
+                >
+                  + Ansprechpartner
+                </UButton>
+              </Toolbar>
+              <UTable
+                  :rows="dataStore.getContactsByCustomerId(itemInfo.id)"
+                  @select="(row) => router.push(`/contacts/show/${row.id}`)"
+                  :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
+                  :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
+
+              >
+
+              </UTable>
+            </UCard>
+          </div>
+          <div class="w-1/2">
+            <UCard class="h-full">
+              <HistoryDisplay
+                  type="customer"
+                  v-if="itemInfo"
+                  :element-id="itemInfo.id"
+                  :render-headline="true"
+              />
+            </UCard>
+          </div>
+
+        </div>
+
+
+
+        <UCard class="mt-5" v-else>
+
+          <div v-if="item.label === 'Projekte'">
             <Toolbar>
               <UButton
-                  @click="router.push(`/contacts/create?customer=${itemInfo.id}`)"
+                  @click="router.push(`/projects/create?customer=${itemInfo.id}`)"
               >
-                + Ansprechpartner
+                + Projekt
               </UButton>
             </Toolbar>
             <UTable
-                :rows="dataStore.getContactsByCustomerId(itemInfo.id)"
-                @select="(row) => router.push(`/contacts/show/${row.id}`)"
-                :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
-                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
+                :rows="dataStore.getProjectsByCustomerId(itemInfo.id)"
+                @select="(row) => router.push(`/projects/show/${row.id}`)"
+                :columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
+                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
+
+            >
+              <template #phase-data="{row}">
+                {{row.phases ? row.phases.find(i => i.active).label : ""}}
+              </template>
+            </UTable>
+          </div>
+          <div v-else-if="item.label === 'Objekte'">
+            <Toolbar>
+              <UButton
+                  @click="router.push(`/plants/create?customer=${itemInfo.id}`)"
+              >
+                + Objekt
+              </UButton>
+            </Toolbar>
+            <UTable
+                :rows="dataStore.getPlantsByCustomerId(itemInfo.id)"
+                @select="(row) => router.push(`/plants/show/${row.id}`)"
+                :columns="[{label: 'Name', key: 'name'}]"
+                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
 
             >
 
             </UTable>
-          </UCard>
-        </div>
-        <div class="w-1/2">
-          <UCard class="h-full">
-            <HistoryDisplay
-                type="customer"
-                v-if="itemInfo"
-                :element-id="itemInfo.id"
-                :render-headline="true"
-            />
-          </UCard>
-        </div>
+          </div>
+          <div v-else-if="item.label === 'Verträge'">
+            <Toolbar>
+              <UButton
+                  @click="router.push(`/contracts/create?customer=${itemInfo.id}`)"
+              >
+                + Vertrag
+              </UButton>
+            </Toolbar>
+            <UTable
+                :rows="dataStore.getContractsByCustomerId(itemInfo.id)"
+                @select="(row) => router.push(`/contracts/show/${row.id}`)"
+                :columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
+                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
 
-      </div>
+            >
 
+            </UTable>
+          </div>
+        </UCard>
 
-
-      <UCard class="mt-5" v-else>
-
-      <div v-if="item.label === 'Projekte'">
-        <Toolbar>
-          <UButton
-              @click="router.push(`/projects/create?customer=${itemInfo.id}`)"
-          >
-            + Projekt
-          </UButton>
-        </Toolbar>
-        <UTable
-            :rows="dataStore.getProjectsByCustomerId(itemInfo.id)"
-            @select="(row) => router.push(`/projects/show/${row.id}`)"
-            :columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
-
-        >
-          <template #phase-data="{row}">
-            {{row.phases ? row.phases.find(i => i.active).label : ""}}
-          </template>
-        </UTable>
-      </div>
-      <div v-else-if="item.label === 'Objekte'">
-        <Toolbar>
-          <UButton
-              @click="router.push(`/plants/create?customer=${itemInfo.id}`)"
-          >
-            + Objekt
-          </UButton>
-        </Toolbar>
-        <UTable
-            :rows="dataStore.getPlantsByCustomerId(itemInfo.id)"
-            @select="(row) => router.push(`/plants/show/${row.id}`)"
-            :columns="[{label: 'Name', key: 'name'}]"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
-
-        >
-
-        </UTable>
-      </div>
-      <div v-else-if="item.label === 'Verträge'">
-        <Toolbar>
-          <UButton
-              @click="router.push(`/contracts/create?customer=${itemInfo.id}`)"
-          >
-            + Vertrag
-          </UButton>
-        </Toolbar>
-        <UTable
-            :rows="dataStore.getContractsByCustomerId(itemInfo.id)"
-            @select="(row) => router.push(`/contracts/show/${row.id}`)"
-            :columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
-            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
-
-        >
-
-        </UTable>
-      </div>
-    </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="Kundennummer:"
-    >
-      <UInput
-          v-model="itemInfo.customerNumber"
-          placeholder="Leer lassen für automatisch generierte Nummer"
-      />
-    </UFormGroup>
-
-    <UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
+      </template>
+    </UTabs>
+    <UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5">
       <UFormGroup
-          label="Kunde aktiv:"
+          label="Name:"
       >
-        <UCheckbox
-            v-model="itemInfo.active"
+        <UInput
+            v-model="itemInfo.name"
         />
       </UFormGroup>
-    </UTooltip>
-    <UFormGroup
-        label="Firmenkunde:"
-    >
-      <UCheckbox
-          v-model="itemInfo.isCompany"
-      />
-    </UFormGroup>
-    <UFormGroup
-        label="Notizen:"
-    >
-      <UTextarea
-          v-model="itemInfo.notes"
-      />
-    </UFormGroup>
 
-    <UFormGroup
-        label="Straße + Hausnummer"
-    >
-      <UInput
-          v-model="itemInfo.infoData.street"
-      />
-    </UFormGroup>
-    <UFormGroup
-        label="Adresszusatz"
-    >
-      <UInput
-          v-model="itemInfo.infoData.special"
-      />
-    </UFormGroup>
-    <UFormGroup
-        label="Postleitzahl"
-    >
-      <UInput
-          v-model="itemInfo.infoData.zip"
-          @focusout="setCityByZip"
-      />
-    </UFormGroup>
-    <UFormGroup
-        label="Ort"
-    >
-      <UInput
-          v-model="itemInfo.infoData.city"
-      />
-    </UFormGroup>
-    <UFormGroup
-        label="Land"
-    >
-      <USelectMenu
-          :options="['Deutschland','Niederlande','Belgien','Italien', 'Frankreich','Irland','USA','Spanien', 'Schweden']"
-          v-model="itemInfo.infoData.country"
-      />
-    </UFormGroup>
+      <UFormGroup
+          label="Kundennummer:"
+      >
+        <UInput
+            v-model="itemInfo.customerNumber"
+            placeholder="Leer lassen für automatisch generierte Nummer"
+        />
+      </UFormGroup>
+
+      <UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
+        <UFormGroup
+            label="Kunde aktiv:"
+        >
+          <UCheckbox
+              v-model="itemInfo.active"
+          />
+        </UFormGroup>
+      </UTooltip>
+      <UFormGroup
+          label="Firmenkunde:"
+      >
+        <UCheckbox
+            v-model="itemInfo.isCompany"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Notizen:"
+      >
+        <UTextarea
+            v-model="itemInfo.notes"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Straße + Hausnummer"
+      >
+        <UInput
+            v-model="itemInfo.infoData.street"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Adresszusatz"
+      >
+        <UInput
+            v-model="itemInfo.infoData.special"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Postleitzahl"
+      >
+        <UInput
+            v-model="itemInfo.infoData.zip"
+            @focusout="setCityByZip"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Ort"
+      >
+        <UInput
+            v-model="itemInfo.infoData.city"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Land"
+      >
+        <USelectMenu
+            :options="['Deutschland','Niederlande','Belgien','Italien', 'Frankreich','Irland','USA','Spanien', 'Schweden']"
+            v-model="itemInfo.infoData.country"
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Telefon:"
+      >
+        <UInput
+            v-model="itemInfo.infoData.tel"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="E-Mail:"
+      >
+        <UInput
+            v-model="itemInfo.infoData.email"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="Webseite:"
+      >
+        <UInput
+            v-model="itemInfo.infoData.web"
+        />
+      </UFormGroup>
+      <UFormGroup
+          label="USt-Id:"
+      >
+        <UInput
+            v-model="itemInfo.infoData.ustid"
+        />
+      </UFormGroup>
+    </UForm>
+  </UDashboardPanelContent>
+
 
-    <UFormGroup
-        label="Telefon:"
-    >
-      <UInput
-          v-model="itemInfo.infoData.tel"
-      />
-    </UFormGroup>
-    <UFormGroup
-        label="E-Mail:"
-    >
-      <UInput
-          v-model="itemInfo.infoData.email"
-      />
-    </UFormGroup>
-    <UFormGroup
-        label="Webseite:"
-    >
-      <UInput
-          v-model="itemInfo.infoData.web"
-      />
-    </UFormGroup>
-    <UFormGroup
-        label="USt-Id:"
-    >
-      <UInput
-          v-model="itemInfo.infoData.ustid"
-      />
-    </UFormGroup>
-  </UForm>
 
 
 </template>