-
-
-
-
-
{$t('show_and_hide_people')}
-
({totalPeopleCount.toLocaleString($locale)})
-
-
+
+ {#snippet buttons()}
+ goto('/people')}
+ />
-
+ {/snippet}
-
+
{#snippet children({ person })}
{@const hidden = overrides.get(person.id) ?? person.isHidden}
+
diff --git a/web/src/routes/(user)/people/manage/+page.ts b/web/src/routes/(user)/people/manage/+page.ts
new file mode 100644
index 0000000000..1db0f79940
--- /dev/null
+++ b/web/src/routes/(user)/people/manage/+page.ts
@@ -0,0 +1,13 @@
+import { getAllPeople } from '@immich/sdk';
+import { authenticate } from '$lib/utils/auth';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+ await authenticate(url);
+
+ const people = await getAllPeople({ withHidden: true });
+
+ return {
+ people,
+ };
+}) satisfies PageLoad;
diff --git a/web/src/routes/(user)/people/ManagePeopleVisibility.spec.ts b/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
similarity index 56%
rename from web/src/routes/(user)/people/ManagePeopleVisibility.spec.ts
rename to web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
index 1500f05ecd..eb0e6a6357 100644
--- a/web/src/routes/(user)/people/ManagePeopleVisibility.spec.ts
+++ b/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
@@ -1,35 +1,50 @@
import { render } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
+import type { ComponentProps } from 'svelte';
import { vi } from 'vitest';
import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
import { personFactory } from '@test-data/factories/person-factory';
-import ManagePeopleVisibilityWrapper from './ManagePeopleVisibility.test-wrapper.svelte';
+import ManagePeoplePage from './+page.svelte';
+import ManagePeoplePageTestWrapper from './ManagePeopleVisibility.test-wrapper.svelte';
-describe('ManagePeopleVisibility component', () => {
+vi.mock(import('$lib/managers/feature-flags-manager.svelte'), function () {
+ return {
+ featureFlagsManager: { init: vi.fn(), loadFeatureFlags: vi.fn(), value: {} } as never,
+ };
+});
+
+vi.mock('$lib/components/layouts/UserPageLayout.svelte', async () => {
+ return await import('@test-data/mocks/UserPageLayout.mock.svelte');
+});
+
+const getData = (
+ people: ReturnType
[],
+ hasNextPage = false,
+): ComponentProps['data'] => ({
+ error: undefined,
+ meta: { title: 'Manage people visibility' },
+ asset: undefined,
+ people: {
+ people,
+ total: people.length,
+ hidden: people.filter((person) => person.isHidden).length,
+ hasNextPage,
+ },
+});
+
+describe('People manage page', () => {
beforeEach(() => {
vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
});
it('keeps toggled hidden state when loading more people', async () => {
- const onClose = vi.fn();
- const onUpdate = vi.fn();
- const loadNextPage = vi.fn();
-
const [personA, personB, personC] = [
personFactory.build({ id: 'a', isHidden: false }),
personFactory.build({ id: 'b', isHidden: false }),
personFactory.build({ id: 'c', isHidden: true }),
];
- const { container, rerender } = render(ManagePeopleVisibilityWrapper, {
- props: {
- people: [personA, personB],
- totalPeopleCount: 3,
- onClose,
- onUpdate,
- loadNextPage,
- },
- });
+ const { container, rerender } = render(ManagePeoplePageTestWrapper, { data: getData([personA, personB], true) });
const user = userEvent.setup();
let personButtons = container.querySelectorAll('button[aria-pressed]');
@@ -38,13 +53,7 @@ describe('ManagePeopleVisibility component', () => {
await user.click(personButtons[0]);
expect(personButtons[0].getAttribute('aria-pressed')).toBe('true');
- await rerender({
- people: [personA, personB, personC],
- totalPeopleCount: 3,
- onClose,
- onUpdate,
- loadNextPage,
- });
+ await rerender({ data: getData([personA, personB, personC], false) });
personButtons = container.querySelectorAll('button[aria-pressed]');
expect(personButtons).toHaveLength(3);
@@ -53,33 +62,15 @@ describe('ManagePeopleVisibility component', () => {
});
it('shows newly loaded hidden people as hidden', async () => {
- const onClose = vi.fn();
- const onUpdate = vi.fn();
- const loadNextPage = vi.fn();
-
const [personA, personB, personC] = [
personFactory.build({ id: 'a', isHidden: false }),
personFactory.build({ id: 'b', isHidden: false }),
personFactory.build({ id: 'c', isHidden: true }),
];
- const { container, rerender } = render(ManagePeopleVisibilityWrapper, {
- props: {
- people: [personA, personB],
- totalPeopleCount: 3,
- onClose,
- onUpdate,
- loadNextPage,
- },
- });
+ const { container, rerender } = render(ManagePeoplePageTestWrapper, { data: getData([personA, personB], true) });
- await rerender({
- people: [personA, personB, personC],
- totalPeopleCount: 3,
- onClose,
- onUpdate,
- loadNextPage,
- });
+ await rerender({ data: getData([personA, personB, personC], false) });
const personButtons = container.querySelectorAll('button[aria-pressed]');
expect(personButtons).toHaveLength(3);
diff --git a/web/src/routes/(user)/people/manage/ManagePeopleVisibility.test-wrapper.svelte b/web/src/routes/(user)/people/manage/ManagePeopleVisibility.test-wrapper.svelte
new file mode 100644
index 0000000000..281173cc3f
--- /dev/null
+++ b/web/src/routes/(user)/people/manage/ManagePeopleVisibility.test-wrapper.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/web/src/test-data/mocks/UserPageLayout.mock.svelte b/web/src/test-data/mocks/UserPageLayout.mock.svelte
new file mode 100644
index 0000000000..6cf59b62d3
--- /dev/null
+++ b/web/src/test-data/mocks/UserPageLayout.mock.svelte
@@ -0,0 +1,13 @@
+
+
+
+ {@render buttons?.()}
+ {@render children?.()}
+