From 24f4f59cbde6ab9c7e78eb29f55f3eaa9e2b7621 Mon Sep 17 00:00:00 2001 From: martabal <74269598+martabal@users.noreply.github.com> Date: Thu, 14 Dec 2023 15:47:37 +0100 Subject: [PATCH 1/3] fix: user management tailwind --- .../components/forms/edit-user-form.svelte | 9 +- .../routes/admin/user-management/+page.svelte | 98 +++++-------------- 2 files changed, 30 insertions(+), 77 deletions(-) diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte index 47c439341e617..e4673022cb5df 100644 --- a/web/src/lib/components/forms/edit-user-form.svelte +++ b/web/src/lib/components/forms/edit-user-form.svelte @@ -6,8 +6,9 @@ import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte'; import { handleError } from '../../utils/handle-error'; import Icon from '$lib/components/elements/icon.svelte'; - import { mdiAccountEditOutline } from '@mdi/js'; + import { mdiAccountEditOutline, mdiClose } from '@mdi/js'; import { AppRoute } from '$lib/constants'; + import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; export let user: UserResponseDto; export let canResetPassword = true; @@ -68,8 +69,12 @@
+
+ dispatch('close')} /> +
+
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte index 2545bb25a87f5..c5e657aabcc46 100644 --- a/web/src/routes/admin/user-management/+page.svelte +++ b/web/src/routes/admin/user-management/+page.svelte @@ -107,7 +107,7 @@
-
+
{#if shouldShowCreateUserForm} (shouldShowCreateUserForm = false)}> (shouldShowCreateUserForm = false)} /> @@ -121,6 +121,7 @@ canResetPassword={selectedUser?.id !== $user.id} on:edit-success={onEditUserSuccess} on:reset-password-success={onEditPasswordSuccess} + on:close={() => (shouldShowEditUserForm = false)} /> {/if} @@ -163,32 +164,34 @@ {/if} - + - - - - + + + + {#if allUsers} {#each allUsers as immichUser, i} - - - + + - - - {/each} - {/if} - -
EmailNameCan importActionEmailAction
{immichUser.email}{immichUser.name} + {immichUser.email} + {#if !isDeleted(immichUser)} {#if immichUser.id !== $user.id} @@ -218,62 +221,7 @@ - {/if} -
- - - - - - - - - - - {#if allUsers} - {#each allUsers as user, i} - - - -
NameEmailAction
{user.name}{user.email} - {#if !isDeleted(user)} - - - {/if} - {#if isDeleted(user)} - From 05065d731aca814b50ddebedd869a1b314958548 Mon Sep 17 00:00:00 2001 From: martabal <74269598+martabal@users.noreply.github.com> Date: Thu, 14 Dec 2023 15:55:06 +0100 Subject: [PATCH 2/3] use top instead of inset-y-0 --- web/src/lib/components/forms/edit-user-form.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte index e4673022cb5df..bf2aadb31dc50 100644 --- a/web/src/lib/components/forms/edit-user-form.svelte +++ b/web/src/lib/components/forms/edit-user-form.svelte @@ -71,7 +71,7 @@
-
+
dispatch('close')} />
From 14f61dc1cacff7037e89c88a11057dbd9d01044c Mon Sep 17 00:00:00 2001 From: martabal <74269598+martabal@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:39:28 +0100 Subject: [PATCH 3/3] add types to createEventDispatcher --- .../settings/ffmpeg/ffmpeg-settings.svelte | 12 ++++++++++-- .../settings/job-settings/job-settings.svelte | 12 ++++++++++-- .../library-settings/library-settings.svelte | 12 ++++++++++-- .../machine-learning-settings.svelte | 12 ++++++++++-- .../settings/map-settings/map-settings.svelte | 12 ++++++++++-- .../new-version-check-settings.svelte | 12 ++++++++++-- .../settings/oauth/oauth-settings.svelte | 12 ++++++++++-- .../password-login/password-login-settings.svelte | 12 ++++++++++-- .../admin-page/settings/setting-buttons-row.svelte | 10 +++++++--- .../storage-template-settings.svelte | 12 ++++++++++-- .../settings/theme/theme-settings.svelte | 12 ++++++++++-- .../settings/thumbnail/thumbnail-settings.svelte | 12 ++++++++++-- .../settings/trash-settings/trash-settings.svelte | 12 ++++++++++-- .../components/asset-viewer/activity-viewer.svelte | 7 ++++++- .../components/asset-viewer/asset-viewer.svelte | 6 +++--- .../components/asset-viewer/detail-panel.svelte | 14 ++++++++++---- .../asset-viewer/intersection-observer.svelte | 8 +++++++- .../lib/components/forms/edit-album-form.svelte | 7 +++++-- web/src/lib/components/forms/edit-user-form.svelte | 10 +++++++--- web/src/lib/components/forms/login-form.svelte | 7 +++++-- .../photos-page/actions/create-shared-link.svelte | 4 +++- .../photos-page/actions/delete-assets.svelte | 4 +++- .../shared-components/album-selection-modal.svelte | 13 ++++++++++++- .../components/shared-components/base-modal.svelte | 5 ++++- .../create-shared-link-modal.svelte | 5 ++++- .../gallery-viewer/asset-selection-viewer.svelte | 4 +++- .../navigation-bar/account-info-panel.svelte | 5 ++++- .../navigation-bar/avatar-selector.svelte | 5 ++++- .../navigation-bar/navigation-bar.svelte | 4 +++- .../shared-components/profile-image-cropper.svelte | 4 +++- .../shared-components/show-shortcuts.svelte | 4 +++- .../side-bar/side-bar-button.svelte | 4 +++- .../user-settings-page/device-card.svelte | 4 +++- web/src/lib/utils/dipatch.ts | 3 +++ web/src/routes/(user)/albums/+page.svelte | 2 +- web/src/routes/admin/user-management/+page.svelte | 2 +- 36 files changed, 227 insertions(+), 58 deletions(-) create mode 100644 web/src/lib/utils/dipatch.ts diff --git a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte index f22538d9430c6..a4b55dccb1325 100644 --- a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte +++ b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte @@ -22,6 +22,7 @@ import SettingAccordion from '../setting-accordion.svelte'; import { mdiHelpCircleOutline } from '@mdi/js'; import Icon from '$lib/components/elements/icon.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited export let disabled = false; @@ -63,6 +64,14 @@ } } + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + async function reset() { const { data: resetConfig } = await api.systemConfigApi.getConfig(); @@ -354,9 +363,8 @@
handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual(savedConfig, defaultConfig)} {disabled} /> diff --git a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte index c945d5c9e474a..f102e791d0778 100644 --- a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte +++ b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte @@ -9,6 +9,7 @@ import { handleError } from '../../../../utils/handle-error'; import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let jobConfig: SystemConfigJobDto; // this is the config that is being edited export let disabled = false; @@ -29,6 +30,14 @@ JobName.Migration, ]; + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + async function getConfigs() { [savedConfig, defaultConfig] = await Promise.all([ api.systemConfigApi.getConfig().then((res) => res.data.job), @@ -101,9 +110,8 @@
handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual(savedConfig, defaultConfig)} {disabled} /> diff --git a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte index 698f2fc3584da..46901b001113f 100644 --- a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte +++ b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte @@ -11,6 +11,7 @@ import { fade } from 'svelte/transition'; import { handleError } from '../../../../utils/handle-error'; import SettingAccordion from '../setting-accordion.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let libraryConfig: SystemConfigLibraryDto; // this is the config that is being edited export let disabled = false; @@ -25,6 +26,14 @@ let savedConfig: SystemConfigLibraryDto; let defaultConfig: SystemConfigLibraryDto; + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + async function getConfigs() { [savedConfig, defaultConfig] = await Promise.all([ api.systemConfigApi.getConfig().then((res) => res.data.library), @@ -131,9 +140,8 @@
handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual(savedConfig, defaultConfig)} {disabled} /> diff --git a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte index be6eb413510ae..ad65eb0c1d058 100644 --- a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte +++ b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte @@ -12,6 +12,7 @@ import SettingSwitch from '../setting-switch.svelte'; import SettingAccordion from '../setting-accordion.svelte'; import SettingSelect from '../setting-select.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let machineLearningConfig: SystemConfigMachineLearningDto; // this is the config that is being edited export let disabled = false; @@ -33,6 +34,14 @@ notificationController.show({ message: 'Reset to the last saved settings', type: NotificationType.Info }); } + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + async function saveSetting() { try { const { data: current } = await api.systemConfigApi.getConfig(); @@ -212,9 +221,8 @@ handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual(savedConfig, defaultConfig)} {disabled} /> diff --git a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte index fe2f879690a17..0375dab0b75a9 100644 --- a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte +++ b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte @@ -11,6 +11,7 @@ import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingSwitch from '../setting-switch.svelte'; import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let config: SystemConfigDto; // this is the config that is being edited export let disabled = false; @@ -18,6 +19,14 @@ let savedConfig: SystemConfigDto; let defaultConfig: SystemConfigDto; + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + async function refreshConfig() { [savedConfig, defaultConfig] = await Promise.all([ api.systemConfigApi.getConfig().then((res) => res.data), @@ -133,9 +142,8 @@ > handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual( { ...savedConfig.map, ...savedConfig.reverseGeocoding }, { ...defaultConfig.map, ...defaultConfig.reverseGeocoding }, diff --git a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte index 7568ef60a57f4..7a88bcc06511c 100644 --- a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte +++ b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte @@ -9,6 +9,7 @@ import { fade } from 'svelte/transition'; import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingSwitch from '../setting-switch.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let newVersionCheckConfig: SystemConfigNewVersionCheckDto; // this is the config that is being edited @@ -22,6 +23,14 @@ ]); } + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + async function saveSetting() { try { const { data: configs } = await api.systemConfigApi.getConfig(); @@ -79,9 +88,8 @@ bind:checked={newVersionCheckConfig.enabled} /> handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual(savedConfig, defaultConfig)} />
diff --git a/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte b/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte index a9f2c27139a5d..098acc01466c4 100644 --- a/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte +++ b/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte @@ -11,6 +11,7 @@ import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte'; import SettingSwitch from '../setting-switch.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let oauthConfig: SystemConfigOAuthDto; export let disabled = false; @@ -18,6 +19,14 @@ let savedConfig: SystemConfigOAuthDto; let defaultConfig: SystemConfigOAuthDto; + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + const handleToggleOverride = () => { // click runs before bind const previouslyEnabled = oauthConfig.mobileOverrideEnabled; @@ -209,9 +218,8 @@ {/if} handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual(savedConfig, defaultConfig)} {disabled} /> diff --git a/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte b/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte index 0b5f7a16c002e..ec8a748fc27cb 100644 --- a/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte +++ b/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte @@ -10,6 +10,7 @@ import ConfirmDisableLogin from '../confirm-disable-login.svelte'; import SettingButtonsRow from '../setting-buttons-row.svelte'; import SettingSwitch from '../setting-switch.svelte'; + import type { ResetOptions } from '$lib/utils/dipatch'; export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited export let disabled = false; @@ -17,6 +18,14 @@ let savedConfig: SystemConfigPasswordLoginDto; let defaultConfig: SystemConfigPasswordLoginDto; + const handleReset = (detail: ResetOptions) => { + if (detail.default) { + resetToDefault(); + } else { + reset(); + } + }; + async function getConfigs() { [savedConfig, defaultConfig] = await Promise.all([ api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin), @@ -107,9 +116,8 @@ /> handleReset(detail)} on:save={saveSetting} - on:reset-to-default={resetToDefault} showResetToDefault={!isEqual(savedConfig, defaultConfig)} {disabled} /> diff --git a/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte b/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte index 3931d41eb2407..a367832cc1ef2 100644 --- a/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte +++ b/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte @@ -1,8 +1,12 @@ diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte index 608e8062485c6..c6fa67cf1822f 100644 --- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte +++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte @@ -23,7 +23,9 @@ let shouldShowAccountInfo = false; let shouldShowAccountInfoPanel = false; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + uploadClicked: void; + }>(); const logOut = async () => { const { data } = await api.authenticationApi.logout(); diff --git a/web/src/lib/components/shared-components/profile-image-cropper.svelte b/web/src/lib/components/shared-components/profile-image-cropper.svelte index cd0e917d51a70..c8544ef0acdfb 100644 --- a/web/src/lib/components/shared-components/profile-image-cropper.svelte +++ b/web/src/lib/components/shared-components/profile-image-cropper.svelte @@ -10,7 +10,9 @@ export let asset: AssetResponseDto; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + close: void; + }>(); let imgElement: HTMLDivElement; onMount(() => { diff --git a/web/src/lib/components/shared-components/show-shortcuts.svelte b/web/src/lib/components/shared-components/show-shortcuts.svelte index e0f1f0974e8ff..2f725f1a45f26 100644 --- a/web/src/lib/components/shared-components/show-shortcuts.svelte +++ b/web/src/lib/components/shared-components/show-shortcuts.svelte @@ -19,7 +19,9 @@ { key: ['Del'], action: 'Delete Asset' }, ], }; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + close: void; + }>(); dispatch('close')} on:escape={() => dispatch('close')}> diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte index a23eeed0329fd..fbefb2eb5cff1 100644 --- a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte +++ b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte @@ -11,7 +11,9 @@ let showMoreInformation = false; - const dispatch = createEventDispatcher(); + const dispatch = createEventDispatcher<{ + selected: void; + }>(); const onButtonClicked = () => dispatch('selected'); diff --git a/web/src/lib/components/user-settings-page/device-card.svelte b/web/src/lib/components/user-settings-page/device-card.svelte index 3cbcd841ba671..9558efe3888c8 100644 --- a/web/src/lib/components/user-settings-page/device-card.svelte +++ b/web/src/lib/components/user-settings-page/device-card.svelte @@ -17,7 +17,9 @@ export let device: AuthDeviceResponseDto; - const dispatcher = createEventDispatcher(); + const dispatcher = createEventDispatcher<{ + delete: void; + }>(); const options: ToRelativeCalendarOptions = { unit: 'days', diff --git a/web/src/lib/utils/dipatch.ts b/web/src/lib/utils/dipatch.ts new file mode 100644 index 0000000000000..6e3457eaa995a --- /dev/null +++ b/web/src/lib/utils/dipatch.ts @@ -0,0 +1,3 @@ +export interface ResetOptions { + default?: boolean; +} diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte index 2979b7a6fb4b5..abf64036bf4fd 100644 --- a/web/src/routes/(user)/albums/+page.svelte +++ b/web/src/routes/(user)/albums/+page.svelte @@ -239,7 +239,7 @@ (shouldShowEditUserForm = false)}> successModifyAlbum()} + on:editSuccess={() => successModifyAlbum()} on:cancel={() => (shouldShowEditUserForm = false)} /> diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte index c5e657aabcc46..ed631c25ffd91 100644 --- a/web/src/routes/admin/user-management/+page.svelte +++ b/web/src/routes/admin/user-management/+page.svelte @@ -119,7 +119,7 @@ (shouldShowEditUserForm = false)} />