Added Phases to Projects

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

@@ -33,177 +33,178 @@ const setupPage = () => {
 }
 
 const editItem = async () => {
-  router.push(`/vendors/edit/${currentItem.id}`)
+  router.push(`/vendors/edit/${currentItem.value.id}`)
   setupPage()
 }
 
 const cancelEditorCreate = () => {
-  router.push(`/vendors/`)
+  if(currentItem.value) {
+    router.push(`/vendors/show/${currentItem.value.id}`)
+  } else {
+    router.push(`/vendors`)
+  }
+
 }
 
 setupPage()
 </script>
 
 <template>
-  <div>
-    <UCard v-if="currentItem && mode == 'show'" >
-      <template #header>
-        {{currentItem.name}}
-      </template>
+  <h1
+      class=" mb-3 font-bold text-2xl truncate"
+      v-if="currentItem "
+  >Lieferant: {{currentItem.name}}</h1>
+  <UTabs
+    :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Ansprechpartner'}]"
+    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>
 
-      <InputGroup>
-        <UButton
-            @click="router.push(`/contacts/create?vendor=${currentItem.id}`)"
-        >
-          + Ansprechpartner
-        </UButton>
-      </InputGroup>
+          <div v-if="currentItem.infoData" class="text-wrap">
+            <p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
+            <p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}</p>
+            <p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}</p>
+            <p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}</p>
+            <p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}</p>
+            <p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}</p>
+          </div>
+        </div>
+        <div v-else-if="item.label === 'Logbuch'">
+          <HistoryDisplay
+              type="vendor"
+              v-if="currentItem"
+              :element-id="currentItem.id"
+          />
+        </div>
+        <div v-else-if="item.label === 'Ansprechpartner'">
+          <Toolbar>
+            <UButton
+                @click="router.push(`/contacts/create?vendor=${currentItem.id}`)"
+            >
+              + Ansprechpartner
+            </UButton>
+          </Toolbar>
+          <UTable
+              :rows="dataStore.getContactsByVendorId(currentItem.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' }"
 
-      Information: <br>
-      <div v-if="currentItem.infoData">
-        <span v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}<br></span>
-        <span v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}<br></span>
-        <span v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}<br></span>
-        <span v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}<br></span>
-        <span v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}<br></span>
-        <span v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}<br></span>
-      </div>
-
-      <UDivider class="my-3"/>
-
-      <div v-if="dataStore.getContactsByVendorId(currentItem.id).length > 0">
-        Kontakte: <br>
-
-        <ul>
-          <li
-              v-for="contact in dataStore.getContactsByVendorId(currentItem.id)"
           >
-            <router-link :to="'/contacts/show/' + contact.id">{{contact.salutation}} {{contact.fullName}} - {{contact.role}}</router-link>
-          </li>
-        </ul>
-      </div>
 
-      <template #footer>
-        <UButton
-            v-if="mode == 'show' && currentItem.id"
-            @click="editItem"
-        >
-          Bearbeiten
-        </UButton>
-        <UButton
-            color="red"
-            class="ml-2"
-            disabled
-        >
-          Archivieren
-        </UButton>
-      </template>
+          </UTable>
+
+        </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="Lieferantennr.:"
+    >
+      <UInput
+          v-model="itemInfo.vendorNumber"
+          placeholder="Leer lassen für automatisch generierte Nummer"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Straße + Hausnummer"
+    >
+      <UInput
+          v-model="itemInfo.infoData.street"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Postleitzahl"
+    >
+      <UInput
+          v-model="itemInfo.infoData.zip"
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Ort"
+    >
+      <UInput
+          v-model="itemInfo.infoData.city"
+      />
+    </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>
 
 
-
-    </UCard>
-    <UCard v-else-if="mode === 'edit' || mode === 'create'" >
-      <template #header v-if="mode === 'edit'">
-        {{itemInfo.name}}
-      </template>
-
-      <UFormGroup
-          label="Name:"
+    <template #footer>
+      <UButton
+          v-if="mode == 'edit'"
+          @click="dataStore.updateItem('vendors',itemInfo)"
       >
-        <UInput
-            v-model="itemInfo.name"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Lieferantennr.:"
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode == 'create'"
+          @click="dataStore.createNewItem('vendors',itemInfo)"
       >
-        <UInput
-            v-model="itemInfo.vendorNumber"
-            placeholder="Leer lassen für automatisch generierte Nummer"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Straße + Hausnummer"
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
       >
-        <UInput
-            v-model="itemInfo.infoData.street"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Postleitzahl"
-      >
-        <UInput
-            v-model="itemInfo.infoData.zip"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Ort"
-      >
-        <UInput
-            v-model="itemInfo.infoData.city"
-        />
-      </UFormGroup>
+        Abbrechen
+      </UButton>
+    </template>
 
-      <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>
+  </UCard>
 
 
-      <template #footer>
-        <UButton
-            v-if="mode == 'edit'"
-            @click="dataStore.updateItem('vendors',itemInfo)"
-        >
-          Speichern
-        </UButton>
-        <UButton
-            v-else-if="mode == 'create'"
-            @click="dataStore.createNewItem('vendors',itemInfo)"
-        >
-          Erstellen
-        </UButton>
-        <UButton
-            @click="cancelEditorCreate"
-            color="red"
-            class="ml-2"
-        >
-          Abbrechen
-        </UButton>
-      </template>
-
-    </UCard>
-
-    <HistoryDisplay
-        type="vendor"
-        v-if="currentItem"
-        :element-id="currentItem.id"
-    />
-  </div>
 </template>
 
 <style scoped>

spaces/pages/vendors/index.vue

@@ -1,26 +1,23 @@
 <template>
-  <div id="main">
-    <!-- TODO: Kontakte erstellen und dem Lieferanten zuweisen    -->
-
-    <div class="flex items-center gap-1">
-      <UButton @click="router.push(`/vendors/create/`)">+ Lieferant</UButton>
-
-      <UInput
-          v-model="searchString"
-          placeholder="Suche..."
-      />
-    </div>
+  <Toolbar>
+    <UButton @click="router.push(`/vendors/create/`)">+ Lieferant</UButton>
 
+    <UInput
+        v-model="searchString"
+        placeholder="Suche..."
+    />
+  </Toolbar>
 
 
+  <div class="table">
     <UTable
         :rows="filteredRows"
         :columns="itemColumns"
         @select="selectItem"
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     />
-
   </div>
+
 </template>
 
 <script setup>