refactor: update presets UI to follow same rules as other pages.
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
parent
c9534bdf11
commit
35f38d7cee
8 changed files with 147 additions and 37 deletions
4
API.md
4
API.md
|
|
@ -1777,6 +1777,7 @@ Binary image data with appropriate headers
|
|||
- `per_page` (optional): Items per page. Default: `config.default_pagination`.
|
||||
- `sort` (optional): Comma-separated sort fields. Accepted values: `id`, `name`, `priority`, `default`, `created_at`, `updated_at`. Default: `priority,name`.
|
||||
- `order` (optional): Comma-separated sort directions matching `sort`, or a single direction applied to every requested sort field. Accepted values: `asc`, `desc`. Default: `desc,asc`.
|
||||
- `exclude_defaults` (optional): When `true`, excludes system presets from the results. Default: `false`.
|
||||
|
||||
**Response**:
|
||||
```json
|
||||
|
|
@ -1806,10 +1807,9 @@ Binary image data with appropriate headers
|
|||
|
||||
**Notes**:
|
||||
- `default: true` indicates this is a system default preset (cannot be modified or deleted)
|
||||
- Default ordering remains `priority desc, name asc`
|
||||
|
||||
**Error Responses**:
|
||||
- `400 Bad Request` - Invalid pagination or sorting query parameters
|
||||
- `400 Bad Request` - Invalid data was provided.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -180,25 +180,32 @@ class PresetsRepository(metaclass=Singleton):
|
|||
per_page: int,
|
||||
sort: str | None = None,
|
||||
order: str | None = None,
|
||||
exclude_defaults: bool = False,
|
||||
) -> tuple[list[PresetModel], int, int, int]:
|
||||
order_by = self._build_order_by(sort, order)
|
||||
|
||||
async with self.session() as session:
|
||||
total: int = await self.count()
|
||||
total: int = await self.count(exclude_defaults=exclude_defaults)
|
||||
total_pages: int = (total + per_page - 1) // per_page if total > 0 else 1
|
||||
|
||||
if page > total_pages and total > 0:
|
||||
page = total_pages
|
||||
|
||||
query: Select[tuple[PresetModel]] = (
|
||||
select(PresetModel).order_by(*order_by).limit(per_page).offset((page - 1) * per_page)
|
||||
)
|
||||
query: Select[tuple[PresetModel]] = select(PresetModel)
|
||||
if exclude_defaults:
|
||||
query = query.where(PresetModel.default.is_(False))
|
||||
|
||||
query = query.order_by(*order_by).limit(per_page).offset((page - 1) * per_page)
|
||||
result: Result[tuple[PresetModel]] = await session.execute(query)
|
||||
return list(result.scalars().all()), total, page, total_pages
|
||||
|
||||
async def count(self) -> int:
|
||||
async def count(self, exclude_defaults: bool = False) -> int:
|
||||
async with self.session() as session:
|
||||
result: Result[tuple[int]] = await session.execute(select(func.count()).select_from(PresetModel))
|
||||
query = select(func.count()).select_from(PresetModel)
|
||||
if exclude_defaults:
|
||||
query = query.where(PresetModel.default.is_(False))
|
||||
|
||||
result: Result[tuple[int]] = await session.execute(query)
|
||||
return int(result.scalar_one())
|
||||
|
||||
async def get(self, identifier: int | str) -> PresetModel | None:
|
||||
|
|
|
|||
|
|
@ -26,10 +26,11 @@ async def presets_list(request: Request, encoder: Encoder, repo: PresetsReposito
|
|||
try:
|
||||
page, per_page = normalize_pagination(request)
|
||||
items, total, current_page, total_pages = await repo.list_paginated(
|
||||
page,
|
||||
per_page,
|
||||
page=page,
|
||||
per_page=per_page,
|
||||
sort=request.query.get("sort"),
|
||||
order=request.query.get("order"),
|
||||
exclude_defaults=bool(request.query.get("exclude_defaults", False)),
|
||||
)
|
||||
except ValueError as exc:
|
||||
return web.json_response(data={"error": str(exc)}, status=web.HTTPBadRequest.status_code)
|
||||
|
|
|
|||
|
|
@ -88,6 +88,18 @@ class TestPresetsRepository:
|
|||
|
||||
assert [item.name for item in items] == ["gamma", "beta", "alpha"], "Should sort by requested field"
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_list_paginated_excludes_defaults(self, repo):
|
||||
await repo.create({"name": "System Default", "default": True, "priority": 10})
|
||||
await repo.create({"name": "Custom Preset", "priority": 1})
|
||||
|
||||
items, total, page, total_pages = await repo.list_paginated(page=1, per_page=10, exclude_defaults=True)
|
||||
|
||||
assert [item.name for item in items] == ["custom_preset"], "Should exclude default presets"
|
||||
assert total == 1, "Should count only custom presets"
|
||||
assert page == 1, "Should keep current page when filtered results exist"
|
||||
assert total_pages == 1, "Should compute pages from the filtered total"
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_list_paginated_supports_multiple_sort_fields(self, repo):
|
||||
await repo.create({"name": "Charlie", "priority": 2})
|
||||
|
|
@ -153,3 +165,17 @@ class TestPresetRoutes:
|
|||
|
||||
assert response.status == web.HTTPBadRequest.status_code, "Should reject unsupported sort direction"
|
||||
assert "order" in payload["error"], "Should explain invalid sort direction"
|
||||
|
||||
async def test_list_route_supports_excluding_defaults(self, repo):
|
||||
await repo.create({"name": "System Default", "default": True, "priority": 10})
|
||||
await repo.create({"name": "Custom Preset", "priority": 1})
|
||||
|
||||
request = MagicMock(spec=Request)
|
||||
request.query = {"page": "1", "per_page": "10", "exclude_defaults": "true"}
|
||||
|
||||
response = await presets_list(request, Encoder(), repo)
|
||||
payload = json.loads(response.text)
|
||||
|
||||
assert response.status == web.HTTPOk.status_code, "Should return 200 for valid default exclusion"
|
||||
assert [item["name"] for item in payload["items"]] == ["custom_preset"], "Should exclude default presets"
|
||||
assert payload["pagination"]["total"] == 1, "Should report filtered total"
|
||||
|
|
|
|||
|
|
@ -367,13 +367,12 @@ const props = defineProps<{
|
|||
reference?: number | null;
|
||||
preset: Partial<Preset>;
|
||||
addInProgress?: boolean;
|
||||
presets?: Preset[];
|
||||
}>();
|
||||
|
||||
const config = useYtpConfig();
|
||||
const toast = useNotification();
|
||||
const dialog = useDialog();
|
||||
const { presets, findPreset, selectItems } = usePresetOptions(() => props.presets);
|
||||
const { presets, findPreset, selectItems } = usePresetOptions();
|
||||
|
||||
const form = reactive<Preset>({
|
||||
name: '',
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@ const removePreset = (id: number) => {
|
|||
const loadPresets = async (
|
||||
page: number = 1,
|
||||
perPage: number | undefined = undefined,
|
||||
options: { excludeDefaults?: boolean } = {},
|
||||
): Promise<void> => {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
|
|
@ -136,6 +137,10 @@ const loadPresets = async (
|
|||
if (perPage !== undefined) {
|
||||
url += `&per_page=${perPage}`;
|
||||
}
|
||||
if (options.excludeDefaults) {
|
||||
url += '&exclude_defaults=true';
|
||||
}
|
||||
|
||||
const response = await request(url);
|
||||
await ensureSuccess(response);
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
<div class="flex min-w-0 flex-wrap items-center gap-2 xl:justify-end">
|
||||
<UButton
|
||||
v-if="presetsNoDefault.length > 0"
|
||||
v-if="presets.length > 0"
|
||||
color="neutral"
|
||||
:variant="showFilter ? 'soft' : 'outline'"
|
||||
size="sm"
|
||||
|
|
@ -62,13 +62,13 @@
|
|||
icon="i-lucide-refresh-cw"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
@click="() => void presetsStore.loadPresets(1, 1000)"
|
||||
@click="() => void loadContent(page)"
|
||||
>
|
||||
<span>Reload</span>
|
||||
</UButton>
|
||||
|
||||
<UInput
|
||||
v-if="showFilter && presetsNoDefault.length > 0"
|
||||
v-if="showFilter && presets.length > 0"
|
||||
id="filter"
|
||||
ref="filterInput"
|
||||
v-model="query"
|
||||
|
|
@ -112,6 +112,18 @@
|
|||
</UButton>
|
||||
</UDropdownMenu>
|
||||
</div>
|
||||
|
||||
<UPagination
|
||||
v-if="paging?.total_pages > 1"
|
||||
:page="paging.page"
|
||||
:total="paging.total"
|
||||
:items-per-page="paging.per_page"
|
||||
:disabled="isLoading"
|
||||
show-edges
|
||||
:sibling-count="0"
|
||||
@update:page="loadContent"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -416,6 +428,22 @@
|
|||
description="There are no custom defined presets."
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="filteredPresets.length > 0 && !query && paging?.total_pages > 1"
|
||||
class="flex justify-end"
|
||||
>
|
||||
<UPagination
|
||||
:page="paging.page"
|
||||
:total="paging.total"
|
||||
:items-per-page="paging.per_page"
|
||||
:disabled="isLoading"
|
||||
show-edges
|
||||
:sibling-count="0"
|
||||
@update:page="loadContent"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UAlert v-if="!query && presets.length > 0" color="info" variant="soft">
|
||||
<template #description>
|
||||
<ul class="list-disc space-y-2 pl-5 text-sm text-default">
|
||||
|
|
@ -443,7 +471,6 @@
|
|||
:addInProgress="editor.addInProgress.value"
|
||||
:reference="editor.reference.value"
|
||||
:preset="editor.preset.value"
|
||||
:presets="presets"
|
||||
@cancel="() => void editor.requestClose()"
|
||||
@dirty-change="(dirty) => (editor.dirty.value = dirty)"
|
||||
@submit="editor.submit"
|
||||
|
|
@ -470,6 +497,8 @@ const config = useYtpConfig();
|
|||
const box = useConfirm();
|
||||
const editor = usePresetEditor();
|
||||
const pageShell = requirePageShell('presets');
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { confirmDialog } = useDialog();
|
||||
const { toggleExpand, expandClass } = useExpandableMeta();
|
||||
|
||||
|
|
@ -481,21 +510,19 @@ const showFilter = ref(false);
|
|||
const filterInput = ref<{ inputRef?: { value?: HTMLInputElement | null } } | null>(null);
|
||||
const selectedIds = ref<number[]>([]);
|
||||
const massDelete = ref(false);
|
||||
const page = ref<number>(route.query.page ? parseInt(route.query.page as string, 10) : 1);
|
||||
|
||||
const presets = computed(() => presetsStore.presets.value as PresetWithUI[]);
|
||||
const paging = presetsStore.pagination;
|
||||
const isLoading = presetsStore.isLoading;
|
||||
|
||||
const presetsNoDefault = computed(() => presets.value.filter((item) => !item.default));
|
||||
|
||||
const filteredPresets = computed<PresetWithUI[]>(() => {
|
||||
const normalizedQuery = query.value?.toLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return presetsNoDefault.value;
|
||||
return presets.value;
|
||||
}
|
||||
|
||||
return presetsNoDefault.value.filter((item) =>
|
||||
deepIncludes(item, normalizedQuery, new WeakSet()),
|
||||
);
|
||||
return presets.value.filter((item) => deepIncludes(item, normalizedQuery, new WeakSet()));
|
||||
});
|
||||
|
||||
const selectablePresetIds = computed(() =>
|
||||
|
|
@ -525,6 +552,19 @@ const bulkActionGroups = computed<DropdownMenuItem[][]>(() => [
|
|||
],
|
||||
]);
|
||||
|
||||
const syncPageQuery = async (pageNumber: number): Promise<void> => {
|
||||
const totalPages = paging.value.total_pages;
|
||||
const nextQuery = { ...route.query };
|
||||
|
||||
if (totalPages > 1) {
|
||||
nextQuery.page = String(pageNumber);
|
||||
} else {
|
||||
delete nextQuery.page;
|
||||
}
|
||||
|
||||
await router.replace({ query: nextQuery });
|
||||
};
|
||||
|
||||
watch(showFilter, (value) => {
|
||||
if (!value) {
|
||||
query.value = '';
|
||||
|
|
@ -553,6 +593,13 @@ const toggleFilterPanel = async (): Promise<void> => {
|
|||
filterInput.value?.inputRef?.value?.focus?.({ preventScroll: true });
|
||||
};
|
||||
|
||||
const loadContent = async (pageNumber = 1): Promise<void> => {
|
||||
page.value = pageNumber;
|
||||
await presetsStore.loadPresets(pageNumber, undefined, { excludeDefaults: true });
|
||||
await nextTick();
|
||||
await syncPageQuery(pageNumber);
|
||||
};
|
||||
|
||||
const toggleMasterSelection = (): void => {
|
||||
if (allSelected.value) {
|
||||
selectedIds.value = [];
|
||||
|
|
@ -596,15 +643,20 @@ const deleteSelected = async (): Promise<void> => {
|
|||
|
||||
massDelete.value = true;
|
||||
|
||||
for (const item of itemsToDelete) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
try {
|
||||
for (const item of itemsToDelete) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
}
|
||||
|
||||
await presetsStore.deletePreset(item.id);
|
||||
}
|
||||
await presetsStore.deletePreset(item.id);
|
||||
} finally {
|
||||
selectedIds.value = [];
|
||||
massDelete.value = false;
|
||||
}
|
||||
|
||||
selectedIds.value = [];
|
||||
massDelete.value = false;
|
||||
await loadContent(page.value);
|
||||
};
|
||||
|
||||
const deleteItem = async (item: Preset): Promise<void> => {
|
||||
|
|
@ -640,5 +692,5 @@ const calcPath = (path?: string): string => {
|
|||
return path ? location + '/' + sTrim(path, '/') : location;
|
||||
};
|
||||
|
||||
onMounted(async () => await presetsStore.loadPresets(1, 1000));
|
||||
onMounted(async () => await loadContent(page.value));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -104,6 +104,26 @@ describe('usePresets', () => {
|
|||
requestSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('requests custom presets without defaults when asked', async () => {
|
||||
const requestSpy = spyOn(utils, 'request')
|
||||
requestSpy.mockResolvedValueOnce(
|
||||
createMockResponse({
|
||||
ok: true,
|
||||
status: 200,
|
||||
jsonData: {
|
||||
items: [mockPreset],
|
||||
pagination: mockPagination,
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
const presets = usePresets()
|
||||
await presets.loadPresets(2, 25, { excludeDefaults: true })
|
||||
|
||||
expect(requestSpy).toHaveBeenCalledWith('/api/presets/?page=2&per_page=25&exclude_defaults=true')
|
||||
requestSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('sorts presets by priority then name', async () => {
|
||||
const items = [
|
||||
{ ...mockPreset, id: 1, name: 'B', priority: 2 },
|
||||
|
|
@ -127,12 +147,12 @@ describe('usePresets', () => {
|
|||
await presets.loadPresets()
|
||||
|
||||
const sorted = presets.presets.value
|
||||
expect(sorted[0].priority).toBe(2)
|
||||
expect(sorted[0].name).toBe('A')
|
||||
expect(sorted[1].priority).toBe(2)
|
||||
expect(sorted[1].name).toBe('B')
|
||||
expect(sorted[2].priority).toBe(1)
|
||||
expect(sorted[2].name).toBe('C')
|
||||
expect(sorted[0]!.priority).toBe(2)
|
||||
expect(sorted[0]!.name).toBe('A')
|
||||
expect(sorted[1]!.priority).toBe(2)
|
||||
expect(sorted[1]!.name).toBe('B')
|
||||
expect(sorted[2]!.priority).toBe(1)
|
||||
expect(sorted[2]!.name).toBe('C')
|
||||
requestSpy.mockRestore()
|
||||
})
|
||||
|
||||
|
|
@ -219,7 +239,7 @@ describe('usePresets', () => {
|
|||
const presets = usePresets()
|
||||
await presets.updatePreset(1, { ...mockPreset, default: true })
|
||||
|
||||
const requestBody = JSON.parse((requestSpy.mock.calls[0][1] as any).body)
|
||||
const requestBody = JSON.parse((requestSpy.mock.calls[0]![1] as any).body)
|
||||
expect(requestBody.id).toBeUndefined()
|
||||
expect(requestBody.default).toBe(false)
|
||||
requestSpy.mockRestore()
|
||||
|
|
@ -257,7 +277,7 @@ describe('usePresets', () => {
|
|||
const presets = usePresets()
|
||||
await presets.patchPreset(1, { id: 10, default: true })
|
||||
|
||||
const requestBody = JSON.parse((requestSpy.mock.calls[0][1] as any).body)
|
||||
const requestBody = JSON.parse((requestSpy.mock.calls[0]![1] as any).body)
|
||||
expect(requestBody.id).toBeUndefined()
|
||||
expect(requestBody.default).toBe(false)
|
||||
requestSpy.mockRestore()
|
||||
|
|
|
|||
Loading…
Reference in a new issue