Added ArchiveButton.vue

components/ArchiveButton.vue

@@ -0,0 +1,74 @@
+<script setup>
+const emit = defineEmits(['confirmed'])
+
+const props = defineProps({
+  color: {
+    type: String,
+    required:false
+  },
+  variant: {
+    type: String,
+    required:false
+  },
+  type: {
+    type: String,
+    required:false
+  }
+
+})
+
+const {color,variant, type} = props
+
+const dataStore = useDataStore()
+const dataType = dataStore.dataTypes[type]
+
+const showModal = ref(false)
+
+const emitConfirm = () => {
+  showModal.value = false
+  emit('confirmed')
+}
+</script>
+
+<template>
+  <UButton
+    :color="color"
+    :variant="variant"
+    @click="showModal = true"
+  >
+    Archivieren
+  </UButton>
+  <UModal v-model="showModal">
+    <UCard>
+      <template #header>
+        <span class="text-md font-bold">Archivieren bestätigen</span>
+      </template>
+      Möchten Sie diese/-s/-n {{dataType.labelSingle}} wirklich archivieren?
+
+      <template #footer>
+        <div class="text-right">
+          <UButtonGroup>
+            <UButton
+                variant="outline"
+                @click="showModal = false"
+            >
+              Abbrechen
+            </UButton>
+            <UButton
+                @click="emitConfirm"
+                class="ml-2"
+                color="rose"
+            >
+              Archivieren
+            </UButton>
+          </UButtonGroup>
+
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>

components/DocumentDisplayModal.vue

@@ -188,19 +188,12 @@ const moveFile = async () => {
         </div>
         <div class="w-2/3 p-5">
           <UButtonGroup>
-            <ButtonWithConfirm
+            <ArchiveButton
                 color="rose"
                 variant="outline"
+                type="files"
                 @confirmed="archiveDocument"
-            >
+            />
-              <template #button>
-                Archivieren
-              </template>
-              <template #header>
-                <span class="text-md text-black font-bold">Archivieren bestätigen</span>
-              </template>
-              Möchten Sie die Datei wirklich archivieren?
-            </ButtonWithConfirm>
 
             <UButton
                 :to="props.documentData.url"

components/EntityEdit.vue

@@ -254,20 +254,13 @@ const updateItem = async () => {
       >{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
     </template>
     <template #right>
-      <ButtonWithConfirm
+      <ArchiveButton
-          v-if="platform !== 'mobile'"
           color="rose"
+          v-if="platform !== 'mobile'"
           variant="outline"
-          @confirmed="dataStore.updateItem(type,{...item,archived: true}, oldItem)"
+          :type="type"
-      >
+          @confirmed="useEntities(type).archive(item.id)"
-        <template #button>
+      />
-          Archivieren
-        </template>
-        <template #header>
-          <span class="text-md text-black dark:text-white font-bold">Archivieren bestätigen</span>
-        </template>
-        Möchten Sie das {{dataType.labelSingle}} {{item[dataType.templateColumns.find(i => i.title).key]}} wirklich archivieren?
-      </ButtonWithConfirm>
       <UButton
           v-if="item.id"
           @click="updateItem"

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

@@ -254,19 +254,12 @@ const archiveStatement = async () => {
       </UBadge>
     </template>
     <template #right>
-      <ButtonWithConfirm
+      <ArchiveButton
           color="rose"
           variant="outline"
+          type="bankstatements"
           @confirmed="archiveStatement"
-      >
+      />
-        <template #button>
-          Archivieren
-        </template>
-        <template #header>
-          <span class="text-md text-black font-bold">Archivieren bestätigen</span>
-        </template>
-        Möchten Sie die Kontobewegung wirklich archivieren?
-      </ButtonWithConfirm>
     </template>
   </UDashboardNavbar>
 

pages/createDocument/edit/[[id]].vue

@@ -1523,21 +1523,14 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
       </UButton>
     </template>
     <template #right>
-      <ButtonWithConfirm
+      <ArchiveButton
-          v-if="itemInfo.state === 'Entwurf' || itemInfo.type === 'serialInvoices'"
           color="rose"
+          type="createddocuments"
+          v-if="itemInfo.state === 'Entwurf' || itemInfo.type === 'serialInvoices'"
           variant="outline"
           @confirmed="useEntities('createddocuments').update(itemInfo.id,{archived: true}),
                       router.push('/')"
-      >
+      />
-        <template #button>
-          Archivieren
-        </template>
-        <template #header>
-          <span class="text-md dark:text-whitetext-black font-bold">Archivieren bestätigen</span>
-        </template>
-        Möchten Sie diesen Ausgangsbeleg wirklich archivieren?
-      </ButtonWithConfirm>
       <UButton
           icon="i-mdi-content-save"
           @click="saveDocument('Entwurf',true)"

pages/incomingInvoices/edit/[id].vue

@@ -170,19 +170,12 @@ const findIncomingInvoiceErrors = computed(() => {
 <template>
   <UDashboardNavbar :title="'Eingangsbeleg erstellen'">
     <template #right>
-      <ButtonWithConfirm
+      <ArchiveButton
           color="rose"
           variant="outline"
+          type="incominginvoices"
           @confirmed="useEntities('incominginvoices').archive(route.params.id)"
-      >
+      />
-        <template #button>
-          Archivieren
-        </template>
-        <template #header>
-          <span class="text-md text-black font-bold">Archivieren bestätigen</span>
-        </template>
-        Möchten Sie den Eingangsbeleg wirklich archivieren?
-      </ButtonWithConfirm>
       <UButton
           @click="updateIncomingInvoice(false)"
       >