Migrate SvelteKit to the latest version 431 (#526)

2025-12-08 04:09:07 +00:00 · 2022-08-24 21:10:48 -07:00
parent fb0fa742f5
commit db2ed2d881
47 changed files with 1509 additions and 1216 deletions
--- a/web/src/routes/admin/+page.svelte
+++ b/web/src/routes/admin/+page.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import { AdminSideBarSelection } from '$lib/models/admin-sidebar-selection';
+	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
+	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
+	import UserManagement from '$lib/components/admin-page/user-management.svelte';
+	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+	import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
+	import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
+	import StatusBox from '$lib/components/shared-components/status-box.svelte';
+	import type { PageData } from './$types';
+	import { api, UserResponseDto } from '@api';
+
+	let selectedAction: AdminSideBarSelection = AdminSideBarSelection.USER_MANAGEMENT;
+
+	export let data: PageData;
+
+	let editUser: UserResponseDto;
+
+	let shouldShowEditUserForm = false;
+	let shouldShowCreateUserForm = false;
+	let shouldShowInfoPanel = false;
+
+	const onButtonClicked = (buttonType: CustomEvent) => {
+		selectedAction = buttonType.detail['actionType'] as AdminSideBarSelection;
+	};
+
+	onMount(() => {
+		selectedAction = AdminSideBarSelection.USER_MANAGEMENT;
+	});
+
+	const onUserCreated = async () => {
+		const getAllUsersRes = await api.userApi.getAllUsers(false);
+		data.allUsers = getAllUsersRes.data;
+		shouldShowCreateUserForm = false;
+	};
+
+	const editUserHandler = async (event: CustomEvent) => {
+		const { user } = event.detail;
+		editUser = user;
+		shouldShowEditUserForm = true;
+	};
+
+	const onEditUserSuccess = async () => {
+		const getAllUsersRes = await api.userApi.getAllUsers(false);
+		data.allUsers = getAllUsersRes.data;
+		shouldShowEditUserForm = false;
+	};
+
+	const onEditPasswordSuccess = async () => {
+		const getAllUsersRes = await api.userApi.getAllUsers(false);
+		data.allUsers = getAllUsersRes.data;
+		shouldShowEditUserForm = false;
+		shouldShowInfoPanel = true;
+	};
+</script>
+
+<svelte:head>
+	<title>Administration - Immich</title>
+</svelte:head>
+
+<NavigationBar user={data.user} />
+
+{#if shouldShowCreateUserForm}
+	<FullScreenModal on:clickOutside={() => (shouldShowCreateUserForm = false)}>
+		<CreateUserForm on:user-created={onUserCreated} />
+	</FullScreenModal>
+{/if}
+
+{#if shouldShowEditUserForm}
+	<FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
+		<EditUserForm
+			user={editUser}
+			on:edit-success={onEditUserSuccess}
+			on:reset-password-success={onEditPasswordSuccess}
+		/>
+	</FullScreenModal>
+{/if}
+
+{#if shouldShowInfoPanel}
+	<FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
+		<div class="border bg-white shadow-sm w-[500px] rounded-3xl p-8 text-sm">
+			<h1 class="font-medium text-immich-primary text-lg mb-4">Password reset success</h1>
+
+			<p>
+				The user's password has been reset to the default <code
+					class="font-bold bg-gray-200 px-2 py-1 rounded-md text-immich-primary">password</code
+				>
+				<br />
+				Please inform the user, and they will need to change the password at the next log-on.
+			</p>
+
+			<div class="flex w-full">
+				<button
+					on:click={() => (shouldShowInfoPanel = false)}
+					class="mt-6 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
+					>Done
+				</button>
+			</div>
+		</div>
+	</FullScreenModal>
+{/if}
+
+<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
+	<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col">
+		<SideBarButton
+			title="User"
+			logo={AccountMultipleOutline}
+			actionType={AdminSideBarSelection.USER_MANAGEMENT}
+			isSelected={selectedAction === AdminSideBarSelection.USER_MANAGEMENT}
+			on:selected={onButtonClicked}
+		/>
+
+		<div class="mb-6 mt-auto">
+			<StatusBox />
+		</div>
+	</section>
+	<section class="overflow-y-auto relative">
+		<div id="setting-title" class="pt-10 fixed w-full z-50 bg-immich-bg">
+			<h1 class="text-lg ml-8 mb-4 text-immich-primary font-medium">{selectedAction}</h1>
+			<hr />
+		</div>
+
+		<section id="setting-content" class="relative pt-[85px] flex place-content-center">
+			<section class="w-[800px] pt-4">
+				{#if selectedAction === AdminSideBarSelection.USER_MANAGEMENT}
+					<UserManagement
+						allUsers={data.allUsers}
+						on:create-user={() => (shouldShowCreateUserForm = true)}
+						on:edit-user={editUserHandler}
+					/>
+				{/if}
+			</section>
+		</section>
+	</section>
+</section>