#399

frontend/src/pages/posts/PostImportResultPage.tsx

@@ -8,6 +8,7 @@ import PageTitle from '@/components/common/PageTitle'
 import PrefetchLink from '@/components/PrefetchLink'
 import MainArea from '@/components/layout/MainArea'
 import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
+import { effectivePostImportStatus } from '@/components/posts/import/postImportRowStatus'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
@@ -30,7 +31,9 @@ import type { User } from '@/types'
 
 type Props = { user: User | null }
 
-const resultToneClass = (status: string | undefined): string[] => {
+const resultToneClass = (
+    status: ReturnType<typeof effectivePostImportStatus>,
+): string[] => {
     switch (status)
       {
       case 'created':
@@ -42,9 +45,14 @@ const resultToneClass = (status: string | undefined): string[] => {
 	    'border-stone-200 bg-stone-50',
 	    'dark:border-stone-800 dark:bg-stone-900/60']
       case 'failed':
+      case 'error':
 	return [
 	    'border-rose-200 bg-rose-50',
 	    'dark:border-rose-900 dark:bg-rose-950/30']
+      case 'warning':
+	return [
+	    'border-amber-200 bg-amber-50',
+	    'dark:border-amber-900 dark:bg-amber-950/30']
       default:
 	return [
 	    'border-border bg-white',
@@ -52,6 +60,10 @@ const resultToneClass = (status: string | undefined): string[] => {
       }
 }
 
+const rowMessages = (row: PostImportRow): string[] => [
+    ...Object.values (row.validationErrors ?? { }).flat (),
+    ...Object.values (row.importErrors ?? { }).flat ()]
+
 
 const PostImportResultPage: FC<Props> = ({ user }) => {
     const editable = canEditContent (user)
@@ -63,7 +75,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
     const [loadingRow, setLoadingRow] = useState<number | null> (null)
 
     useEffect (() => {
-	if (!(sessionId))
+	if (sessionId == null)
 	  return
 
 	const loaded = loadPostImportSession (sessionId, message =>
@@ -73,7 +85,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
     }, [sessionId])
 
     useEffect (() => {
-	if (!(sessionId) || !(session))
+	if (sessionId == null || session == null)
 	  return
 
 	savePostImportSession (sessionId, session, message =>
@@ -83,10 +95,13 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
     const counts = useMemo (() => ({
 	created: session?.rows.filter (_1 => _1.importStatus === 'created').length ?? 0,
 	skipped: session?.rows.filter (_1 => _1.importStatus === 'skipped').length ?? 0,
-	failed: session?.rows.filter (_1 => _1.importStatus === 'failed').length ?? 0 }), [session])
+	failed: session?.rows.filter (_1 => _1.importStatus === 'failed').length ?? 0,
+	invalid:
+	    session?.rows.filter (_1 => effectivePostImportStatus (_1) === 'error').length ?? 0,
+    }), [session])
 
     const retry = async (sourceRow: number) => {
-	if (!(session))
+	if (session == null)
 	  return
 
 	setLoadingRow (sourceRow)
@@ -164,7 +179,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
     if (!(editable))
       return <Forbidden/>
 
-    if (missing || !(sessionId) || !(session))
+    if (missing || sessionId == null || session == null)
       {
 	return (
 	    <MainArea>
@@ -193,22 +208,25 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 		<SummaryChip label="登録成功" value={counts.created} badge="created"/>
 		<SummaryChip label="スキップ" value={counts.skipped} badge="skipped"/>
 		<SummaryChip label="失敗" value={counts.failed} badge="failed"/>
+		<SummaryChip label="要修正" value={counts.invalid} badge="error"/>
 	      </div>
 	    </div>
 
 	    <div className="space-y-3">
-	      {session.rows.map (row => (
+	      {session.rows.map (row => {
+		  const status = effectivePostImportStatus (row)
+		  return (
 		  <div
 		      key={row.sourceRow}
 		      className={[
 			  'rounded-lg border p-4',
-			  ...resultToneClass (row.importStatus)].join (' ')}>
+			  ...resultToneClass (status)].join (' ')}>
 		    <div className="flex flex-col gap-3 md:flex-row md:items-start
 				    md:justify-between">
 		      <div className="space-y-2">
 			<div className="flex flex-wrap items-center gap-2">
 			  <span className="text-sm font-medium">行 {row.sourceRow}</span>
-			  <PostImportStatusBadge value={row.importStatus ?? 'pending'}/>
+			  <PostImportStatusBadge value={status}/>
 			</div>
 			<div className="text-sm text-neutral-700 dark:text-neutral-200">
 			  {String (row.attributes.title ?? '') || row.url}
@@ -216,7 +234,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 			<div className="text-xs text-neutral-500 dark:text-neutral-400">
 			  {row.url}
 			</div>
-			<FieldError messages={Object.values (row.importErrors ?? { }).flat ()}/>
+			<FieldError messages={rowMessages (row)}/>
 		      </div>
 
 		      <div className="flex flex-col gap-2 sm:flex-row">
@@ -226,14 +244,15 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 				投稿を開く
 			      </PrefetchLink>
 			    </Button>)}
+			{status === 'error' && (
+			    <Button
+				type="button"
+				variant="outline"
+				onClick={() => openRepair (row.sourceRow)}>
+			      編輯
+			    </Button>)}
 			{row.importStatus === 'failed' && (
 			    <>
-			      <Button
-				  type="button"
-				  variant="outline"
-				  onClick={() => openRepair (row.sourceRow)}>
-				編輯
-			      </Button>
 			      <Button
 				  type="button"
 				  onClick={() => retry (row.sourceRow)}
@@ -243,7 +262,7 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 			    </>)}
 		      </div>
 		    </div>
-		  </div>))}
+		  </div>)})}
 	    </div>
 
 	    <div className="flex flex-col gap-2 sm:flex-row">
@@ -280,7 +299,7 @@ const SummaryChip = (
     { label, value, badge }: {
 	label: string
 	value: number
-	badge: 'created' | 'skipped' | 'failed' },
+	badge: 'created' | 'skipped' | 'failed' | 'error' },
 ) => (
     <div className="flex items-center gap-2 rounded-full border border-border
 		    bg-background px-3 py-1 text-sm">