FEDEO/spaces/components/DocumentDisplay.vue

<script setup>

const toast = useToast()
const supabase = useSupabaseClient()
const dataStore = useDataStore()
const router = useRouter()
const props = defineProps({
  document: {
    type: Object,
    required: true
  },
  openShowModal: {
    type: Boolean,
    required: false,
  }
})

const {document, openShowModal:openShowModalProp } = props;
const tags = dataStore.getDocumentTags
const openShowModal = ref(false)

//Functions
const openDocument = async () => {
  console.log("open")
  //selectedDocument.value = doc
  openShowModal.value = true
}

const updateDocument = async () => {

  const {url, ...objData} = document
  delete objData.url

  const {data,error} = await supabase
      .from("documents")
      .update(objData)
      .eq('id',objData.id)
      .select()

  if(error) {
    console.log(error)
  } else {
    toast.add({title: "Dokument aktualisiert"})
    dataStore.fetchDocuments()
    openShowModal.value = false
  }

}

const createVendorInvoice = async () => {
  const {data:vendorInvoiceData,error:vendorInvoiceError} = await supabase
      .from("incomingInvoices")
      .insert([{
        document: document.id,
      }])
      .select()
  if(vendorInvoiceError) {
    console.log(vendorInvoiceError)
  } else if(vendorInvoiceData) {

    const {data:documentData,error:documentError} = await supabase
        .from("documents")
        .update({
          vendorInvoice: vendorInvoiceData[0].id
        })
        .eq('id',document.id)
        .select()

    if(documentError) {
      console.log(documentError)
    } else {
      toast.add({title: "Dokument aktualisiert"})
      dataStore.fetchDocuments()
      openShowModal.value = false
    }




    dataStore.fetchIncomingInvoices()
    await router.push("/incominginvoices")
  }

}


const archiveDocument = () => {
  document.tags = ["Archiviert"]
  updateDocument()
}

</script>

<template>
  <div class="documentListItem">
    <object
        :data="document.url"
        class="previewEmbed"
        type="application/pdf"
    />
    <UButton
        @click="openDocument"
        class="mt-3"
    >
      <UIcon name="i-heroicons-eye-solid" />
    </UButton>
    <UToggle
        v-model="document.selected"
        class="ml-2"
    />
    <br>
    <UBadge
      v-if="document.vendorInvoice"
    >{{dataStore.incomingInvoices.find(item => item.id === document.vendorInvoice) ? dataStore.incomingInvoices.find(item => item.id === document.vendorInvoice).reference : ''}}</UBadge>
    <UBadge
      v-if="document.inDatev"
    >DATEV</UBadge>
  </div>



  <!-- Slideovers  -->

  <USlideover
      v-model="openShowModal"
      fullscreen
  >
    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
      <template #header>
        <div class="flex items-center gap-2">
          <UBadge
              v-for="tag in document.tags"
          >
            {{tag}}
          </UBadge>
        </div>
      </template>

      <UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
        <object
            class="h-full w-full"
            :data="document.url"
            type="application/pdf"
        />
      </UContainer>

      <template #footer>
        <UButtonGroup>
          <UButton
            @click="archiveDocument"
          >
            Archivieren
          </UButton>
          <UButton
              v-if="document.tags.includes('Eingangsrechnung')"
              @click="createVendorInvoice"
          >
            Eingangsrechnung erstellen
          </UButton>
        </UButtonGroup>


        <UFormGroup
          label="Tags ändern:"
        >
          <USelectMenu
              :options="tags"
              v-model="document.tags"
              @close="updateDocument"
              multiple
          >
            <template #label>
              {{document.tags.length}} ausgewählt
            </template>
          </USelectMenu>
        </UFormGroup>

        <UFormGroup
            label="Projekt zuweisen:"
        >
          <USelectMenu
              :options="dataStore.projects"
              option-attribute="name"
              value-attribute="id"
              v-model="document.project"
              @change="updateDocument"
              searchable
              :search-attributes="['name']"
          >
            <template #label>
              {{dataStore.projects.find(item => item.id === document.project) ? dataStore.projects.find(item => item.id === document.project).name : "Kein Projekt ausgewählt" }}
            </template>
          </USelectMenu>
        </UFormGroup>

        <UFormGroup
            label="Kunde zuweisen:"
        >
          <USelectMenu
              :options="dataStore.customers"
              option-attribute="name"
              value-attribute="id"
              v-model="document.customer"
              @change="updateDocument"
              searchable
              :search-attributes="['name']"
          >
            <template #label>
              {{dataStore.customers.find(item => item.id === document.customer) ? dataStore.customers.find(item => item.id === document.customer).name : "Kein Kunde ausgewählt" }}
            </template>
          </USelectMenu>
        </UFormGroup>


      </template>
    </UCard>


<!--    <UCard class="h-full">












    </UCard>-->
  </USlideover>
</template>

<style scoped>
.documentListItem {
  display:block;
  width: 15vw;
  height: 33vh;
  padding:1em;
  margin: 0.7em;
  border: 1px solid lightgrey;
  border-radius: 15px;
}

.documentListItem:hover {
  border: 1px solid #69c350;
  cursor: pointer;
}

.previewEmbed {
  width: 100%;
  height: 22vh;
  overflow: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.previewEmbed::-webkit-scrollbar {
  display: none;
}

</style>