Introduced EntityEdit.vue

Introduced EntityShow.vue

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

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>