Add batch favorites

This commit is contained in:
Sam Becker 2024-07-21 11:59:46 -05:00
parent d8ede1c657
commit bc1a730be2
3 changed files with 43 additions and 17 deletions

View File

@ -7,7 +7,7 @@ import { useAppState } from '@/state/AppState';
import { clsx } from 'clsx/lite';
import { IoCloseSharp } from 'react-icons/io5';
import { useState } from 'react';
import { Tags } from '@/tag';
import { TAG_FAVS, Tags } from '@/tag';
import { usePathname } from 'next/navigation';
import { PATH_GRID_INFERRED } from '@/site/paths';
import PhotoTagFieldset from './PhotoTagFieldset';
@ -15,6 +15,7 @@ import { tagMultiplePhotosAction } from '@/photo/actions';
import { toastSuccess } from '@/toast';
import DeletePhotosButton from './DeletePhotosButton';
import { photoQuantityText } from '@/photo';
import { FaArrowDown, FaRegStar } from 'react-icons/fa6';
export default function AdminBatchEditPanelClient({
uniqueTags,
@ -41,11 +42,15 @@ export default function AdminBatchEditPanelClient({
setTagErrorMessage('');
};
const photosText = photoQuantityText(selectedPhotoIds?.length ?? 0, false);
const photosText = photoQuantityText(
selectedPhotoIds?.length ?? 0,
false,
false,
);
const renderPhotoText = () => selectedPhotoIds?.length === 0
? 'Select photos below'
: `${photosText} selected`;
const renderPhotoCTA = () => selectedPhotoIds?.length === 0
? <><FaArrowDown /> Select photos below</>
: <>{photosText} selected</>;
const renderActions = () => isInTagMode
? <>
@ -70,9 +75,7 @@ export default function AdminBatchEditPanelClient({
selectedPhotoIds ?? [],
)
.then(() => {
toastSuccess(
`Tags applied to ${photosText}`
);
toastSuccess(`${photosText} tagged`);
resetForm();
})
.finally(() => setIsPerformingSelectEdit?.(false));
@ -98,6 +101,23 @@ export default function AdminBatchEditPanelClient({
onDelete={resetForm}
onFinish={() => setIsPerformingSelectEdit?.(false)}
/>
<LoaderButton
icon={<FaRegStar />}
disabled={isPerformingSelectEdit}
confirmText={`Are you sure you want to favorite ${photosText}?`}
onClick={() => {
setIsPerformingSelectEdit?.(true);
tagMultiplePhotosAction(
TAG_FAVS,
selectedPhotoIds ?? [],
)
.then(() => {
toastSuccess(`${photosText} favorited`);
resetForm();
})
.finally(() => setIsPerformingSelectEdit?.(false));
}}
/>
<LoaderButton
onClick={() => setTags('')}
disabled={isPerformingSelectEdit}
@ -145,8 +165,8 @@ export default function AdminBatchEditPanelClient({
openOnLoad
hideLabel
/>
: <div className="text-base">
{renderPhotoText()}
: <div className="text-base flex gap-2 items-center">
{renderPhotoCTA()}
</div>}
</Note>
{tagErrorMessage &&

View File

@ -29,7 +29,7 @@ export default function DeletePhotosButton({
} & ComponentProps<typeof LoaderButton>) {
const [isLoading, setIsLoading] = useState(false);
const photosText = photoQuantityText(photoIds.length, false);
const photosText = photoQuantityText(photoIds.length, false, false);
const { invalidateSwr, registerAdminUpdate } = useAppState();

View File

@ -194,13 +194,19 @@ export const titleForPhoto = (photo: Photo) =>
export const altTextForPhoto = (photo: Photo) =>
photo.semanticDescription || titleForPhoto(photo);
export const photoLabelForCount = (count: number) =>
count === 1 ? 'Photo' : 'Photos';
export const photoLabelForCount = (count: number, capitalize = true) =>
capitalize
? count === 1 ? 'Photo' : 'Photos'
: count === 1 ? 'photo' : 'photos';
export const photoQuantityText = (count: number, includeParentheses = true) =>
export const photoQuantityText = (
count: number,
includeParentheses = true,
capitalize?: boolean,
) =>
includeParentheses
? `(${count} ${photoLabelForCount(count)})`
: `${count} ${photoLabelForCount(count)}`;
? `(${count} ${photoLabelForCount(count, capitalize)})`
: `${count} ${photoLabelForCount(count, capitalize)}`;
export const deleteConfirmationTextForPhoto = (photo: Photo) =>
`Are you sure you want to delete "${titleForPhoto(photo)}?"`;
@ -219,7 +225,7 @@ export const descriptionForPhotoSet = (
: [
explicitCount ?? photos.length,
descriptor,
photoLabelForCount(explicitCount ?? photos.length),
photoLabelForCount(explicitCount ?? photos.length, false),
].join(' ');
const sortPhotosByDate = (