helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore(web): improve type checking (#2644)

Browse source 
* fix(web): use id instead of assetId

* chore(web): improve type checking

* fix test jobs

* improve type checking and resolve errors
This commit is contained in:
Michel Heusschen 2023-06-02 15:55:08 +02:00 • committed by GitHub
parent 47673dd773
commit 9807f76aff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 149 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/admin-page/jobs/jobs-panel.svelte
View file

@ -3,10 +3,11 @@
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
import type { ComponentType } from 'svelte';
import Icon from 'svelte-material-icons/DotsVertical.svelte';
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
@ -19,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 { AppRoute } from '$lib/constants';
export let jobs: AllJobStatusResponseDto;

12
web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts">
import { ServerStatsResponseDto } from '@api';
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
import Memory from 'svelte-material-icons/Memory.svelte';
import StatsCard from './stats-card.svelte';
import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
import { locale } from '$lib/stores/preferences.store';
import type { ServerStatsResponseDto } from '@api';
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
import Memory from 'svelte-material-icons/Memory.svelte';
import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
import StatsCard from './stats-card.svelte';
export let stats: ServerStatsResponseDto = {
photos: 0,

2
web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { SystemConfigTemplateStorageOptionDto } from '@api';
import type { SystemConfigTemplateStorageOptionDto } from '@api';
import * as luxon from 'luxon';
export let options: SystemConfigTemplateStorageOptionDto;

12
web/src/lib/components/album-page/__tests__/album-card.spec.ts
View file

@ -37,7 +37,7 @@ describe('AlbumCard component', () => {
])(
'shows album data without thumbnail with count $count - shared: $shared',
async ({ album, count, shared }) => {
sut = render(AlbumCard, { album });
sut = render(AlbumCard, { album, user: album.owner });
const albumImgElement = sut.getByTestId('album-image');
const albumNameElement = sut.getByTestId('album-name');
@ -58,10 +58,10 @@ describe('AlbumCard component', () => {
);
it('shows album data and and loads the thumbnail image when available', async () => {
const thumbnailBlob = new Blob();
const thumbnailFile = new File([new Blob()], 'fileThumbnail');
const thumbnailUrl = 'blob:thumbnailUrlOne';
apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
data: thumbnailBlob,
data: thumbnailFile,
config: {},
headers: {},
status: 200,
@ -74,7 +74,7 @@ describe('AlbumCard component', () => {
shared: false,
albumName: 'some album name'
});
sut = render(AlbumCard, { album });
sut = render(AlbumCard, { album, user: album.owner });
const albumImgElement = sut.getByTestId('album-image');
const albumNameElement = sut.getByTestId('album-name');
@ -92,7 +92,7 @@ describe('AlbumCard component', () => {
},
{ responseType: 'blob' }
);
expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailBlob);
expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
expect(albumNameElement).toHaveTextContent('some album name');
expect(albumDetailsElement).toHaveTextContent('0 items');
@ -102,7 +102,7 @@ describe('AlbumCard component', () => {
const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
beforeEach(async () => {
sut = render(AlbumCard, { album });
sut = render(AlbumCard, { album, user: album.owner });
const albumImgElement = sut.getByTestId('album-image');
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));

18
web/src/lib/components/album-page/album-card.svelte
View file

@ -1,23 +1,11 @@
<script lang="ts" context="module">
type OnShowContextMenu = {
showalbumcontextmenu: OnShowContextMenuDetail;
};
type OnClick = {
click: OnClickDetail;
};
export type OnShowContextMenuDetail = { x: number; y: number };
export type OnClickDetail = AlbumResponseDto;
</script>
<script lang="ts">
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
import { locale } from '$lib/stores/preferences.store';
import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
import { locale } from '$lib/stores/preferences.store';
import IconButton from '../elements/buttons/icon-button.svelte';
import type { OnClick, OnShowContextMenu } from './album-card';
export let album: AlbumResponseDto;
export let isSharingView = false;

12
web/src/lib/components/album-page/album-card.ts Normal file
View file

@ -0,0 +1,12 @@
import type { AlbumResponseDto } from '@api';
export type OnShowContextMenu = {
showalbumcontextmenu: OnShowContextMenuDetail;
};
export type OnClick = {
click: OnClickDetail;
};
export type OnShowContextMenuDetail = { x: number; y: number };
export type OnClickDetail = AlbumResponseDto;

14
web/src/lib/components/album-page/asset-selection.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { AssetResponseDto } from '@api';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import AssetGrid from '../photos-page/asset-grid.svelte';
import {
assetInteractionStore,
assetsInAlbumStoreState,
selectedAssets
} from '$lib/stores/asset-interaction.store';
import { locale } from '$lib/stores/preferences.store';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import type { AssetResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import Button from '../elements/buttons/button.svelte';
import AssetGrid from '../photos-page/asset-grid.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
const dispatch = createEventDispatcher();

4
web/src/lib/components/album-page/thumbnail-selection.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts">
import { AlbumResponseDto, AssetResponseDto } from '@api';
import type { AlbumResponseDto, AssetResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import Button from '../elements/buttons/button.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
export let album: AlbumResponseDto;

22
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View file

@ -1,23 +1,21 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores';
import { clickOutside } from '$lib/utils/click-outside';
import type { AssetResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import Heart from 'svelte-material-icons/Heart.svelte';
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import Heart from 'svelte-material-icons/Heart.svelte';
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import { page } from '$app/stores';
import { AssetResponseDto } from '../../../api';
export let asset: AssetResponseDto;
export let showCopyButton: boolean;

4
web/src/lib/components/forms/api-key-form.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import { APIKeyResponseDto } from '@api';
import type { APIKeyResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
import Button from '../elements/buttons/button.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
export let apiKey: Partial<APIKeyResponseDto>;
export let title = 'API Key';

11
web/src/lib/components/map-page/map-settings-modal.svelte
View file

@ -1,15 +1,6 @@
<script lang="ts" context="module">
export interface MapSettings {
allowDarkMode: boolean;
onlyFavorites: boolean;
relativeDate: string;
dateAfter: string;
dateBefore: string;
}
</script>
<script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import type { MapSettings } from '$lib/stores/preferences.store';
import { Duration } from 'luxon';
import { createEventDispatcher } from 'svelte';
import { fly } from 'svelte/transition';

14
web/src/lib/components/photos-page/asset-date-group.svelte
View file

@ -1,10 +1,4 @@
<script lang="ts">
import { assetStore } from '$lib/stores/assets.store';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
import { fly } from 'svelte/transition';
import { AssetResponseDto } from '@api';
import lodash from 'lodash-es';
import {
assetInteractionStore,
assetsInAlbumStoreState,
@ -12,9 +6,15 @@
selectedAssets,
selectedGroup
} from '$lib/stores/asset-interaction.store';
import { assetStore } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import type { AssetResponseDto } from '@api';
import lodash from 'lodash-es';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
import { flip } from 'svelte/animate';
import { fly } from 'svelte/transition';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
export let assets: AssetResponseDto[];
export let bucketDate: string;

17
web/src/lib/components/photos-page/asset-grid.svelte
View file

@ -1,22 +1,21 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import { UserResponseDto } from '@api';
import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store';
import { api, AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum } from '@api';
import AssetDateGroup from './asset-date-group.svelte';
import Portal from '../shared-components/portal/portal.svelte';
import AssetViewer from '../asset-viewer/asset-viewer.svelte';
import {
assetInteractionStore,
isViewingAssetStoreState,
viewingAssetStoreState
} from '$lib/stores/asset-interaction.store';
import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store';
import type { UserResponseDto } from '@api';
import { AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum, api } from '@api';
import { onDestroy, onMount } from 'svelte';
import AssetViewer from '../asset-viewer/asset-viewer.svelte';
import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
import Portal from '../shared-components/portal/portal.svelte';
import Scrollbar, {
OnScrollbarClickDetail,
OnScrollbarDragDetail
} from '../shared-components/scrollbar/scrollbar.svelte';
import AssetDateGroup from './asset-date-group.svelte';
export let user: UserResponseDto | undefined = undefined;
export let isAlbumSelectionMode = false;

2
web/src/lib/components/photos-page/asset-select-control-bar.svelte
View file

@ -17,7 +17,7 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import { AssetResponseDto } from '@api';
import type { AssetResponseDto } from '@api';
import Close from 'svelte-material-icons/Close.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';

30
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View file

@ -1,23 +1,23 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import BaseModal from '../base-modal.svelte';
import Link from 'svelte-material-icons/Link.svelte';
import {
AlbumResponseDto,
api,
AssetResponseDto,
SharedLinkResponseDto,
SharedLinkType
} from '@api';
import { notificationController, NotificationType } from '../notification/notification';
import { ImmichDropDownOption } from '../dropdown-button.svelte';
import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
import DropdownButton from '../dropdown-button.svelte';
import SettingInputField, {
SettingInputFieldType
} from '$lib/components/admin-page/settings/setting-input-field.svelte';
import { handleError } from '$lib/utils/handle-error';
import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import { handleError } from '$lib/utils/handle-error';
import {
AlbumResponseDto,
AssetResponseDto,
SharedLinkResponseDto,
SharedLinkType,
api
} from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import Link from 'svelte-material-icons/Link.svelte';
import BaseModal from '../base-modal.svelte';
import type { ImmichDropDownOption } from '../dropdown-button.svelte';
import DropdownButton from '../dropdown-button.svelte';
import { NotificationType, notificationController } from '../notification/notification';
export let shareType: SharedLinkType;
export let sharedAssets: AssetResponseDto[] = [];

2
web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.svelte
View file

@ -10,7 +10,7 @@
</script>
<script lang="ts">
import { MapMarkerResponseDto } from '@api';
import type { MapMarkerResponseDto } from '@api';
import { DivIcon, LeafletEvent, LeafletMouseEvent, MarkerCluster, Point } from 'leaflet';
import 'leaflet.markercluster';
import { createEventDispatcher, onDestroy, onMount } from 'svelte';

8
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts">
import { UserResponseDto } from '@api';
import Button from '$lib/components/elements/buttons/button.svelte';
import { AppRoute } from '$lib/constants';
import type { UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import Cog from 'svelte-material-icons/Cog.svelte';
import Logout from 'svelte-material-icons/Logout.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import { fade } from 'svelte/transition';
import UserAvatar from '../user-avatar.svelte';
import { AppRoute } from '$lib/constants';
export let user: UserResponseDto;

8
web/src/lib/components/shared-components/upload-asset-preview.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { asByteUnitString } from '$lib/utils/byte-units';
import { UploadAsset } from '$lib/models/upload-asset';
import ImmichLogo from './immich-logo.svelte';
import type { UploadAsset } from '$lib/models/upload-asset';
import { locale } from '$lib/stores/preferences.store';
import { asByteUnitString } from '$lib/utils/byte-units';
import { fade } from 'svelte/transition';
import ImmichLogo from './immich-logo.svelte';
export let uploadAsset: UploadAsset;

2
web/src/lib/components/user-settings-page/device-card.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import { AuthDeviceResponseDto } from '@api';
import type { AuthDeviceResponseDto } from '@api';
import { DateTime, ToRelativeCalendarOptions } from 'luxon';
import { createEventDispatcher } from 'svelte';
import Android from 'svelte-material-icons/Android.svelte';