From 5a482b49bbd926a77962616b9d7f9d6fc143acd2 Mon Sep 17 00:00:00 2001
From: Haylan <code@arthurerlich.ch>
Date: Thu, 17 Sep 2026 12:39:23 +0200
Subject: [PATCH] feat(dump): add date-range filter, sortable columns, and
 native date formatting to admin list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wires the backend from/to filter into the UI via sw-filter-panel with
  a hand-built date-filter config (no DAL entity needed — sw-filter-panel's
  only external dependency, filterService, persists through the generic
  user_config entity, not one for the filtered resource).
- Makes the datetime and sizeBytes columns sortable (ascending/descending)
  using the same Mixin.getByName('listing') core list pages use, which
  also persists sort state in the URL query string.
- Replaces the ad hoc `new Date(value).toLocaleString()` with
  Shopware.Utils.format.date, matching the existing fileSize formatting
  and respecting the admin's locale/timezone.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |   3 +
 .../aeon-dump-manager-list.html.twig          |  12 ++-
 .../page/aeon-dump-manager-list/index.ts      | 100 +++++++++++++++---
 .../aeon-dump-manager/snippet/de-DE.json      |   4 +
 .../aeon-dump-manager/snippet/en-GB.json      |   4 +
 .../src/service/dump-api.service.ts           |   7 +-
 6 files changed, 114 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aeb34e0..04182c5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,3 +20,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   creation runs synchronously.
 - ACL-gated (`aeon_dump_manager.viewer`/`.creator`/`.deleter`), enforced both client-side and
   server-side.
+- Filter the dump list by a from/to date range, and sort the `datetime`/`sizeBytes` columns
+  ascending or descending. Dates are formatted with Shopware's locale/timezone-aware
+  `Shopware.Utils.format.date`, matching the existing `fileSize` formatting.
diff --git a/src/Resources/app/administration/src/module/aeon-dump-manager/page/aeon-dump-manager-list/aeon-dump-manager-list.html.twig b/src/Resources/app/administration/src/module/aeon-dump-manager/page/aeon-dump-manager-list/aeon-dump-manager-list.html.twig
index 2d00b1a..5e03557 100644
--- a/src/Resources/app/administration/src/module/aeon-dump-manager/page/aeon-dump-manager-list/aeon-dump-manager-list.html.twig
+++ b/src/Resources/app/administration/src/module/aeon-dump-manager/page/aeon-dump-manager-list/aeon-dump-manager-list.html.twig
@@ -14,14 +14,24 @@
 
     <template #content>
         <div class="aeon-dump-manager-list__content">
+            <sw-filter-panel
+                :filters="listFilters"
+                :defaults="defaultFilters"
+                :store-key="storeKey"
+                @criteria-changed="onCriteriaChanged"
+            />
+
             <sw-data-grid
-                :data-source="dumps"
+                :data-source="sortedDumps"
                 :columns="columns"
                 :is-loading="isLoading"
                 :show-selection="acl.can('aeon_dump_manager.deleter')"
                 :full-page="true"
+                :sort-by="sortBy"
+                :sort-direction="sortDirection"
                 identifier="filename"
                 @selection-change="onSelectionChange"
+                @column-sort="onSortColumn"
             >
                 <template #bulk>
                     <a
diff --git a/src/Resources/app/administration/src/module/aeon-dump-manager/page/aeon-dump-manager-list/index.ts b/src/Resources/app/administration/src/module/aeon-dump-manager/page/aeon-dump-manager-list/index.ts
index 8174f24..5ca5089 100644
--- a/src/Resources/app/administration/src/module/aeon-dump-manager/page/aeon-dump-manager-list/index.ts
+++ b/src/Resources/app/administration/src/module/aeon-dump-manager/page/aeon-dump-manager-list/index.ts
@@ -11,6 +11,12 @@ interface PendingJob {
 
 const CREATE_MODAL_AUTO_CLOSE_MS = 1500;
 
+interface DateRangeCriteria {
+    type: string;
+    field: string;
+    parameters?: { gte?: string; lte?: string };
+}
+
 interface ComponentData {
     dumps: DumpFile[];
     isLoading: boolean;
@@ -18,6 +24,12 @@ interface ComponentData {
     deleteFilenames: string[] | null;
     selection: Record<string, DumpFile>;
     pollTimer: number | null;
+    dateFrom: string | null;
+    dateTo: string | null;
+    sortBy: string;
+    sortDirection: string;
+    storeKey: string;
+    defaultFilters: string[];
 }
 
 interface ComponentInstance extends ComponentData {
@@ -25,17 +37,25 @@ interface ComponentInstance extends ComponentData {
     $tc: (key: string, count?: number, values?: Record<string, unknown>) => string;
     createNotificationError: (options: { message: string }) => void;
     createNotificationSuccess: (options: { message: string }) => void;
-    loadList: () => Promise<void>;
+    getList: () => Promise<void>;
     stopPolling: () => void;
     pollJobStatus: (jobId: string) => void;
     selectionCount: number;
+    sortedDumps: DumpFile[];
+    listFilters: Record<string, unknown>[];
 }
 
 Component.register('aeon-dump-manager-list', {
     template,
 
-    // Provides createNotificationSuccess/createNotificationError, used below.
-    mixins: [Mixin.getByName('notification')],
+    mixins: [
+        // Provides createNotificationSuccess/createNotificationError, used below.
+        Mixin.getByName('notification'),
+        // Provides sortBy/sortDirection state, onSortColumn(), and route-query
+        // persistence for them (same mixin sw-product-list etc. use) — our own
+        // data() below overrides the defaults to keep "newest first".
+        Mixin.getByName('listing'),
+    ],
 
     inject: ['aeonDumpManagerApiService', 'acl'],
 
@@ -47,27 +67,56 @@ Component.register('aeon-dump-manager-list', {
             deleteFilenames: null,
             selection: {},
             pollTimer: null,
+            dateFrom: null,
+            dateTo: null,
+            sortBy: 'datetime',
+            sortDirection: 'DESC',
+            storeKey: 'grid.filter.aeon-dump-manager',
+            defaultFilters: ['datetime'],
         };
     },
 
     computed: {
+        listFilters(this: ComponentInstance) {
+            return [
+                {
+                    name: 'datetime',
+                    type: 'date-filter',
+                    property: 'datetime',
+                    label: this.$tc('aeon-dump-manager.list.columnDatetime'),
+                    dateType: 'date',
+                    fromFieldLabel: this.$tc('aeon-dump-manager.list.filterFromLabel'),
+                    toFieldLabel: this.$tc('aeon-dump-manager.list.filterToLabel'),
+                    fromPlaceholder: this.$tc('aeon-dump-manager.list.filterFromPlaceholder'),
+                    toPlaceholder: this.$tc('aeon-dump-manager.list.filterToPlaceholder'),
+                    showTimeframe: false,
+                },
+            ];
+        },
+
         columns() {
             return [
                 {
                     property: 'datetime',
+                    dataIndex: 'datetime',
                     label: this.$tc('aeon-dump-manager.list.columnDatetime'),
                     allowResize: true,
+                    sortable: true,
                 },
                 {
                     property: 'filename',
+                    dataIndex: 'filename',
                     label: this.$tc('aeon-dump-manager.list.columnFilename'),
                     allowResize: true,
+                    sortable: true,
                 },
                 {
                     property: 'sizeBytes',
+                    dataIndex: 'sizeBytes',
                     label: this.$tc('aeon-dump-manager.list.columnSize'),
                     align: 'right',
                     allowResize: true,
+                    sortable: true,
                 },
             ];
         },
@@ -75,10 +124,27 @@ Component.register('aeon-dump-manager-list', {
         selectionCount(this: ComponentInstance): number {
             return Object.keys(this.selection).length;
         },
-    },
 
-    created(this: ComponentInstance) {
-        this.loadList();
+        sortedDumps(this: ComponentInstance): DumpFile[] {
+            const direction = this.sortDirection === 'ASC' ? 1 : -1;
+
+            return [...this.dumps].sort((a, b) => {
+                let compareVal: number;
+
+                switch (this.sortBy) {
+                    case 'sizeBytes':
+                        compareVal = a.sizeBytes - b.sizeBytes;
+                        break;
+                    case 'datetime':
+                        compareVal = new Date(a.datetime).getTime() - new Date(b.datetime).getTime();
+                        break;
+                    default:
+                        compareVal = a.filename.localeCompare(b.filename, undefined, { numeric: true });
+                }
+
+                return compareVal * direction;
+            });
+        },
     },
 
     beforeDestroy(this: ComponentInstance) {
@@ -86,10 +152,10 @@ Component.register('aeon-dump-manager-list', {
     },
 
     methods: {
-        loadList(this: ComponentInstance): Promise<void> {
+        getList(this: ComponentInstance): Promise<void> {
             this.isLoading = true;
 
-            return this.aeonDumpManagerApiService.getList()
+            return this.aeonDumpManagerApiService.getList({ from: this.dateFrom, to: this.dateTo })
                 .then((response) => {
                     this.dumps = response.dumps;
                 })
@@ -99,7 +165,15 @@ Component.register('aeon-dump-manager-list', {
         },
 
         formatDatetime(value: string): string {
-            return new Date(value).toLocaleString();
+            return Shopware.Utils.format.date(value);
+        },
+
+        onCriteriaChanged(this: ComponentInstance, criteria: DateRangeCriteria[]) {
+            const range = criteria.find((filter) => filter.type === 'range' && filter.field === 'datetime');
+
+            this.dateFrom = range?.parameters?.gte ?? null;
+            this.dateTo = range?.parameters?.lte ?? null;
+            this.getList();
         },
 
         formatSize(bytes: number): string {
@@ -133,7 +207,7 @@ Component.register('aeon-dump-manager-list', {
 
                     if (job.status === 'done') {
                         this.stopPolling();
-                        this.loadList();
+                        this.getList();
                         window.setTimeout(() => {
                             this.pendingJob = null;
                         }, CREATE_MODAL_AUTO_CLOSE_MS);
@@ -196,19 +270,19 @@ Component.register('aeon-dump-manager-list', {
 
             // 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.
+            // getList() 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())
+                .then(() => this.getList())
                 .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();
+                    return this.getList();
                 });
         },
     },
diff --git a/src/Resources/app/administration/src/module/aeon-dump-manager/snippet/de-DE.json b/src/Resources/app/administration/src/module/aeon-dump-manager/snippet/de-DE.json
index 827d874..e0f1fb3 100644
--- a/src/Resources/app/administration/src/module/aeon-dump-manager/snippet/de-DE.json
+++ b/src/Resources/app/administration/src/module/aeon-dump-manager/snippet/de-DE.json
@@ -8,6 +8,10 @@
             "columnFilename": "Name",
             "columnDatetime": "Erstellt am",
             "columnSize": "Größe",
+            "filterFromLabel": "Von",
+            "filterFromPlaceholder": "Startdatum auswählen...",
+            "filterToLabel": "Bis",
+            "filterToPlaceholder": "Enddatum auswählen...",
             "buttonCreate": "Dump erstellen",
             "buttonDownload": "Herunterladen",
             "buttonDelete": "Löschen",
diff --git a/src/Resources/app/administration/src/module/aeon-dump-manager/snippet/en-GB.json b/src/Resources/app/administration/src/module/aeon-dump-manager/snippet/en-GB.json
index c2a375d..52ce987 100644
--- a/src/Resources/app/administration/src/module/aeon-dump-manager/snippet/en-GB.json
+++ b/src/Resources/app/administration/src/module/aeon-dump-manager/snippet/en-GB.json
@@ -8,6 +8,10 @@
             "columnFilename": "Name",
             "columnDatetime": "Created at",
             "columnSize": "Size",
+            "filterFromLabel": "From",
+            "filterFromPlaceholder": "Select start date...",
+            "filterToLabel": "To",
+            "filterToPlaceholder": "Select end date...",
             "buttonCreate": "Create dump",
             "buttonDownload": "Download",
             "buttonDelete": "Delete",
diff --git a/src/Resources/app/administration/src/service/dump-api.service.ts b/src/Resources/app/administration/src/service/dump-api.service.ts
index 32697df..d429e25 100644
--- a/src/Resources/app/administration/src/service/dump-api.service.ts
+++ b/src/Resources/app/administration/src/service/dump-api.service.ts
@@ -43,9 +43,12 @@ export default class DumpApiService extends ApiService {
         super(httpClient, loginService, apiEndpoint);
     }
 
-    getList(): Promise<DumpList> {
+    getList(filter: { from?: string | null; to?: string | null } = {}): Promise<DumpList> {
         return this.httpClient
-            .get('/_action/aeon-dump-manager/dumps', { headers: this.getBasicHeaders() })
+            .get('/_action/aeon-dump-manager/dumps', {
+                headers: this.getBasicHeaders(),
+                params: { from: filter.from ?? undefined, to: filter.to ?? undefined },
+            })
             .then((response: unknown) => ApiService.handleResponse(response));
     }