mareike/app/Domains/Invoice/Views/Partials/myInvoiceDetails/InvoiceDetails.vue

<script setup>

import FullScreenModal from "../../../../../Views/Components/FullScreenModal.vue";
import {ref} from "vue";
import Modal from "../../../../../Views/Components/Modal.vue";
import { useAjax } from "../../../../../../resources/js/components/ajaxHandler.js";
import ShowInvoicePartial from "./ShowInvoice.vue";
import Header from "./Header.vue";
import {toast} from "vue3-toastify";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }, showInvoice: Boolean
})
const showInvoice = ref(props.showInvoice)
const emit = defineEmits(["close"])
const denyInvoiceDialog = ref(false)
const { data, loading, error, request } = useAjax()
const modeShow = ref(true)
const costUnits = ref(null)
const newInvoice = ref(null)

async function acceptInvoice() {
    const data = await request("/api/v1/invoice/details/" + props.data.id + "/change-state/approved", {
        method: "POST",
    });

    if (data.status === 'success') {
        toast.success('Abrechnung wurde freigegeben.');
    } else {
        toast.error('Bei der Bearbeitung ist ein Fehler aufgetreten.');

    }

    close();
}


function close() {
    emit('reload')
    emit('close')
}

async function updateInvoice(formData) {
  const data = await request("/api/v1/invoice/details/" + props.data.id + "/update", {
    method: "POST",
    body: {
      invoiceData: formData
    }
  });

  if (!data.do_copy) {
    modeShow.value = true;
    toast.success('Die Koreektur der Abrechnung wurde gespeichert.');
    close();
  } else {
    modeShow.value = true;
    newInvoice.value = data.invoice;
    props.data.id = data.invoice.id;
      reloadInvoiceFixDialog()
  }
}

async function reloadInvoiceFixDialog() {
    const data = await request("api/v1/invoice/details/" + props.data.id, {
        method: "GET",
    });

    newInvoice.value = data.invoice;
    props.data.id = data.invoice.id;
    costUnits.value = data.costUnits;
    props.data.id = data.invoice.id;

    modeShow.value = false;
    toast.success('Die Abrechnung wurde gespeichert und eine neue Abrechnung wurde erstellt.');

}



async function  openInvoiceFixDialog() {
  const data = await request("/api/v1/invoice/details/" + props.data.id + "/copy", {
    method: "POST",
    body: {
    }
  });

  if (data.status === 'success') {
    costUnits.value = data.costUnits;
    newInvoice.value = data.invoice;
    props.data.id = data.invoice.id;
    modeShow.value = false;
  }
}


function openDenyInvoiceDialog() {
  denyInvoiceDialog.value = true;
}

async function rejectInvoice() {
    const data = await request("/api/v1/invoice/details/" + props.data.id + "/change-state/denied", {
        method: "POST",
        body: {
            reason: 'Von Antragssteller*in zurückgezogen'
        }
    });

    if (data.status === 'success') {
        toast.success('Abrechnung wurde zurückgezogen.');
    } else {
        toast.error('Bei der Bearbeitung ist ein Fehler aufgetreten.');

    }

    denyInvoiceDialog.value = false;
    close();
}

async function deleteInvoice() {
    const data = await request("/api/v1/invoice/details/" + props.data.id + "/change-state/deleted", {
        method: "POST",

    });

    if (data.status === 'success') {
        toast.success('Die Abrechnung wurde gelöscht.');
    } else {
        toast.error('Beim Bearbeiten ist ein Fehler aufgetreten.');
    }
    close();
}

</script>

<template>

  <FullScreenModal
      :show="showInvoice"
      title="Abrechnungsdetails"
      @close="emit('close')"
  >

  <Header :data="props.data"
          @reject="rejectInvoice"
          @delete="deleteInvoice"
          :modeShow="modeShow"
  />

    <ShowInvoicePartial :data="props.data" />

  </FullScreenModal>

  <Modal title="Abrechnung ablehnen" :show="denyInvoiceDialog" @close="denyInvoiceDialog = false" >
    Begründung:
    <textarea class="mareike-textarea" style="width: 100%; height: 100px; margin-top: 10px;" id="deny_invoice_reason" />
    <input type="button" class="mareike-button mareike-deny-invoice-button" value="Abrechnung ablehnen" @click="denyInvoice" />
  </Modal>

</template>

<style>
.mareike-deny-invoice-button {
  width: 150px !important;
  margin-top: 10px;
}

 #invoice_details_header{
   font-weight: bold;
   font-size: 12pt;
   line-height: 1.8em;
   width: 100%;

 }
 #invoice_details_header table {
   border-style: solid;
   border-width: 1px;
   border-radius: 10px !important;
   width: 98%;
   border-color: #c0c0c0;
   box-shadow: 5px 5px 10px #c0c0c0;
   margin-bottom: 75px;
   font-weight: normal;
 }
 #invoice_details_header table tr td:first-child {
   padding-right: 50px;
   width: 175px;
 }

 #invoice_details_header table tr td:nth-child(2) {
   padding-right: 25px;
 }

 #invoice_details_header table tr td:nth-child(3) {
   padding-right: 50px;
   width: 100px;
   vertical-align: top;
 }

 #invoice_details_body {
   height: 400px;
   overflow: auto;

 }


 #invoice_details_body table tr:nth-child(1) td,
 #invoice_details_body table tr:nth-child(2) td,
 #invoice_details_body table tr:nth-child(3) td,
 #invoice_details_body table tr:nth-child(4) td,
 #invoice_details_body table tr:nth-child(6) td{
   vertical-align: top;
   height: 20px;
 }

 #invoice_details_body table tr:nth-child(5) td {
   height: 50px;
 }


 #invoice_details_body table {
   width: 100%;

 }

 #invoice_details_body table tr:nth-child(1) td:first-child {
   padding-right: 50px;

 }

 #invoice_details_body table tr:nth-child(1) td:nth-child(2),
 #invoice_details_body table tr:nth-child(1) td:nth-child(3)
 {
   width: 250px;

 }

 .mareike-accept-button {
   background-color: #36c054 !important;
   color: #ffffff !important;
 }

 .mareike-deny-button {
   background-color: #ee4b5c !important;
   color: #ffffff !important;
 }

 .mareike-fix-button {
   background-color: #d3d669 !important;
   color: #67683c !important;
 }

 .mareike-button {
   padding: 5px 25px !important;
   font-size: 11pt !important;
   margin-bottom: 10px;
   width: 100%;
   padding-right: 2px;
 }


</style>