|
@@ -6,11 +6,12 @@ import {
|
|
|
BaseListComponent,
|
|
BaseListComponent,
|
|
|
DataService,
|
|
DataService,
|
|
|
GetOrderList,
|
|
GetOrderList,
|
|
|
|
|
+ LocalStorageService,
|
|
|
ServerConfigService,
|
|
ServerConfigService,
|
|
|
SortOrder,
|
|
SortOrder,
|
|
|
} from '@vendure/admin-ui/core';
|
|
} from '@vendure/admin-ui/core';
|
|
|
import { merge, Observable } from 'rxjs';
|
|
import { merge, Observable } from 'rxjs';
|
|
|
-import { debounceTime, distinctUntilChanged, map, skip, takeUntil } from 'rxjs/operators';
|
|
|
|
|
|
|
+import { debounceTime, distinctUntilChanged, map, skip, takeUntil, tap } from 'rxjs/operators';
|
|
|
|
|
|
|
|
interface OrderFilterConfig {
|
|
interface OrderFilterConfig {
|
|
|
active?: boolean;
|
|
active?: boolean;
|
|
@@ -41,7 +42,9 @@ export class OrderListComponent
|
|
|
label: _('order.filter-preset-open'),
|
|
label: _('order.filter-preset-open'),
|
|
|
config: {
|
|
config: {
|
|
|
active: false,
|
|
active: false,
|
|
|
- states: this.orderStates.filter(s => s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped'),
|
|
|
|
|
|
|
+ states: this.orderStates.filter(
|
|
|
|
|
+ s => s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped',
|
|
|
|
|
+ ),
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
@@ -73,6 +76,7 @@ export class OrderListComponent
|
|
|
constructor(
|
|
constructor(
|
|
|
private serverConfigService: ServerConfigService,
|
|
private serverConfigService: ServerConfigService,
|
|
|
private dataService: DataService,
|
|
private dataService: DataService,
|
|
|
|
|
+ private localStorageService: LocalStorageService,
|
|
|
router: Router,
|
|
router: Router,
|
|
|
route: ActivatedRoute,
|
|
route: ActivatedRoute,
|
|
|
) {
|
|
) {
|
|
@@ -90,6 +94,10 @@ export class OrderListComponent
|
|
|
this.route.snapshot.queryParamMap.get('filter') || 'open',
|
|
this.route.snapshot.queryParamMap.get('filter') || 'open',
|
|
|
),
|
|
),
|
|
|
);
|
|
);
|
|
|
|
|
+ const lastFilters = this.localStorageService.get('orderListLastCustomFilters');
|
|
|
|
|
+ if (lastFilters) {
|
|
|
|
|
+ this.setQueryParam(lastFilters, { replaceUrl: true });
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
ngOnInit() {
|
|
@@ -98,29 +106,47 @@ export class OrderListComponent
|
|
|
map(qpm => qpm.get('filter') || 'open'),
|
|
map(qpm => qpm.get('filter') || 'open'),
|
|
|
distinctUntilChanged(),
|
|
distinctUntilChanged(),
|
|
|
);
|
|
);
|
|
|
- merge(this.searchTerm.valueChanges, this.activePreset$.pipe(skip(1)))
|
|
|
|
|
- .pipe(debounceTime(250), takeUntil(this.destroy$))
|
|
|
|
|
- .subscribe(() => this.refresh());
|
|
|
|
|
|
|
+ merge(this.searchTerm.valueChanges.pipe(debounceTime(250)), this.route.queryParamMap)
|
|
|
|
|
+ .pipe(takeUntil(this.destroy$))
|
|
|
|
|
+ .subscribe(val => {
|
|
|
|
|
+ this.refresh();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const queryParamMap = this.route.snapshot.queryParamMap;
|
|
|
this.customFilterForm = new FormGroup({
|
|
this.customFilterForm = new FormGroup({
|
|
|
- states: new FormControl([]),
|
|
|
|
|
- placedAtStart: new FormControl(),
|
|
|
|
|
- placedAtEnd: new FormControl(),
|
|
|
|
|
|
|
+ states: new FormControl(queryParamMap.getAll('states') ?? []),
|
|
|
|
|
+ placedAtStart: new FormControl(queryParamMap.get('placedAtStart')),
|
|
|
|
|
+ placedAtEnd: new FormControl(queryParamMap.get('placedAtEnd')),
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
selectFilterPreset(presetName: string) {
|
|
selectFilterPreset(presetName: string) {
|
|
|
|
|
+ const lastCustomFilters = this.localStorageService.get('orderListLastCustomFilters') ?? {};
|
|
|
|
|
+ const emptyCustomFilters = { states: undefined, placedAtStart: undefined, placedAtEnd: undefined };
|
|
|
|
|
+ const filters = presetName === 'custom' ? lastCustomFilters : emptyCustomFilters;
|
|
|
this.setQueryParam(
|
|
this.setQueryParam(
|
|
|
{
|
|
{
|
|
|
filter: presetName,
|
|
filter: presetName,
|
|
|
page: 1,
|
|
page: 1,
|
|
|
|
|
+ ...filters,
|
|
|
},
|
|
},
|
|
|
- true,
|
|
|
|
|
|
|
+ { replaceUrl: true },
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
applyCustomFilters() {
|
|
applyCustomFilters() {
|
|
|
|
|
+ const formValue = this.customFilterForm.value;
|
|
|
|
|
+ const customFilters = {
|
|
|
|
|
+ states: formValue.states,
|
|
|
|
|
+ placedAtStart: formValue.placedAtStart,
|
|
|
|
|
+ placedAtEnd: formValue.placedAtEnd,
|
|
|
|
|
+ };
|
|
|
|
|
+ this.setQueryParam({
|
|
|
|
|
+ filter: 'custom',
|
|
|
|
|
+ ...customFilters,
|
|
|
|
|
+ });
|
|
|
this.customFilterForm.markAsPristine();
|
|
this.customFilterForm.markAsPristine();
|
|
|
- this.refresh();
|
|
|
|
|
|
|
+ this.localStorageService.set('orderListLastCustomFilters', customFilters);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// tslint:disable-next-line:no-shadowed-variable
|
|
// tslint:disable-next-line:no-shadowed-variable
|
|
@@ -139,26 +165,29 @@ export class OrderListComponent
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
} else if (activeFilterPreset === 'custom') {
|
|
} else if (activeFilterPreset === 'custom') {
|
|
|
- const formValue = this.customFilterForm?.value ?? {};
|
|
|
|
|
- if (formValue.states?.length) {
|
|
|
|
|
|
|
+ const queryParams = this.route.snapshot.queryParamMap;
|
|
|
|
|
+ const states = queryParams.getAll('states') ?? [];
|
|
|
|
|
+ const placedAtStart = queryParams.get('placedAtStart');
|
|
|
|
|
+ const placedAtEnd = queryParams.get('placedAtEnd');
|
|
|
|
|
+ if (states.length) {
|
|
|
filter.state = {
|
|
filter.state = {
|
|
|
- in: formValue.states,
|
|
|
|
|
|
|
+ in: states,
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
- if (formValue.placedAtStart && formValue.placedAtEnd) {
|
|
|
|
|
|
|
+ if (placedAtStart && placedAtEnd) {
|
|
|
filter.orderPlacedAt = {
|
|
filter.orderPlacedAt = {
|
|
|
between: {
|
|
between: {
|
|
|
- start: formValue.placedAtStart,
|
|
|
|
|
- end: formValue.placedAtEnd,
|
|
|
|
|
|
|
+ start: placedAtStart,
|
|
|
|
|
+ end: placedAtEnd,
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
- } else if (formValue.placedAtStart) {
|
|
|
|
|
|
|
+ } else if (placedAtStart) {
|
|
|
filter.orderPlacedAt = {
|
|
filter.orderPlacedAt = {
|
|
|
- after: formValue.placedAtStart,
|
|
|
|
|
|
|
+ after: placedAtStart,
|
|
|
};
|
|
};
|
|
|
- } else if (formValue.placedAtEnd) {
|
|
|
|
|
|
|
+ } else if (placedAtEnd) {
|
|
|
filter.orderPlacedAt = {
|
|
filter.orderPlacedAt = {
|
|
|
- before: formValue.placedAtEnd,
|
|
|
|
|
|
|
+ before: placedAtEnd,
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|