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:
@@ -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.
|
||||
|
||||
+11
-1
@@ -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
|
||||
|
||||
+86
-12
@@ -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,
|
||||
|
||||
mixins: [
|
||||
// Provides createNotificationSuccess/createNotificationError, used below.
|
||||
mixins: [Mixin.getByName('notification')],
|
||||
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();
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user