-
-
-
- -- -
-
---
@@ -308,18 +340,9 @@ function closeDialog() {
background: var(--r-color-surface);
}
-.r-v2-del-rom__list {
- list-style: none;
- padding: 0;
- margin: 0;
- display: flex;
- flex-direction: column;
- gap: 6px;
- max-height: 360px;
- overflow-y: auto;
-}
-
.r-v2-del-rom__row {
+ box-sizing: border-box;
+ height: 66px;
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
diff --git a/frontend/src/v2/components/Gallery/SelectionBar.test.ts b/frontend/src/v2/components/Gallery/SelectionBar.test.ts
index 111de3285..290a597ba 100644
--- a/frontend/src/v2/components/Gallery/SelectionBar.test.ts
+++ b/frontend/src/v2/components/Gallery/SelectionBar.test.ts
@@ -19,6 +19,7 @@ const {
selectAll,
snackbarError,
snackbarSuccess,
+ updateUserRomProps,
} = vi.hoisted(() => ({
addRomsToCollection: vi.fn(),
createCollection: vi.fn(),
@@ -27,6 +28,7 @@ const {
selectAll: vi.fn(),
snackbarError: vi.fn(),
snackbarSuccess: vi.fn(),
+ updateUserRomProps: vi.fn(),
}));
// The whole-result behavior is covered by the composable's own tests;
@@ -65,6 +67,13 @@ vi.mock("@/services/api/collection", () => ({
},
}));
+vi.mock("@/services/api/rom", async (importOriginal) => {
+ const actual = await importOriginal();
+ return {
+ default: { ...actual.default, updateUserRomProps },
+ };
+});
+
vi.mock("@/v2/composables/useSnackbar", () => ({
useSnackbar: () => ({
success: snackbarSuccess,
@@ -100,7 +109,10 @@ function select(...roms: SimpleRom[]) {
roms.forEach((r, i) => selection.toggle(r, i));
}
-function mountBar(props: { hideDownload?: boolean } = {}) {
+function mountBar(
+ props: { hideDownload?: boolean } = {},
+ extraStubs: Record = {},
+) {
return mount(SelectionBar, {
props,
global: {
@@ -120,6 +132,7 @@ function mountBar(props: { hideDownload?: boolean } = {}) {
RMenuItem: true,
RIcon: true,
RDivider: true,
+ ...extraStubs,
},
},
});
@@ -337,3 +350,41 @@ describe("SelectionBar select all", () => {
).toBe(true);
});
});
+
+describe("SelectionBar bulk status", () => {
+ beforeEach(() => {
+ setActivePinia(createPinia());
+ vi.clearAllMocks();
+ });
+
+ it("ignores a status choice while the previous batch is running", async () => {
+ let finish: () => void = () => {};
+ updateUserRomProps.mockImplementation(
+ () => new Promise((resolve) => (finish = resolve)),
+ );
+ select(rom(1));
+ const wrapper = mountBar(
+ {},
+ {
+ RMenu: { template: ") {
const roms = selection.roms;
- if (roms.length === 0) return;
+ if (roms.length === 0 || applyingStatus.value) return;
+ applyingStatus.value = true;
+ try {
+ await applyStatusTo(roms, data);
+ } finally {
+ applyingStatus.value = false;
+ }
+}
+async function applyStatusTo(
+ roms: typeof selection.roms,
+ data: Partial,
+) {
const before = new Map();
for (const rom of roms) {
if (!rom.rom_user) continue;
@@ -230,8 +247,8 @@ async function applyStatus(data: Partial) {
syncCachedRom(rom);
}
- const results = await Promise.allSettled(
- roms.map((rom) => romApi.updateUserRomProps({ romId: rom.id, data })),
+ const results = await settleWithLimit(roms, STATUS_CONCURRENCY, (rom) =>
+ romApi.updateUserRomProps({ romId: rom.id, data }),
);
const failed = roms.filter((_, i) => results[i].status === "rejected");
for (const rom of failed) {
@@ -469,6 +486,7 @@ function clear() {
:key="key"
:icon="STATUS_ICONS[key]"
:variant="enumAllActive[key] ? 'active' : 'default'"
+ :disabled="applyingStatus"
@click="toggleEnumStatus(key)"
>
{{ t(romStatusMap[key].i18nKey) }}
@@ -485,6 +503,7 @@ function clear() {
:icon="STATUS_ICONS[key]"
:text-color="flagAllActive[key] ? 'brand-primary' : undefined"
:icon-color="flagAllActive[key] ? 'brand-primary' : undefined"
+ :disabled="applyingStatus"
@click="toggleFlagStatus(key)"
>
{{ t(romStatusMap[key].i18nKey) }}
@@ -503,6 +522,7 @@ function clear() {
:icon="STATUS_ICONS[key]"
:text-color="flagAllActive[key] ? 'brand-primary' : undefined"
:icon-color="flagAllActive[key] ? 'brand-primary' : undefined"
+ :disabled="applyingStatus"
@click="toggleFlagStatus(key)"
>
{{ t(romStatusMap[key].i18nKey) }}
@@ -516,6 +536,7 @@ function clear() {
{{ t("rom.clear-all") }}
diff --git a/frontend/src/v2/utils/settleWithLimit.test.ts b/frontend/src/v2/utils/settleWithLimit.test.ts
new file mode 100644
index 000000000..2c132fd23
--- /dev/null
+++ b/frontend/src/v2/utils/settleWithLimit.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { settleWithLimit } from "./settleWithLimit";
+
+describe("settleWithLimit", () => {
+ it("never runs more than the limit at once", async () => {
+ let inFlight = 0;
+ let peak = 0;
+ const task = async (n: number) => {
+ inFlight++;
+ peak = Math.max(peak, inFlight);
+ await new Promise((resolve) => setTimeout(resolve, 0));
+ inFlight--;
+ return n * 2;
+ };
+
+ const results = await settleWithLimit([1, 2, 3, 4, 5, 6, 7], 3, task);
+
+ expect(peak).toBe(3);
+ expect(results).toEqual(
+ [2, 4, 6, 8, 10, 12, 14].map((value) => ({
+ status: "fulfilled",
+ value,
+ })),
+ );
+ });
+
+ it("keeps each rejection at its item's index", async () => {
+ const results = await settleWithLimit([1, 2, 3], 2, async (n) => {
+ if (n === 2) throw new Error("boom");
+ return n;
+ });
+
+ expect(results.map((r) => r.status)).toEqual([
+ "fulfilled",
+ "rejected",
+ "fulfilled",
+ ]);
+ });
+
+ it("resolves an empty list", async () => {
+ expect(await settleWithLimit([], 4, async () => 1)).toEqual([]);
+ });
+});
diff --git a/frontend/src/v2/utils/settleWithLimit.ts b/frontend/src/v2/utils/settleWithLimit.ts
new file mode 100644
index 000000000..6a808b21c
--- /dev/null
+++ b/frontend/src/v2/utils/settleWithLimit.ts
@@ -0,0 +1,24 @@
+/** `Promise.allSettled` over `items`, with at most `limit` tasks in flight. */
+export async function settleWithLimit(
+ items: readonly T[],
+ limit: number,
+ task: (item: T) => Promise,
+): Promise[]> {
+ const results = new Array>(items.length);
+ let next = 0;
+
+ async function worker() {
+ while (next < items.length) {
+ const i = next++;
+ try {
+ results[i] = { status: "fulfilled", value: await task(items[i]) };
+ } catch (reason) {
+ results[i] = { status: "rejected", reason };
+ }
+ }
+ }
+
+ const workers = Math.max(1, Math.min(limit, items.length));
+ await Promise.all(Array.from({ length: workers }, worker));
+ return results;
+}