Added Phases to Projects

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

@@ -18,12 +18,13 @@ const id = ref(route.params.id ? route.params.id : null )
 let currentItem = ref(null)
 
 const tabItems = [
-  /*{
-    key: "phases",
-    label: "Phasen"
-  },*/{
+  {
     key: "information",
     label: "Informationen"
+  },
+  {
+    key: "phases",
+    label: "Phasen"
   },{
     key: "tasks",
     label: "Aufgaben"
@@ -172,6 +173,52 @@ const projectHours = () => {
 }
 
 
+/*const phasesTemplate = ref([{
+  label: 'Erstkontakt',
+  icon: 'i-heroicons-clipboard-document',
+  active: true
+}, {
+  label: 'Überprüfung Vor Ort',
+  icon: 'i-heroicons-magnifying-glass'
+}, {
+  label: 'Angebotserstellung',
+  icon: 'i-heroicons-document-text'
+}, {
+  label: 'Auftragsvergabe',
+  icon: 'i-heroicons-document-check'
+}, {
+  label: 'Umsetzung',
+  icon: 'i-heroicons-wrench-screwdriver'
+},{
+  label: 'Rechnungsstellung',
+  icon: 'i-heroicons-document-text'
+}, {
+  label: 'Abgeschlossen',
+  icon: 'i-heroicons-check'
+}])*/
+const phasesTemplateSelected = ref(dataStore.phasesTemplates[0].id)
+const changeActivePhase = (phase) => {
+  currentItem.value.phases = currentItem.value.phases.map(p => {
+    if(p.active) delete p.active
+
+    if(p.label === phase.label) p.active = true
+
+    return p
+  })
+
+  savePhases()
+
+}
+
+const savePhases = () => {
+  dataStore.updateItem("projects", currentItem.value)
+}
+
+const loadPhases = async () => {
+  currentItem.value.phases = dataStore.phasesTemplates.find(i => i.id === phasesTemplateSelected.value).initialPhases
+  await dataStore.updateItem("projects", currentItem.value)
+}
+
 setupPage()
 </script>
 
@@ -183,29 +230,69 @@ setupPage()
 
     <UTabs :items="tabItems" class="w-full">
       <template #item="{ item }">
-        <!--
-                  <div v-if="item.key === 'phases'" class="space-y-3">
-                    <p>Hier wird aktuell noch gearbeitet</p>
-                    &lt;!&ndash;          <div id="phaseList">
-                      <a
-                          v-for="phase in []"
-                          @click="selectedPhase = phase"
-                      >
-                        <div
-                            class="phaseContainer"
-                        >
-                          <span>{{phase.name}} - {{phase.position}}</span>
-                        </div>
+        <div v-if="item.key === 'information'">
+          <InputGroup>
+            <UButton
+              @click="router.push(`/customers/show/${currentItem.customer}`)"
+              class="mb-3"
+            >
+              Zum Kunden
+            </UButton>
+            <UButton
+              @click="router.push(`/plants/show/${currentItem.plant}`)"
+              class="mb-3"
+            >
+              Zum Objekt
+            </UButton>
+          </InputGroup>
 
-                        <a class="plusIcon" @click="addPhase(phase)">
+          Kunde: {{dataStore.getCustomerById(currentItem.customer).name}}<br>
+          Objekt: {{currentItem.plant ? dataStore.getPlantById(currentItem.plant).name : ""}}<br>
+          Notizen:<br>
+          {{currentItem.notes}}
+        </div>
+        <div v-if="item.key === 'phases'" class="space-y-3">
+          <UFormGroup
+            label="Vorlage laden"
+            v-if="currentItem.phases.length === 0"
+          >
+            <InputGroup>
+              <USelectMenu
+                  :options="dataStore.phasesTemplates"
+                  option-attribute="name"
+                  value-attribute="id"
+                  v-model="phasesTemplateSelected"
+                  class="flex-auto"
+              >
 
-                          <UDivider icon="i-heroicons-plus-circle"/>
-                        </a>
-                      </a>
-                    </div>&ndash;&gt;
+              </USelectMenu>
+              <UButton
+                  @click="loadPhases"
+              >
+                Vorlage laden
+              </UButton>
+            </InputGroup>
+          </UFormGroup>
 
-                  </div>
-        -->
+          <UAccordion
+              :items="currentItem.phases"
+            >
+              <template #item="{item}">
+                <InputGroup>
+                  <UButton
+                      v-if="!item.active"
+                      @click="changeActivePhase(item)"
+                  >
+                    Phase aktivieren
+                  </UButton>
+
+<!--                  <UButton>
+                    + Phase
+                  </UButton>-->
+                </InputGroup>
+              </template>
+          </UAccordion>
+        </div>
         <div v-if="item.key === 'tasks'" class="space-y-3">
           <InputGroup>
             <UButton