strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display tag counts in photo form

Browse Source
This commit is contained in:
Sam Becker 2024-02-06 17:46:43 -06:00
parent e5efc3614d
commit 1da28079e6
8 changed files with 136 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin/photos/[photoId]/edit/page.tsx
View File

@ -12,7 +12,7 @@ export default async function PhotoEditPage({
if (!photo) { redirect(PATH_ADMIN); }
const uniqueTags = (await getUniqueTagsCached()).map(tag => tag.tag);
const uniqueTags = await getUniqueTagsCached();
return (
<PhotoEditPageClient {...{ photo, uniqueTags }} />

2
src/app/admin/uploads/[uploadPath]/page.tsx
View File

@ -15,7 +15,7 @@ export default async function UploadPage({ params: { uploadPath } }: Params) {
photoFormExif,
} = await extractExifDataFromBlobPath(uploadPath);
const uniqueTags = (await getUniqueTagsCached()).map(tag => tag.tag);
const uniqueTags = await getUniqueTagsCached();
if (!photoFormExif) { redirect(PATH_ADMIN); }

10
src/components/FieldSetWithStatus.tsx
View File

@ -4,7 +4,7 @@ import { LegacyRef } from 'react';
import { useFormStatus } from 'react-dom';
import Spinner from './Spinner';
import { clsx } from 'clsx/lite';
import { FieldSetType } from '@/photo/form';
import { FieldSetType, AnnotatedTag } from '@/photo/form';
import TagInput from './TagInput';
export default function FieldSetWithStatus({
@ -16,7 +16,7 @@ export default function FieldSetWithStatus({
onChange,
selectOptions,
selectOptionsDefaultLabel,
commaSeparatedOptions,
tagOptions,
placeholder,
loading,
required,
@ -33,7 +33,7 @@ export default function FieldSetWithStatus({
onChange?: (value: string) => void
selectOptions?: { value: string, label: string }[]
selectOptionsDefaultLabel?: string
commaSeparatedOptions?: string[]
tagOptions?: AnnotatedTag []
placeholder?: string
loading?: boolean
required?: boolean
@ -91,11 +91,11 @@ export default function FieldSetWithStatus({
{optionLabel}
</option>)}
</select>
: commaSeparatedOptions
: tagOptions
? <TagInput
name={id}
value={value}
options={commaSeparatedOptions}
options={tagOptions}
onChange={onChange}
className={clsx(Boolean(error) && 'error')}
readOnly={readOnly || pending}

70
src/components/TagInput.tsx
View File

@ -1,3 +1,4 @@
import { AnnotatedTag } from '@/photo/form';
import { convertStringToArray, parameterize } from '@/utility/string';
import { clsx } from 'clsx/lite';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@ -15,7 +16,7 @@ export default function TagInput({
}: {
name: string
value?: string
options?: string[]
options?: AnnotatedTag[]
onChange?: (value: string) => void
className?: string
readOnly?: boolean
@ -28,6 +29,10 @@ export default function TagInput({
const [inputText, setInputText] = useState('');
const [selectedOptionIndex, setSelectedOptionIndex] = useState<number>();
const optionValues = useMemo(() =>
options.map(({ value }) => value)
, [options]);
const selectedOptions = useMemo(() =>
convertStringToArray(value) ?? []
, [value]);
@ -35,18 +40,21 @@ export default function TagInput({
const inputTextFormatted = parameterize(inputText);
const isInputTextUnique =
inputTextFormatted &&
!options.includes(inputTextFormatted) &&
!optionValues.includes(inputTextFormatted) &&
!selectedOptions.includes(inputTextFormatted);
const optionsFiltered = (isInputTextUnique
? [`${CREATE_LABEL} "${inputTextFormatted}"`]
: []).concat(options
.filter(option =>
!selectedOptions.includes(option) &&
(
!inputTextFormatted ||
option.includes(inputTextFormatted)
)));
const optionsFiltered = useMemo<AnnotatedTag[]>(() =>
(isInputTextUnique
? [{ value: `${CREATE_LABEL} "${inputTextFormatted}"` }]
: []
).concat(options
.filter(({ value }) =>
!selectedOptions.includes(value) &&
(
!inputTextFormatted ||
value.includes(inputTextFormatted)
)))
, [inputTextFormatted, isInputTextUnique, options, selectedOptions]);
const hideMenu = useCallback((shouldBlurInput?: boolean) => {
setShouldShowMenu(false);
@ -117,7 +125,7 @@ export default function TagInput({
e.stopImmediatePropagation();
e.preventDefault();
}
addOption(optionsFiltered[selectedOptionIndex ?? 0]);
addOption(optionsFiltered[selectedOptionIndex ?? 0].value);
setInputText('');
break;
case ',':
@ -137,7 +145,12 @@ export default function TagInput({
break;
case 'ArrowUp':
setSelectedOptionIndex(i => {
if (i === undefined || i === 0) {
if (
document.activeElement === inputRef.current &&
optionsFiltered.length > 0
) {
return optionsFiltered.length - 1;
} else if (i === undefined || i === 0) {
inputRef.current?.focus();
return undefined;
} else {
@ -197,8 +210,8 @@ export default function TagInput({
'cursor-pointer select-none',
'whitespace-nowrap',
'px-1.5 py-0.5',
'bg-gray-100 dark:bg-gray-800',
'active:bg-gray-50 dark:active:bg-gray-900',
'bg-gray-200/60 dark:bg-gray-800',
'active:bg-gray-200 dark:active:bg-gray-900',
'rounded-sm',
)}
onClick={() => removeOption(option)}
@ -233,27 +246,40 @@ export default function TagInput({
'text-xl shadow-lg dark:shadow-xl',
)}
>
{optionsFiltered.map((option, index) =>
{optionsFiltered.map(({ value, annotation }, index) =>
<div
key={option}
key={value}
tabIndex={0}
className={clsx(
'group flex items-center gap-1',
'cursor-pointer select-none',
'px-1 py-1 rounded-sm',
index === 0 && selectedOptionIndex === undefined &&
'bg-gray-100 dark:bg-gray-800',
'px-1.5 py-1 rounded-sm',
'hover:bg-gray-100 dark:hover:bg-gray-800',
'active:bg-gray-50 dark:active:bg-gray-900',
'focus:bg-gray-100 dark:focus:bg-gray-800',
index === 0 && selectedOptionIndex === undefined &&
'bg-gray-100 dark:bg-gray-800',
'outline-none',
)}
onClick={() => {
addOption(option);
addOption(value);
setInputText('');
}}
onFocus={() => setSelectedOptionIndex(index)}
>
{option}
<span className="grow min-w-0 truncate">
{value}
</span>
{annotation &&
<span className={clsx(
'whitespace-nowrap text-dim text-sm',
'group-focus:inline-block group-hover:inline-block',
index === 0 && selectedOptionIndex === undefined
? 'inline-block'
: 'hidden',
)}>
{annotation}
</span>}
</div>)}
</div>
</div>

3
src/photo/PhotoEditPageClient.tsx
View File

@ -10,13 +10,14 @@ import { useFormState } from 'react-dom';
import { areSimpleObjectsEqual } from '@/utility/object';
import IconGrSync from '@/site/IconGrSync';
import { getExifDataAction } from './actions';
import { Tags } from '@/tag';
export default function PhotoEditPageClient({
photo,
uniqueTags,
}: {
photo: Photo
uniqueTags?: string[]
uniqueTags?: Tags
}) {
const seedExifData = { url: photo.url };

104
src/photo/form/PhotoForm.tsx
View File

@ -5,7 +5,7 @@ import {
FORM_METADATA_ENTRIES,
PhotoFormData,
convertFormKeysToLabels,
getInitialErrors,
getFormErrors,
isFormValid,
} from '.';
import FieldSetWithStatus from '@/components/FieldSetWithStatus';
@ -23,7 +23,7 @@ import { toastSuccess, toastWarning } from '@/toast';
import { getDimensionsFromSize } from '@/utility/size';
import ImageBlurFallback from '@/components/ImageBlurFallback';
import { BLUR_ENABLED } from '@/site/config';
import { sortTagsWithoutFavs } from '@/tag';
import { Tags, sortTagsObjectWithoutFavs } from '@/tag';
const THUMBNAIL_SIZE = 300;
@ -37,13 +37,13 @@ export default function PhotoForm({
initialPhotoForm: Partial<PhotoFormData>
updatedExifData?: Partial<PhotoFormData>
type?: 'create' | 'edit'
uniqueTags?: string[]
uniqueTags?: Tags
debugBlur?: boolean
}) {
const [formData, setFormData] =
useState<Partial<PhotoFormData>>(initialPhotoForm);
const [formErrors, setFormErrors] =
useState(getInitialErrors(initialPhotoForm));
useState(getFormErrors(initialPhotoForm));
// Update form when EXIF data
// is refreshed by parent
@ -146,51 +146,57 @@ export default function PhotoForm({
onSubmit={() => blur()}
className="space-y-6"
>
{FORM_METADATA_ENTRIES.map(([key, {
label,
note,
required,
options,
optionsDefaultLabel,
readOnly,
validate,
capitalize,
hideIfEmpty,
hideBasedOnCamera,
loadingMessage,
type,
}]) =>
(
(!hideIfEmpty || formData[key]) &&
!hideBasedOnCamera?.(formData.make)
) &&
<FieldSetWithStatus
key={key}
id={key}
label={label}
note={note}
error={formErrors[key]}
value={formData[key] ?? ''}
onChange={value => {
setFormData({ ...formData, [key]: value });
if (validate) {
setFormErrors({ ...formErrors, [key]: validate(value) });
}
}}
selectOptions={options}
selectOptionsDefaultLabel={optionsDefaultLabel}
commaSeparatedOptions={key === 'tags'
? sortTagsWithoutFavs(uniqueTags ?? [])
: undefined}
required={required}
readOnly={readOnly}
capitalize={capitalize}
placeholder={loadingMessage && !formData[key]
? loadingMessage
: undefined}
loading={loadingMessage && !formData[key] ? true : false}
type={type}
/>)}
{FORM_METADATA_ENTRIES(
sortTagsObjectWithoutFavs(uniqueTags ?? [])
.map(({ tag, count }) => ({
value: tag,
annotation: `× ${count}`,
}))
)
.map(([key, {
label,
note,
required,
selectOptions,
selectOptionsDefaultLabel,
tagOptions,
readOnly,
validate,
capitalize,
hideIfEmpty,
hideBasedOnCamera,
loadingMessage,
type,
}]) =>
(
(!hideIfEmpty || formData[key]) &&
!hideBasedOnCamera?.(formData.make)
) &&
<FieldSetWithStatus
key={key}
id={key}
label={label}
note={note}
error={formErrors[key]}
value={formData[key] ?? ''}
onChange={value => {
setFormData({ ...formData, [key]: value });
if (validate) {
setFormErrors({ ...formErrors, [key]: validate(value) });
}
}}
selectOptions={selectOptions}
selectOptionsDefaultLabel={selectOptionsDefaultLabel}
tagOptions={tagOptions}
required={required}
readOnly={readOnly}
capitalize={capitalize}
placeholder={loadingMessage && !formData[key]
? loadingMessage
: undefined}
loading={loadingMessage && !formData[key] ? true : false}
type={type}
/>)}
<div className="flex gap-3">
<Link
className="button"

34
src/photo/form/index.ts
View File

@ -26,6 +26,8 @@ export type FieldSetType =
'password' |
'checkbox';
export type AnnotatedTag = { value: string, annotation?: string };
type FormMeta = {
label: string
note?: string
@ -39,14 +41,18 @@ type FormMeta = {
hideBasedOnCamera?: (make?: string, mode?: string) => boolean
loadingMessage?: string
type?: FieldSetType
options?: { value: string, label: string }[]
optionsDefaultLabel?: string
selectOptions?: { value: string, label: string }[]
selectOptionsDefaultLabel?: string
tagOptions?: AnnotatedTag[]
};
const FORM_METADATA: Record<keyof PhotoFormData, FormMeta> = {
const FORM_METADATA = (
tagOptions?: AnnotatedTag[]
): Record<keyof PhotoFormData, FormMeta> => ({
title: { label: 'title', capitalize: true },
tags: {
label: 'tags',
tagOptions,
validate: tags => doesTagsStringIncludeFavs(tags)
? `'${TAG_FAVS}' is a reserved tag`
: undefined,
@ -66,8 +72,8 @@ const FORM_METADATA: Record<keyof PhotoFormData, FormMeta> = {
model: { label: 'camera model' },
filmSimulation: {
label: 'fujifilm simulation',
options: FILM_SIMULATION_FORM_INPUT_OPTIONS,
optionsDefaultLabel: 'Unknown',
selectOptions: FILM_SIMULATION_FORM_INPUT_OPTIONS,
selectOptionsDefaultLabel: 'Unknown',
hideBasedOnCamera: make => make !== MAKE_FUJIFILM,
},
focalLength: { label: 'focal length' },
@ -84,26 +90,28 @@ const FORM_METADATA: Record<keyof PhotoFormData, FormMeta> = {
priorityOrder: { label: 'priority order' },
favorite: { label: 'favorite', type: 'checkbox', virtual: true },
hidden: { label: 'hidden', type: 'checkbox' },
};
});
export const FORM_METADATA_ENTRIES =
(Object.entries(FORM_METADATA) as [keyof PhotoFormData, FormMeta][])
export const FORM_METADATA_ENTRIES = (
...args: Parameters<typeof FORM_METADATA>
) =>
(Object.entries(FORM_METADATA(...args)) as [keyof PhotoFormData, FormMeta][])
.filter(([_, meta]) => !meta.hide);
export const convertFormKeysToLabels = (keys: (keyof PhotoFormData)[]) =>
keys.map(key => FORM_METADATA[key].label.toUpperCase());
keys.map(key => FORM_METADATA()[key].label.toUpperCase());
export const getInitialErrors = (
export const getFormErrors = (
formData: Partial<PhotoFormData>
): Partial<Record<keyof PhotoFormData, string>> =>
Object.keys(formData).reduce((acc, key) => ({
...acc,
[key]: FORM_METADATA_ENTRIES.find(([k]) => k === key)?.[1]
[key]: FORM_METADATA_ENTRIES().find(([k]) => k === key)?.[1]
.validate?.(formData[key as keyof PhotoFormData]),
}), {});
export const isFormValid = (formData: Partial<PhotoFormData>) =>
FORM_METADATA_ENTRIES.every(
FORM_METADATA_ENTRIES().every(
([key, { required, validate }]) =>
(!required || Boolean(formData[key])) &&
(validate?.(formData[key]) === undefined)
@ -191,7 +199,7 @@ export const convertFormDataToPhotoDbInsert = (
if (
key.startsWith('$ACTION_ID_') ||
(photoForm as any)[key] === '' ||
FORM_METADATA[key as keyof PhotoFormData]?.virtual
FORM_METADATA()[key as keyof PhotoFormData]?.virtual
) {
delete (photoForm as any)[key];
}

3
src/tag/index.ts
View File

@ -46,6 +46,9 @@ export const sortTagsObject = (
export const sortTagsWithoutFavs = (tags: string[]) =>
sortTags(tags, TAG_FAVS);
export const sortTagsObjectWithoutFavs = (tags: Tags) =>
sortTagsObject(tags, TAG_FAVS);
export const descriptionForTaggedPhotos = (
photos: Photo[],
dateBased?: boolean,