mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat: enhance search (#7127)
* feat: hybrid search * fixing normal search * building out the query * okla * filters * date * order by date * Remove hybrid search endpoint * remove search hybrid endpoint * faces query * search for person * search and pagination * with exif * with exif * justify gallery viewer * memory view * Fixed userId is null * openapi and styling * searchdto * lint and format * remove term * generate sql * fix test * chips * not showing true * pr feedback * pr feedback * nit name * linting * pr feedback * styling * linting
This commit is contained in:
Alex
GitHub
parent
60ba37b3a7
commit
69983ff83a
40 changed files with 3400 additions and 2585 deletions
|
|
@ -7,6 +7,7 @@
|
|||
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
|
||||
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import { AppRoute, QueryParameter } from '$lib/constants';
|
||||
import type { Viewport } from '$lib/stores/assets.store';
|
||||
import { memoryStore } from '$lib/stores/memory.store';
|
||||
import { getAssetThumbnailUrl } from '$lib/utils';
|
||||
import { fromLocalDateTime } from '$lib/utils/timeline-util';
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
$: canGoForward = !!(nextMemory || nextAsset);
|
||||
$: canGoBack = !!(previousMemory || previousAsset);
|
||||
|
||||
const viewport: Viewport = { width: 0, height: 0 };
|
||||
const toNextMemory = () => goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex + 1}`);
|
||||
const toPreviousMemory = () => goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex - 1}`);
|
||||
|
||||
|
|
@ -251,7 +253,7 @@
|
|||
|
||||
<!-- GALERY VIEWER -->
|
||||
|
||||
<section class="bg-immich-dark-gray pl-4">
|
||||
<section class="bg-immich-dark-gray m-4">
|
||||
<div
|
||||
class="sticky mb-10 mt-4 flex place-content-center place-items-center transition-all"
|
||||
class:opacity-0={galleryInView}
|
||||
|
|
@ -268,8 +270,13 @@
|
|||
on:hidden={() => (galleryInView = false)}
|
||||
bottom={-200}
|
||||
>
|
||||
<div id="gallery-memory" bind:this={memoryGallery}>
|
||||
<GalleryViewer assets={currentMemory.assets} />
|
||||
<div
|
||||
id="gallery-memory"
|
||||
bind:this={memoryGallery}
|
||||
bind:clientHeight={viewport.height}
|
||||
bind:clientWidth={viewport.width}
|
||||
>
|
||||
<GalleryViewer assets={currentMemory.assets} {viewport} />
|
||||
</div>
|
||||
</IntersectionObserver>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@
|
|||
import type { AssetStore, Viewport } from '$lib/stores/assets.store';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { getAssetRatio } from '$lib/utils/asset-utils';
|
||||
import { formatGroupTitle, fromLocalDateTime, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
|
||||
import {
|
||||
calculateWidth,
|
||||
formatGroupTitle,
|
||||
fromLocalDateTime,
|
||||
splitBucketIntoDateGroups,
|
||||
} from '$lib/utils/timeline-util';
|
||||
import type { AssetResponseDto } from '@immich/sdk';
|
||||
import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
|
||||
import justifiedLayout from 'justified-layout';
|
||||
|
|
@ -36,12 +41,6 @@
|
|||
let actualBucketHeight: number;
|
||||
let hoveredDateGroup = '';
|
||||
|
||||
interface LayoutBox {
|
||||
top: number;
|
||||
left: number;
|
||||
width: number;
|
||||
}
|
||||
|
||||
$: assetsGroupByDate = splitBucketIntoDateGroups(assets, $locale);
|
||||
|
||||
$: geometry = (() => {
|
||||
|
|
@ -80,17 +79,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
const calculateWidth = (boxes: LayoutBox[]): number => {
|
||||
let width = 0;
|
||||
for (const box of boxes) {
|
||||
if (box.top < 100) {
|
||||
width = box.left + box.width;
|
||||
}
|
||||
}
|
||||
|
||||
return width;
|
||||
};
|
||||
|
||||
const assetClickHandler = (asset: AssetResponseDto, assetsInDateGroup: AssetResponseDto[], groupTitle: string) => {
|
||||
if (isSelectionMode || $isMultiSelectState) {
|
||||
assetSelectHandler(asset, assetsInDateGroup, groupTitle);
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@
|
|||
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import ImmichLogo from '../shared-components/immich-logo.svelte';
|
||||
import { NotificationType, notificationController } from '../shared-components/notification/notification';
|
||||
import type { Viewport } from '$lib/stores/assets.store';
|
||||
|
||||
export let sharedLink: SharedLinkResponseDto;
|
||||
export let isOwned: boolean;
|
||||
|
||||
const viewport: Viewport = { width: 0, height: 0 };
|
||||
let selectedAssets: Set<AssetResponseDto> = new Set();
|
||||
|
||||
$: assets = sharedLink.assets;
|
||||
|
|
@ -97,7 +99,7 @@
|
|||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
{/if}
|
||||
<section class="my-[160px] flex flex-col px-6 sm:px-12 md:px-24 lg:px-40">
|
||||
<GalleryViewer {assets} bind:selectedAssets />
|
||||
<section class="my-[160px] mx-4" bind:clientHeight={viewport.height} bind:clientWidth={viewport.width}>
|
||||
<GalleryViewer {assets} bind:selectedAssets {viewport} />
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent">
|
||||
<div
|
||||
id="asset-selection-app-bar"
|
||||
class={`grid grid-cols-[10%_80%_10%] justify-between md:grid-cols-[20%_60%_20%] lg:grid-cols-3 ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
|
||||
class={`grid grid-cols-[10%_80%_10%] justify-between md:grid-cols-[15%_70%_15%] lg:grid-cols-[25%_50%_25%] ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
|
||||
forceDark && 'bg-immich-dark-gray text-white'
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@
|
|||
import { page } from '$app/stores';
|
||||
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import type { BucketPosition } from '$lib/stores/assets.store';
|
||||
import type { BucketPosition, Viewport } from '$lib/stores/assets.store';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { getThumbnailSize } from '$lib/utils/thumbnail-util';
|
||||
import { ThumbnailFormat, type AssetResponseDto } from '@immich/sdk';
|
||||
import { type AssetResponseDto } from '@immich/sdk';
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
|
||||
import justifiedLayout from 'justified-layout';
|
||||
import { getAssetRatio } from '$lib/utils/asset-utils';
|
||||
import { calculateWidth } from '$lib/utils/timeline-util';
|
||||
|
||||
const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();
|
||||
|
||||
|
|
@ -16,14 +17,12 @@
|
|||
export let selectedAssets: Set<AssetResponseDto> = new Set();
|
||||
export let disableAssetSelect = false;
|
||||
export let showArchiveIcon = false;
|
||||
export let viewport: Viewport;
|
||||
|
||||
let { isViewing: showAssetViewer } = assetViewingStore;
|
||||
|
||||
let selectedAsset: AssetResponseDto;
|
||||
let currentViewAssetIndex = 0;
|
||||
let viewWidth: number;
|
||||
$: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
|
||||
|
||||
$: isMultiSelectionMode = selectedAssets.size > 0;
|
||||
|
||||
const viewAssetHandler = (event: CustomEvent) => {
|
||||
|
|
@ -86,23 +85,45 @@
|
|||
onDestroy(() => {
|
||||
$showAssetViewer = false;
|
||||
});
|
||||
|
||||
$: geometry = (() => {
|
||||
const justifiedLayoutResult = justifiedLayout(
|
||||
assets.map((asset) => getAssetRatio(asset)),
|
||||
{
|
||||
boxSpacing: 2,
|
||||
containerWidth: Math.floor(viewport.width),
|
||||
containerPadding: 0,
|
||||
targetRowHeightTolerance: 0.15,
|
||||
targetRowHeight: 235,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
...justifiedLayoutResult,
|
||||
containerWidth: calculateWidth(justifiedLayoutResult.boxes),
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
|
||||
{#if assets.length > 0}
|
||||
<div class="flex w-full flex-wrap gap-1 pb-20" bind:clientWidth={viewWidth}>
|
||||
{#each assets as asset, i (asset.id)}
|
||||
<div animate:flip={{ duration: 500 }}>
|
||||
<div class="relative" style="height: {geometry.containerHeight}px;width: {geometry.containerWidth}px ">
|
||||
{#each assets as asset, i (i)}
|
||||
<div
|
||||
class="absolute"
|
||||
style="width: {geometry.boxes[i].width}px; height: {geometry.boxes[i].height}px; top: {geometry.boxes[i]
|
||||
.top}px; left: {geometry.boxes[i].left}px"
|
||||
>
|
||||
<Thumbnail
|
||||
{asset}
|
||||
{thumbnailSize}
|
||||
readonly={disableAssetSelect}
|
||||
format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
|
||||
on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
|
||||
on:select={selectAssetHandler}
|
||||
on:intersected={(event) =>
|
||||
i === Math.max(1, assets.length - 7) ? dispatch('intersected', event.detail) : undefined}
|
||||
selected={selectedAssets.has(asset)}
|
||||
{showArchiveIcon}
|
||||
thumbnailWidth={geometry.boxes[i].width}
|
||||
thumbnailHeight={geometry.boxes[i].height}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,18 @@
|
|||
import { AppRoute } from '$lib/constants';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
|
||||
import {
|
||||
isSearchEnabled,
|
||||
preventRaceConditionSearchBar,
|
||||
savedSearchTerms,
|
||||
searchQuery,
|
||||
} from '$lib/stores/search.store';
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
|
||||
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
|
||||
import SearchHistoryBox from './search-history-box.svelte';
|
||||
import SearchFilterBox from './search-filter-box.svelte';
|
||||
import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
|
||||
export let value = '';
|
||||
export let grayTheme: boolean;
|
||||
|
||||
|
|
@ -17,28 +23,17 @@
|
|||
let showFilter = false;
|
||||
$: showClearIcon = value.length > 0;
|
||||
|
||||
function onSearch() {
|
||||
let smartSearch = 'true';
|
||||
let searchValue = value;
|
||||
|
||||
if (value.slice(0, 2) == 'm:') {
|
||||
smartSearch = 'false';
|
||||
searchValue = value.slice(2);
|
||||
}
|
||||
|
||||
$savedSearchTerms = $savedSearchTerms.filter((item) => item !== value);
|
||||
saveSearchTerm(value);
|
||||
|
||||
const onSearch = (payload: SmartSearchDto | MetadataSearchDto) => {
|
||||
const parameters = new URLSearchParams({
|
||||
q: searchValue,
|
||||
smart: smartSearch,
|
||||
take: '100',
|
||||
query: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
showHistory = false;
|
||||
showFilter = false;
|
||||
$isSearchEnabled = false;
|
||||
$searchQuery = payload;
|
||||
goto(`${AppRoute.SEARCH}?${parameters}`, { invalidateAll: true });
|
||||
}
|
||||
};
|
||||
|
||||
const clearSearchTerm = (searchTerm: string) => {
|
||||
input.focus();
|
||||
|
|
@ -70,6 +65,26 @@
|
|||
|
||||
showHistory = false;
|
||||
$isSearchEnabled = false;
|
||||
showFilter = false;
|
||||
};
|
||||
|
||||
const onHistoryTermClick = (searchTerm: string) => {
|
||||
const searchPayload = { query: searchTerm };
|
||||
onSearch(searchPayload);
|
||||
};
|
||||
|
||||
const onFilterClick = () => {
|
||||
showFilter = !showFilter;
|
||||
value = '';
|
||||
|
||||
if (showFilter) {
|
||||
showHistory = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
onSearch({ query: value });
|
||||
saveSearchTerm(value);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -80,7 +95,7 @@
|
|||
class="relative select-text text-sm"
|
||||
action={AppRoute.SEARCH}
|
||||
on:reset={() => (value = '')}
|
||||
on:submit|preventDefault={() => onSearch()}
|
||||
on:submit|preventDefault={onSubmit}
|
||||
>
|
||||
<label>
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-6">
|
||||
|
|
@ -107,9 +122,9 @@
|
|||
disabled={showFilter}
|
||||
/>
|
||||
|
||||
<div class="absolute inset-y-0 right-5 flex items-center pl-6">
|
||||
<div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-5'} flex items-center pl-6 transition-all">
|
||||
<div class="dark:text-immich-dark-fg/75">
|
||||
<IconButton on:click={() => (showFilter = !showFilter)} title="Show search options">
|
||||
<IconButton on:click={onFilterClick} title="Show search options">
|
||||
<Icon path={mdiTune} size="1.5em" />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
|
@ -131,15 +146,12 @@
|
|||
<SearchHistoryBox
|
||||
on:clearAllSearchTerms={clearAllSearchTerms}
|
||||
on:clearSearchTerm={({ detail: searchTerm }) => clearSearchTerm(searchTerm)}
|
||||
on:selectSearchTerm={({ detail: searchTerm }) => {
|
||||
value = searchTerm;
|
||||
onSearch();
|
||||
}}
|
||||
on:selectSearchTerm={({ detail: searchTerm }) => onHistoryTermClick(searchTerm)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showFilter}
|
||||
<SearchFilterBox />
|
||||
<SearchFilterBox on:search={({ detail }) => onSearch(detail)} />
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,20 @@
|
|||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { getPeopleThumbnailUrl } from '$lib/utils';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { SearchSuggestionType, type PersonResponseDto } from '@immich/sdk';
|
||||
import {
|
||||
AssetTypeEnum,
|
||||
SearchSuggestionType,
|
||||
type PersonResponseDto,
|
||||
type SmartSearchDto,
|
||||
type MetadataSearchDto,
|
||||
} from '@immich/sdk';
|
||||
import { getAllPeople, getSearchSuggestions } from '@immich/sdk';
|
||||
import { mdiArrowRight, mdiClose } from '@mdi/js';
|
||||
import { onMount } from 'svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import Combobox, { type ComboBoxOption } from '../combobox.svelte';
|
||||
import { DateTime } from 'luxon';
|
||||
import { searchQuery } from '$lib/stores/search.store';
|
||||
|
||||
enum MediaType {
|
||||
All = 'all',
|
||||
|
|
@ -22,8 +30,8 @@
|
|||
country: ComboBoxOption[];
|
||||
state: ComboBoxOption[];
|
||||
city: ComboBoxOption[];
|
||||
cameraMake: ComboBoxOption[];
|
||||
cameraModel: ComboBoxOption[];
|
||||
make: ComboBoxOption[];
|
||||
model: ComboBoxOption[];
|
||||
};
|
||||
|
||||
type SearchParams = {
|
||||
|
|
@ -49,14 +57,14 @@
|
|||
model?: ComboBoxOption;
|
||||
};
|
||||
|
||||
dateRange: {
|
||||
startDate?: Date;
|
||||
endDate?: Date;
|
||||
date: {
|
||||
takenAfter?: string;
|
||||
takenBefore?: string;
|
||||
};
|
||||
|
||||
inArchive?: boolean;
|
||||
inFavorite?: boolean;
|
||||
notInAlbum?: boolean;
|
||||
isArchive?: boolean;
|
||||
isFavorite?: boolean;
|
||||
isNotInAlbum?: boolean;
|
||||
|
||||
mediaType: MediaType;
|
||||
};
|
||||
|
|
@ -66,8 +74,8 @@
|
|||
country: [],
|
||||
state: [],
|
||||
city: [],
|
||||
cameraMake: [],
|
||||
cameraModel: [],
|
||||
make: [],
|
||||
model: [],
|
||||
};
|
||||
|
||||
let filter: SearchFilter = {
|
||||
|
|
@ -82,21 +90,23 @@
|
|||
make: undefined,
|
||||
model: undefined,
|
||||
},
|
||||
dateRange: {
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
date: {
|
||||
takenAfter: undefined,
|
||||
takenBefore: undefined,
|
||||
},
|
||||
inArchive: undefined,
|
||||
inFavorite: undefined,
|
||||
notInAlbum: undefined,
|
||||
isArchive: undefined,
|
||||
isFavorite: undefined,
|
||||
isNotInAlbum: undefined,
|
||||
mediaType: MediaType.All,
|
||||
};
|
||||
|
||||
const dispatch = createEventDispatcher<{ search: SmartSearchDto | MetadataSearchDto }>();
|
||||
let showAllPeople = false;
|
||||
$: peopleList = showAllPeople ? suggestions.people : suggestions.people.slice(0, 11);
|
||||
|
||||
onMount(() => {
|
||||
getPeople();
|
||||
populateExistingFilters();
|
||||
});
|
||||
|
||||
const showSelectedPeopleFirst = () => {
|
||||
|
|
@ -141,7 +151,7 @@
|
|||
}
|
||||
|
||||
if (type === SearchSuggestionType.CameraMake || type === SearchSuggestionType.CameraModel) {
|
||||
suggestions = { ...suggestions, cameraMake: [], cameraModel: [] };
|
||||
suggestions = { ...suggestions, make: [], model: [] };
|
||||
}
|
||||
|
||||
try {
|
||||
|
|
@ -178,14 +188,14 @@
|
|||
|
||||
case SearchSuggestionType.CameraMake: {
|
||||
for (const make of data) {
|
||||
suggestions.cameraMake = [...suggestions.cameraMake, { label: make, value: make }];
|
||||
suggestions.make = [...suggestions.make, { label: make, value: make }];
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case SearchSuggestionType.CameraModel: {
|
||||
for (const model of data) {
|
||||
suggestions.cameraModel = [...suggestions.cameraModel, { label: model, value: model }];
|
||||
suggestions.model = [...suggestions.model, { label: model, value: model }];
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
@ -208,18 +218,99 @@
|
|||
make: undefined,
|
||||
model: undefined,
|
||||
},
|
||||
dateRange: {
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
date: {
|
||||
takenAfter: undefined,
|
||||
takenBefore: undefined,
|
||||
},
|
||||
inArchive: undefined,
|
||||
inFavorite: undefined,
|
||||
notInAlbum: undefined,
|
||||
isArchive: undefined,
|
||||
isFavorite: undefined,
|
||||
isNotInAlbum: undefined,
|
||||
mediaType: MediaType.All,
|
||||
};
|
||||
};
|
||||
|
||||
const search = () => {};
|
||||
const search = async () => {
|
||||
let type: AssetTypeEnum | undefined = undefined;
|
||||
|
||||
if (filter.mediaType === MediaType.Image) {
|
||||
type = AssetTypeEnum.Image;
|
||||
} else if (filter.mediaType === MediaType.Video) {
|
||||
type = AssetTypeEnum.Video;
|
||||
}
|
||||
|
||||
let payload: SmartSearchDto | MetadataSearchDto = {
|
||||
country: filter.location.country?.value,
|
||||
state: filter.location.state?.value,
|
||||
city: filter.location.city?.value,
|
||||
make: filter.camera.make?.value,
|
||||
model: filter.camera.model?.value,
|
||||
takenAfter: filter.date.takenAfter
|
||||
? DateTime.fromFormat(filter.date.takenAfter, 'yyyy-MM-dd').toUTC().startOf('day').toString()
|
||||
: undefined,
|
||||
takenBefore: filter.date.takenBefore
|
||||
? DateTime.fromFormat(filter.date.takenBefore, 'yyyy-MM-dd').toUTC().endOf('day').toString()
|
||||
: undefined,
|
||||
/* eslint-disable unicorn/prefer-logical-operator-over-ternary */
|
||||
isArchived: filter.isArchive ? filter.isArchive : undefined,
|
||||
isFavorite: filter.isFavorite ? filter.isFavorite : undefined,
|
||||
isNotInAlbum: filter.isNotInAlbum ? filter.isNotInAlbum : undefined,
|
||||
personIds: filter.people && filter.people.length > 0 ? filter.people.map((p) => p.id) : undefined,
|
||||
type,
|
||||
};
|
||||
|
||||
if (filter.context) {
|
||||
if (payload.personIds && payload.personIds.length > 0) {
|
||||
handleError(
|
||||
new Error('Context search does not support people filter'),
|
||||
'Context search does not support people filter',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
payload = {
|
||||
...payload,
|
||||
query: filter.context,
|
||||
};
|
||||
}
|
||||
|
||||
dispatch('search', payload);
|
||||
};
|
||||
|
||||
function populateExistingFilters() {
|
||||
if ($searchQuery) {
|
||||
filter = {
|
||||
context: 'query' in $searchQuery ? $searchQuery.query : '',
|
||||
people:
|
||||
'personIds' in $searchQuery ? ($searchQuery.personIds?.map((id) => ({ id })) as PersonResponseDto[]) : [],
|
||||
location: {
|
||||
country: $searchQuery.country ? { label: $searchQuery.country, value: $searchQuery.country } : undefined,
|
||||
state: $searchQuery.state ? { label: $searchQuery.state, value: $searchQuery.state } : undefined,
|
||||
city: $searchQuery.city ? { label: $searchQuery.city, value: $searchQuery.city } : undefined,
|
||||
},
|
||||
camera: {
|
||||
make: $searchQuery.make ? { label: $searchQuery.make, value: $searchQuery.make } : undefined,
|
||||
model: $searchQuery.model ? { label: $searchQuery.model, value: $searchQuery.model } : undefined,
|
||||
},
|
||||
date: {
|
||||
takenAfter: $searchQuery.takenAfter
|
||||
? DateTime.fromISO($searchQuery.takenAfter).toUTC().toFormat('yyyy-MM-dd')
|
||||
: undefined,
|
||||
takenBefore: $searchQuery.takenBefore
|
||||
? DateTime.fromISO($searchQuery.takenBefore).toUTC().toFormat('yyyy-MM-dd')
|
||||
: undefined,
|
||||
},
|
||||
isArchive: $searchQuery.isArchived,
|
||||
isFavorite: $searchQuery.isFavorite,
|
||||
isNotInAlbum: 'isNotInAlbum' in $searchQuery ? $searchQuery.isNotInAlbum : undefined,
|
||||
mediaType:
|
||||
$searchQuery.type === AssetTypeEnum.Image
|
||||
? MediaType.Image
|
||||
: $searchQuery.type === AssetTypeEnum.Video
|
||||
? MediaType.Video
|
||||
: MediaType.All,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
@ -347,7 +438,7 @@
|
|||
<div class="w-full">
|
||||
<p class="text-sm text-black dark:text-white">Make</p>
|
||||
<Combobox
|
||||
options={suggestions.cameraMake}
|
||||
options={suggestions.make}
|
||||
bind:selectedOption={filter.camera.make}
|
||||
placeholder="Search camera make..."
|
||||
on:click={() =>
|
||||
|
|
@ -358,7 +449,7 @@
|
|||
<div class="w-full">
|
||||
<p class="text-sm text-black dark:text-white">Model</p>
|
||||
<Combobox
|
||||
options={suggestions.cameraModel}
|
||||
options={suggestions.model}
|
||||
bind:selectedOption={filter.camera.model}
|
||||
placeholder="Search camera model..."
|
||||
on:click={() =>
|
||||
|
|
@ -379,7 +470,7 @@
|
|||
type="date"
|
||||
id="start-date"
|
||||
name="start-date"
|
||||
bind:value={filter.dateRange.startDate}
|
||||
bind:value={filter.date.takenAfter}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -391,7 +482,7 @@
|
|||
id="end-date"
|
||||
name="end-date"
|
||||
placeholder=""
|
||||
bind:value={filter.dateRange.endDate}
|
||||
bind:value={filter.date.takenBefore}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -450,17 +541,17 @@
|
|||
|
||||
<div class="flex gap-5 mt-3">
|
||||
<label class="flex items-center mb-2">
|
||||
<input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.notInAlbum} />
|
||||
<input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.isNotInAlbum} />
|
||||
<span class="ml-2 text-sm text-black dark:text-white pt-1">Not in any album</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center mb-2">
|
||||
<input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.inArchive} />
|
||||
<input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.isArchive} />
|
||||
<span class="ml-2 text-sm text-black dark:text-white pt-1">Archive</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center mb-2">
|
||||
<input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.inFavorite} />
|
||||
<input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.isFavorite} />
|
||||
<span class="ml-2 text-sm text-black dark:text-white pt-1">Favorite</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,15 +16,6 @@
|
|||
transition:fly={{ y: 25, duration: 250 }}
|
||||
class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
|
||||
>
|
||||
<div class="flex px-5 pt-5 text-left text-sm">
|
||||
<p>
|
||||
Smart search is enabled by default, to search for metadata use the syntax <span
|
||||
class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary"
|
||||
>m:your-search-term</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if $savedSearchTerms.length > 0}
|
||||
<div class="flex items-center justify-between px-5 pt-5 text-xs">
|
||||
<p>RECENT SEARCHES</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue