Added Phases to Projects

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

@@ -1,4 +1,6 @@
 <script setup>
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
+
 definePageMeta({
   middleware: "auth"
 })
@@ -12,7 +14,7 @@ const id = ref(route.params.id ? route.params.id : null )
 
 //Store
 const dataStore = useDataStore()
-let currentContact = null
+let currentItem = null
 
 
 
@@ -25,10 +27,10 @@ const itemInfo = ref({
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentContact = dataStore.getContactById(Number(useRoute().params.id))
+    currentItem = dataStore.getContactById(Number(useRoute().params.id))
   }
 
-  if(mode.value === "edit") itemInfo.value = currentContact
+  if(mode.value === "edit") itemInfo.value = currentItem
 
   if(mode.value === "create") {
     let query = route.query
@@ -41,213 +43,199 @@ const setupPage = () => {
 }
 
 const editCustomer = async () => {
-  router.push(`/contacts/edit/${currentContact.id}`)
+  router.push(`/contacts/edit/${currentItem.id}`)
   setupPage()
 }
 
 const cancelEditorCreate = () => {
-  mode.value = "show"
-  itemInfo.value = {
-    id: 0,
-    name: "",
+  if(currentItem.value) {
+    router.push(`/contacts/show/${currentItem.value.id}`)
+  } else {
+    router.push(`/contacts`)
   }
+
 }
 
 setupPage()
 </script>
 
 <template>
-  <div>
-    <UCard v-if="currentContact && mode == 'show'" >
-      <template #header>
-        <UBadge
-            v-if="currentContact.active"
-        >
-          Kontakt aktiv
-        </UBadge>
-        <UBadge
-          v-else
-          color="red"
-        >
-          Kontakt inaktiv
-        </UBadge>
-        {{currentContact.fullName}}
-      </template>
+  <h1
+      class="mb-3 font-bold text-2xl truncate"
+      v-if="currentItem"
+  >Ansprechpartner: {{currentItem.fullName}}</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="editCustomer"
+            >
+              Bearbeiten
+            </UButton>
+          </Toolbar>
 
-      <InputGroup class="mb-3">
-        <UButton
-            v-if="currentContact.customer"
-            :to="`/customers/show/${currentContact.customer}`"
-        >
-          Zum Kunden
-        </UButton>
-        <UButton
-            v-if="currentContact.vendor"
-            :to="`/vendors/show/${currentContact.vendor}`"
-        >
-          Zum Lieferanten
-        </UButton>
-      </InputGroup>
+          <UBadge
+              v-if="currentItem.active"
+          >
+            Kontakt aktiv
+          </UBadge>
+          <UBadge
+              v-else
+              color="red"
+          >
+            Kontakt inaktiv
+          </UBadge>
 
-      <span v-if="currentContact.customer">Kunde: {{dataStore.customers.find(customer => customer.id === currentContact.customer) ? dataStore.customers.find(customer => customer.id === currentContact.customer).name : "" }}</span><br>
-      <span v-if="currentContact.vendor">Lieferant: {{dataStore.vendors.find(vendor => vendor.id === currentContact.vendor) ? dataStore.vendors.find(vendor => vendor.id === currentContact.vendor).name : ""}}</span><br>
-
-      <span>E-Mail: {{currentContact.email}}</span><br>
-      <span>Mobil: {{currentContact.phoneMobile}}</span><br>
-      <span>Festnetz: {{currentContact.phoneHome}}</span><br>
-      <span>Rolle: {{currentContact.role}}</span>
+          <div class="text-wrap mt-3">
+            <p v-if="currentItem.customer">Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.customers.find(customer => customer.id === currentItem.customer) ? dataStore.customers.find(customer => customer.id === currentItem.customer).name : "" }}</nuxt-link></p>
+            <p v-if="currentItem.vendor">Lieferant: <nuxt-link :to="`/vendors/show/${currentItem.vendor}`">{{dataStore.vendors.find(vendor => vendor.id === currentItem.vendor) ? dataStore.vendors.find(vendor => vendor.id === currentItem.vendor).name : ""}}</nuxt-link></p>
 
 
-
-      <DevOnly>
-        <UDivider
-          class="my-3"
-        />
-        {{currentContact}}
-      </DevOnly>
+            <p>E-Mail: {{currentItem.email}}</p>
+            <p>Mobil: {{currentItem.phoneMobile}}</p>
+            <p>Festnetz: {{currentItem.phoneHome}}</p>
+            <p>Rolle: {{currentItem.role}}</p>
+          </div>
 
 
-      <template #footer>
-        <UButton
-            v-if="mode == 'show' && currentContact.id"
-            @click="editCustomer"
-        >
-          Bearbeiten
-        </UButton>
-        <UButton
-            color="red"
-            class="ml-2"
-            disabled
-        >
-          Archivieren
-        </UButton>
-      </template>
+        </div>
+        <div v-else-if="item.label === 'Logbuch'">
+          <HistoryDisplay
+              type="contact"
+              v-if="currentItem"
+              :element-id="currentItem.id"
+          />
+        </div>
+      </UCard>
+    </template>
+  </UTabs>
+  <UCard v-else-if="mode == 'edit' || mode == 'create'" >
+    <template #header>
+      {{itemInfo.fullName}}
+    </template>
 
+    <UFormGroup
+        label="Anrede:"
+    >
+      <UInput
+          v-model="itemInfo.salutation"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Vorname:"
+    >
+      <UInput
+          v-model="itemInfo.firstName"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Nachname:"
+    >
+      <UInput
+          v-model="itemInfo.lastName"
+      />
+    </UFormGroup>
 
-
-    </UCard>
-    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header>
-         {{itemInfo.fullName}}
-      </template>
-
-      <UFormGroup
-          label="Anrede:"
-      >
-        <UInput
-            v-model="itemInfo.salutation"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Vorname:"
-      >
-        <UInput
-            v-model="itemInfo.firstName"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Nachname:"
-      >
-        <UInput
-            v-model="itemInfo.lastName"
-        />
-      </UFormGroup>
-
-      <UFormGroup
-          label="Kunde:"
-      >
-        <USelectMenu
+    <UFormGroup
+        label="Kunde:"
+    >
+      <USelectMenu
           v-model="itemInfo.customer"
           option-attribute="name"
           value-attribute="id"
           :options="dataStore.customers"
           searchable
           :search-attributes="['name']"
-        >
-          <template #label>
-            {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-      <UFormGroup
-          label="Lieferant:"
       >
-        <USelectMenu
+        <template #label>
+          {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+    <UFormGroup
+        label="Lieferant:"
+    >
+      <USelectMenu
           v-model="itemInfo.vendor"
           option-attribute="name"
           value-attribute="id"
           :options="dataStore.vendors"
           searchable
           :search-attributes="['name']"
-        >
-          <template #label>
-            {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : "Lieferant auswählen"}}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
+      >
+        <template #label>
+          {{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : "Lieferant auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
 
-      <UFormGroup
-          label="Kontakt aktiv:"
-      >
-        <UCheckbox
-            v-model="itemInfo.active"
-        />
-      </UFormGroup>
+    <UFormGroup
+        label="Kontakt aktiv:"
+    >
+      <UCheckbox
+          v-model="itemInfo.active"
+      />
+    </UFormGroup>
 
-      <UFormGroup
-          label="E-Mail:"
-      >
-        <UInput
-            v-model="itemInfo.email"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Mobil:"
-      >
-        <UInput
-            v-model="itemInfo.phoneMobile"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Festnetz:"
-      >
-        <UInput
-            v-model="itemInfo.phoneHome"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Rolle:"
-      >
-        <UInput
-            v-model="itemInfo.role"
-        />
-      </UFormGroup>
+    <UFormGroup
+        label="E-Mail:"
+    >
+      <UInput
+          v-model="itemInfo.email"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Mobil:"
+    >
+      <UInput
+          v-model="itemInfo.phoneMobile"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Festnetz:"
+    >
+      <UInput
+          v-model="itemInfo.phoneHome"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Rolle:"
+    >
+      <UInput
+          v-model="itemInfo.role"
+      />
+    </UFormGroup>
 
 
-      <template #footer>
-        <UButton
-            v-if="mode == 'edit'"
-            @click="dataStore.updateItem('contacts',{...itemInfo, fullName: `${itemInfo.firstName} ${itemInfo.lastName}`})"
-        >
-          Speichern
-        </UButton>
-        <UButton
-            v-else-if="mode == 'create'"
-            @click="dataStore.createNewItem('contacts',{...itemInfo, fullName: `${itemInfo.firstName} ${itemInfo.lastName}`})"
-        >
-          Erstellen
-        </UButton>
-        <UButton
-            @click="cancelEditorCreate"
-            color="red"
-            class="ml-2"
-        >
-          Abbrechen
-        </UButton>
-      </template>
+    <template #footer>
+      <UButton
+          v-if="mode == 'edit'"
+          @click="dataStore.updateItem('contacts',{...itemInfo, fullName: `${itemInfo.firstName} ${itemInfo.lastName}`})"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode == 'create'"
+          @click="dataStore.createNewItem('contacts',{...itemInfo, fullName: `${itemInfo.firstName} ${itemInfo.lastName}`})"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+      >
+        Abbrechen
+      </UButton>
+    </template>
 
-    </UCard>
-  </div>
+  </UCard>
 </template>
 
 <style scoped>

spaces/pages/contacts/index.vue

@@ -1,18 +1,15 @@
 <template>
-  <div id="main">
-    <!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
-
-    <InputGroup>
-      <UButton @click="router.push(`/contacts/create/`)">+ Kontakt</UButton>
-
-      <UInput
-          v-model="searchString"
-          placeholder="Suche..."
-      />
-    </InputGroup>
+  <Toolbar>
+    <UButton @click="router.push(`/contacts/create/`)">+ Kontakt</UButton>
 
+    <UInput
+        v-model="searchString"
+        placeholder="Suche..."
+    />
+  </Toolbar>
 
 
+  <div class="table">
     <UTable
         :rows="filteredRows"
         :columns="itemColumns"
@@ -26,8 +23,8 @@
         {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
       </template>
     </UTable>
-
   </div>
+
 </template>
 
 <script setup>