150 lines
2.6 KiB
Vue
150 lines
2.6 KiB
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"
|
|
}
|
|
]
|
|
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> |