Fix Phases

frontend/components/EntityShowSubPhases.vue

@@ -25,30 +25,42 @@ const emit = defineEmits(["updateNeeded"]);
 const router = useRouter()
 const profileStore = useProfileStore()
 const auth = useAuthStore()
+const openPhaseKey = ref(null)
+
+const isPhaseAvailable = (phase, index, phases) => {
+  if (phase.label === "Abgeschlossen" || phase.active) {
+    return true
+  }
+
+  const activeIndex = phases.findIndex((item) => item.active)
+
+  if (activeIndex > index) {
+    return true
+  }
+
+  if (activeIndex === -1) {
+    return index === 0
+  }
+
+  if (index === activeIndex + 1) {
+    return true
+  }
+
+  if (index <= activeIndex) {
+    return true
+  }
+
+  return phases.slice(activeIndex + 1, index).every((item) => item.optional)
+}
 
 const renderedPhases = computed(() => {
   if(props.topLevelType === "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
-      } else if(phase.label === "Abgeschlossen") {
-        isAvailable = true
-      }
-
-
       return {
         ...phase,
         label: phase.optional ? `${phase.label}(optional)`: phase.label,
-        disabled: !isAvailable,
+        disabled: !isPhaseAvailable(phase, index, array),
         defaultOpen: phase.active ? true : false
       }
     })
@@ -57,6 +69,33 @@ const renderedPhases = computed(() => {
   }
 })
 
+watch(renderedPhases, (phases) => {
+  if (!phases.length) {
+    openPhaseKey.value = null
+    return
+  }
+
+  const activePhase = phases.find((phase) => phase.active)
+  const currentPhaseStillExists = phases.some((phase) => phase.key === openPhaseKey.value)
+
+  if (activePhase) {
+    openPhaseKey.value = activePhase.key
+    return
+  }
+
+  if (!currentPhaseStillExists) {
+    openPhaseKey.value = phases[0].key
+  }
+}, { immediate: true })
+
+const togglePhasePanel = (phase) => {
+  if (phase.disabled) {
+    return
+  }
+
+  openPhaseKey.value = openPhaseKey.value === phase.key ? null : phase.key
+}
+
 const changeActivePhase = async (key) => {
   console.log(props.item)
   let item = await useEntities("projects").selectSingle(props.item.id,'*')
@@ -92,41 +131,41 @@ const changeActivePhase = async (key) => {
     <template #header v-if="props.platform === 'mobile'">
       <span>Phasen</span>
     </template>
-    <UAccordion
-        :items="renderedPhases"
+    <div class="space-y-2">
+      <div
+          v-for="(item, index) in renderedPhases"
+          :key="item.key"
+          class="space-y-2"
       >
-      <template #default="slotProps">
         <UButton
             variant="ghost"
-            :color="slotProps.item.active ? 'primary' : 'white'"
-            class="mb-1"
-            :disabled="true"
+            :color="item.active ? 'primary' : 'neutral'"
+            class="w-full justify-start"
+            :disabled="item.disabled"
+            @click="togglePhasePanel(item)"
         >
           <template #leading>
             <div class="w-6 h-6 flex items-center justify-center -my-1">
-              <UIcon :name="slotProps.item.icon" class="w-4 h-4 " />
+              <UIcon :name="item.icon" class="w-4 h-4" />
             </div>
           </template>
 
-          <span class="truncate"> {{ slotProps.item.label }}</span>
+          <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="[slotProps?.open && 'rotate-90']"
+                :class="[openPhaseKey === item.key && 'rotate-90']"
             />
           </template>
-
         </UButton>
-      </template>
-      <template #item="{item, index}">
-        <UCard class="mx-5">
+
+        <UCard v-if="openPhaseKey === item.key" class="mx-5">
           <template #header>
             <span class="dark:text-white text-black">{{ item.label }}</span>
           </template>
           <InputGroup>
-            <!-- TODO: Reactive Change Phase                  -->
             <UButton
                 v-if="!item.activated_at && index !== 0 "
                 @click="changeActivePhase(item.key)"
@@ -148,10 +187,8 @@ const changeActivePhase = async (key) => {
             <p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
           </div>
         </UCard>
-
-
-      </template>
-    </UAccordion>
+      </div>
+    </div>
   </UCard>
 
 </template>