#399

frontend/src/pages/posts/PostImportResultPage.tsx

@@ -8,13 +8,14 @@ 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 { 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 { canEditContent } from '@/lib/users'
 import { clearPostImportSourceDraft,
+	 initialisePreviewRows,
 	 loadPostImportSession,
 	 mergeImportResults,
 	 mergeValidatedImportRows,
@@ -33,7 +34,7 @@ import type { User } from '@/types'
 type Props = { user: User | null }
 
 const resultToneClass = (
-    status: ReturnType<typeof effectivePostImportStatus>,
+    status: 'created' | 'failed' | 'invalid' | 'skipped' | 'warning' | 'ready',
 ): string[] => {
     switch (status)
       {
@@ -46,7 +47,10 @@ const resultToneClass = (
 	    '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 'invalid':
 	return [
 	    'border-rose-200 bg-rose-50',
 	    'dark:border-rose-900 dark:bg-rose-950/30']
@@ -117,7 +121,9 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 			tagSources: row.tagSources,
 			metadataUrl: row.metadataUrl })),
 		changed_row: -1 })
-	    const validatedRows = mergeValidatedImportRows (pendingRows, validated.rows)
+	    const validatedRows = mergeValidatedImportRows (
+		pendingRows,
+		initialisePreviewRows (validated.rows))
 	    setSession (current =>
 		current
 		? { ...current, rows: validatedRows }
@@ -198,28 +204,44 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 	    <div className="rounded-lg border bg-white p-4 dark:border-neutral-700
 			    dark:bg-neutral-900">
 	      <div className="flex flex-wrap gap-2">
-		<SummaryChip label="登録成功" value={counts.created} badge="created"/>
+		<SummaryChip label="登録成功" value={counts.created}/>
 		<SummaryChip label="スキップ" value={counts.skipped} badge="skipped"/>
-		<SummaryChip label="失敗" value={counts.failed} badge="failed"/>
-		<SummaryChip label="要修正" value={counts.invalid} badge="error"/>
+		<SummaryChip label="失敗" value={counts.failed}/>
+		<SummaryChip label="要修正" value={counts.invalid}/>
 	      </div>
 	    </div>
 
 	    <div className="space-y-3">
 	      {session.rows.map (row => {
-		  const status = effectivePostImportStatus (row)
+		  const displayStatus =
+		      Object.keys (row.validationErrors).length > 0
+		      ? 'invalid'
+		      : row.importStatus === 'created'
+		      ? 'created'
+		      : row.importStatus === 'failed'
+		      ? 'failed'
+		      : displayPostImportStatus (row)
+		  const canEdit =
+		      Object.keys (row.validationErrors).length > 0
+		      || row.importStatus === 'failed'
+		  const canRetry =
+		      row.importStatus === 'created'
+		      ? false
+		      : row.importStatus === 'failed'
+		      && Object.keys (row.validationErrors).length === 0
 		  return (
 		  <div
 		      key={row.sourceRow}
 		      className={[
 			  'rounded-lg border p-4',
-			  ...resultToneClass (status)].join (' ')}>
+			  ...resultToneClass (displayStatus)].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={status}/>
+			  {displayStatus === 'skipped' && (
+			      <PostImportStatusBadge value="skipped"/>)}
 			</div>
 			<div className="text-sm text-neutral-700 dark:text-neutral-200">
 			  {String (row.attributes.title ?? '') || row.url}
@@ -238,14 +260,14 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
 				投稿を開く
 			      </PrefetchLink>
 			    </Button>)}
-			{(status === 'error' || row.importStatus === 'failed') && (
+			{canEdit && (
 			    <Button
 				type="button"
 				variant="outline"
 				onClick={() => openRepair (row.sourceRow)}>
 			      編輯
 			    </Button>)}
-			{row.importStatus === 'failed' && status !== 'error' && (
+			{canRetry && (
 			    <>
 			      <Button
 				  type="button"
@@ -293,11 +315,11 @@ const SummaryChip = (
     { label, value, badge }: {
 	label: string
 	value: number
-	badge: 'created' | 'skipped' | 'failed' | 'error' },
+	badge?: 'skipped' },
 ) => (
     <div className="flex items-center gap-2 rounded-full border border-border
 		    bg-background px-3 py-1 text-sm">
-      <PostImportStatusBadge value={badge}/>
+      {badge && <PostImportStatusBadge value={badge}/>}
       <span>{label} {value}</span>
     </div>)