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: "description",
    label: "Dokumentation"
  },{
    key: "timetracking",
    label: "Zeiterfassung"
  }
]
const selectedPhase = ref({})
const changesSaved = ref(true)


const default_data = {
  time: 1660335428612,
  blocks: [
    {
      id: "MnGi61oxdF",
      type: "header",
      data: {
        text: "Welcome to nuxt-editorjs!",
        level: 1,
      },
    },
    {
      id: "b_Ju7U6wPl",
      type: "paragraph",
      data: {
        text: "This is a nuxt3 plugin for editorjs.",
      },
    },
    {
      id: "R3o5BpI-r9",
      type: "paragraph",
      data: {
        text: "<b>A paragraph of text:</b>&nbsp;Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore perspiciatis molestias neque autem cumque provident? Laudantium ad, quisquam quos nulla amet, perferendis recusandae voluptates eligendi cupiditate consectetur veniam! Ipsum, ullam?",
      },
    },
    {
      id: "b9mkw6ZO92",
      type: "header",
      data: {
        text: "Heading 1",
        level: 1,
      },
    },
    {
      id: "P2PZsHo2lq",
      type: "header",
      data: {
        text: "Heading 2",
        level: 2,
      },
    },
    {
      id: "hHJZjkW-TO",
      type: "header",
      data: {
        text: "Heading 3",
        level: 3,
      },
    },
    {
      id: "k8EDwa0oVG",
      type: "header",
      data: {
        text: "Heading 4",
        level: 4,
      },
    },
    {
      id: "62ciFnEFjZ",
      type: "header",
      data: {
        text: "Heading 5",
        level: 5,
      },
    },
    {
      id: "YCBcKhNqib",
      type: "header",
      data: {
        text: "Heading 6",
        level: 6,
      },
    },
    {
      id: "s_J3d5U8DA",
      type: "list",
      data: {
        style: "ordered",
        items: [
          "An ordered list item",
          "Another ordered list item",
          "One more",
        ],
      },
    },
    {
      id: "kMyQbO156y",
      type: "list",
      data: {
        style: "unordered",
        items: ["An unordered list item!", "In italics?", "Or bold?"],
      },
    },
  ],
  version: "2.25.0",
};
const dat = ref(default_data);
const save = () => {
  console.log(foo);
};


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 []"
                @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>
        <div v-else-if="item.key === 'description'" class="space-y-3">
            <client-only><editor-js v-model="dat" /></client-only>
        </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>