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

<script setup >
definePageMeta({
  middleware: "auth"
})

const {find, findOne,create, update} = useStrapi4()
const route = useRoute()
let project = (await findOne('projects',route.params.id)).data
const tabItems = [
  {
    key: "phases",
    label: "Phasen"
  },{
    key: "forms",
    label: "Formulare"
  },{
    key: "timetracking",
    label: "Zeiterfassung"
  }
]
const selectedPhase = ref({})
const changesSaved = ref(true)


const updatePhases = async () => {
  await update('projects', route.params.id, {phases: project.attributes.phases})
  changesSaved.value = true
  console.log("Updated")
}

const phaseInfo = ref({
  name: "XX",
  notes: ""
})

const addPhase = async (phaseBefore) => {


  let posBefore = phaseBefore.position
  let phases = project.attributes.phases

  phases.splice(posBefore + 1,0,{name: "test", checkboxes: []})

  phases.forEach((phase,index) => {
    phases[index].position = index
  })


  await updatePhases()

}


</script>

<template>
  <div>
    <UTabs :items="tabItems" class="w-full">
      <template #item="{ item }">
        <div v-if="item.key === 'phases'" class="space-y-3">
          <div id="phaseList">
            <a
                v-for="phase in project.attributes.phases"
                @click="selectedPhase = phase"
            >
              <div
                  class="phaseContainer"
              >
                <span>{{phase.name}} - {{phase.position}}</span>
              </div>

              <a class="plusIcon" @click="addPhase(phase)">

                <UDivider icon="i-heroicons-plus-circle"/>
              </a>
            </a>
          </div>

        </div>
        <div v-else-if="item.key === 'password'" class="space-y-3">

        </div>
      </template>
    </UTabs>
<!--    <div id="left">
      <a
          v-for="phase in project.attributes.phases"
          @click="selectedPhase = phase"
      >
        <div
            class="phaseContainer"
        >
          <span>{{phase.name}} - {{phase.position}}</span>
        </div>

        <a class="plusIcon" @click="addPhase(phase)">
&lt;!&ndash;          <UIcon name="i-heroicons-plus-circle" />&ndash;&gt;
          <UDivider icon="i-heroicons-plus-circle"/>
        </a>
      </a>

    </div>
    <div id="right" v-if="selectedPhase.name">
      <h3>{{selectedPhase.name}}</h3>

      <div
        v-if="selectedPhase"
      >
        <UCheckbox
            v-for="checkbox in selectedPhase.checkboxes"
            v-model="checkbox.checked"
            :label="checkbox.name"
            v-on:change="updatePhases"
        />
      </div>

      <UTextarea
        v-model="selectedPhase.notes"
        variant="outline"
        color="primary"
        placeholder="Notizen..."
        class="notesTextarea"
        v-on:change="changesSaved = false"
      />

      <UButton
          v-if="!changesSaved"
          @click="updatePhases"
      >
        Speichern
      </UButton>

      {{selectedPhase}}
    </div>-->
  </div>
</template>

<style >

#main {
  display: flex;
  flex-direction: row;
}

#left {
  width: 25vw;
  height: 80vh;
  overflow: auto;
}

#right {
  width: 65vw;
  margin-left: 2vw;
}

.phaseContainer {
  border: 1px solid grey;
  border-radius: 10px;
  padding: 1em;
  margin-bottom: 1em;
  margin-top: 1em;
}

.phaseContainer:hover {
  border: 1px solid #69c350;
}
#phaseList {
  height: 70vh;
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#phaseList::-webkit-scrollbar {
  display: none;
}


.notesTextarea {
  margin-top: 1em
}

h3 {
  color: #69c350;
  font-size: larger;
}

.plusIcon:hover {
  color: #69c350;
}
</style>