Added Ability to Book to Customers and Vendors

pages/banking/statements/[mode]/[[id]].vue

@@ -28,6 +28,9 @@ const allocatedDocuments = ref([])
 const openIncomingInvoices = ref([])
 const allocatedIncomingInvoices = ref([])
 
+const customers = ref([])
+const vendors = ref([])
+
 const createddocuments = ref([])
 
 const accounts = ref([])
@@ -48,6 +51,8 @@ const setup = async () => {
 
   accounts.value = (await supabase.from("accounts").select()).data
   ownaccounts.value = (await supabase.from("ownaccounts").select()).data
+  customers.value = (await supabase.from("customers").select()).data
+  vendors.value = (await supabase.from("vendors").select()).data
 
   openDocuments.value = documents.filter(i => i.statementallocations.reduce((n,{amount}) => n + amount, 0).toFixed(2) !== useSum().getCreatedDocumentSum(i,createddocuments.value).toFixed(2))
   openDocuments.value = openDocuments.value.map(i => {
@@ -121,6 +126,8 @@ const saveAllocations = async () =>  {
 const showAccountSelection = ref(false)
 const accountToSave = ref("")
 const ownAccountToSave = ref("")
+const customerAccountToSave = ref("")
+const vendorAccountToSave = ref("")
 
 const selectAccount = (id) => {
   accountToSave.value = id
@@ -129,6 +136,7 @@ const selectAccount = (id) => {
 
 
 const manualAllocationSum = ref(itemInfo.value.amount || 0)
+const allocationDescription = ref("")
 
 const saveAllocation = async (allocation) => {
 
@@ -397,6 +405,42 @@ setup()
               @click="removeAllocation(item.id)"
           />
         </UCard>
+        <UCard
+            class="mt-5"
+            v-for="item in itemInfo.statementallocations.filter(i => i.customer)"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{customers.find(i => i.id === item.customer).customerNumber}} - {{customers.find(i => i.id === item.customer).name}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+            </div>
+          </template>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3"
+              @click="removeAllocation(item.id)"
+          />
+        </UCard>
+        <UCard
+            class="mt-5"
+            v-for="item in itemInfo.statementallocations.filter(i => i.vendor)"
+        >
+          <template #header>
+            <div class="flex flex-row justify-between">
+              <span>{{vendors.find(i => i.id === item.vendor).vendorNumber}} - {{vendors.find(i => i.id === item.vendor).name}}</span>
+              <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
+            </div>
+          </template>
+          <UButton
+              icon="i-heroicons-x-mark"
+              variant="outline"
+              color="rose"
+              class="mr-3"
+              @click="removeAllocation(item.id)"
+          />
+        </UCard>
         <UCard
             class="mt-5"
             :ui="{ring: itemInfo.statementallocations.find(i => i.cd_id === item.cd_id) ? 'ring-primary-500' : 'ring-gray-200 dark:ring-gray-800'}"
@@ -451,7 +495,7 @@ setup()
               variant="outline"
               class="mr-3"
               v-if="!itemInfo.statementallocations.find(i => i.ii_id === invoice.id)"
-              @click="saveAllocation({ii_id: document.id, bs_id: itemInfo.id, amount: Number(getInvoiceSum(invoice))})"
+              @click="saveAllocation({ii_id: document.id, bs_id: itemInfo.id, amount: Number(getInvoiceSum(invoice)), description: allocationDescription})"
           />
           <UButton
               icon="i-heroicons-x-mark"
@@ -473,17 +517,30 @@ setup()
 
     <div class="w-2/5 mx-auto">
       <div class="px-2">
-        <UDivider class="my-3">Buchungssumme</UDivider>
+        <UDivider class="mt-3">Buchungsdaten</UDivider>
-
+        <UFormGroup
-        <UInput
+            label="Summe:"
-            v-model="manualAllocationSum"
-            type="number"
-            step="0.01"
         >
-          <template #trailing>
+          <UInput
-            <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+              v-model="manualAllocationSum"
-          </template>
+              type="number"
-        </UInput>
+              step="0.01"
+          >
+            <template #trailing>
+              <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+            </template>
+          </UInput>
+        </UFormGroup>
+        <UFormGroup
+            label="Beschreibung:"
+            class="mt-3"
+        >
+          <UTextarea
+              v-model="allocationDescription"
+              rows="5"
+          />
+        </UFormGroup>
+
 
         <UDivider class="my-3">Ohne Beleg buchen</UDivider>
 
@@ -519,7 +576,7 @@ setup()
                 variant="outline"
                 icon="i-heroicons-check"
                 :disabled="!accountToSave"
-                @click="saveAllocation({bs_id: itemInfo.id, amount: manualAllocationSum, account: accountToSave })"
+                @click="saveAllocation({bs_id: itemInfo.id, amount: manualAllocationSum, account: accountToSave, description: allocationDescription })"
             />
             <UButton
                 @click="accountToSave = ''"
@@ -579,7 +636,7 @@ setup()
                 variant="outline"
                 icon="i-heroicons-check"
                 :disabled="!ownAccountToSave"
-                @click="saveAllocation({bs_id: itemInfo.id, amount: manualAllocationSum, ownaccount: ownAccountToSave })"
+                @click="saveAllocation({bs_id: itemInfo.id, amount: manualAllocationSum, ownaccount: ownAccountToSave, description: allocationDescription })"
             />
             <UButton
                 @click="accountToSave = ''"
@@ -589,6 +646,80 @@ setup()
             />
           </InputGroup>
         </UFormGroup>
+        <UFormGroup
+          label="Kunden"
+          class="mt-3"
+        >
+          <InputGroup class="w-full">
+            <USelectMenu
+                class="w-full"
+                :options="customers"
+                value-attribute="id"
+                option-attribute="label"
+                :ui-menu="{ width: 'min-w-max' }"
+                v-model="customerAccountToSave"
+                searchable
+                :search-attributes="['number','label']"
+            >
+              <template #label>
+                <span v-if="customerAccountToSave">{{customers.find(i => i.id === customerAccountToSave).customerNumber}} - {{customers.find(i => i.id === customerAccountToSave).name}}</span>
+                <span v-else>Kein Konto ausgewählt</span>
+              </template>
+              <template #option="{option}">
+                {{option.customerNumber}} - {{option.name}}
+              </template>
+            </USelectMenu>
+            <UButton
+                variant="outline"
+                icon="i-heroicons-check"
+                :disabled="!customerAccountToSave"
+                @click="saveAllocation({bs_id: itemInfo.id, amount: manualAllocationSum, customer: customerAccountToSave, description: allocationDescription })"
+            />
+            <UButton
+                @click="customerAccountToSave = ''"
+                icon="i-heroicons-x-mark"
+                variant="outline"
+                color="rose"
+            />
+          </InputGroup>
+        </UFormGroup>
+        <UFormGroup
+          label="Lieferanten"
+          class="mt-3"
+        >
+          <InputGroup class="w-full">
+            <USelectMenu
+                class="w-full"
+                :options="vendors"
+                value-attribute="id"
+                option-attribute="label"
+                :ui-menu="{ width: 'min-w-max' }"
+                v-model="vendorAccountToSave"
+                searchable
+                :search-attributes="['number','name']"
+            >
+              <template #label>
+                <span v-if="vendorAccountToSave">{{vendors.find(i => i.id === vendorAccountToSave).vendorNumber}} - {{vendors.find(i => i.id === vendorAccountToSave).name}}</span>
+                <span v-else>Kein Konto ausgewählt</span>
+              </template>
+              <template #option="{option}">
+                {{option.vendorNumber}} - {{option.name}}
+              </template>
+            </USelectMenu>
+            <UButton
+                variant="outline"
+                icon="i-heroicons-check"
+                :disabled="!vendorAccountToSave"
+                @click="saveAllocation({bs_id: itemInfo.id, amount: manualAllocationSum, vendor: vendorAccountToSave, description: allocationDescription })"
+            />
+            <UButton
+                @click="vendorAccountToSave = ''"
+                icon="i-heroicons-x-mark"
+                variant="outline"
+                color="rose"
+            />
+          </InputGroup>
+        </UFormGroup>
 
 
 
@@ -639,7 +770,7 @@ setup()
               variant="outline"
               class="mr-3"
               v-if="!itemInfo.statementallocations.find(i => i.cd_id === document.id)"
-              @click="saveAllocation({cd_id: document.id, bs_id: itemInfo.id, amount: Number(document.openSum < maunualAllocationSum ? document.openSum : manualAllocationSum)})"
+              @click="saveAllocation({cd_id: document.id, bs_id: itemInfo.id, amount: Number(document.openSum < maunualAllocationSum ? document.openSum : manualAllocationSum), description: allocationDescription})"
           />
 
           <UButton
@@ -664,7 +795,7 @@ setup()
               variant="outline"
               class="mr-3"
               v-if="!itemInfo.statementallocations.find(i => i.ii_id === item.id)"
-              @click="saveAllocation({ii_id: item.id, bs_id: itemInfo.id, amount: Number(getInvoiceSum(item))})"
+              @click="saveAllocation({ii_id: item.id, bs_id: itemInfo.id, amount: Number(getInvoiceSum(item)), description: allocationDescription})"
           />
           <UButton
               variant="outline"