From c3fcb83da20c726e4bccf48954f231e80acf154e Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Fri, 14 Mar 2025 17:54:15 +0100
Subject: [PATCH] Added Remove Button to CostCentre in IncomingInvoices

---
 pages/incomingInvoices/create.vue    | 36 ++++++++++++++++++----------
 pages/incomingInvoices/edit/[id].vue | 35 +++++++++++++++++----------
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/pages/incomingInvoices/create.vue b/pages/incomingInvoices/create.vue
index d358a53..5ff217b 100644
--- a/pages/incomingInvoices/create.vue
+++ b/pages/incomingInvoices/create.vue
@@ -352,20 +352,30 @@ const createIncomingInvoice = async () => {
                 label="Kostenstelle"
                 class=" mb-3"
             >
-              <USelectMenu
-                  :options="dataStore.getCostCentresComposed"
-                  option-attribute="label"
-                  value-attribute="id"
-                  searchable
-                  :search-attributes="['label']"
-                  searchable-placeholder="Suche..."
-                  v-model="item.costCentre"
-              >
-                <template #label>
-                  {{dataStore.getCostCentresComposed.find(account => account.id === item.costCentre) ? dataStore.getCostCentresComposed.find(account => account.id === item.costCentre).label : "Keine Kostenstelle ausgewählt" }}
-                </template>
+              <InputGroup>
+                <USelectMenu
+                    :options="dataStore.getCostCentresComposed"
+                    option-attribute="label"
+                    value-attribute="id"
+                    searchable
+                    :search-attributes="['label']"
+                    searchable-placeholder="Suche..."
+                    v-model="item.costCentre"
+                >
+                  <template #label>
+                    {{dataStore.getCostCentresComposed.find(account => account.id === item.costCentre) ? dataStore.getCostCentresComposed.find(account => account.id === item.costCentre).label : "Keine Kostenstelle ausgewählt" }}
+                  </template>
+
+                </USelectMenu>
+                <UButton
+                    variant="outline"
+                    color="rose"
+                    v-if="item.costCentre"
+                    icon="i-heroicons-x-mark"
+                    @click="item.costCentre = null"
+                />
+              </InputGroup>
 
-              </USelectMenu>
             </UFormGroup>
 
 
diff --git a/pages/incomingInvoices/edit/[id].vue b/pages/incomingInvoices/edit/[id].vue
index b8a8205..b029af0 100644
--- a/pages/incomingInvoices/edit/[id].vue
+++ b/pages/incomingInvoices/edit/[id].vue
@@ -324,20 +324,29 @@ const updateIncomingInvoice = async () => {
                 label="Kostenstelle"
                 class=" mb-3"
             >
-              <USelectMenu
-                  :options="dataStore.getCostCentresComposed"
-                  option-attribute="label"
-                  value-attribute="id"
-                  searchable
-                  :search-attributes="['label']"
-                  searchable-placeholder="Suche..."
-                  v-model="item.costCentre"
-              >
-                <template #label>
-                  {{dataStore.getCostCentresComposed.find(account => account.id === item.costCentre) ? dataStore.getCostCentresComposed.find(account => account.id === item.costCentre).label : "Keine Kostenstelle ausgewählt" }}
-                </template>
+              <InputGroup>
+                <USelectMenu
+                    :options="dataStore.getCostCentresComposed"
+                    option-attribute="label"
+                    value-attribute="id"
+                    searchable
+                    :search-attributes="['label']"
+                    searchable-placeholder="Suche..."
+                    v-model="item.costCentre"
+                >
+                  <template #label>
+                    {{dataStore.getCostCentresComposed.find(account => account.id === item.costCentre) ? dataStore.getCostCentresComposed.find(account => account.id === item.costCentre).label : "Keine Kostenstelle ausgewählt" }}
+                  </template>
 
-              </USelectMenu>
+                </USelectMenu>
+                <UButton
+                    variant="outline"
+                    color="rose"
+                    v-if="item.costCentre"
+                    icon="i-heroicons-x-mark"
+                    @click="item.costCentre = null"
+                />
+              </InputGroup>
             </UFormGroup>