#399

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

@@ -11,12 +11,16 @@ import type { FC } from 'react'
 import type { PostImportRow } from '@/lib/postImportSession'
 
 type Props = {
-    row:           PostImportRow
-    onEdit:        () => void
-    onRetry?:      () => void
-    rowMessages?:  string[]
-    editDisabled?: boolean
-    retryDisabled?: boolean }
+    row:              PostImportRow
+    onEdit?:          () => void
+    onRetry?:         () => void
+    onToggleSkip?:    (checked: boolean) => void
+    rowMessages?:     string[]
+    editDisabled?:    boolean
+    retryDisabled?:   boolean
+    skipDisabled?:    boolean
+    showActions?:     boolean
+    showSkipToggle?:  boolean }
 
 const summaryWarning = (row: PostImportRow): string | null =>
     Object.values (row.fieldWarnings ?? { }).flat ()[0]
@@ -33,12 +37,30 @@ const PostImportRowSummary: FC<Props> = (
     { row,
       onEdit,
       onRetry,
+      onToggleSkip,
       rowMessages,
       editDisabled,
-      retryDisabled },
+      retryDisabled,
+      skipDisabled,
+      showActions = true,
+      showSkipToggle = false },
 ) => {
   const warning = summaryWarning (row)
   const displayStatus = displayPostImportStatus (row)
+  const editAllowed = onEdit != null && canEditReviewRow (row)
+  const retryAllowed = onRetry != null && canRetryResultRow (row)
+  const skipChecked = row.skipReason === 'manual'
+  const skipControl = showSkipToggle
+      ? (
+	  <label className="flex items-center gap-2 text-sm">
+	    <input
+		type="checkbox"
+		checked={skipChecked}
+		onChange={event => onToggleSkip?.(event.target.checked)}
+		disabled={skipDisabled === true}/>
+	    <span>スキップ</span>
+	  </label>)
+      : null
 
   return (
       <>
@@ -76,20 +98,22 @@ const PostImportRowSummary: FC<Props> = (
             {displayStatus != null && <PostImportStatusBadge value={displayStatus}/>}
           </div>
           <div className="flex justify-end">
-            <div className="flex gap-2">
-              <Button
-                  type="button"
-                  variant="outline"
-                  onClick={onEdit}
-                  disabled={!(canEditReviewRow (row)) || editDisabled === true}>
-                編輯
-              </Button>
-              {onRetry != null && (
+            <div className="flex items-center gap-2">
+              {skipControl}
+              {showActions && editAllowed && (
+                  <Button
+                      type="button"
+                      variant="outline"
+                      onClick={onEdit}
+                      disabled={editDisabled === true}>
+                    編輯
+                  </Button>)}
+              {showActions && retryAllowed && (
                   <Button
                       type="button"
                       variant="outline"
                       onClick={onRetry}
-                      disabled={!(canRetryResultRow (row)) || retryDisabled === true}>
+                      disabled={retryDisabled === true}>
                     再試行
                   </Button>)}
             </div>
@@ -125,25 +149,28 @@ const PostImportRowSummary: FC<Props> = (
                     {warning}
                   </div>)}
               <FieldError messages={rowMessages}/>
+              {skipControl}
             </div>
           </div>
-          <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>
+          {showActions && (editAllowed || retryAllowed) && (
+              <div className="flex flex-col gap-2 sm:flex-row">
+                {editAllowed && (
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={onEdit}
+                        disabled={editDisabled === true}>
+                      編輯
+                    </Button>)}
+                {retryAllowed && (
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={onRetry}
+                        disabled={retryDisabled === true}>
+                      再試行
+                    </Button>)}
+              </div>)}
         </div>
       </>)
 }