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

<script setup>
import * as dayjs from "dayjs";

definePageMeta({
  middleware: "auth"
})

const dataStore = useDataStore()
const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const id = ref(route.params.id ? route.params.id : null )

let currentItem = ref(null)

const tabItems = [
  /*{
    key: "phases",
    label: "Phasen"
  },*/{
    key: "tasks",
    label: "Aufgaben"
  },/*{
    key: "forms",
    label: "Formulare"
  },*/{
    key: "documents",
    label: "Dokumente"
  },{
    key: "timetracking",
    label: "Zeiterfassung"
  }/*,{
    key: "material",
    label: "Material"
  }*/
]

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 taskColumns = [
  {
    key: "name",
    label: "Name"
  },{
    key: "description",
    label: "Beschreibung"
  },{
    key: "categorie",
    label: "Kategorie"
  }, {
    key: "user",
    label: "Benutzer"
  }
]



//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
  name: "",
  customer: 0,

})

const uploadModalOpen = ref(false)
const fileUploadFormData = ref({
  tags: ["Dokument"],
  folder: "Projekte",
  usedInResource: {
    type: "Projekt",
  }
})
const tags = dataStore.getDocumentTags


//Functions
const setupPage = () => {
  if(mode.value === "show" || mode.value === "edit"){
    currentItem.value = dataStore.getProjectById(Number(useRoute().params.id))
  }

  if(mode.value === "edit") itemInfo.value = currentItem.value

  if(mode.value === "create") {
    let query = route.query

    if(query.customer) itemInfo.value.customer = Number(query.customer)

    if(query.plant) {
      itemInfo.value.plant = Number(query.plant)
      itemInfo.value.customer = dataStore.getPlantById(itemInfo.value.plant).customer
    }
  }


}

const createItem = async () => {
  const {data,error} = await supabase
      .from("projects")
      .insert([itemInfo.value])
      .select()

  if(error) {
    console.log(error)
  } else {
    mode.value = "show"
    itemInfo.value = {
      id: 0,
      title: "",
    }
    toast.add({title: "Projekt erfolgreich erstellt"})
    await dataStore.fetchProjects()
    router.push(`/projects/show/${data[0].id}`)
    setupPage()
  }
}

const editItem = async () => {
  router.push(`/projects/edit/${currentItem.value.id}`)
  setupPage()
}

const cancelEditorCreate = () => {
  if(currentItem.value) {
    router.push(`/projects/show/${currentItem.value.id}`)
  } else {
    router.push(`/projects/`)
  }
}

const updateItem = async () => {
  const {error} = await supabase
      .from("projects")
      .update(itemInfo.value)
      .eq('id',itemInfo.value.id)

  if(error) {
    console.log(error)
  }


  router.push(`/projects/show/${currentItem.value.id}`)
  toast.add({title: "Projekt erfolgreich gespeichert"})
  dataStore.fetchProjects()
}

const uploadFile = async () => {
  const file = document.getElementById("fileUploadInput").files[0]

  const {data,error} = await supabase
      .storage
      .from("documents")
      .upload(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${currentProject.id}/${file.name}`,file)

  console.log(data)
  const returnPath = data.path

  if(error) {

  } else {
    console.log(returnPath)
    const files = (await supabase.storage.from('documents').list(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${currentProject.id}/`, {limit: 100, offset: 0, sortBy: { column: 'name', order: 'asc' }})).data
    console.log(files)
    const fileId = files.find(temp => returnPath.includes(temp.name)).id

    fileUploadFormData.value.object = fileId
    fileUploadFormData.value.path = returnPath
    fileUploadFormData.value.usedInResource.id = currentProject.id
    console.log(fileUploadFormData.value)

    const {data,error} = await supabase
        .from("documents")
        .insert([fileUploadFormData.value])
        .select()
    console.log(data)
    console.log(error)
  }

  uploadModalOpen.value = false;
}


const projectHours = () => {
  let hours = 0
  dataStore.getTimesByProjectId(currentItem.value.id).forEach(item => {
    hours += Number(dayjs(item.end).diff(item.start,'hour',true).toFixed(2))
  })

  return hours
}


setupPage()
</script>

<template>
  <UCard v-if="currentItem && mode == 'show'">
    <template #header>
      {{currentItem.name}}
    </template>

    <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>
                    &lt;!&ndash;          <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>&ndash;&gt;

                  </div>
        -->
        <div v-if="item.key === 'tasks'" class="space-y-3">
          <InputGroup>
            <UButton
              @click="router.push(`/tasks/create?project=${currentItem.id}`)"
            >
              + Aufgabe
            </UButton>
          </InputGroup>

          <UTable
              :rows="dataStore.getTasksByProjectId(currentItem.id)"
              :columns="taskColumns"
              @select="(row) => {
              router.push(`/tasks/show/${row.id}`)
            }"
          >
            <template #user-data="{row}">
              {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
            </template>
          </UTable>

        </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 === 'documents'" class="space-y-3">
          <UButton
              @click="uploadModalOpen = true"
          >
            Hochladen
          </UButton>
          <UModal
              v-model="uploadModalOpen"
          >
            <UCard class="p-4">

              <template #header>
                Datei hochladen
              </template>

              <UFormGroup
                  label="Datei:"
              >
                <UInput
                    type="file"
                    id="fileUploadInput"
                />
              </UFormGroup>
              <!--          <UFormGroup
                          label="Name:"
                          class="mt-3"
                        >
                          <UInput
                              v-model="fileUploadFormData.name"
                          />
                        </UFormGroup>-->
              <UFormGroup
                  label="Tags:"
                  class="mt-3"
              >
                <USelectMenu
                    multiple
                    searchable
                    searchable-placeholder="Suchen..."
                    :options="tags"
                    v-model="fileUploadFormData.tags"
                />
              </UFormGroup>
              <!--<UFormGroup
                  label="Ordner:"
                  class="mt-3"
              >
                <USelectMenu
                    :options="folders"
                    v-model="fileUploadFormData.folder"
                    value-attribute="label"

                />
              </UFormGroup>-->

              <template #footer>
                <UButton
                    class="mt-3"
                    @click="uploadFile"
                >Hochladen</UButton>
              </template>


            </UCard>

          </UModal>


          <div class="documentList">
            <DocumentDisplay
                v-for="document in dataStore.getDocumentsByProjectId(currentItem.id)"
                :document="document"
            />
          </div>
        </div>

        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
          Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
          <UTable
              :rows="dataStore.getTimesByProjectId(currentItem.id)"
              :columns="timeTableRows"
              :empty-state="{ icon: 'i-heroicons-clock', label: 'Noch keine Zeiten in diesem Projekt' }"
          >
            <template #user-data="{row}">
              {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
            </template>
            <template #duration-data="{row}">
              {{(row.start && row.end) ? `${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h` : ""}}
            </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>




    <template #footer>
      <UButton
          v-if="mode == 'show' && currentItem.id"
          @click="editItem"
      >
        Bearbeiten
      </UButton>
    </template>



  </UCard>
  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
    <template #header v-if="mode === 'edit'">
      {{itemInfo.name}}
    </template>

    <UFormGroup
        label="Name:"
    >
      <UInput
          v-model="itemInfo.name"
      />
    </UFormGroup>

    <UFormGroup
        label="Kundennummer:"
    >
      <USelectMenu
          v-model="itemInfo.customer"
          :options="dataStore.customers"
          option-attribute="name"
          value-attribute="id"
          searchable
          :search-attributes="['name']"
      >
        <template #label>
          {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kunde auswählen"}}
        </template>
      </USelectMenu>
    </UFormGroup>

    <UFormGroup
        label="Anlage:"
    >
      <USelectMenu
          v-model="itemInfo.plant"
          :options="dataStore.plants"
          option-attribute="name"
          value-attribute="id"
          searchable
          :search-attributes="['name']"
      >
        <template #label>
          {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Anlage auswählen"}}
        </template>
      </USelectMenu>
    </UFormGroup>

    <UFormGroup
      label="Notizen:"
    >
      <UTextarea
        v-model="itemInfo.notes"
      />
    </UFormGroup>

    <template #footer>
      <UButton
          v-if="mode == 'edit'"
          @click="updateItem"
      >
        Speichern
      </UButton>
      <UButton
          v-else-if="mode == 'create'"
          @click="createItem"
      >
        Erstellen
      </UButton>
      <UButton
          @click="cancelEditorCreate"
          color="red"
          class="ml-2"
      >
        Abbrechen
      </UButton>
    </template>

  </UCard>
</template>

<style scoped>

</style>