#399

frontend/src/components/posts/import/PostImportRowSummary.tsx

@@ -1,8 +1,9 @@
+import FieldError from '@/components/common/FieldError'
 import { Button } from '@/components/ui/button'
 import PostImportThumbnailPreview from '@/components/posts/import/PostImportThumbnailPreview'
 import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
 import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
-import { canEditReviewRow } from '@/lib/postImportSession'
+import { canEditReviewRow, canRetryResultRow } from '@/lib/postImportSession'
 import { cn, originalCreatedAtString } from '@/lib/utils'
 
 import type { FC } from 'react'
@@ -12,7 +13,10 @@ import type { PostImportRow } from '@/lib/postImportSession'
 type Props = {
     row:           PostImportRow
     onEdit:        () => void
-    editDisabled?: boolean }
+    onRetry?:      () => void
+    rowMessages?:  string[]
+    editDisabled?: boolean
+    retryDisabled?: boolean }
 
 const summaryWarning = (row: PostImportRow): string | null =>
     Object.values (row.fieldWarnings ?? { }).flat ()[0]
@@ -25,7 +29,14 @@ const summaryDate = (row: PostImportRow): string =>
 	row.attributes.originalCreatedBefore?.toString () ?? null)
 
 
-const PostImportRowSummary: FC<Props> = ({ row, onEdit, editDisabled }) => {
+const PostImportRowSummary: FC<Props> = (
+    { row,
+      onEdit,
+      onRetry,
+      rowMessages,
+      editDisabled,
+      retryDisabled },
+) => {
   const warning = summaryWarning (row)
   const displayStatus = displayPostImportStatus (row)
 
@@ -54,24 +65,34 @@ const PostImportRowSummary: FC<Props> = ({ row, onEdit, editDisabled }) => {
             </div>
             <div className="text-xs text-neutral-500 dark:text-neutral-400">
               {summaryDate (row)}
-              {row.attributes.duration ? ` / ${ row.attributes.duration }` : ''}
             </div>
             {warning && (
                 <div className="text-xs text-amber-700 dark:text-amber-200">
                   {warning}
                 </div>)}
+            <FieldError messages={rowMessages}/>
           </div>
           <div className="space-y-1">
             {displayStatus != null && <PostImportStatusBadge value={displayStatus}/>}
           </div>
           <div className="flex justify-end">
-            <Button
-                type="button"
-                variant="outline"
-                onClick={onEdit}
-                disabled={!(canEditReviewRow (row)) || editDisabled === true}>
-              編輯
-            </Button>
+            <div className="flex gap-2">
+              <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onEdit}
+                  disabled={!(canEditReviewRow (row)) || editDisabled === true}>
+                編輯
+              </Button>
+              {onRetry != null && (
+                  <Button
+                      type="button"
+                      variant="outline"
+                      onClick={onRetry}
+                      disabled={!(canRetryResultRow (row)) || retryDisabled === true}>
+                    再試行
+                  </Button>)}
+            </div>
           </div>
         </div>
 
@@ -98,21 +119,31 @@ const PostImportRowSummary: FC<Props> = ({ row, onEdit, editDisabled }) => {
               </div>
               <div className="text-xs text-neutral-500 dark:text-neutral-400">
                 {summaryDate (row)}
-                {row.attributes.duration ? ` / ${ row.attributes.duration }` : ''}
               </div>
               {warning && (
                   <div className="text-xs text-amber-700 dark:text-amber-200">
                     {warning}
                   </div>)}
+              <FieldError messages={rowMessages}/>
             </div>
           </div>
-          <Button
-              type="button"
-              variant="outline"
-              onClick={onEdit}
-              disabled={!(canEditReviewRow (row)) || editDisabled === true}>
-            編輯
-          </Button>
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Button
+                type="button"
+                variant="outline"
+                onClick={onEdit}
+                disabled={!(canEditReviewRow (row)) || editDisabled === true}>
+              編輯
+            </Button>
+            {onRetry != null && (
+                <Button
+                    type="button"
+                    variant="outline"
+                    onClick={onRetry}
+                    disabled={!(canRetryResultRow (row)) || retryDisabled === true}>
+                  再試行
+                </Button>)}
+          </div>
         </div>
       </>)
 }