Added Phases to Projects

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

@@ -0,0 +1,155 @@
+<script setup>
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+let currentItem = ref(null)
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+    name: null,
+    description: null
+})
+
+//Functions
+const setupPage = () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentItem.value = dataStore.getInventoryItemById(Number(useRoute().params.id))
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentItem.value
+
+}
+
+
+const editItem = async () => {
+  router.push(`/inventoryitems/edit/${currentItem.value.id}`)
+  setupPage()
+}
+
+const cancelEditorCreate = () => {
+  if(currentItem.value) {
+    router.push(`/inventoryitems/show/${currentItem.value.id}`)
+  } else {
+    router.push(`/inventoryitems`)
+  }
+
+}
+
+
+
+setupPage()
+</script>
+
+<template>
+  <h1
+      class="text-center my-3 font-bold text-2xl"
+      v-if="currentItem "
+  >{{currentItem.name}}</h1>
+  <UTabs
+    :items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
+    v-if="currentItem && mode == 'show'"
+  >
+    <template #item="{item}">
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Informationen'">
+          <Toolbar>
+            <UButton
+                v-if="mode === 'show' && currentItem.id"
+                @click="editItem"
+            >
+              Bearbeiten
+            </UButton>
+          </Toolbar>
+
+          <div class="text-wrap">
+            <p v-if="currentItem.currentSpace">Lagerplatz: {{dataStore.getSpaceById(currentItem.currentSpace).spaceNumber}} - {{dataStore.getSpaceById(currentItem.currentSpace).description}}</p>
+            <p>Beschreibung: {{currentItem.description}}</p>
+          </div>
+        </div>
+        <div v-else-if="item.label === 'Logbuch'">
+          <HistoryDisplay
+              type="inventoryitem"
+              v-if="currentItem"
+              :element-id="currentItem.id"
+          />
+        </div>
+      </UCard>
+    </template>
+  </UTabs>
+  <UCard v-else-if="mode == 'edit' || mode == 'create'" >
+    <template #header v-if="mode === 'edit'">
+      {{itemInfo.name}}
+    </template>
+
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="itemInfo.name"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Lagerplatz:"
+    >
+      <USelectMenu
+          :options="dataStore.spaces"
+          v-model="itemInfo.currentSpace"
+          value-attribute="id"
+      >
+        <template #option="{option}">
+          <span class="truncate">{{option.spaceNumber}} - {{option.description}}</span>
+        </template>
+        <template #label>
+          <span v-if="itemInfo.currentSpace">{{dataStore.getSpaceById(itemInfo.currentSpace).spaceNumber }} - {{dataStore.getSpaceById(itemInfo.currentSpace).description}}</span>
+          <span v-else>Kein Lagerplatz ausgewählt</span>
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+    <UFormGroup
+        label="Beschreibung:"
+    >
+      <UTextarea
+          v-model="itemInfo.description"
+      />
+    </UFormGroup>
+
+
+    <template #footer>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('inventoryitems',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('inventoryitems',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+      >
+        Abbrechen
+      </UButton>
+    </template>
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>