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>

spaces/pages/projects/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div id="main">
+    <div id="left">
+
+      <UButton @click="showCreateProject = true">+ Projekt</UButton>
+      <UModal v-model="showCreateProject">
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+
+        </UCard>
+      </UModal>
+
+      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
+        <UCard class="listItem">
+          <UBadge>{{item.id}}</UBadge> {{item.attributes.name}}
+        </UCard>
+      </router-link>
+
+
+    </div>
+    <div id="right">
+      {{selectedItem}}
+      <UCard v-if="selectedItem.id">
+        <template #header>
+          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.attributes.name}}
+        </template>
+
+        Kunde:<br>
+        {{selectedItem.attributes.customer.data.attributes.name}}<br>
+
+        Notizen: <br>
+        {{selectedItem.attributes.notes}}
+
+<!--        Lieferantenrechnungen: <br>
+        <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
+        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}-->
+
+
+
+
+      </UCard>
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create} = useStrapi4()
+const projects = (await find('projects',{populate: "*"})).data
+
+const showCreateProject = ref(false)
+const projectData = ref({})
+
+let selectedItem = ref({})
+
+const selectItem = (item) => {
+  selectedItem.value = item
+  console.log(item)
+}
+
+</script>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+}
+#left {
+  width: 25vw;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+</style>