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