Added Statement Description to Allocations

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

@@ -144,6 +144,7 @@ const selectAccount = (id) => {
 const manualAllocationSum = ref(itemInfo.value.amount || 0)
 const allocationDescription = ref("")
 const showMoreWithoutRecipe = ref(false)
+const showMoreText = ref(false)
 
 const saveAllocation = async (allocation) => {
 
@@ -392,7 +393,15 @@ const archiveStatement = async () => {
             </tr>
             <tr>
               <td colspan="2">
-                {{itemInfo.text}}
+                <UButton
+                    class="mt-3"
+                    @click="showMoreText = !showMoreText"
+                    variant="outline"
+                >{{ showMoreText ? "Weniger anzeigen" : "Mehr anzeigen" }}</UButton>
+
+
+
+                <p>{{showMoreText ? itemInfo.text : itemInfo.text.substring(0,200)}}</p>
               </td>
             </tr>
             </tbody>
@@ -418,7 +427,7 @@ const archiveStatement = async () => {
       </div>
 
 
-      <div class="scrollList mt-3 px-2 pb-3" style="height: 45vh">
+      <div class="scrollList mt-3 px-2 pb-3" style="height: 35vh">
         <UDivider>Vorhandene Buchungen</UDivider>
 
         <UCard
@@ -431,11 +440,13 @@ const archiveStatement = async () => {
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
           <UButton
               icon="i-heroicons-x-mark"
               variant="outline"
               color="rose"
-              class="mr-3"
+              class="mr-3 mt-3"
               @click="removeAllocation(item.id)"
           />
         </UCard>
@@ -449,11 +460,13 @@ const archiveStatement = async () => {
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
           <UButton
               icon="i-heroicons-x-mark"
               variant="outline"
               color="rose"
-              class="mr-3"
+              class="mr-3 mt-3"
               @click="removeAllocation(item.id)"
           />
         </UCard>
@@ -467,11 +480,13 @@ const archiveStatement = async () => {
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
           <UButton
               icon="i-heroicons-x-mark"
               variant="outline"
               color="rose"
-              class="mr-3"
+              class="mr-3 mt-3"
               @click="removeAllocation(item.id)"
           />
         </UCard>
@@ -485,11 +500,13 @@ const archiveStatement = async () => {
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
           <UButton
               icon="i-heroicons-x-mark"
               variant="outline"
               color="rose"
-              class="mr-3"
+              class="mr-3 mt-3"
               @click="removeAllocation(item.id)"
           />
         </UCard>
@@ -503,11 +520,13 @@ const archiveStatement = async () => {
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
           <UButton
               icon="i-heroicons-x-mark"
               variant="outline"
               color="rose"
-              class="mr-3"
+              class="mr-3 mt-3"
               @click="removeAllocation(item.id)"
           />
         </UCard>
@@ -521,11 +540,13 @@ const archiveStatement = async () => {
               <span class="font-semibold text-nowrap">{{displayCurrency(item.amount)}}</span>
             </div>
           </template>
+          <p class="font-bold">Beschreibung:</p>
+          <p>{{item.description}}</p>
           <UButton
               icon="i-heroicons-x-mark"
               variant="outline"
               color="rose"
-              class="mr-3"
+              class="mr-3 mt-3"
               @click="removeAllocation(item.id)"
           />
         </UCard>