mirror of https://github.com/immich-app/immich.git
feat(web): improved action bar actions (#2553)
* feat(web): improved action bar actions * Update web/src/lib/components/photos-page/actions/delete-assets.svelte Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * update archive and favorite actions * feat: add un archive/favorite on associated pages * fix favorite action + use isAllArchived for photos * remove unneeded unarchive check --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>pull/2578/head
Jason Rasmussen
GitHub
parent
71ef7685c5
commit
d6756f3d81
@ -0,0 +1,51 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||||
|
import {
|
||||||
|
NotificationType,
|
||||||
|
notificationController
|
||||||
|
} from '$lib/components/shared-components/notification/notification';
|
||||||
|
import { api } from '@api';
|
||||||
|
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
|
||||||
|
import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
|
||||||
|
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
|
||||||
|
import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
|
||||||
|
|
||||||
|
export let onAssetArchive: OnAssetArchive = (asset, isArchived) => {
|
||||||
|
asset.isArchived = isArchived;
|
||||||
|
};
|
||||||
|
|
||||||
|
export let menuItem = false;
|
||||||
|
export let unarchive = false;
|
||||||
|
|
||||||
|
$: text = unarchive ? 'Unarchive' : 'Archive';
|
||||||
|
$: logo = unarchive ? ArchiveArrowUpOutline : ArchiveArrowDownOutline;
|
||||||
|
|
||||||
|
const { getAssets, clearSelect } = getAssetControlContext();
|
||||||
|
|
||||||
|
const handleArchive = async () => {
|
||||||
|
const isArchived = !unarchive;
|
||||||
|
let cnt = 0;
|
||||||
|
|
||||||
|
for (const asset of getAssets()) {
|
||||||
|
if (asset.isArchived !== isArchived) {
|
||||||
|
api.assetApi.updateAsset(asset.id, { isArchived });
|
||||||
|
|
||||||
|
onAssetArchive(asset, isArchived);
|
||||||
|
cnt = cnt + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
notificationController.show({
|
||||||
|
message: `${isArchived ? 'Archived' : 'Unarchived'} ${cnt}`,
|
||||||
|
type: NotificationType.Info
|
||||||
|
});
|
||||||
|
|
||||||
|
clearSelect();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if menuItem}
|
||||||
|
<MenuOption {text} on:click={handleArchive} />
|
||||||
|
{:else}
|
||||||
|
<CircleIconButton title={text} {logo} on:click={handleArchive} />
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||||
|
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||||
|
import {
|
||||||
|
NotificationType,
|
||||||
|
notificationController
|
||||||
|
} from '$lib/components/shared-components/notification/notification';
|
||||||
|
import { api } from '@api';
|
||||||
|
import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
|
||||||
|
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
|
||||||
|
import { OnAssetFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
|
||||||
|
|
||||||
|
export let onAssetFavorite: OnAssetFavorite = (asset, isFavorite) => {
|
||||||
|
asset.isFavorite = isFavorite;
|
||||||
|
};
|
||||||
|
|
||||||
|
export let menuItem = false;
|
||||||
|
export let removeFavorite: boolean;
|
||||||
|
|
||||||
|
$: text = removeFavorite ? 'Remove from Favorites' : 'Favorite';
|
||||||
|
$: logo = removeFavorite ? HeartMinusOutline : HeartOutline;
|
||||||
|
|
||||||
|
const { getAssets, clearSelect } = getAssetControlContext();
|
||||||
|
|
||||||
|
const handleFavorite = () => {
|
||||||
|
const isFavorite = !removeFavorite;
|
||||||
|
|
||||||
|
let cnt = 0;
|
||||||
|
for (const asset of getAssets()) {
|
||||||
|
if (asset.isFavorite !== isFavorite) {
|
||||||
|
api.assetApi.updateAsset(asset.id, { isFavorite });
|
||||||
|
onAssetFavorite(asset, isFavorite);
|
||||||
|
cnt = cnt + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
notificationController.show({
|
||||||
|
message: isFavorite ? `Added ${cnt} to favorites` : `Removed ${cnt} from favorites`,
|
||||||
|
type: NotificationType.Info
|
||||||
|
});
|
||||||
|
|
||||||
|
clearSelect();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if menuItem}
|
||||||
|
<MenuOption {text} on:click={handleFavorite} />
|
||||||
|
{:else}
|
||||||
|
<CircleIconButton title={text} {logo} on:click={handleFavorite} />
|
||||||
|
{/if}
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
|
||||||
import {
|
|
||||||
NotificationType,
|
|
||||||
notificationController
|
|
||||||
} from '$lib/components/shared-components/notification/notification';
|
|
||||||
import { api } from '@api';
|
|
||||||
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
|
|
||||||
import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
|
|
||||||
|
|
||||||
export let onAssetArchive: OnAssetArchive = (asset, archive) => {
|
|
||||||
asset.isArchived = archive;
|
|
||||||
};
|
|
||||||
|
|
||||||
const { getAssets, clearSelect } = getAssetControlContext();
|
|
||||||
|
|
||||||
const handleArchive = async () => {
|
|
||||||
let cnt = 0;
|
|
||||||
|
|
||||||
for (const asset of getAssets()) {
|
|
||||||
if (!asset.isArchived) {
|
|
||||||
api.assetApi.updateAsset(asset.id, {
|
|
||||||
isArchived: true
|
|
||||||
});
|
|
||||||
|
|
||||||
onAssetArchive(asset, true);
|
|
||||||
cnt = cnt + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
notificationController.show({
|
|
||||||
message: `Archived ${cnt}`,
|
|
||||||
type: NotificationType.Info
|
|
||||||
});
|
|
||||||
|
|
||||||
clearSelect();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CircleIconButton title="Archive" logo={ArchiveArrowDownOutline} on:click={handleArchive} />
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
|
||||||
import { handleError } from '$lib/utils/handle-error';
|
|
||||||
import { api } from '@api';
|
|
||||||
import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
|
|
||||||
import { getAssetControlContext, OnAssetFavorite } from '../asset-select-control-bar.svelte';
|
|
||||||
|
|
||||||
export let onAssetFavorite: OnAssetFavorite = (asset, favorite) => {
|
|
||||||
asset.isFavorite = favorite;
|
|
||||||
};
|
|
||||||
|
|
||||||
const { getAssets, clearSelect } = getAssetControlContext();
|
|
||||||
|
|
||||||
const handleRemoveFavorite = async () => {
|
|
||||||
for (const asset of getAssets()) {
|
|
||||||
try {
|
|
||||||
await api.assetApi.updateAsset(asset.id, {
|
|
||||||
isFavorite: false
|
|
||||||
});
|
|
||||||
onAssetFavorite(asset, false);
|
|
||||||
} catch {
|
|
||||||
handleError(Error, 'Error updating asset favorite state');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
clearSelect();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<slot {handleRemoveFavorite}>
|
|
||||||
<CircleIconButton
|
|
||||||
title="Remove Favorite"
|
|
||||||
logo={HeartMinusOutline}
|
|
||||||
on:click={handleRemoveFavorite}
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
|
||||||
import {
|
|
||||||
NotificationType,
|
|
||||||
notificationController
|
|
||||||
} from '$lib/components/shared-components/notification/notification';
|
|
||||||
import { api } from '@api';
|
|
||||||
import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
|
|
||||||
import { OnAssetArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
|
|
||||||
|
|
||||||
export let onAssetArchive: OnAssetArchive = (asset, archived) => {
|
|
||||||
asset.isArchived = archived;
|
|
||||||
};
|
|
||||||
|
|
||||||
const { getAssets, clearSelect } = getAssetControlContext();
|
|
||||||
|
|
||||||
const handleUnarchive = async () => {
|
|
||||||
let cnt = 0;
|
|
||||||
for (const asset of getAssets()) {
|
|
||||||
if (asset.isArchived) {
|
|
||||||
api.assetApi.updateAsset(asset.id, {
|
|
||||||
isArchived: false
|
|
||||||
});
|
|
||||||
|
|
||||||
onAssetArchive(asset, false);
|
|
||||||
cnt = cnt + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
notificationController.show({
|
|
||||||
message: `Removed ${cnt} from archive`,
|
|
||||||
type: NotificationType.Info
|
|
||||||
});
|
|
||||||
|
|
||||||
clearSelect();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CircleIconButton title="Unarchive" logo={ArchiveArrowUpOutline} on:click={handleUnarchive} />
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
|
||||||
import {
|
|
||||||
NotificationType,
|
|
||||||
notificationController
|
|
||||||
} from '$lib/components/shared-components/notification/notification';
|
|
||||||
import { api } from '@api';
|
|
||||||
import { getMenuContext } from '../asset-select-context-menu.svelte';
|
|
||||||
import { OnAssetFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
|
|
||||||
|
|
||||||
export let onAssetFavorite: OnAssetFavorite = (asset, favorite) => {
|
|
||||||
asset.isFavorite = favorite;
|
|
||||||
};
|
|
||||||
|
|
||||||
const { getAssets, clearSelect } = getAssetControlContext();
|
|
||||||
const closeMenu = getMenuContext();
|
|
||||||
|
|
||||||
const handleAddToFavorites = () => {
|
|
||||||
closeMenu();
|
|
||||||
|
|
||||||
let cnt = 0;
|
|
||||||
for (const asset of getAssets()) {
|
|
||||||
if (!asset.isFavorite) {
|
|
||||||
api.assetApi.updateAsset(asset.id, {
|
|
||||||
isFavorite: true
|
|
||||||
});
|
|
||||||
onAssetFavorite(asset, true);
|
|
||||||
cnt = cnt + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
notificationController.show({
|
|
||||||
message: `Added ${cnt} to favorites`,
|
|
||||||
type: NotificationType.Info
|
|
||||||
});
|
|
||||||
|
|
||||||
clearSelect();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<MenuOption on:click={handleAddToFavorites} text="Add to Favorites" />
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
|
||||||
import RemoveFavorite from '../actions/remove-favorite.svelte';
|
|
||||||
import { getMenuContext } from '../asset-select-context-menu.svelte';
|
|
||||||
import { OnAssetFavorite } from '../asset-select-control-bar.svelte';
|
|
||||||
|
|
||||||
export let onAssetFavorite: OnAssetFavorite | undefined = undefined;
|
|
||||||
const closeMenu = getMenuContext();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<RemoveFavorite let:handleRemoveFavorite {onAssetFavorite}>
|
|
||||||
<MenuOption
|
|
||||||
on:click={() => {
|
|
||||||
closeMenu();
|
|
||||||
handleRemoveFavorite();
|
|
||||||
}}
|
|
||||||
text="Remove from favorites"
|
|
||||||
/>
|
|
||||||
</RemoveFavorite>
|
|
||||||
Loading…
Reference in New Issue