diff --git a/frontend/src/components/PostEditForm.tsx b/frontend/src/components/PostEditForm.tsx index 99039d9..0e0f922 100644 --- a/frontend/src/components/PostEditForm.tsx +++ b/frontend/src/components/PostEditForm.tsx @@ -15,7 +15,7 @@ import { msToTime } from '@/lib/utils' import { useValidationErrors } from '@/lib/useValidationErrors' import { useUITranslation } from '@/lib/useUITranslation' -import type { FC, FormEvent } from 'react' +import type { FC, FormEvent, ReactNode } from 'react' import type { Post, TagWithSections } from '@/types' @@ -23,6 +23,8 @@ type PostFormField = 'parentPostIds' | 'tags' | 'videoMs' | 'originalCreatedAt' | 'originalCreatedFrom' | 'originalCreatedBefore' +type PostEditData = Omit[0], 'id'> + const groupedMessages = (...values: (string[] | undefined)[]): string[] => [...new Set (values.flatMap (value => value ?? []))] @@ -150,12 +152,63 @@ const PostEditForm: FC = ({ post, onSave }) => { const handleSubmit = async (e: FormEvent) => { e.preventDefault () + if (disabled) return + setDisabled (true) try { - await update ({ id: post.id, title, tags, parentPostIds, - duration: videoFlg ? duration : null, - originalCreatedFrom, originalCreatedBefore }, + const current: PostEditData = { + title, tags, parentPostIds, + duration: videoFlg ? duration : null, + originalCreatedFrom, originalCreatedBefore } + const fields: { + [Key in keyof PostEditData]-?: { + name: ReactNode + prev: PostEditData[Key] } } = { + title: { name: label ('shared:labels.title'), prev: post.title }, + parentPostIds: { + name: label ('shared:labels.parentPosts'), + prev: (post.parentPosts ?? []).map (parent => parent.id).join (' ') }, + tags: { name: label ('tags:title'), prev: tagsToStr (post.tags) }, + duration: { + name: label ('shared:labels.duration'), + prev: videoMsToDurationValue (post.videoMs) }, + originalCreatedFrom: { + name: <>{label ('shared:labels.originalCreatedAt')}{' '} + {label ('shared:labels.since')}, + prev: post.originalCreatedFrom }, + originalCreatedBefore: { + name: <>{label ('shared:labels.originalCreatedAt')}{' '} + {label ('shared:labels.before')}, + prev: post.originalCreatedBefore } } + const differences = (Object.keys (fields) as (keyof PostEditData)[]) + .map (key => ({ key, name: fields[key].name, + prev: fields[key].prev ?? '', current: current[key] ?? '' })) + .filter (row => row.prev !== row.current) + + if (!(await dialogue.confirm ({ + title: label ('shared:actions.diff'), + confirmText: label ('shared:actions.update'), + description: ( +
+ {differences.map (row => ( +
+
{row.name}
+
+ {row.prev && ( + + {row.prev} + )} + {row.current && ( + + {row.current} + )} +
+
))} +
) }))) + return + + await update ({ id: post.id, ...current }, { baseVersionNo: post.versionNo }) } finally