Added Frontend

frontend/components/EntityShowSubCreatedDocuments.vue

@@ -0,0 +1,314 @@
+<script setup>
+
+import dayjs from "dayjs";
+import {useSum} from "~/composables/useSum.js";
+defineShortcuts({
+  /*'/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  },*/
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/standardEntity/${props.topLevelType}/show/${props.item.createddocuments.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < props.item.createddocuments.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = props.item.createddocuments.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
+  }
+})
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+const router = useRouter()
+
+const createddocuments = ref([])
+
+const setup = async () => {
+  //createddocuments.value = (await useSupabaseSelect("createddocuments")).filter(i => !i.archived)
+  createddocuments.value = (await useEntities("createddocuments").select()).filter(i => !i.archived)
+}
+setup()
+
+const templateColumns = [
+  {
+    key: "reference",
+    label: "Referenz"
+
+
+  },
+  {
+    key: 'type',
+    label: "Typ"
+  },{
+    key: 'state',
+    label: "Status"
+  },{
+    key: 'paid',
+    label: "Bezahlt"
+  },{
+    key: 'amount',
+    label: "Betrag"
+  },
+  {
+    key: "date",
+    label: "Datum"
+  },
+  {
+    key: "dueDate",
+    label: "Fällig"
+  }
+]
+const selectedColumns = ref(tempStore.columns["createddocuments"] ? tempStore.columns["createddocuments"] : templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.find(i => i.key === column.key)))
+
+const selectedItem = ref(0)
+
+const getAvailableQueryStringData = (keys) => {
+  let returnString = props.queryStringData
+
+  function addParam (key,value) {
+    if(returnString.length  === 0) {
+      returnString += `${key}=${value}`
+    } else {
+      returnString += `&${key}=${value}`
+    }
+  }
+
+  if(keys) {
+    Object.keys(keys).forEach(key => {
+      addParam(key, keys[key])
+    })
+  }
+
+  return returnString
+
+}
+
+const invoiceDeliveryNotes = () => {
+  router.push(`/createDocument/edit?type=invoices&loadMode=deliveryNotes&linkedDocuments=[${props.item.createddocuments.filter(i => i.type === "deliveryNotes").map(i => i.id)}]`)
+}
+
+const showFinalInvoiceConfig = ref(false)
+const referenceDocument = ref(null)
+const advanceInvoicesToAdd = ref([])
+const invoiceAdvanceInvoices = () => {
+  router.push(`/createDocument/edit?type=invoices&loadMode=finalInvoice&linkedDocuments=[${[referenceDocument.value, ... advanceInvoicesToAdd.value]}]`)
+}
+
+const selectItem = (item) => {
+  console.log(item)
+
+  if(item.state === "Entwurf"){
+    router.push(`/createDocument/edit/${item.id}`)
+  } else if(item.state !== "Entwurf") {
+    router.push(`/createDocument/show/${item.id}`)
+  }
+}
+
+</script>
+
+<template>
+  <UCard class="mt-5" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Ausgangsbelege</span>
+    </template>
+    <Toolbar>
+      <!-- TODO Rendering when Screen is too small      -->
+      <UButton
+          @click="invoiceDeliveryNotes"
+          v-if="props.topLevelType === 'projects'"
+      >
+        Lieferscheine abrechnen
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'quotes'})}`)"
+      >
+        + Angebot
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
+      >
+        + Auftragsbestätigung
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'deliveryNotes'})}`)"
+      >
+        + Lieferschein
+      </UButton>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'advanceInvoices'})}`)"
+      >
+        + Abschlagsrechnung
+      </UButton>
+      <UButton
+          @click="showFinalInvoiceConfig = true"
+          v-if="props.topLevelType === 'projects'"
+          :disabled="!props.item.createddocuments?.filter(i => !i.archived && i.type === 'advanceInvoices').length > 0"
+      >
+        + Schlussrechnung
+      </UButton>
+      <UModal
+          prevent-close
+          v-model="showFinalInvoiceConfig"
+      >
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                Schlussrechnung konfigurieren
+              </h3>
+              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+            </div>
+          </template>
+
+          <UFormGroup
+              label="Rechnungsvorlage"
+          >
+            <USelectMenu
+                :options="props.item.createddocuments.filter(i => ['confirmationOrders','quotes'].includes(i.type))"
+                value-attribute="id"
+                option-attribute="documentNumber"
+                v-model="referenceDocument"
+            />
+          </UFormGroup>
+
+          <UFormGroup
+              label="Abschlagsrechnungen"
+          >
+            <USelectMenu
+                :options="props.item.createddocuments.filter(i => ['advanceInvoices'].includes(i.type))"
+                multiple
+                value-attribute="id"
+                option-attribute="documentNumber"
+                v-model="advanceInvoicesToAdd"
+            />
+          </UFormGroup>
+
+          <template #footer>
+            <UButton
+                @click="invoiceAdvanceInvoices"
+            >
+              Weiter
+            </UButton>
+          </template>
+        </UCard>
+      </UModal>
+      <UButton
+          @click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
+      >
+        + Rechnung
+      </UButton>
+
+      <template #right>
+        <USelectMenu
+            v-model="selectedColumns"
+            icon="i-heroicons-adjustments-horizontal-solid"
+            :options="templateColumns"
+            multiple
+            class="hidden lg:block"
+            by="key"
+            @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
+        >
+          <template #label>
+            Spalten
+          </template>
+        </USelectMenu>
+      </template>
+    </Toolbar>
+    <UTable
+        :rows="props.item.createddocuments.filter(i => !i.archived)"
+        :columns="columns"
+        class="w-full"
+        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+        @select="selectItem"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+        style="height: 70vh"
+    >
+      <template #type-data="{row}">
+        {{dataStore.documentTypesForCreation[row.type].labelSingle}}
+      </template>
+      <template #state-data="{row}">
+        <span
+            v-if="row.state === 'Entwurf'"
+            class="text-rose-500"
+        >
+          {{row.state}}
+        </span>
+        <span
+            v-if="row.state === 'Gebucht'"
+            class="text-cyan-500"
+        >
+          {{row.state}}
+        </span>
+        <span
+            v-if="row.state === 'Abgeschlossen'"
+            class="text-primary-500"
+        >
+          {{row.state}}
+        </span>
+      </template>
+      <template #paid-data="{row}">
+        <div v-if="(row.type === 'invoices' ||row.type === 'advanceInvoices') && row.state === 'Gebucht'">
+          <span v-if="useSum().getIsPaid(row,createddocuments)" class="text-primary-500">Bezahlt</span>
+          <span v-else class="text-rose-600">Offen</span>
+        </div>
+      </template>
+      <template #reference-data="{row}">
+        <span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
+        <span v-else>{{row.documentNumber}}</span>
+      </template>
+      <template #date-data="{row}">
+        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
+        <span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
+      </template>
+      <template #dueDate-data="{row}">
+        <span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
+      </template>
+      <template #amount-data="{row}">
+        <span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span>
+      </template>
+    </UTable>
+
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>