<script setup>

const phasesCounter = ref({})

const setupPage = async () => {
  const projects = (await useEntities("projects").select()).filter(i => !i.archived)

  projects.forEach(project => {
    if(project.phases && project.phases.length > 0){
      let activePhase = project.phases.find(p => p.active)

      if(phasesCounter.value[activePhase.label]) {
        phasesCounter.value[activePhase.label] += 1
      } else {
        phasesCounter.value[activePhase.label] = 1
      }

    } else {
      if(phasesCounter.value["Keine Phase"]) {
        phasesCounter.value["Keine Phase"] += 1
      } else {
        phasesCounter.value["Keine Phase"] = 1
      }
    }
  })
}

setupPage()

</script>

<template>
  <table class="w-full">
    <tr v-for="label in Object.keys(phasesCounter)">
      <td>{{label}}</td>
      <td>{{ phasesCounter[label] }} Stk</td>
    </tr>
  </table>
</template>

<style scoped>

</style>