Introduced EntityEdit.vue

Introduced EntityShow.vue

Deprecated following as non standardEntity contracts, customers, vendors, projects, plants, vehicles

components/EntityEdit.vue

@@ -0,0 +1,280 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  },
+  item: {
+    required: true,
+    type: Object
+  }
+})
+
+const {type} = props
+
+defineShortcuts({
+  'backspace': () => {
+    router.push(`/${type}`)
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+
+const router = useRouter()
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+const supabase = useSupabaseClient()
+
+const dataType = dataStore.dataTypes[type]
+const openTab = ref(0)
+
+const oldItem = ref(null)
+const generateOldItemData = () => {
+  oldItem.value = JSON.parse(JSON.stringify(props.item))
+}
+generateOldItemData()
+
+
+const setupCreate = () => {
+  dataType.templateColumns.forEach(datapoint => {
+    if(datapoint.key.includes(".")){
+      props.item[datapoint.key.split(".")[0]] = {}
+    }
+
+    if(datapoint.inputType === "editor") {
+      if(datapoint.key.includes(".")){
+        props.item[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
+      } else {
+        props.item[datapoint.key] = {}
+      }
+
+
+    }
+
+  })
+}
+
+setupCreate()
+
+const loadedOptions = ref({})
+const loadOptions = async () => {
+  let optionsToLoad = dataType.templateColumns.filter(i => i.selectDataType).map(i => {
+    return {
+      option: i.selectDataType,
+      key: i.key
+    }
+  })
+
+  for await(const option of optionsToLoad) {
+    if(option.option === "countrys") {
+      loadedOptions.value[option.option] = (await supabase.from("countrys").select()).data
+    } else {
+      loadedOptions.value[option.option] = (await useSupabaseSelect(option.option))
+
+      if(dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter){
+        loadedOptions.value[option.option] = loadedOptions.value[option.option].filter(i => dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter(i, props.item))
+      }
+    }
+  }
+}
+
+loadOptions()
+
+const contentChanged = (content, datapoint) => {
+  if(datapoint.key.includes(".")){
+    props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
+    props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
+    props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
+  } else {
+    props.item[datapoint.key].html = content.html
+    props.item[datapoint.key].text = content.text
+    props.item[datapoint.key].json = content.json
+  }
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/standardEntity/${type}`)"
+      >
+        {{dataType.label}}
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="props.item"
+          :class="['text-xl','font-medium']"
+      >{{props.item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="props.item.id"
+          @click="dataStore.updateItem(type,props.item, oldItem)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else
+          @click="dataStore.createNewItem(type,props.item)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="router.push(props.item.id ? `/standardEntity/${type}/show/${props.item.id}` : `/standardEntity/${type}`)"
+          color="red"
+          class="ml-2"
+      >
+        Abbrechen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UDashboardPanelContent>
+    <UForm
+        class="p-5"
+    >
+      <UFormGroup
+          v-for="datapoint in dataType.templateColumns.filter(i => i.inputType)"
+          :label="datapoint.label"
+      >
+        <div v-if="datapoint.key.includes('.')">
+          <UInput
+              v-if="['text','number'].includes(datapoint.inputType)"
+              v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+              :type="datapoint.inputType"
+              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
+          />
+          <UToggle
+              v-else-if="datapoint.inputType === 'bool'"
+              v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+          />
+          <USelectMenu
+              v-else-if="datapoint.inputType === 'select'"
+              v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+              :option-attribute="datapoint.selectOptionAttribute"
+              :value-attribute="datapoint.selectValueAttribute || 'id'"
+              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+              :searchable="datapoint.selectSearchAttributes"
+              :search-attributes="datapoint.selectSearchAttributes"
+              :multiple="datapoint.selectMultiple"
+          />
+          <UTextarea
+              v-else-if="datapoint.inputType === 'textarea'"
+              v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+              rows="4"
+          />
+          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
+                variant="outline"
+            />
+
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close" />
+            </template>
+          </UPopover>
+          <Tiptap
+              v-else-if="datapoint.inputType === 'editor'"
+              @updateContent="(i) => contentChanged(i,datapoint)"
+              :preloadedContent="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
+          />
+        </div>
+        <div v-else>
+          <UInput
+              v-if="['text','number'].includes(datapoint.inputType)"
+              v-model="props.item[datapoint.key]"
+              :type="datapoint.inputType"
+              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
+          />
+          <UToggle
+              v-else-if="datapoint.inputType === 'bool'"
+              v-model="props.item[datapoint.key]"
+          />
+          <USelectMenu
+              v-else-if="datapoint.inputType === 'select'"
+              v-model="props.item[datapoint.key]"
+              :option-attribute="datapoint.selectOptionAttribute"
+              :value-attribute="datapoint.selectValueAttribute || 'id'"
+              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+              :searchable="datapoint.selectSearchAttributes"
+              :search-attributes="datapoint.selectSearchAttributes"
+              :multiple="datapoint.selectMultiple"
+              searchable-placeholder="Suche..."
+          />
+          <UTextarea
+              v-else-if="datapoint.inputType === 'textarea'"
+              v-model="props.item[datapoint.key]"
+              rows="4"
+          />
+          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
+            <UButton
+                icon="i-heroicons-calendar-days-20-solid"
+                :label="props.item[datapoint.key] ? dayjs(props.item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
+                variant="outline"
+            />
+
+            <template #panel="{ close }">
+              <LazyDatePicker v-model="props.item[datapoint.key]" @close="close" />
+            </template>
+          </UPopover>
+          <Tiptap
+              v-else-if="datapoint.inputType === 'editor'"
+              @updateContent="(i) => contentChanged(i,datapoint)"
+              :preloadedContent="props.item[datapoint.key].html"
+          />
+        </div>
+        <div
+            v-if="profileStore.ownTenant.ownFields"
+        >
+          <UDivider
+              class="mt-3"
+          >Eigene Felder</UDivider>
+
+          <UFormGroup
+              v-for="field in profileStore.ownTenant.ownFields.contracts"
+              :key="field.key"
+              :label="field.label"
+          >
+            <UInput
+                v-if="field.type === 'text'"
+                v-model="props.item.ownFields[field.key]"
+            />
+            <USelectMenu
+                v-else-if="field.type === 'select'"
+                :options="field.options"
+                v-model="props.item.ownFields[field.key]"
+            />
+          </UFormGroup>
+        </div>
+
+      </UFormGroup>
+    </UForm>
+  </UDashboardPanelContent>
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>

components/EntityList.vue

@@ -55,8 +55,8 @@ const dataType = dataStore.dataTypes[type]
 const selectedItem = ref(0)
 
 
-const selectedColumns = ref(dataType.templateColumns)
-const columns = computed(() => dataType.templateColumns.filter((column) => selectedColumns.value.includes(column)))
+const selectedColumns = ref(dataType.templateColumns.filter(i => !i.disabledInTable))
+const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.includes(column)))
 
 const searchString = ref('')
 
@@ -114,7 +114,7 @@ const filteredRows = computed(() => {
         </template>
       </UInput>
 
-      <UButton v-if="useRole().checkRight(`${type}-create`)" @click="router.push(`/${type}/create`)">+ {{dataType.labelSingle}}</UButton>
+      <UButton v-if="useRole().checkRight(`${type}-create`)" @click="router.push(`/standardEntity/${type}/create`)">+ {{dataType.labelSingle}}</UButton>
     </template>
   </UDashboardNavbar>
 
@@ -127,10 +127,11 @@ const filteredRows = computed(() => {
       <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="dataType.templateColumns"
+          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
           multiple
           class="hidden lg:block"
           by="key"
+          :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
       >
         <template #label>
           Spalten
@@ -142,6 +143,7 @@ const filteredRows = computed(() => {
           multiple
           v-model="selectedFilters"
           :options="selectableFilters"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
       >
         <template #label>
           Filter
@@ -154,7 +156,7 @@ const filteredRows = computed(() => {
       :columns="columns"
       class="w-full"
       :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/${type}/show/${i.id}`) "
+      @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
   >
     <template #name-data="{row}">
@@ -185,10 +187,10 @@ const filteredRows = computed(() => {
       </span>
     </template>
     <template
-        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate')"
+        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
         v-slot:[`${column.key}-data`]="{row}">
       <component v-if="column.component" :is="column.component" :row="row"></component>
-      <span v-else>{{row[column.key]}}</span>
+      <span v-else>{{row[column.key] ? `${row[column.key]} ${column.unit ? column.unit : ''}`: ''}}</span>
     </template>
   </UTable>
 </template>

components/EntityShow.vue

@@ -0,0 +1,352 @@
+<script setup>
+import dayjs from "dayjs";
+
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  },
+  item: {
+    required: true,
+    type: Object
+  }
+})
+
+const {type} = props
+
+defineShortcuts({
+  'backspace': () => {
+    router.push(`/${type}`)
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+
+const router = useRouter()
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+
+const dataType = dataStore.dataTypes[type]
+
+const openTab = ref(0)
+
+const renderedPhases = computed(() => {
+
+  if(type === "projects" && props.item.phases) {
+    return props.item.phases.map((phase,index,array) => {
+
+      let isAvailable = false
+
+      if(phase.active) {
+        isAvailable = true
+      } else if(index > 0 && array[index-1].active ){
+        isAvailable = true
+      } else if(index > 1 && array[index-1].optional && array[index-2].active){
+        isAvailable = true
+      } else if(array.findIndex(i => i.active) > index) {
+        isAvailable = true
+      }
+
+
+      return {
+        ...phase,
+        label: phase.optional ? `${phase.label}(optional)`: phase.label,
+        disabled: !isAvailable,
+        defaultOpen: phase.active ? true : false
+      }
+    })
+  } else {
+    return []
+  }
+})
+
+
+
+</script>
+
+<template>
+  <UDashboardNavbar
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/standardEntity/${type}`)"
+      >
+        {{dataType.label}}
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="item"
+          :class="['text-xl','font-medium']"
+      >{{item ? `${dataType.labelSingle}: ${props.item[dataType.templateColumns.find(i => i.title).key]}`: '' }}</h1>
+    </template>
+    <template #right>
+      <ButtonWithConfirm
+          color="rose"
+          variant="outline"
+          @confirmed="dataStore.updateItem(type,{...item, archived: true})"
+      >
+        <template #button>
+          Archivieren
+        </template>
+        <template #header>
+          <span class="text-md text-black font-bold">Archivieren bestätigen</span>
+        </template>
+        Möchten Sie das Fahrzeug {{item.name}} wirklich archivieren?
+      </ButtonWithConfirm>
+      <UButton
+          @click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTabs
+      :items="dataType.showTabs"
+      v-if="props.item.id"
+      class="p-5"
+      v-model="openTab"
+  >
+    <template #item="{item}">
+      <div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
+        <UCard class="w-1/2 mr-5">
+          <UAlert
+              v-if="item.archived"
+              color="rose"
+              variant="outline"
+              :title="`${dataType.labelSingle} archiviert`"
+              icon="i-heroicons-light-bulb"
+              class="mb-5"
+          />
+          <div class="text-wrap">
+            <table class="w-full">
+              <tbody>
+              <tr
+                  v-for="datapoint in dataType.templateColumns"
+              >
+                <td>{{datapoint.label}}:</td>
+                <td>
+                  <component v-if="datapoint.component" :is="datapoint.component" :row="props.item"></component>
+                  <div v-else>
+                    <span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
+                    <span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
+                  </div>
+                </td>
+              </tr>
+              </tbody>
+
+            </table>
+          </div>
+
+        </UCard>
+        <UCard class="w-1/2">
+          <HistoryDisplay
+              :type="type.substring(0,type.length-1)"
+              v-if="props.item.id"
+              :element-id="props.item.id"
+              render-headline
+          />
+        </UCard>
+      </div>
+      <div v-else-if="item.label === 'Dokumente'">
+        <UCard class="mt-5">
+          <!--          <Toolbar>
+                      <DocumentUpload
+                          type="vehicle"
+                          :element-id="item.id"
+                      />
+                    </Toolbar>
+
+                    <DocumentList
+                        :documents="dataStore.getDocumentsByVehicleId(item.id)"
+                    />-->
+          {{props.item.documents}}
+        </UCard>
+      </div>
+      <div v-else-if="item.label === 'Projekte'">
+        <UCard class="mt-5">
+          <Toolbar>
+            <UButton
+                @click="router.push(`/standardEntity/projects/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
+            >
+              + Projekt
+            </UButton>
+          </Toolbar>
+          <UTable
+              :rows="props.item.projects"
+              @select="(row) => router.push(`/standardEntity/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>
+
+        </UCard>
+      </div>
+      <div v-else-if="item.label === 'Objekte'">
+        <UCard class="mt-5">
+          <Toolbar>
+            <UButton
+                @click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
+            >
+              + Objekt
+            </UButton>
+          </Toolbar>
+          <UTable
+              :rows="props.item.plants"
+              @select="(row) => router.push(`/standardEntity/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 v-else-if="item.label === 'Aufgaben'">
+        <UCard class="mt-5">
+          <Toolbar>
+            <UButton
+                @click="router.push(`/standardEntity/tasks/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
+            >
+              + Aufgabe
+            </UButton>
+          </Toolbar>
+          <UTable
+              :rows="props.item.tasks"
+              @select="(row) => router.push(`/standardEntity/tasks/show/${row.id}`)"
+              :columns="[{label: 'Name', key: 'name'}]"
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
+          />
+        </UCard>
+      </div>
+      <div v-else-if="item.label === 'Verträge'">
+        <UCard class="mt-5">
+          <Toolbar>
+            <UButton
+                @click="router.push(`/standardEntity/contracts/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
+            >
+              + Vertrag
+            </UButton>
+          </Toolbar>
+          <UTable
+              :rows="props.item.contracts"
+              @select="(row) => router.push(`/standardEntity/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>
+        </UCard>
+      </div>
+      <div v-else-if="item.label === 'Überprüfungen'">
+        <UCard class="mt-5">
+          <UTable
+              :rows="props.item.checks"
+              :columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
+              class="w-full"
+              :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+              @select="(i) => router.push(`/checks/show/${i.id}`) "
+              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
+          >
+            <template #rhythm-data="{row}">
+              {{row.distance}}
+              <span v-if="row.distanceUnit === 'dayjs'">Tage</span>
+              <span v-if="row.distanceUnit === 'years'">Jahre</span>
+            </template>
+          </UTable>
+        </UCard>
+      </div>
+      <div v-else-if="item.label === 'Phasen'">
+        <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 " />
+                  </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>
+
+              </UButton>
+            </template>
+            <template #item="{item, index}">
+              <UCard class="mx-5">
+                <template #header>
+                  <span class="text-black">{{item.label}}</span>
+                </template>
+                <InputGroup>
+                  <!-- TODO: Reactive Change Phase                  -->
+                  <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: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
+                  <p v-if="item.description" class="text-black">Beschreibung: {{item.description}}</p>
+                </div>
+              </UCard>
+
+
+            </template>
+          </UAccordion>
+        </UCard>
+      </div>
+
+    </template>
+
+  </UTabs>
+
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>

components/MainNav.vue

@@ -72,17 +72,17 @@ const links = computed(() => {
       children: [
         ... role.checkRight("customers") ? [{
           label: "Kunden",
-          to: "/customers",
+          to: "/standardEntity/customers",
           icon: "i-heroicons-user-group"
         }] : [],
         ... role.checkRight("vendors") ? [{
           label: "Lieferanten",
-          to: "/vendors",
+          to: "/standardEntity/vendors",
           icon: "i-heroicons-truck"
         }] : [],
         ... role.checkRight("contacts") ? [{
           label: "Ansprechpartner",
-          to: "/contacts",
+          to: "/standardEntity/contacts",
           icon: "i-heroicons-user-group"
         }] : [],
       ]
@@ -210,17 +210,17 @@ const links = computed(() => {
     },] : [],
     ... role.checkRight("projects") ? [{
       label: "Projekte",
-      to: "/projects",
+      to: "/standardEntity/projects",
       icon: "i-heroicons-clipboard-document-check"
     },] : [],
     ... role.checkRight("contracts") ? [{
       label: "Verträge",
-      to: "/contracts",
+      to: "/standardEntity/contracts",
       icon: "i-heroicons-clipboard-document"
     }] : [],
     ... role.checkRight("plants") ? [{
       label: "Objekte",
-      to: "/plants",
+      to: "/standardEntity/plants",
       icon: "i-heroicons-clipboard-document"
     },] : [],
 

components/columnRenderings/active.vue

@@ -9,5 +9,6 @@ const props = defineProps({
 </script>
 
 <template>
-  <span>{{props.row.active ? 'Ja' : 'Nein'}}</span>
+  <span v-if="props.row.active" class="text-primary">Ja</span>
+  <span v-else class="text-rose-600">Nein</span>
 </template>

components/columnRenderings/address.vue

@@ -0,0 +1,17 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.infoData.streetNumber">{{props.row.infoData.streetNumber}},</span>
+  <span v-if="props.row.infoData.special">{{props.row.infoData.special}},</span>
+  <span v-if="props.row.infoData.zip">{{props.row.infoData.zip}},</span>
+  <span v-if="props.row.infoData.city">{{props.row.infoData.city}}</span>
+
+</template>

components/columnRenderings/contact.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.contact ? props.row.contact.name : ''}}</span>
+</template>

components/columnRenderings/description.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <div v-if="props.row.description" v-html="props.row.description.html"/>
+</template>

components/columnRenderings/isCompany.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.isCompany ? 'Unternehmen' : 'Privat'}}</span>
+</template>

components/columnRenderings/recurring.vue

@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.recurring">Ja</span>
+  <span v-else>Nein</span>
+</template>

components/columnRenderings/sepa.vue

@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span v-if="props.row.hasSEPA">Ja</span>
+  <span v-else>Nein</span>
+</template>