refactor: update presets UI to follow same rules as other pages.

Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
arabcoders 2026-04-22 19:38:35 +03:00
parent c9534bdf11
commit 35f38d7cee
8 changed files with 147 additions and 37 deletions

4
API.md
View file

@ -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.
---

View file

@ -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:

View file

@ -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)

View file

@ -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"

View file

@ -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: '',

View file

@ -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);

View file

@ -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>

View file

@ -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()