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

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

import * as dayjs from 'dayjs'

const supabase = useSupabaseClient()
const route = useRoute()

const {getProjectById, getFormSubmitsWithLabelProp, getTimesByProjectId} = useDataStore()
const {forms, formSubmits, times, profiles} = storeToRefs(useDataStore())

const currentProject = getProjectById(Number(route.params.id))

const formSubmissionsComposed = getFormSubmitsWithLabelProp
const formModalOpen = ref(false)
const newFormSubmissionData = ref({
  formType: "",
  values: {},
  submitted: false
})

const timeTableRows = [
  {
    key:"user",
    label: "Benutzer"
  },{
    key:"start",
    label: "Start"
  },{
    key:"end",
    label:"Ende"
  },{
    key:"duration",
    label: "Dauer"
  },{
    key: "type",
    label: "Typ"
  },{
    key:"notes",
    label: "Notizen"
  },
]

const addNewFormSubmission = async () => {
  //Add Form Submission
  const {data:insertData,error:insertError} = await supabase
      .from("formSubmits")
      .insert([newFormSubmissionData.value])
      .select()

  console.log(insertData)
  console.log(insertError)

  let projectForms = [...currentProject.forms, insertData[0].id ]
  console.log(projectForms)

  //Add Form ID to project.forms
  const {data:updateData,error:updateError} = await supabase
      .from("projects")
      .update({forms: projectForms})
      .eq('id',currentProject.id)
      .select()

  console.log(updateData)
  console.log(updateError)

}

const tabItems = [
  {
    key: "phases",
    label: "Phasen"
  },{
    key: "forms",
    label: "Formulare"
  },{
    key: "description",
    label: "Dokumentation"
  },{
    key: "timetracking",
    label: "Zeiterfassung"
  },{
    key: "material",
    label: "Material"
  }
]
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.",
      },
    },

  ],
  version: "2.25.0",
};
const newProjectDescription = ref(currentProject.description || default_data.value);

const saveProjectDescription = async () => {
  //Update Project Description
  const {data:updateData,error:updateError} = await supabase
      .from("projects")
      .update({description: newProjectDescription.value})
      .eq('id',currentProject.id)
      .select()

  console.log(updateData)
  console.log(updateError)



};


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">
          <p>Hier wird aktuell noch gearbeitet</p>
          <!--          <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 === 'forms'" class="space-y-3">
          <UButton
            @click="formModalOpen = true"
          >
            + Formular
          </UButton>
          <UModal
            v-model="formModalOpen"
          >
            <UCard>
              <template #header>
                Formular hinzufügen
              </template>
              <UFormGroup>
                <USelectMenu
                  :options="forms"
                  option-attribute="name"
                  value-attribute="id"
                  v-model="newFormSubmissionData.formType"
                />
              </UFormGroup>
              <template #footer>
                <UButton
                  @click="addNewFormSubmission"
                >
                  Hinzufügen
                </UButton>
              </template>
            </UCard>
          </UModal>


          <UAccordion :items="formSubmissionsComposed">
            <template #item="{item}">

              <p class="my-3">Formular Link: <a :href="'https://app.spaces.software/formSubmissions/' + item.id">{{'https://app.spaces.software/formSubmissions/' + item.id}}</a></p>


              <div v-if="Object.keys(item.values).length == 0">
                <p>Es wurden noch keine Daten über das Formular abgegeben</p>
              </div>

              <table v-else>
                <tr v-for="key in Object.keys(item.values)">
                  <td>{{key}}</td>
                  <td>{{ item.values[key] }}</td>
                </tr>
              </table>

            </template>
          </UAccordion>
        </div>
        <div v-else-if="item.key === 'description'" class="space-y-3">
          <UButton
              :disabled="false/*newProjectDescription.time === currentProject.description.time*/"
              @click="saveProjectDescription"
          >
            Speichern
          </UButton>
          <client-only><editor-js v-model="newProjectDescription" /></client-only>
        </div>
        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
          Projekt Zeit: {{currentProject.projectHours.toString().replace(".",":")}} Stunden
          <UTable
            :rows="getTimesByProjectId(currentProject.id)"
            :columns="timeTableRows"
          >
            <template #user-data="{row}">
              {{profiles.find(profile => profile.id === row.user) ? profiles.find(profile => profile.id === row.user).firstName + " " + profiles.find(profile => profile.id === row.user).lastName : row.user }}
            </template>

            <template #start-data="{row}">
              {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
            </template>
            <template #end-data="{row}">
              {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
            </template>

          </UTable>
        </div>
        <div v-else-if="item.key === 'material'" class="space-y-3">
          <p>Hier wird aktuell noch gearbeitet</p>
        </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 scoped>

#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>