xCJPECKOVERx
9ff664ed36
* Multi add to album picker: - update modal for multi select - Update add-to-album and add-to-album-action to work with new array return from AlbumPickerModal - Add asset-utils.addAssetsToAlbums (incomplete) * initial addToAlbums endpoint * - fix endpoint - add test * - update return type - make open-api * - simplify return dto - handle notification * - fix returns - clean up * - update i18n - format & check * - checks * - correct successId count - fix assets_cannot_be_added language call * tests * foromat * refactor * - update successful add message to included total attempted * - fix web test - format i18n * - fix open-api * - fix imports to resolve checks * - PR suggestions * open-api * refactor addAssetsToAlbums * refactor it again * - fix error returns and tests * - swap icon for IconButton - don't nest the buttons * open-api * - Cleanup multi-select button to match Thumbnail * merge and openapi * - remove onclick from icon element * - fix double onClose call with keyboard shortcuts * - spelling and formatting - apply new api permission * - open-api * chore: styling * translation --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
41 lines
1.2 KiB
Svelte
41 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';
|
|
import { mdiPlus } from '@mdi/js';
|
|
import { t } from 'svelte-i18n';
|
|
import type { Action } from 'svelte/action';
|
|
|
|
interface Props {
|
|
searchQuery?: string;
|
|
selected: boolean;
|
|
onNewAlbum: (search: string) => void;
|
|
}
|
|
|
|
let { searchQuery = '', selected = false, onNewAlbum }: Props = $props();
|
|
|
|
const scrollIntoViewIfSelected: Action = (node) => {
|
|
$effect(() => {
|
|
if (selected) {
|
|
node.scrollIntoView(SCROLL_PROPERTIES);
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => onNewAlbum(searchQuery)}
|
|
use:scrollIntoViewIfSelected
|
|
class="flex w-full items-center gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
|
|
class:bg-gray-200={selected}
|
|
class:dark:bg-gray-700={selected}
|
|
>
|
|
<div class="flex h-12 w-12 items-center justify-center">
|
|
<Icon path={mdiPlus} size="30" />
|
|
</div>
|
|
<p class="">
|
|
{$t('new_album')}
|
|
{#if searchQuery.length > 0}<b>{searchQuery}</b>{/if}
|
|
</p>
|
|
</button>
|