FEDEO/spaces/pages/projects/index.vue

<template>
  <div id="main">
    <UButton @click="showCreateProject = true">+ Projekt</UButton>
    <UModal v-model="showCreateProject">
      <UCard>
        <template #header>
          Projekt erstellen
        </template>

        <UFormGroup
            label="Name:"
        >
          <UInput
              v-model="createProjectData.name"
          />
        </UFormGroup>
        <UFormGroup
            label="Kunde:"
        >
          <USelectMenu
              v-model="createProjectData.customer"
              :options="customers"
              option-attribute="name"
              value-attribute="id"
              searchable
              :search-attributes="['name']"
          />
        </UFormGroup>
        <UFormGroup
            label="Notizen:"
        >
          <UTextarea
              v-model="createProjectData.notes"
          />
        </UFormGroup>

        <template #footer>
          <UButton
              @click="createProject"
          >
            Erstellen
          </UButton>
        </template>
      </UCard>
    </UModal>
    <!-- TODO: USelect im Modal anpassen -->
    <UTable
        :rows="projects"
        :columns="projectColumns"
        @select="selectProject"

    >
      <template #customer-data="{row}">
        {{customers.find(customer => customer.id == row.customer ) ? customers.find(customer => customer.id == row.customer ).name : row.id}}
      </template>


    </UTable>



<!--    <div id="left">
      <UButton @click="showCreateProject = true">+ Projekt</UButton>
      <UModal v-model="showCreateProject">
        <UCard>
          <template #header>
            Projekt erstellen
          </template>

          <UFormGroup
            label="Name:"
          >
            <UInput
              v-model="createProjectData.name"
            />
          </UFormGroup>
          <UFormGroup
            label="Kunde:"
          >
            <USelectMenu
              v-model="createProjectData.customer"
              :options="customers"
              option-attribute="name"
              value-attribute="id"
              searchable
              :search-attributes="['name']"
            />
          </UFormGroup>
          <UFormGroup
            label="Notizen:"
          >
            <UTextarea
              v-model="createProjectData.notes"
            />
          </UFormGroup>

          <template #footer>
            <UButton
              @click="createProject"
            >
              Erstellen
            </UButton>
          </template>
        </UCard>
      </UModal>

      <UTable
          :rows="projects"
          @select="selectCustomer"

      />


      &lt;!&ndash;      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
        <UCard class="listItem">
          <UBadge>{{item.id}}</UBadge> {{item.name}}
        </UCard>
      </router-link>&ndash;&gt;


    </div>
    <div id="right">
      {{selectedItem}}
      <UCard v-if="selectedItem.id">
        <template #header>
          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.name}}
        </template>

        Kunde:<br>
        {{selectedItem.customer.data.name}}<br>

        Notizen: <br>
        {{selectedItem.notes}}

&lt;!&ndash;        Lieferantenrechnungen: <br>
        <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}&ndash;&gt;




      </UCard>
    </div>-->

  </div>

</template>

<script setup>

definePageMeta({
  middleware: "auth"
})

const supabase = useSupabaseClient()
const router = useRouter()
const {projects,customers} = storeToRefs(useDataStore())
const {fetchProjects} = useDataStore()

const projectColumns = [
  {
    key: 'measure',
    label: "Gewerk",
    sortable: true
  },
  {
    key: 'name',
    label: "Name",
    sortable: true
  },
  {
    key: "customer",
    label: "Kundennummer",
    sortable: true
  },
  {
    key: "notes",
    label: "Notizen",
    sortable: true
  }
]

const selectProject = (project) => {
  router.push(`/projects/${project.id} `)
}


//const projects = (await supabase.from("projects").select()).data
//const customers = (await supabase.from("customers").select()).data

const showCreateProject = ref(false)
const createProjectData = ref({
  phases: []
})

let selectedItem = ref({})

const selectItem = (item) => {
  selectedItem.value = item
  console.log(item)
}

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

  if(error) console.log(error)

  showCreateProject.value = false
  createProjectData.value = {phases: []}
  fetchProjects()


}

</script>

<style scoped>
/*#main {
  display: flex;
  flex-direction: row;
}
#left {
  width: 25vw;
}

#right {
  width: 60vw;
  padding-left: 3vw;
}*/
</style>