Initial

spaces/pages/projects/[id].vue

@@ -0,0 +1,150 @@
+<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"
+  }
+]
+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 id="main">
+    <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)">
+<!--          <UIcon name="i-heroicons-plus-circle" />-->
+          <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;
+}
+
+.notesTextarea {
+  margin-top: 1em
+}
+
+h3 {
+  color: #69c350;
+  font-size: larger;
+}
+
+.plusIcon:hover {
+  color: #69c350;
+}
+</style>