feat(dump): add download functionality for dumps and improve UI interactions

2026-09-14 23:54:57 +02:00
1 parent 29abb1cd59
commit 2683792fee
@@ -4,6 +4,7 @@
        <sw-button
            v-if="acl.can('aeon_dump_manager.creator')"
            variant="primary"
+            :is-loading="pendingJob !== null"
            :disabled="pendingJob !== null"
            @click="onCreate"
        >
@@ -12,54 +13,99 @@
    </template>

    <template #content>
-        <sw-card-view>
-            <sw-card>
-                <sw-data-grid
-                    :data-source="dumps"
-                    :columns="columns"
-                    :is-loading="isLoading"
-                    :show-selection="false"
-                    identifier="filename"
-                >
-                    <template #before-item-list>
-                        <tr v-if="pendingJob !== null" class="aeon-dump-manager-list__pending-row">
-                            <td colspan="3">
-                                <span>{{ $tc('aeon-dump-manager.list.creating') }}</span>
-                                <sw-progress-bar :max-value="100" :value="pendingJob.percent || 0" />
-                            </td>
-                        </tr>
-                    </template>
+        <div class="aeon-dump-manager-list__content">
+            <sw-data-grid
+                :data-source="dumps"
+                :columns="columns"
+                :is-loading="isLoading"
+                :show-selection="acl.can('aeon_dump_manager.deleter')"
+                :full-page="true"
+                identifier="filename"
+                @selection-change="onSelectionChange"
+            >
+                <template #bulk>
+                    <a
+                        v-if="acl.can('aeon_dump_manager.deleter')"
+                        class="link link-danger aeon-dump-manager-list__bulk-delete"
+                        role="button"
+                        tabindex="0"
+                        @click="onRequestBulkDelete"
+                        @keydown.enter="onRequestBulkDelete"
+                    >
+                        {{ $tc('aeon-dump-manager.list.bulkDeleteButton', 0, { count: selectionCount }) }}
+                    </a>
+                </template>

-                    <template #column-datetime="{ item }">
-                        {{ formatDatetime(item.datetime) }}
-                    </template>
+                <template #column-datetime="{ item }">
+                    {{ formatDatetime(item.datetime) }}
+                </template>

-                    <template #column-sizeBytes="{ item }">
-                        {{ formatSize(item.sizeBytes) }}
-                    </template>
+                <template #column-sizeBytes="{ item }">
+                    {{ formatSize(item.sizeBytes) }}
+                </template>

-                    <template #actions="{ item }">
-                        <sw-context-menu-item
-                            v-if="acl.can('aeon_dump_manager.deleter')"
-                            variant="danger"
-                            @click="onRequestDelete(item.filename)"
-                        >
-                            {{ $tc('aeon-dump-manager.list.buttonDelete') }}
-                        </sw-context-menu-item>
-                    </template>
+                <template #actions="{ item }">
+                    <sw-context-menu-item
+                        v-if="acl.can('aeon_dump_manager.viewer')"
+                        @click="onDownload(item.filename)"
+                    >
+                        {{ $tc('aeon-dump-manager.list.buttonDownload') }}
+                    </sw-context-menu-item>
+                    <sw-context-menu-item
+                        v-if="acl.can('aeon_dump_manager.deleter')"
+                        variant="danger"
+                        @click="onRequestDelete(item.filename)"
+                    >
+                        {{ $tc('aeon-dump-manager.list.buttonDelete') }}
+                    </sw-context-menu-item>
+                </template>

-                    <template #empty-state>
-                        {{ $tc('aeon-dump-manager.list.empty') }}
-                    </template>
-                </sw-data-grid>
-            </sw-card>
-        </sw-card-view>
+                <template #empty-state>
+                    {{ $tc('aeon-dump-manager.list.empty') }}
+                </template>
+            </sw-data-grid>
+        </div>
    </template>

+    {% block aeon_dump_manager_list_progress_modal %}
+    <sw-modal
+        v-if="pendingJob !== null"
+        :title="$tc('aeon-dump-manager.list.progressTitle')"
+        variant="small"
+        class="aeon-dump-manager-list__progress-modal"
+        @modal-close="onCloseProgressModal"
+    >
+        <div class="aeon-dump-manager-list__progress-wrapper">
+            <template v-if="pendingJob.status === 'done'">
+                <sw-alert variant="success">
+                    {{ $tc('aeon-dump-manager.list.createSuccess') }}
+                </sw-alert>
+            </template>
+            <template v-else-if="pendingJob.status === 'failed'">
+                <sw-alert variant="error">
+                    {{ $tc('aeon-dump-manager.list.createFailed', 0, { error: pendingJob.errorMessage || '' }) }}
+                </sw-alert>
+            </template>
+            <template v-else>
+                <sw-progress-bar
+                    :value="pendingJob.percent || 0"
+                    :max-value="100"
+                />
+                <span class="aeon-dump-manager-list__progress-text">
+                    {{ $tc('aeon-dump-manager.list.progressText') }}
+                </span>
+            </template>
+        </div>
+    </sw-modal>
+    {% endblock %}
+
    <sw-confirm-modal
-        v-if="deleteFilename !== null"
+        v-if="deleteFilenames !== null"
        :title="$tc('aeon-dump-manager.list.confirmDeleteTitle')"
-        :text="$tc('aeon-dump-manager.list.confirmDeleteText', 0, { filename: deleteFilename })"
+        :text="deleteFilenames.length > 1
+            ? $tc('aeon-dump-manager.list.confirmDeleteTextMultiple', 0, { count: deleteFilenames.length })
+            : $tc('aeon-dump-manager.list.confirmDeleteText', 0, { filename: deleteFilenames[0] })"
+        type="delete"
        @confirm="onConfirmDelete"
        @cancel="onCancelDelete"
        @close="onCancelDelete"
@@ -1,7 +1,7 @@
 import template from './aeon-dump-manager-list.html.twig';
 import type DumpApiService, { DumpFile, DumpJob } from '../../../../service/dump-api.service';

-const { Component } = Shopware;
+const { Component, Mixin } = Shopware;

 interface PendingJob {
    status: string;
@@ -9,11 +9,14 @@ interface PendingJob {
    errorMessage?: string | null;
 }

+const CREATE_MODAL_AUTO_CLOSE_MS = 1500;
+
 interface ComponentData {
    dumps: DumpFile[];
    isLoading: boolean;
    pendingJob: PendingJob | null;
-    deleteFilename: string | null;
+    deleteFilenames: string[] | null;
+    selection: Record<string, DumpFile>;
    pollTimer: number | null;
 }

@@ -25,11 +28,15 @@ interface ComponentInstance extends ComponentData {
    loadList: () => Promise<void>;
    stopPolling: () => void;
    pollJobStatus: (jobId: string) => void;
+    selectionCount: number;
 }

 Component.register('aeon-dump-manager-list', {
    template,

+    // Provides createNotificationSuccess/createNotificationError, used below.
+    mixins: [Mixin.getByName('notification')],
+
    inject: ['aeonDumpManagerApiService', 'acl'],

    data(): ComponentData {
@@ -37,7 +44,8 @@ Component.register('aeon-dump-manager-list', {
            dumps: [],
            isLoading: false,
            pendingJob: null,
-            deleteFilename: null,
+            deleteFilenames: null,
+            selection: {},
            pollTimer: null,
        };
    },
@@ -63,6 +71,10 @@ Component.register('aeon-dump-manager-list', {
                },
            ];
        },
+
+        selectionCount(this: ComponentInstance): number {
+            return Object.keys(this.selection).length;
+        },
    },

    created(this: ComponentInstance) {
@@ -94,6 +106,10 @@ Component.register('aeon-dump-manager-list', {
            return Shopware.Utils.format.fileSize(bytes);
        },

+        onSelectionChange(this: ComponentInstance, selection: Record<string, DumpFile>) {
+            this.selection = selection;
+        },
+
        onCreate(this: ComponentInstance) {
            this.pendingJob = { percent: 0, status: 'pending' };

@@ -102,10 +118,9 @@ Component.register('aeon-dump-manager-list', {
                    this.pollJobStatus(response.jobId);
                })
                .catch((error: Error) => {
-                    this.pendingJob = null;
-                    this.createNotificationError({
-                        message: this.$tc('aeon-dump-manager.list.createFailed', 0, { error: error.message }),
-                    });
+                    // Shown in the progress modal itself, not a notification —
+                    // stays open so the user can actually read what went wrong.
+                    this.pendingJob = { status: 'failed', percent: null, errorMessage: error.message };
                });
        },

@@ -114,24 +129,20 @@ Component.register('aeon-dump-manager-list', {

            this.pollTimer = window.setInterval(() => {
                this.aeonDumpManagerApiService.getJobStatus(jobId).then((job: DumpJob) => {
+                    this.pendingJob = job;
+
                    if (job.status === 'done') {
                        this.stopPolling();
-                        this.pendingJob = null;
-                        this.createNotificationSuccess({ message: this.$tc('aeon-dump-manager.list.createSuccess') });
                        this.loadList();
+                        window.setTimeout(() => {
+                            this.pendingJob = null;
+                        }, CREATE_MODAL_AUTO_CLOSE_MS);
                        return;
                    }

                    if (job.status === 'failed') {
                        this.stopPolling();
-                        this.pendingJob = null;
-                        this.createNotificationError({
-                            message: this.$tc('aeon-dump-manager.list.createFailed', 0, { error: job.errorMessage ?? '' }),
-                        });
-                        return;
                    }
-
-                    this.pendingJob = job;
                });
            }, 2000);
        },
@@ -143,20 +154,62 @@ Component.register('aeon-dump-manager-list', {
            }
        },

+        onCloseProgressModal(this: ComponentInstance) {
+            this.stopPolling();
+            this.pendingJob = null;
+        },
+
+        onDownload(this: ComponentInstance, filename: string) {
+            this.aeonDumpManagerApiService.download(filename)
+                .then((blob) => {
+                    const url = window.URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    link.href = url;
+                    link.download = filename;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    window.URL.revokeObjectURL(url);
+                })
+                .catch((error: Error) => {
+                    this.createNotificationError({
+                        message: this.$tc('aeon-dump-manager.list.downloadFailed', 0, { error: error.message }),
+                    });
+                });
+        },
+
        onRequestDelete(this: ComponentInstance, filename: string) {
-            this.deleteFilename = filename;
+            this.deleteFilenames = [filename];
+        },
+
+        onRequestBulkDelete(this: ComponentInstance) {
+            this.deleteFilenames = Object.keys(this.selection);
        },

        onCancelDelete(this: ComponentInstance) {
-            this.deleteFilename = null;
+            this.deleteFilenames = null;
        },

        onConfirmDelete(this: ComponentInstance): Promise<void> {
-            const filename = this.deleteFilename as string;
-            this.deleteFilename = null;
+            const filenames = this.deleteFilenames as string[];
+            this.deleteFilenames = null;

-            return this.aeonDumpManagerApiService.remove(filename)
-                .then(() => this.loadList());
+            // Optimistic UI update: pull the rows out immediately rather than
+            // waiting on a full reload, so the grid never looks stale even if
+            // loadList() is slow or a later delete in the batch fails.
+            this.dumps = this.dumps.filter((dumpFile) => !filenames.includes(dumpFile.filename));
+            this.selection = {};
+
+            return Promise.all(filenames.map((filename) => this.aeonDumpManagerApiService.remove(filename)))
+                .then(() => this.loadList())
+                .catch((error: Error) => {
+                    this.createNotificationError({
+                        message: this.$tc('aeon-dump-manager.list.deleteFailed', 0, { error: error.message }),
+                    });
+                    // A delete failed after the optimistic removal — reload to
+                    // show the real state rather than leave a wrong guess on screen.
+                    return this.loadList();
+                });
        },
    },
 });
@@ -9,13 +9,19 @@
            "columnDatetime": "Erstellt am",
            "columnSize": "Größe",
            "buttonCreate": "Dump erstellen",
+            "buttonDownload": "Herunterladen",
            "buttonDelete": "Löschen",
+            "bulkDeleteButton": "Auswahl löschen ({count})",
            "confirmDeleteTitle": "Dump löschen?",
            "confirmDeleteText": "Möchten Sie \"{filename}\" wirklich löschen? Dies kann nicht rückgängig gemacht werden.",
+            "confirmDeleteTextMultiple": "Möchten Sie {count} Dumps wirklich löschen? Dies kann nicht rückgängig gemacht werden.",
            "empty": "Keine Dumps gefunden.",
-            "creating": "Dump wird erstellt…",
+            "progressTitle": "Dump wird erstellt",
+            "progressText": "Dump wird erstellt…",
            "createFailed": "Dump konnte nicht erstellt werden: {error}",
-            "createSuccess": "Dump erstellt."
+            "createSuccess": "Dump erstellt.",
+            "deleteFailed": "Dump konnte nicht gelöscht werden: {error}",
+            "downloadFailed": "Dump konnte nicht heruntergeladen werden: {error}"
        }
    }
 }
@@ -9,13 +9,19 @@
            "columnDatetime": "Created at",
            "columnSize": "Size",
            "buttonCreate": "Create dump",
+            "buttonDownload": "Download",
            "buttonDelete": "Delete",
+            "bulkDeleteButton": "Delete selected ({count})",
            "confirmDeleteTitle": "Delete dump?",
            "confirmDeleteText": "Are you sure you want to delete \"{filename}\"? This cannot be undone.",
+            "confirmDeleteTextMultiple": "Are you sure you want to delete {count} dumps? This cannot be undone.",
            "empty": "No dumps found.",
-            "creating": "Creating dump…",
+            "progressTitle": "Creating dump",
+            "progressText": "Creating dump…",
            "createFailed": "Could not create dump: {error}",
-            "createSuccess": "Dump created."
+            "createSuccess": "Dump created.",
+            "deleteFailed": "Could not delete dump: {error}",
+            "downloadFailed": "Could not download dump: {error}"
        }
    }
 }
@@ -66,4 +66,13 @@ export default class DumpApiService extends ApiService {
            .get(`/_action/aeon-dump-manager/dumps/jobs/${encodeURIComponent(jobId)}`, { headers: this.getBasicHeaders() })
            .then((response: unknown) => ApiService.handleResponse(response));
    }
+
+    download(filename: string): Promise<Blob> {
+        return this.httpClient
+            .get(`/_action/aeon-dump-manager/dumps/${encodeURIComponent(filename)}/download`, {
+                headers: this.getBasicHeaders(),
+                responseType: 'blob',
+            })
+            .then((response: unknown) => ApiService.handleResponse(response) as Blob);
+    }
 }
@@ -1 +1 @@
-!function(){var e={74:function(){Shopware.Service("privileges").addPrivilegeMappingEntry({category:"permissions",parent:null,key:"aeon_dump_manager",roles:{viewer:{privileges:["aeon_dump_manager.viewer"],dependencies:[]},creator:{privileges:["aeon_dump_manager.creator"],dependencies:["aeon_dump_manager.viewer"]},deleter:{privileges:["aeon_dump_manager.deleter"],dependencies:["aeon_dump_manager.viewer"]}}})}},n={};function t(a){var i=n[a];if(void 0!==i)return i.exports;var r=n[a]={exports:{}};return e[a](r,r.exports,t),r.exports}t.p="bundles/aeondumpmanager/",window?.__sw__?.assetPath&&(t.p=window.__sw__.assetPath+"/bundles/aeondumpmanager/"),function(){"use strict";let{ApiService:e}=Shopware.Classes;class n extends e{constructor(e,n,t="aeon-dump-manager"){super(e,n,t)}getList(){return this.httpClient.get("/_action/aeon-dump-manager/dumps",{headers:this.getBasicHeaders()}).then(n=>e.handleResponse(n))}create(){return this.httpClient.post("/_action/aeon-dump-manager/dumps",{},{headers:this.getBasicHeaders()}).then(n=>e.handleResponse(n))}remove(n){return this.httpClient.delete(`/_action/aeon-dump-manager/dumps/${encodeURIComponent(n)}`,{headers:this.getBasicHeaders()}).then(n=>e.handleResponse(n))}getJobStatus(n){return this.httpClient.get(`/_action/aeon-dump-manager/dumps/jobs/${encodeURIComponent(n)}`,{headers:this.getBasicHeaders()}).then(n=>e.handleResponse(n))}}t(74);let{Component:a}=Shopware;a.register("aeon-dump-manager-list",{template:'{% block aeon_dump_manager_list %}\n<sw-page class="aeon-dump-manager-list">\n    <template #smart-bar-actions>\n        <sw-button\n            v-if="acl.can(\'aeon_dump_manager.creator\')"\n            variant="primary"\n            :disabled="pendingJob !== null"\n            @click="onCreate"\n        >\n            {{ $tc(\'aeon-dump-manager.list.buttonCreate\') }}\n        </sw-button>\n    </template>\n\n    <template #content>\n        <sw-card-view>\n            <sw-card>\n                <sw-data-grid\n                    :data-source="dumps"\n                    :columns="columns"\n                    :is-loading="isLoading"\n                    :show-selection="false"\n                    identifier="filename"\n                >\n                    <template #before-item-list>\n                        <tr v-if="pendingJob !== null" class="aeon-dump-manager-list__pending-row">\n                            <td colspan="3">\n                                <span>{{ $tc(\'aeon-dump-manager.list.creating\') }}</span>\n                                <sw-progress-bar :max-value="100" :value="pendingJob.percent || 0" />\n                            </td>\n                        </tr>\n                    </template>\n\n                    <template #column-datetime="{ item }">\n                        {{ formatDatetime(item.datetime) }}\n                    </template>\n\n                    <template #column-sizeBytes="{ item }">\n                        {{ formatSize(item.sizeBytes) }}\n                    </template>\n\n                    <template #actions="{ item }">\n                        <sw-context-menu-item\n                            v-if="acl.can(\'aeon_dump_manager.deleter\')"\n                            variant="danger"\n                            @click="onRequestDelete(item.filename)"\n                        >\n                            {{ $tc(\'aeon-dump-manager.list.buttonDelete\') }}\n                        </sw-context-menu-item>\n                    </template>\n\n                    <template #empty-state>\n                        {{ $tc(\'aeon-dump-manager.list.empty\') }}\n                    </template>\n                </sw-data-grid>\n            </sw-card>\n        </sw-card-view>\n    </template>\n\n    <sw-confirm-modal\n        v-if="deleteFilename !== null"\n        :title="$tc(\'aeon-dump-manager.list.confirmDeleteTitle\')"\n        :text="$tc(\'aeon-dump-manager.list.confirmDeleteText\', 0, { filename: deleteFilename })"\n        @confirm="onConfirmDelete"\n        @cancel="onCancelDelete"\n        @close="onCancelDelete"\n    />\n</sw-page>\n{% endblock %}\n',inject:["aeonDumpManagerApiService","acl"],data(){return{dumps:[],isLoading:!1,pendingJob:null,deleteFilename:null,pollTimer:null}},computed:{columns(){return[{property:"datetime",label:this.$tc("aeon-dump-manager.list.columnDatetime"),allowResize:!0},{property:"filename",label:this.$tc("aeon-dump-manager.list.columnFilename"),allowResize:!0},{property:"sizeBytes",label:this.$tc("aeon-dump-manager.list.columnSize"),align:"right",allowResize:!0}]}},created(){this.loadList()},beforeDestroy(){this.stopPolling()},methods:{loadList(){return this.isLoading=!0,this.aeonDumpManagerApiService.getList().then(e=>{this.dumps=e.dumps}).finally(()=>{this.isLoading=!1})},formatDatetime(e){return new Date(e).toLocaleString()},formatSize(e){return Shopware.Utils.format.fileSize(e)},onCreate(){this.pendingJob={percent:0,status:"pending"},this.aeonDumpManagerApiService.create().thenLine truncated
+!function(){var e={74:function(){Shopware.Service("privileges").addPrivilegeMappingEntry({category:"permissions",parent:null,key:"aeon_dump_manager",roles:{viewer:{privileges:["aeon_dump_manager.viewer"],dependencies:[]},creator:{privileges:["aeon_dump_manager.creator"],dependencies:["aeon_dump_manager.viewer"]},deleter:{privileges:["aeon_dump_manager.deleter"],dependencies:["aeon_dump_manager.viewer"]}}})}},n={};function t(a){var l=n[a];if(void 0!==l)return l.exports;var i=n[a]={exports:{}};return e[a](i,i.exports,t),i.exports}t.p="bundles/aeondumpmanager/",window?.__sw__?.assetPath&&(t.p=window.__sw__.assetPath+"/bundles/aeondumpmanager/"),function(){"use strict";let{ApiService:e}=Shopware.Classes;class n extends e{constructor(e,n,t="aeon-dump-manager"){super(e,n,t)}getList(){return this.httpClient.get("/_action/aeon-dump-manager/dumps",{headers:this.getBasicHeaders()}).then(n=>e.handleResponse(n))}create(){return this.httpClient.post("/_action/aeon-dump-manager/dumps",{},{headers:this.getBasicHeaders()}).then(n=>e.handleResponse(n))}remove(n){return this.httpClient.delete(`/_action/aeon-dump-manager/dumps/${encodeURIComponent(n)}`,{headers:this.getBasicHeaders()}).then(n=>e.handleResponse(n))}getJobStatus(n){return this.httpClient.get(`/_action/aeon-dump-manager/dumps/jobs/${encodeURIComponent(n)}`,{headers:this.getBasicHeaders()}).then(n=>e.handleResponse(n))}download(n){return this.httpClient.get(`/_action/aeon-dump-manager/dumps/${encodeURIComponent(n)}/download`,{headers:this.getBasicHeaders(),responseType:"blob"}).then(n=>e.handleResponse(n))}}t(74);let{Component:a,Mixin:l}=Shopware;a.register("aeon-dump-manager-list",{template:'{% block aeon_dump_manager_list %}\n<sw-page class="aeon-dump-manager-list">\n    <template #smart-bar-actions>\n        <sw-button\n            v-if="acl.can(\'aeon_dump_manager.creator\')"\n            variant="primary"\n            :is-loading="pendingJob !== null"\n            :disabled="pendingJob !== null"\n            @click="onCreate"\n        >\n            {{ $tc(\'aeon-dump-manager.list.buttonCreate\') }}\n        </sw-button>\n    </template>\n\n    <template #content>\n        <div class="aeon-dump-manager-list__content">\n            <sw-data-grid\n                :data-source="dumps"\n                :columns="columns"\n                :is-loading="isLoading"\n                :show-selection="acl.can(\'aeon_dump_manager.deleter\')"\n                :full-page="true"\n                identifier="filename"\n                @selection-change="onSelectionChange"\n            >\n                <template #bulk>\n                    <a\n                        v-if="acl.can(\'aeon_dump_manager.deleter\')"\n                        class="link link-danger aeon-dump-manager-list__bulk-delete"\n                        role="button"\n                        tabindex="0"\n                        @click="onRequestBulkDelete"\n                        @keydown.enter="onRequestBulkDelete"\n                    >\n                        {{ $tc(\'aeon-dump-manager.list.bulkDeleteButton\', 0, { count: selectionCount }) }}\n                    </a>\n                </template>\n\n                <template #column-datetime="{ item }">\n                    {{ formatDatetime(item.datetime) }}\n                </template>\n\n                <template #column-sizeBytes="{ item }">\n                    {{ formatSize(item.sizeBytes) }}\n                </template>\n\n                <template #actions="{ item }">\n                    <sw-context-menu-item\n                        v-if="acl.can(\'aeon_dump_manager.viewer\')"\n                        @click="onDownload(item.filename)"\n                    >\n                        {{ $tc(\'aeon-dump-manager.list.buttonDownload\') }}\n                    </sw-context-menu-item>\n                    <sw-context-menu-item\n                        v-if="acl.can(\'aeon_dump_manager.deleter\')"\n                        variant="danger"\n                        @click="onRequestDelete(item.filename)"\n                    >\n                        {{ $tc(\'aeon-dump-manager.list.buttonDelete\') }}\n                    </sw-context-menu-item>\n                </template>\n\n                <template #empty-state>\n                    {{ $tc(\'aeon-dump-manager.list.empty\') }}\n                </template>\n            </sw-data-grid>\n        </div>\n    </template>\n\n    {% block aeon_dump_manager_list_progress_modal %}\n    <sw-modal\n        v-if="pendingJob !== null"\n        :title="$tc(\'aeon-dump-manager.list.progressTitle\')"\n        variant="small"\n        class="aeon-dump-manager-list__progress-modal"\n        @modal-close="onCloseProgressModal"\n    >\n        <div class="aeon-dump-manager-list__progress-wrapper">\n            <template v-if="pendingJob.status === \'done\'">\n                <sw-alert variant="success">\n                    {{ $tc(\'aeon-dump-manager.list.createSuccess\') }}\n                </sw-alert>\n         Line truncated