feat(dump): add date-range filter, sortable columns, and native date formatting to admin list

- 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>
This commit is contained in:
2026-09-17 12:39:23 +02:00
co-authored by Claude-Bot
parent 6094b6f49c
commit 5a482b49bb
6 changed files with 114 additions and 16 deletions
+3
View File
@@ -20,3 +20,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
creation runs synchronously. creation runs synchronously.
- ACL-gated (`aeon_dump_manager.viewer`/`.creator`/`.deleter`), enforced both client-side and - ACL-gated (`aeon_dump_manager.viewer`/`.creator`/`.deleter`), enforced both client-side and
server-side. 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.
@@ -14,14 +14,24 @@
<template #content> <template #content>
<div class="aeon-dump-manager-list__content"> <div class="aeon-dump-manager-list__content">
<sw-filter-panel
:filters="listFilters"
:defaults="defaultFilters"
:store-key="storeKey"
@criteria-changed="onCriteriaChanged"
/>
<sw-data-grid <sw-data-grid
:data-source="dumps" :data-source="sortedDumps"
:columns="columns" :columns="columns"
:is-loading="isLoading" :is-loading="isLoading"
:show-selection="acl.can('aeon_dump_manager.deleter')" :show-selection="acl.can('aeon_dump_manager.deleter')"
:full-page="true" :full-page="true"
:sort-by="sortBy"
:sort-direction="sortDirection"
identifier="filename" identifier="filename"
@selection-change="onSelectionChange" @selection-change="onSelectionChange"
@column-sort="onSortColumn"
> >
<template #bulk> <template #bulk>
<a <a
@@ -11,6 +11,12 @@ interface PendingJob {
const CREATE_MODAL_AUTO_CLOSE_MS = 1500; const CREATE_MODAL_AUTO_CLOSE_MS = 1500;
interface DateRangeCriteria {
type: string;
field: string;
parameters?: { gte?: string; lte?: string };
}
interface ComponentData { interface ComponentData {
dumps: DumpFile[]; dumps: DumpFile[];
isLoading: boolean; isLoading: boolean;
@@ -18,6 +24,12 @@ interface ComponentData {
deleteFilenames: string[] | null; deleteFilenames: string[] | null;
selection: Record<string, DumpFile>; selection: Record<string, DumpFile>;
pollTimer: number | null; pollTimer: number | null;
dateFrom: string | null;
dateTo: string | null;
sortBy: string;
sortDirection: string;
storeKey: string;
defaultFilters: string[];
} }
interface ComponentInstance extends ComponentData { interface ComponentInstance extends ComponentData {
@@ -25,17 +37,25 @@ interface ComponentInstance extends ComponentData {
$tc: (key: string, count?: number, values?: Record<string, unknown>) => string; $tc: (key: string, count?: number, values?: Record<string, unknown>) => string;
createNotificationError: (options: { message: string }) => void; createNotificationError: (options: { message: string }) => void;
createNotificationSuccess: (options: { message: string }) => void; createNotificationSuccess: (options: { message: string }) => void;
loadList: () => Promise<void>; getList: () => Promise<void>;
stopPolling: () => void; stopPolling: () => void;
pollJobStatus: (jobId: string) => void; pollJobStatus: (jobId: string) => void;
selectionCount: number; selectionCount: number;
sortedDumps: DumpFile[];
listFilters: Record<string, unknown>[];
} }
Component.register('aeon-dump-manager-list', { Component.register('aeon-dump-manager-list', {
template, template,
// Provides createNotificationSuccess/createNotificationError, used below. mixins: [
mixins: [Mixin.getByName('notification')], // 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'], inject: ['aeonDumpManagerApiService', 'acl'],
@@ -47,27 +67,56 @@ Component.register('aeon-dump-manager-list', {
deleteFilenames: null, deleteFilenames: null,
selection: {}, selection: {},
pollTimer: null, pollTimer: null,
dateFrom: null,
dateTo: null,
sortBy: 'datetime',
sortDirection: 'DESC',
storeKey: 'grid.filter.aeon-dump-manager',
defaultFilters: ['datetime'],
}; };
}, },
computed: { 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() { columns() {
return [ return [
{ {
property: 'datetime', property: 'datetime',
dataIndex: 'datetime',
label: this.$tc('aeon-dump-manager.list.columnDatetime'), label: this.$tc('aeon-dump-manager.list.columnDatetime'),
allowResize: true, allowResize: true,
sortable: true,
}, },
{ {
property: 'filename', property: 'filename',
dataIndex: 'filename',
label: this.$tc('aeon-dump-manager.list.columnFilename'), label: this.$tc('aeon-dump-manager.list.columnFilename'),
allowResize: true, allowResize: true,
sortable: true,
}, },
{ {
property: 'sizeBytes', property: 'sizeBytes',
dataIndex: 'sizeBytes',
label: this.$tc('aeon-dump-manager.list.columnSize'), label: this.$tc('aeon-dump-manager.list.columnSize'),
align: 'right', align: 'right',
allowResize: true, allowResize: true,
sortable: true,
}, },
]; ];
}, },
@@ -75,10 +124,27 @@ Component.register('aeon-dump-manager-list', {
selectionCount(this: ComponentInstance): number { selectionCount(this: ComponentInstance): number {
return Object.keys(this.selection).length; return Object.keys(this.selection).length;
}, },
},
created(this: ComponentInstance) { sortedDumps(this: ComponentInstance): DumpFile[] {
this.loadList(); 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) { beforeDestroy(this: ComponentInstance) {
@@ -86,10 +152,10 @@ Component.register('aeon-dump-manager-list', {
}, },
methods: { methods: {
loadList(this: ComponentInstance): Promise<void> { getList(this: ComponentInstance): Promise<void> {
this.isLoading = true; this.isLoading = true;
return this.aeonDumpManagerApiService.getList() return this.aeonDumpManagerApiService.getList({ from: this.dateFrom, to: this.dateTo })
.then((response) => { .then((response) => {
this.dumps = response.dumps; this.dumps = response.dumps;
}) })
@@ -99,7 +165,15 @@ Component.register('aeon-dump-manager-list', {
}, },
formatDatetime(value: string): string { 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 { formatSize(bytes: number): string {
@@ -133,7 +207,7 @@ Component.register('aeon-dump-manager-list', {
if (job.status === 'done') { if (job.status === 'done') {
this.stopPolling(); this.stopPolling();
this.loadList(); this.getList();
window.setTimeout(() => { window.setTimeout(() => {
this.pendingJob = null; this.pendingJob = null;
}, CREATE_MODAL_AUTO_CLOSE_MS); }, 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 // Optimistic UI update: pull the rows out immediately rather than
// waiting on a full reload, so the grid never looks stale even if // 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.dumps = this.dumps.filter((dumpFile) => !filenames.includes(dumpFile.filename));
this.selection = {}; this.selection = {};
return Promise.all(filenames.map((filename) => this.aeonDumpManagerApiService.remove(filename))) return Promise.all(filenames.map((filename) => this.aeonDumpManagerApiService.remove(filename)))
.then(() => this.loadList()) .then(() => this.getList())
.catch((error: Error) => { .catch((error: Error) => {
this.createNotificationError({ this.createNotificationError({
message: this.$tc('aeon-dump-manager.list.deleteFailed', 0, { error: error.message }), message: this.$tc('aeon-dump-manager.list.deleteFailed', 0, { error: error.message }),
}); });
// A delete failed after the optimistic removal — reload to // A delete failed after the optimistic removal — reload to
// show the real state rather than leave a wrong guess on screen. // show the real state rather than leave a wrong guess on screen.
return this.loadList(); return this.getList();
}); });
}, },
}, },
@@ -8,6 +8,10 @@
"columnFilename": "Name", "columnFilename": "Name",
"columnDatetime": "Erstellt am", "columnDatetime": "Erstellt am",
"columnSize": "Größe", "columnSize": "Größe",
"filterFromLabel": "Von",
"filterFromPlaceholder": "Startdatum auswählen...",
"filterToLabel": "Bis",
"filterToPlaceholder": "Enddatum auswählen...",
"buttonCreate": "Dump erstellen", "buttonCreate": "Dump erstellen",
"buttonDownload": "Herunterladen", "buttonDownload": "Herunterladen",
"buttonDelete": "Löschen", "buttonDelete": "Löschen",
@@ -8,6 +8,10 @@
"columnFilename": "Name", "columnFilename": "Name",
"columnDatetime": "Created at", "columnDatetime": "Created at",
"columnSize": "Size", "columnSize": "Size",
"filterFromLabel": "From",
"filterFromPlaceholder": "Select start date...",
"filterToLabel": "To",
"filterToPlaceholder": "Select end date...",
"buttonCreate": "Create dump", "buttonCreate": "Create dump",
"buttonDownload": "Download", "buttonDownload": "Download",
"buttonDelete": "Delete", "buttonDelete": "Delete",
@@ -43,9 +43,12 @@ export default class DumpApiService extends ApiService {
super(httpClient, loginService, apiEndpoint); super(httpClient, loginService, apiEndpoint);
} }
getList(): Promise<DumpList> { getList(filter: { from?: string | null; to?: string | null } = {}): Promise<DumpList> {
return this.httpClient 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)); .then((response: unknown) => ApiService.handleResponse(response));
} }