miteruzo/btrc-hub
1
0
フォーク 0
コード 課題 61 Pull リクエスト 1 リリース Wiki アクティビティ

#399

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-07-16 07:56:45 +09:00
親 3d88fdecb1
コミット ead825e3ee
2個のファイルの変更，213行の追加，50行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/pages/posts/PostImportResultPage.tsx
+165 -4
ファイルの表示
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react'
import { useEffect, useMemo, useRef, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useNavigate, useParams } from 'react-router-dom'
@@ -6,12 +6,14 @@ import FieldError from '@/components/common/FieldError'
import PageTitle from '@/components/common/PageTitle'
import PrefetchLink from '@/components/PrefetchLink'
import MainArea from '@/components/layout/MainArea'
import PostImportRowForm from '@/components/posts/import/PostImportRowForm'
import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiPost } from '@/lib/api'
import useDialogue from '@/lib/dialogues/useDialogue'
import { canEditContent } from '@/lib/users'
import { clearPostImportSourceDraft,
initialisePreviewRows,
@@ -25,6 +27,7 @@ import Forbidden from '@/pages/Forbidden'
import type { FC } from 'react'
import type { PostImportRowDraft } from '@/components/posts/import/PostImportRowForm'
import type { PostImportResultRow, PostImportRow } from '@/lib/postImportSession'
import type { PostImportSession } from '@/lib/postImportSession'
import type { User } from '@/types'
@@ -34,15 +37,66 @@ type Props = { user: User | null }
const rowMessages = (row: PostImportRow): string[] =>
Object.values (row.importErrors ?? { }).flat ()
const buildNextEditedRow = (
editingRow: PostImportRow,
draft: PostImportRowDraft,
urlChanged: boolean,
): PostImportRow => {
const nextProvenance = { ...editingRow.provenance }
const nextAttributes = { ...editingRow.attributes }
const nextTagSources = {
automatic: editingRow.tagSources?.automatic ?? '',
manual: editingRow.tagSources?.manual ?? '' }
const draftFields = [
['title', draft.title],
['thumbnailBase', draft.thumbnailBase],
['originalCreatedFrom', draft.originalCreatedFrom],
['originalCreatedBefore', draft.originalCreatedBefore],
['duration', draft.duration],
['parentPostIds', draft.parentPostIds]] as const
draftFields.forEach (([field, value]) => {
nextAttributes[field] = value
nextProvenance[field] =
value !== String (editingRow.attributes[field] ?? '')
? 'manual'
: (editingRow.provenance[field] ?? 'automatic')
})
nextAttributes.tags = draft.tags
if (draft.tags !== String (editingRow.attributes.tags ?? ''))
{
nextProvenance.tags = 'manual'
nextTagSources.manual = draft.tags
}
else
{
nextProvenance.tags = editingRow.provenance.tags ?? 'automatic'
nextTagSources.manual = editingRow.tagSources?.manual ?? ''
}
return {
...editingRow,
url: draft.url,
attributes: nextAttributes,
provenance: {
...nextProvenance,
url: urlChanged ? 'manual' : (editingRow.provenance.url ?? 'manual') },
tagSources: nextTagSources,
importStatus: editingRow.importStatus === 'created' ? 'created' : 'pending',
importErrors: undefined }
}
const PostImportResultPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
const dialogue = useDialogue ()
const navigate = useNavigate ()
const { sessionId } = useParams ()
const [session, setSession] = useState<PostImportSession | null> (null)
const [missing, setMissing] = useState (false)
const [loadingRow, setLoadingRow] = useState<number | null> (null)
const [, setEditingRow] = useState<PostImportRow | null> (null)
const sessionRef = useRef<PostImportSession | null> (null)
useEffect (() => {
if (sessionId == null)
@@ -62,10 +116,111 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
toast ({ title: '取込状態を保存できませんでした', description: message }))
}, [session, sessionId])
useEffect (() => {
sessionRef.current = session
}, [session])
const counts = useMemo (
() => resultSummaryCounts (session?.rows ?? []),
[session])
const updateSessionRows = (nextRows: PostImportRow[]) =>
setSession (current =>
current != null ? { ...current, rows: nextRows } : current)
const saveDraft = async (
row: PostImportRow,
{ draft, resetRequested }: {
draft: PostImportRowDraft
resetRequested: boolean },
): Promise<{ saved: boolean
row: PostImportRow | null }> => {
const currentSession = sessionRef.current
if (currentSession == null)
return { saved: false, row: null }
const baseRow =
resetRequested
? { ...row,
url: row.resetSnapshot.url,
attributes: { ...row.resetSnapshot.attributes },
provenance: { ...row.resetSnapshot.provenance },
tagSources: { ...row.resetSnapshot.tagSources },
fieldWarnings: Object.fromEntries (
Object.entries (row.resetSnapshot.fieldWarnings)
.map (([key, values]) => [key, [...values]])),
baseWarnings: [...row.resetSnapshot.baseWarnings],
metadataUrl: row.resetSnapshot.metadataUrl }
: row
const urlChanged = draft.url !== baseRow.url
const nextRow = buildNextEditedRow (baseRow, draft, urlChanged)
const nextRows = currentSession.rows.map (row =>
row.sourceRow === baseRow.sourceRow
? nextRow
: row)
try
{
const validated = await apiPost<{ rows: PostImportRow[] }> ('/posts/import/validate', {
rows:
nextRows
.filter (row => row.importStatus !== 'created')
.map (row => ({ sourceRow: row.sourceRow,
url: row.url,
attributes: row.attributes,
provenance: row.provenance,
tagSources: row.tagSources,
metadataUrl: row.metadataUrl })),
changed_row: urlChanged ? baseRow.sourceRow : -1 })
const validatedRows = initialisePreviewRows (validated.rows)
const target = validatedRows.find (_1 => _1.sourceRow === baseRow.sourceRow)
if (target != null && Object.keys (target.validationErrors).length > 0)
return { saved: false, row: target }
updateSessionRows (mergeValidatedImportRows (nextRows, validatedRows))
return { saved: true, row: null }
}
catch
{
toast ({ title: '行の再検証に失敗しました' })
return { saved: false, row: null }
}
}
const openEditingDialogue = async (row: PostImportRow) => {
const saveRowDraft = (
{ draft, resetRequested }: {
draft: PostImportRowDraft
resetRequested: boolean },
) =>
saveDraft (row, { draft, resetRequested })
await dialogue.form ({
title: '投稿を編輯',
description: `投稿 ${ row.sourceRow } の内容を確認し、必要な項目を編輯してください．`,
cancelText: '取消',
size: 'large',
body: controls => (
<PostImportRowForm
row={row}
controls={controls}
onSave={saveRowDraft}/>) })
}
const editRow = async (row: PostImportRow) => {
setEditingRow (row)
try
{
await openEditingDialogue (row)
}
finally
{
setEditingRow (current =>
current?.sourceRow === row.sourceRow
? null
: current)
}
}
const retry = async (sourceRow: number) => {
if (session == null || sessionId == null)
return
@@ -93,6 +248,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
...session,
rows: validatedRows,
repairMode: 'failed' as const }
sessionRef.current = nextSession
setSession (nextSession)
const target = validatedRows.find (_1 => _1.sourceRow === sourceRow)
if (target == null)
@@ -102,7 +258,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
const saved = savePostImportSession (sessionId, nextSession, message =>
toast ({ title: '取込状態を保存できませんでした', description: message }))
if (saved)
navigate (`/posts/import/${ sessionId }/review?edit=${ sourceRow }`)
void editRow (target)
return
}
@@ -138,6 +294,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
...nextSession,
rows: nextRows,
repairMode: recoverableTarget == null ? 'all' as const : 'failed' as const }
sessionRef.current = resultSession
setSession (resultSession)
if (recoverableTarget != null
&& Object.keys (recoverableTarget.validationErrors).length > 0)
@@ -145,12 +302,13 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
const saved = savePostImportSession (sessionId, resultSession, message =>
toast ({ title: '取込状態を保存できませんでした', description: message }))
if (saved)
navigate (`/posts/import/${ sessionId }/review?edit=${ sourceRow }`)
void editRow (recoverableTarget)
return
}
}
catch
{
sessionRef.current = session
setSession (session)
toast ({ title: '再試行に失敗しました' })
}
@@ -165,12 +323,15 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
return
const nextSession = { ...session, repairMode: 'failed' as const }
sessionRef.current = nextSession
setSession (nextSession)
const saved = savePostImportSession (sessionId, nextSession, message =>
toast ({ title: '取込状態を保存できませんでした', description: message }))
if (!(saved))
return
navigate (`/posts/import/${ sessionId }/review?edit=${ sourceRow }`)
const row = nextSession.rows.find (_1 => _1.sourceRow === sourceRow)
if (row != null)
void editRow (row)
}
if (!(editable))
frontend/src/pages/posts/PostImportReviewPage.tsx
+48 -46
ファイルの表示
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react'
import { useEffect, useMemo, useRef, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import { useNavigate, useParams } from 'react-router-dom'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
@@ -38,11 +38,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const dialogue = useDialogue ()
const navigate = useNavigate ()
const { sessionId } = useParams ()
const [searchParams, setSearchParams] = useSearchParams ()
const [session, setSession] = useState<PostImportSession | null> (null)
const [loading, setLoading] = useState (false)
const [missing, setMissing] = useState (false)
const [editingRow, setEditingRow] = useState<PostImportRow | null> (null)
const sessionRef = useRef<PostImportSession | null> (null)
useEffect (() => {
if (sessionId == null)
@@ -62,12 +63,11 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
toast ({ title: '取込状態を保存できませんでした', description: message }))
}, [session, sessionId])
useEffect (() => {
sessionRef.current = session
}, [session])
const rows = session?.rows ?? []
const editingSourceRow = Number (searchParams.get ('edit') ?? '')
const editingRow =
Number.isFinite (editingSourceRow)
? rows.find (_1 => _1.sourceRow === editingSourceRow) ?? null
: null
const counts = useMemo (() => reviewSummaryCounts (rows), [rows])
const processable = useMemo (
() => processableImportRows (rows),
@@ -98,36 +98,34 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
current != null ? { ...current, rows: nextRows } : current)
const saveDraft = async (
{ draft, resetRequested, resetSnapshot }: {
row: PostImportRow,
{ draft, resetRequested }: {
draft: PostImportRowDraft
resetRequested: boolean
resetSnapshot: PostImportRow['resetSnapshot'] },
resetRequested: boolean },
): Promise<{ saved: boolean
row: PostImportRow | null }> => {
if (session == null)
return { saved: false, row: null }
if (editingRow == null)
const currentSession = sessionRef.current
if (currentSession == null)
return { saved: false, row: null }
const baseRow =
resetRequested
? { ...editingRow,
url: resetSnapshot.url,
attributes: { ...resetSnapshot.attributes },
provenance: { ...resetSnapshot.provenance },
tagSources: { ...resetSnapshot.tagSources },
? { ...row,
url: row.resetSnapshot.url,
attributes: { ...row.resetSnapshot.attributes },
provenance: { ...row.resetSnapshot.provenance },
tagSources: { ...row.resetSnapshot.tagSources },
fieldWarnings: Object.fromEntries (
Object.entries (resetSnapshot.fieldWarnings)
Object.entries (row.resetSnapshot.fieldWarnings)
.map (([key, values]) => [key, [...values]])),
baseWarnings: [...resetSnapshot.baseWarnings],
metadataUrl: resetSnapshot.metadataUrl }
: editingRow
baseWarnings: [...row.resetSnapshot.baseWarnings],
metadataUrl: row.resetSnapshot.metadataUrl }
: row
const urlChanged = draft.url !== baseRow.url
const nextRow = buildNextEditedRow (baseRow, draft, urlChanged)
const nextRows = session.rows.map (row =>
row.sourceRow === editingRow.sourceRow
const nextRows = currentSession.rows.map (row =>
row.sourceRow === baseRow.sourceRow
? nextRow
: row)
try
@@ -142,13 +140,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
provenance: row.provenance,
tagSources: row.tagSources,
metadataUrl: row.metadataUrl })),
changed_row: urlChanged ? editingRow.sourceRow : -1 })
changed_row: urlChanged ? baseRow.sourceRow : -1 })
const validatedRows = initialisePreviewRows (validated.rows)
const target = validatedRows.find (row => row.sourceRow === editingRow.sourceRow)
const target = validatedRows.find (row => row.sourceRow === baseRow.sourceRow)
if (target != null && Object.keys (target.validationErrors).length > 0)
return { saved: false, row: target }
updateSessionRows (mergeValidatedImportRows (nextRows, validatedRows))
setSearchParams ({ })
return { saved: true, row: null }
}
catch
@@ -164,10 +161,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
draft: PostImportRowDraft
resetRequested: boolean },
) =>
saveDraft ({
draft,
resetRequested,
resetSnapshot: row.resetSnapshot })
saveDraft (row, { draft, resetRequested })
await dialogue.form ({
title: '投稿を編輯',
@@ -179,15 +173,22 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
row={row}
controls={controls}
onSave={saveRowDraft}/>) })
setSearchParams ({ })
}
useEffect (() => {
if (editingRow == null)
return
void openEditingDialogue (editingRow)
}, [editingRow])
const editRow = async (row: PostImportRow) => {
setEditingRow (row)
try
{
await openEditingDialogue (row)
}
finally
{
setEditingRow (current =>
current?.sourceRow === row.sourceRow
? null
: current)
}
}
const submit = async () => {
if (sessionId == null || session == null || processable.length === 0)
@@ -212,8 +213,10 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const firstInvalid = mergedRows.find (row => Object.keys (row.validationErrors).length > 0)
if (firstInvalid != null)
{
setSession ({ ...session, rows: mergedRows })
setSearchParams ({ edit: String (firstInvalid.sourceRow) })
const nextSession = { ...session, rows: mergedRows }
sessionRef.current = nextSession
setSession (nextSession)
void editRow (firstInvalid)
return
}
@@ -252,11 +255,12 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
const repairSession = { ...session,
rows: nextRows,
repairMode: 'failed' as const }
sessionRef.current = repairSession
setSession (repairSession)
const saved = savePostImportSession (sessionId, repairSession, message =>
toast ({ title: '取込状態を保存できませんでした', description: message }))
if (saved)
setSearchParams ({ edit: String (firstRecoverable.sourceRow) })
void editRow (firstRecoverable)
return
}
const nextSession = { ...session, rows: nextRows, repairMode: 'all' as const }
@@ -309,9 +313,7 @@ const PostImportReviewPage: FC<Props> = ({ user }) => {
<div key={row.sourceRow} id={`post-import-row-${ row.sourceRow }`}>
<PostImportRowSummary
row={row}
onEdit={() => {
setSearchParams ({ edit: String (row.sourceRow) })
}}/>
onEdit={() => void editRow (row)}/>
</div>))}
</div>
</div>