From 9d225d3d0631b3b7fe4ed7083473f84fad4bb405 Mon Sep 17 00:00:00 2001 From: Jason Rasmussen Date: Fri, 13 Oct 2023 11:02:28 -0400 Subject: [PATCH] refactor(web): admin layout (#4461) --- .../admin-page/jobs/jobs-panel.svelte | 11 - .../layouts/user-page-layout.svelte | 9 +- .../side-bar/admin-side-bar.svelte | 33 ++ web/src/routes/admin/+layout.svelte | 68 ---- web/src/routes/admin/+layout.ts | 14 - .../routes/admin/jobs-status/+page.server.ts | 1 + web/src/routes/admin/jobs-status/+page.svelte | 29 +- .../admin/server-status/+page.server.ts | 1 + .../routes/admin/server-status/+page.svelte | 14 +- .../admin/system-settings/+page.server.ts | 5 +- .../routes/admin/system-settings/+page.svelte | 131 +++---- .../routes/admin/user-management/+page.svelte | 361 +++++++++--------- 12 files changed, 333 insertions(+), 344 deletions(-) create mode 100644 web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte delete mode 100644 web/src/routes/admin/+layout.svelte delete mode 100644 web/src/routes/admin/+layout.ts diff --git a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte index 2d2fcc7e1b..138a85d9c6 100644 --- a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte +++ b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte @@ -3,7 +3,6 @@ notificationController, NotificationType, } from '$lib/components/shared-components/notification/notification'; - import { AppRoute } from '$lib/constants'; import { featureFlags } from '$lib/stores/server-config.store'; import { handleError } from '$lib/utils/handle-error'; import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api'; @@ -14,7 +13,6 @@ import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte'; import LibraryShelves from 'svelte-material-icons/LibraryShelves.svelte'; import FolderMove from 'svelte-material-icons/FolderMove.svelte'; - import CogIcon from 'svelte-material-icons/Cog.svelte'; import Table from 'svelte-material-icons/Table.svelte'; import TagMultiple from 'svelte-material-icons/TagMultiple.svelte'; import VectorCircle from 'svelte-material-icons/VectorCircle.svelte'; @@ -22,7 +20,6 @@ import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte'; import JobTile from './job-tile.svelte'; import StorageMigrationDescription from './storage-migration-description.svelte'; - import Button from '../../elements/buttons/button.svelte'; export let jobs: AllJobStatusResponseDto; @@ -149,14 +146,6 @@ {/if}
-
- - - -
{#each jobList as [jobName, { title, subtitle, disabled, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]} {@const { jobCounts, queueStatus } = jobs[jobName]} @@ -23,7 +26,11 @@ class="relative grid h-screen grid-cols-[theme(spacing.18)_auto] overflow-hidden bg-immich-bg pt-[var(--navbar-height)] dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]" > - + {#if admin} + + {:else} + + {/if} {#if title} diff --git a/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte b/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte new file mode 100644 index 0000000000..6a88602d6b --- /dev/null +++ b/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + +
+ +
+ diff --git a/web/src/routes/admin/+layout.svelte b/web/src/routes/admin/+layout.svelte deleted file mode 100644 index 6aa21b841d..0000000000 --- a/web/src/routes/admin/+layout.svelte +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - - - - - - - - - - -
- -
- - -
-
- -
-
- diff --git a/web/src/routes/admin/+layout.ts b/web/src/routes/admin/+layout.ts deleted file mode 100644 index edabd3d067..0000000000 --- a/web/src/routes/admin/+layout.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { AppRoute } from '$lib/constants'; -import { redirect } from '@sveltejs/kit'; -import type { LayoutLoad } from './$types'; - -export const load = (async ({ parent, route }) => { - const { user } = await parent(); - if (!user) { - throw redirect(302, AppRoute.AUTH_LOGIN); - } else if (!user.isAdmin) { - throw redirect(302, AppRoute.PHOTOS); - } - - return { routeId: route.id, user }; -}) satisfies LayoutLoad; diff --git a/web/src/routes/admin/jobs-status/+page.server.ts b/web/src/routes/admin/jobs-status/+page.server.ts index 7407fee654..7e700ba338 100644 --- a/web/src/routes/admin/jobs-status/+page.server.ts +++ b/web/src/routes/admin/jobs-status/+page.server.ts @@ -13,6 +13,7 @@ export const load = (async ({ locals: { user, api } }) => { const { data: jobs } = await api.jobApi.getAllJobsStatus(); return { + user, jobs, meta: { title: 'Job Status', diff --git a/web/src/routes/admin/jobs-status/+page.svelte b/web/src/routes/admin/jobs-status/+page.svelte index 858a28858a..d4884b6de2 100644 --- a/web/src/routes/admin/jobs-status/+page.svelte +++ b/web/src/routes/admin/jobs-status/+page.svelte @@ -1,7 +1,14 @@ -{#if jobs} - -{/if} + +
+ + +
+ + Manage Concurrency +
+ + +
+
+
+ {#if jobs} + + {/if} +
+
+ diff --git a/web/src/routes/admin/server-status/+page.server.ts b/web/src/routes/admin/server-status/+page.server.ts index 477e27d8be..00c5e48bfa 100644 --- a/web/src/routes/admin/server-status/+page.server.ts +++ b/web/src/routes/admin/server-status/+page.server.ts @@ -14,6 +14,7 @@ export const load = (async ({ parent, locals: { api } }) => { const { data: stats } = await api.serverInfoApi.getStats(); return { + user, stats, meta: { title: 'Server Stats', diff --git a/web/src/routes/admin/server-status/+page.svelte b/web/src/routes/admin/server-status/+page.svelte index ec16cca589..d5fd31f314 100644 --- a/web/src/routes/admin/server-status/+page.svelte +++ b/web/src/routes/admin/server-status/+page.svelte @@ -1,10 +1,12 @@ - + +
+
+ +
+
+ diff --git a/web/src/routes/admin/system-settings/+page.server.ts b/web/src/routes/admin/system-settings/+page.server.ts index 65a9485de9..d1b6525184 100644 --- a/web/src/routes/admin/system-settings/+page.server.ts +++ b/web/src/routes/admin/system-settings/+page.server.ts @@ -2,7 +2,7 @@ import { AppRoute } from '$lib/constants'; import { redirect } from '@sveltejs/kit'; import type { PageServerLoad } from './$types'; -export const load: PageServerLoad = async ({ parent }) => { +export const load: PageServerLoad = async ({ parent, locals: { api } }) => { const { user } = await parent(); if (!user) { @@ -11,8 +11,11 @@ export const load: PageServerLoad = async ({ parent }) => { throw redirect(302, AppRoute.PHOTOS); } + const { data: configs } = await api.systemConfigApi.getConfig(); + return { user, + configs, meta: { title: 'System Settings', }, diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte index 85f7807754..0f2b2dd7df 100644 --- a/web/src/routes/admin/system-settings/+page.svelte +++ b/web/src/routes/admin/system-settings/+page.svelte @@ -9,26 +9,23 @@ import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte'; import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte'; import ThumbnailSettings from '$lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte'; - import Button from '$lib/components/elements/buttons/button.svelte'; - import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte'; + import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte'; + import LinkButton from '$lib/components/elements/buttons/link-button.svelte'; + import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte'; import { downloadManager } from '$lib/stores/download'; import { featureFlags } from '$lib/stores/server-config.store'; import { downloadBlob } from '$lib/utils/asset-utils'; - import { SystemConfigDto, api, copyToClipboard } from '@api'; + import { copyToClipboard } from '@api'; import Alert from 'svelte-material-icons/Alert.svelte'; import ContentCopy from 'svelte-material-icons/ContentCopy.svelte'; import Download from 'svelte-material-icons/Download.svelte'; import type { PageData } from './$types'; - import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte'; export let data: PageData; - const getConfig = async () => { - const { data } = await api.systemConfigApi.getConfig(); - return data; - }; + const configs = data.configs; - const downloadConfig = (configs: SystemConfigDto) => { + const downloadConfig = () => { const blob = new Blob([JSON.stringify(configs, null, 2)], { type: 'application/json' }); const downloadKey = 'immich-config.json'; downloadManager.add(downloadKey, blob.size); @@ -45,70 +42,74 @@
{/if} -
- {#await getConfig()} - - {:then configs} -
- -
+ + downloadConfig()}> +
- Export as JSON - -
+ Export as JSON + + + - - - +
+
+ + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - - {/await} -
+ + + +
+
+ diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte index 586d5a3042..913ce0c9bf 100644 --- a/web/src/routes/admin/user-management/+page.svelte +++ b/web/src/routes/admin/user-management/+page.svelte @@ -15,6 +15,7 @@ import { page } from '$app/stores'; import { locale } from '$lib/stores/preferences.store'; import Button from '$lib/components/elements/buttons/button.svelte'; + import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte'; import type { PageData } from './$types'; export let data: PageData; @@ -107,185 +108,189 @@ }; -
- {#if shouldShowCreateUserForm} - (shouldShowCreateUserForm = false)}> - (shouldShowCreateUserForm = false)} /> - - {/if} - - {#if shouldShowEditUserForm} - (shouldShowEditUserForm = false)}> - - - {/if} - - {#if shouldShowDeleteConfirmDialog} - (shouldShowDeleteConfirmDialog = false)} - /> - {/if} - - {#if shouldShowRestoreDialog} - (shouldShowRestoreDialog = false)} - /> - {/if} - - {#if shouldShowInfoPanel} - (shouldShowInfoPanel = false)}> -
-

Password reset success

- -

- The user's password has been reset to the default password -
- Please inform the user, and they will need to change the password at the next log-on. -

- -
- -
-
- - {/if} - - - - - - - - - - - - - {#if allUsers} - {#each allUsers as user, i} - - - - - - - - {/each} + +
+
+ {#if shouldShowCreateUserForm} + (shouldShowCreateUserForm = false)}> + (shouldShowCreateUserForm = false)} /> + {/if} -
- - - - - - - - - - - {#if allUsers} - {#each allUsers as user, i} - - - - - - {/each} + {#if shouldShowEditUserForm} + (shouldShowEditUserForm = false)}> + + {/if} - -
NameEmailAction
{user.firstName} {user.lastName}{user.email} - {#if !isDeleted(user)} - - - {/if} - {#if isDeleted(user)} - - {/if} -
- -
+ {#if shouldShowDeleteConfirmDialog} + (shouldShowDeleteConfirmDialog = false)} + /> + {/if} + + {#if shouldShowRestoreDialog} + (shouldShowRestoreDialog = false)} + /> + {/if} + + {#if shouldShowInfoPanel} + (shouldShowInfoPanel = false)}> +
+

Password reset success

+ +

+ The user's password has been reset to the default password +
+ Please inform the user, and they will need to change the password at the next log-on. +

+ +
+ +
+
+ + {/if} + + + + + + + + + + + + + {#if allUsers} + {#each allUsers as user, i} + + + + + + + + {/each} + {/if} + + + + + + + + + + + + + {#if allUsers} + {#each allUsers as user, i} + + + + + + {/each} + {/if} + +
NameEmailAction
{user.firstName} {user.lastName}{user.email} + {#if !isDeleted(user)} + + + {/if} + {#if isDeleted(user)} + + {/if} +
+ + + + +