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

#399

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-07-15 19:43:39 +09:00
親 eebbd5d069
コミット 21d6c1408a
12個のファイルの変更，350行の追加，218行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/components/common/Form.tsx
+8 -4
ファイルの表示
@@ -1,11 +1,15 @@
import { cn } from '@/lib/utils'
import type { FC, ReactNode } from 'react'
type Props = { children: ReactNode }
type Props = {
children: ReactNode
className?: string }
const Form: FC<Props> = ({ children }) => (
<div className="max-w-xl mx-auto p-4 space-y-4">
const Form: FC<Props> = ({ children, className }) => (
<div className={cn ('mx-auto max-w-xl space-y-4 p-4', className)}>
{children}
</div>)
export default Form
export default Form
frontend/src/components/common/StatusBadge.tsx
+51
ファイルの表示
@@ -0,0 +1,51 @@
import { cn } from '@/lib/utils'
import type { FC, ReactNode } from 'react'
export type StatusBadgeTone =
'danger'
| 'default'
| 'info'
| 'manual'
| 'ready'
| 'skipped'
| 'warning'
type Props = {
children: ReactNode
tone: StatusBadgeTone }
const TONES: Record<StatusBadgeTone, string[]> = {
default: [
'border-slate-300 bg-slate-50 text-slate-700',
'dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200'],
ready: [
'border-emerald-300 bg-emerald-50 text-emerald-700',
'dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200'],
warning: [
'border-amber-300 bg-amber-50 text-amber-700',
'dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200'],
danger: [
'border-rose-300 bg-rose-50 text-rose-700',
'dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200'],
info: [
'border-sky-300 bg-sky-50 text-sky-700',
'dark:border-sky-900 dark:bg-sky-950 dark:text-sky-200'],
skipped: [
'border-stone-300 bg-stone-50 text-stone-700',
'dark:border-stone-700 dark:bg-stone-900 dark:text-stone-200'],
manual: [
'border-purple-300 bg-purple-50 text-purple-700',
'dark:border-purple-900 dark:bg-purple-950 dark:text-purple-200'] }
const StatusBadge: FC<Props> = ({ children, tone }) => (
<span
className={cn (
'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium',
TONES[tone],
)}>
{children}
</span>)
export default StatusBadge
frontend/src/components/posts/import/PageActionFooter.tsx
+22
ファイルの表示
@@ -0,0 +1,22 @@
import type { FC, ReactNode } from 'react'
type Props = {
summary: ReactNode
actions: ReactNode }
const PageActionFooter: FC<Props> = ({ summary, actions }) => (
<div
className="shrink-0 border-t bg-white/95 p-4 backdrop-blur
dark:border-neutral-700 dark:bg-neutral-950/95">
<div className="mx-auto flex max-w-6xl flex-col gap-3 md:flex-row
md:items-center md:justify-between">
<div className="flex flex-wrap items-center gap-2 text-sm">
{summary}
</div>
<div className="flex flex-col gap-2 sm:flex-row">
{actions}
</div>
</div>
</div>)
export default PageActionFooter
frontend/src/components/posts/import/PostImportRowDialog.tsx
+63 -7
ファイルの表示
@@ -4,7 +4,7 @@ import FieldWarning from '@/components/common/FieldWarning'
import FormField from '@/components/common/FormField'
import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
import ThumbnailPreview from '@/components/posts/import/ThumbnailPreview'
import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
import { effectivePostImportStatus } from '@/components/posts/import/postImportRowStatus'
import { Button } from '@/components/ui/button'
import { Dialog,
DialogContent,
@@ -17,7 +17,8 @@ import { inputClass } from '@/lib/utils'
import type { FC } from 'react'
import { useEffect, useState } from 'react'
import type { PostImportRow } from '@/lib/postImportSession'
import type { PostImportOrigin,
PostImportRow } from '@/lib/postImportSession'
type Draft = {
url: string
@@ -37,6 +38,36 @@ type Props = {
onOpenChange: (open: boolean) => void
onSave: (draft: Draft) => Promise<boolean> }
const originOf = (
row: PostImportRow,
field: string,
): PostImportOrigin =>
row.provenance[field] ?? 'automatic'
const changedOrigin = (
changed: boolean,
row: PostImportRow,
field: string,
): PostImportOrigin =>
changed ? 'manual' : originOf (row, field)
const originalCreatedOrigin = (
row: PostImportRow,
originalDraft: Draft,
draft: Draft,
): PostImportOrigin => {
const changed =
originalDraft.originalCreatedFrom !== draft.originalCreatedFrom
|| originalDraft.originalCreatedBefore !== draft.originalCreatedBefore
if (changed)
return 'manual'
const manualOrigin =
originOf (row, 'originalCreatedFrom') === 'manual'
|| originOf (row, 'originalCreatedBefore') === 'manual'
return manualOrigin ? 'manual' : 'automatic'
}
const buildDraft = (row: PostImportRow): Draft => ({
url: row.url,
title: String (row.attributes.title ?? ''),
@@ -77,6 +108,9 @@ const PostImportRowDialog: FC<Props> = (
return null
const displayRow = messageRow ?? row
const originalDraft = buildDraft (row)
const fieldOrigin = (field: keyof Draft): PostImportOrigin =>
changedOrigin (draft[field] !== originalDraft[field], row, field)
const update = <Key extends keyof Draft,> (
key: Key,
@@ -109,7 +143,7 @@ const PostImportRowDialog: FC<Props> = (
url={draft.thumbnailBase}
className="h-28 w-28"/>
<div className="flex flex-wrap gap-2">
<PostImportStatusBadge value={displayPostImportStatus (displayRow)}/>
<PostImportStatusBadge value={effectivePostImportStatus (displayRow)}/>
</div>
</div>
@@ -117,6 +151,7 @@ const PostImportRowDialog: FC<Props> = (
<DialogTextField
label="URL"
value={draft.url}
origin={fieldOrigin ('url')}
warnings={displayRow.fieldWarnings.url}
errors={groupedMessages (displayRow.validationErrors.url,
displayRow.importErrors?.url)}
@@ -124,6 +159,7 @@ const PostImportRowDialog: FC<Props> = (
<DialogTextField
label="タイトル"
value={draft.title}
origin={fieldOrigin ('title')}
warnings={displayRow.fieldWarnings.title}
errors={groupedMessages (displayRow.validationErrors.title,
displayRow.importErrors?.title)}
@@ -131,6 +167,7 @@ const PostImportRowDialog: FC<Props> = (
<DialogTextField
label="サムネール基底 URL"
value={draft.thumbnailBase}
origin={fieldOrigin ('thumbnailBase')}
warnings={displayRow.fieldWarnings.thumbnailBase}
errors={groupedMessages (
displayRow.validationErrors.thumbnailBase,
@@ -138,6 +175,10 @@ const PostImportRowDialog: FC<Props> = (
)}
onChange={value => update ('thumbnailBase', value)}/>
<PostOriginalCreatedTimeField
labelAddon={
<PostImportStatusBadge
value={originalCreatedOrigin (row, originalDraft, draft)}/>
}
originalCreatedFrom={draft.originalCreatedFrom || null}
setOriginalCreatedFrom={value => update ('originalCreatedFrom', value ?? '')}
originalCreatedBefore={draft.originalCreatedBefore || null}
@@ -153,6 +194,7 @@ const PostImportRowDialog: FC<Props> = (
<DialogTextField
label="動画時間"
value={draft.duration}
origin={fieldOrigin ('duration')}
errors={groupedMessages (
displayRow.validationErrors.duration,
displayRow.validationErrors.videoMs,
@@ -163,6 +205,7 @@ const PostImportRowDialog: FC<Props> = (
<DialogAreaField
label="タグ"
value={draft.tags}
origin={fieldOrigin ('tags')}
warnings={displayRow.fieldWarnings.tags}
errors={groupedMessages (displayRow.validationErrors.tags,
displayRow.importErrors?.tags)}
@@ -170,6 +213,7 @@ const PostImportRowDialog: FC<Props> = (
<DialogTextField
label="親投稿"
value={draft.parentPostIds}
origin={fieldOrigin ('parentPostIds')}
errors={groupedMessages (
displayRow.validationErrors.parentPostIds,
displayRow.importErrors?.parentPostIds,
@@ -207,14 +251,15 @@ const PostImportRowDialog: FC<Props> = (
}
const DialogTextField = (
{ label, value, warnings, errors, onChange }: {
{ label, value, origin, warnings, errors, onChange }: {
label: string
value: string
origin: PostImportOrigin
warnings?: string[]
errors?: string[]
onChange: (value: string) => void },
) => (
<FormField label={label} messages={errors}>
<FormField label={<DialogLabel label={label} origin={origin}/>} messages={errors}>
{({ describedBy, invalid }) => (
<>
<input
@@ -228,14 +273,15 @@ const DialogTextField = (
</FormField>)
const DialogAreaField = (
{ label, value, warnings, errors, onChange }: {
{ label, value, origin, warnings, errors, onChange }: {
label: string
value: string
origin: PostImportOrigin
warnings?: string[]
errors?: string[]
onChange: (value: string) => void },
) => (
<FormField label={label} messages={errors}>
<FormField label={<DialogLabel label={label} origin={origin}/>} messages={errors}>
{({ describedBy, invalid }) => (
<>
<textarea
@@ -249,4 +295,14 @@ const DialogAreaField = (
</>)}
</FormField>)
const DialogLabel = (
{ label, origin }: {
label: string
origin: PostImportOrigin },
) => (
<span className="flex items-center gap-2">
<span>{label}</span>
<PostImportStatusBadge value={origin}/>
</span>)
export default PostImportRowDialog
frontend/src/components/posts/import/PostImportRowSummary.tsx
+5 -23
ファイルの表示
@@ -3,7 +3,8 @@ import { cn } from '@/lib/utils'
import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
import ThumbnailPreview from '@/components/posts/import/ThumbnailPreview'
import { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
import { effectivePostImportStatus } from '@/components/posts/import/postImportRowStatus'
import { importPanelToneForRow } from '@/components/posts/import/postImportTone'
import type { FC } from 'react'
@@ -13,25 +14,6 @@ type Props = {
row: PostImportRow
onEdit: () => void }
const toneClass = (row: PostImportRow): string[] => {
const value = displayPostImportStatus (row)
switch (value)
{
case 'skipped':
return [
'border-stone-200 bg-stone-50',
'dark:border-stone-800 dark:bg-stone-900/60']
case 'warning':
return [
'border-amber-200 bg-amber-50',
'dark:border-amber-900 dark:bg-amber-950/30']
default:
return [
'border-border bg-white',
'dark:border-neutral-700 dark:bg-neutral-900']
}
}
const summaryError = (row: PostImportRow): string | null => {
const validation = Object.values (row.validationErrors ?? { }).flat ()[0]
if (validation)
@@ -54,7 +36,7 @@ const summaryDate = (row: PostImportRow): string =>
const PostImportRowSummary: FC<Props> = ({ row, onEdit }) => {
const error = summaryError (row)
const warning = error == null ? summaryWarning (row) : null
const displayStatus = displayPostImportStatus (row)
const displayStatus = effectivePostImportStatus (row)
return (
<>
@@ -62,7 +44,7 @@ const PostImportRowSummary: FC<Props> = ({ row, onEdit }) => {
className={cn (
'hidden items-center gap-4 rounded-lg border p-4 md:grid',
'md:grid-cols-[4rem_5rem_minmax(0,1fr)_auto_auto]',
toneClass (row),
importPanelToneForRow (row),
'transition-shadow hover:shadow-sm',
)}>
<div className="space-y-1">
@@ -111,7 +93,7 @@ const PostImportRowSummary: FC<Props> = ({ row, onEdit }) => {
<div
className={cn (
'space-y-3 rounded-lg border p-4 md:hidden',
toneClass (row),
importPanelToneForRow (row),
)}>
<div className="flex items-start gap-3">
<ThumbnailPreview
frontend/src/components/posts/import/PostImportStatusBadge.tsx
+21 -20
ファイルの表示
@@ -1,36 +1,37 @@
import { cn } from '@/lib/utils'
import StatusBadge from '@/components/common/StatusBadge'
import type { FC } from 'react'
import type { StatusBadgeTone } from '@/components/common/StatusBadge'
import type { PostImportBadgeValue } from '@/components/posts/import/postImportRowStatus'
type Props = {
value: PostImportBadgeValue }
const LABELS: Record<PostImportBadgeValue, string> = {
ready: '登録可能',
warning: '警告',
skipped: 'スキップ' }
ready: '登録可能',
warning: '警告',
error: '要修正',
created: '登録済み',
skipped: 'スキップ',
failed: '失敗',
automatic: '自動取得',
manual: '手修正' }
const STYLES: Record<PostImportBadgeValue, string[]> = {
ready: [
'border-emerald-300 bg-emerald-50 text-emerald-700',
'dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200'],
warning: [
'border-amber-300 bg-amber-50 text-amber-700',
'dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200'],
skipped: [
'border-stone-300 bg-stone-50 text-stone-700',
'dark:border-stone-700 dark:bg-stone-900 dark:text-stone-200'] }
const TONES: Record<PostImportBadgeValue, StatusBadgeTone> = {
ready: 'ready',
warning: 'warning',
error: 'danger',
created: 'info',
skipped: 'skipped',
failed: 'danger',
automatic: 'default',
manual: 'manual' }
const PostImportStatusBadge: FC<Props> = ({ value }) => (
<span
className={cn (
'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium',
STYLES[value],
)}>
<StatusBadge tone={TONES[value]}>
{LABELS[value]}
</span>)
</StatusBadge>)
export default PostImportStatusBadge
frontend/src/components/posts/import/PostImportSummaryChip.tsx
+19
ファイルの表示
@@ -0,0 +1,19 @@
import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
import type { FC } from 'react'
import type { PostImportBadgeValue } from '@/components/posts/import/postImportRowStatus'
type Props = {
label: string
value: number
badge?: PostImportBadgeValue }
const PostImportSummaryChip: FC<Props> = ({ label, value, badge }) => (
<div className="flex items-center gap-2 rounded-full border border-border
bg-background px-3 py-1 text-sm">
{badge != null && <PostImportStatusBadge value={badge}/>}
<span>{label} {value}</span>
</div>)
export default PostImportSummaryChip
frontend/src/components/posts/import/postImportRowStatus.ts
+28 -9
ファイルの表示
@@ -1,18 +1,37 @@
import type { PostImportRow } from '@/lib/postImportSession'
export type PostImportDisplayStatus = 'ready' | 'warning' | 'skipped'
export type PostImportEffectiveStatus =
'created'
| 'error'
| 'failed'
| 'ready'
| 'skipped'
| 'warning'
export type PostImportBadgeValue = PostImportDisplayStatus
export type PostImportBadgeValue =
PostImportEffectiveStatus
| 'automatic'
| 'manual'
const hasWarnings = (row: PostImportRow): boolean =>
Object.values (row.fieldWarnings ?? { }).some (_1 => _1.length > 0)
|| row.baseWarnings.length > 0
export const displayPostImportStatus = (
export const effectivePostImportStatus = (
row: PostImportRow,
): PostImportDisplayStatus =>
row.skipReason === 'existing' || row.importStatus === 'skipped'
? 'skipped'
: hasWarnings (row)
? 'warning'
: 'ready'
): PostImportEffectiveStatus => {
if (Object.keys (row.validationErrors ?? { }).length > 0 || row.status === 'error')
return 'error'
switch (row.importStatus)
{
case 'created':
case 'skipped':
case 'failed':
return row.importStatus
default:
return hasWarnings (row) || row.status === 'warning'
? 'warning'
: 'ready'
}
}
frontend/src/components/posts/import/postImportTone.ts
+36
ファイルの表示
@@ -0,0 +1,36 @@
import { effectivePostImportStatus } from '@/components/posts/import/postImportRowStatus'
import type { PostImportRow } from '@/lib/postImportSession'
export const importPanelToneClass = (
status: 'created' | 'error' | 'failed' | 'invalid' | 'skipped' | 'warning' | 'ready',
): string[] => {
switch (status)
{
case 'created':
return [
'border-sky-200 bg-sky-50',
'dark:border-sky-900 dark:bg-sky-950/30']
case 'error':
case 'failed':
case 'invalid':
return [
'border-rose-200 bg-rose-50',
'dark:border-rose-900 dark:bg-rose-950/30']
case 'skipped':
return [
'border-stone-200 bg-stone-50',
'dark:border-stone-800 dark:bg-stone-900/60']
case 'warning':
return [
'border-amber-200 bg-amber-50',
'dark:border-amber-900 dark:bg-amber-950/30']
default:
return [
'border-border bg-white',
'dark:border-neutral-700 dark:bg-neutral-900']
}
}
export const importPanelToneForRow = (row: PostImportRow): string[] =>
importPanelToneClass (effectivePostImportStatus (row))
frontend/src/pages/posts/PostImportResultPage.tsx
+14 -64
ファイルの表示
@@ -8,7 +8,9 @@ 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 { displayPostImportStatus } from '@/components/posts/import/postImportRowStatus'
import { effectivePostImportStatus } from '@/components/posts/import/postImportRowStatus'
import { importPanelToneClass } from '@/components/posts/import/postImportTone'
import PostImportSummaryChip from '@/components/posts/import/PostImportSummaryChip'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
@@ -33,38 +35,6 @@ import type { User } from '@/types'
type Props = { user: User | null }
const resultToneClass = (
status: 'created' | 'failed' | 'invalid' | 'skipped' | 'warning' | 'ready',
): string[] => {
switch (status)
{
case 'created':
return [
'border-sky-200 bg-sky-50',
'dark:border-sky-900 dark:bg-sky-950/30']
case 'skipped':
return [
'border-stone-200 bg-stone-50',
'dark:border-stone-800 dark:bg-stone-900/60']
case 'failed':
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']
case 'warning':
return [
'border-amber-200 bg-amber-50',
'dark:border-amber-900 dark:bg-amber-950/30']
default:
return [
'border-border bg-white',
'dark:border-neutral-700 dark:bg-neutral-900']
}
}
const rowMessages = (row: PostImportRow): string[] => [
...Object.values (row.validationErrors ?? { }).flat (),
...Object.values (row.importErrors ?? { }).flat ()]
@@ -204,23 +174,16 @@ 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}/>
<SummaryChip label="スキップ" value={counts.skipped} badge="skipped"/>
<SummaryChip label="失敗" value={counts.failed}/>
<SummaryChip label="要修正" value={counts.invalid}/>
<PostImportSummaryChip label="登録成功" value={counts.created} badge="created"/>
<PostImportSummaryChip label="スキップ" value={counts.skipped} badge="skipped"/>
<PostImportSummaryChip label="失敗" value={counts.failed} badge="failed"/>
<PostImportSummaryChip label="要修正" value={counts.invalid} badge="error"/>
</div>
</div>
<div className="space-y-3">
{session.rows.map (row => {
const displayStatus =
Object.keys (row.validationErrors).length > 0
? 'invalid'
: row.importStatus === 'created'
? 'created'
: row.importStatus === 'failed'
? 'failed'
: displayPostImportStatus (row)
const displayStatus = effectivePostImportStatus (row)
const canEdit =
Object.keys (row.validationErrors).length > 0
|| row.importStatus === 'failed'
@@ -230,18 +193,17 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
: row.importStatus === 'failed'
&& Object.keys (row.validationErrors).length === 0
return (
<div
key={row.sourceRow}
className={[
'rounded-lg border p-4',
...resultToneClass (displayStatus)].join (' ')}>
<div
key={row.sourceRow}
className={[
'rounded-lg border p-4',
...importPanelToneClass (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>
{displayStatus === 'skipped' && (
<PostImportStatusBadge value="skipped"/>)}
<PostImportStatusBadge value={displayStatus}/>
</div>
<div className="text-sm text-neutral-700 dark:text-neutral-200">
{String (row.attributes.title ?? '') || row.url}
@@ -311,16 +273,4 @@ const PostImportResultPage: FC<Props> = ({ user }) => {
</MainArea>)
}
const SummaryChip = (
{ label, value, badge }: {
label: string
value: number
badge?: 'skipped' },
) => (
<div className="flex items-center gap-2 rounded-full border border-border
bg-background px-3 py-1 text-sm">
{badge && <PostImportStatusBadge value={badge}/>}
<span>{label} {value}</span>
</div>)
export default PostImportResultPage
frontend/src/pages/posts/PostImportReviewPage.tsx
+32 -36
ファイルの表示
@@ -6,9 +6,11 @@ import { useNavigate,
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import PageActionFooter from '@/components/posts/import/PageActionFooter'
import PostImportRowDialog from '@/components/posts/import/PostImportRowDialog'
import PostImportRowSummary from '@/components/posts/import/PostImportRowSummary'
import PostImportStatusBadge from '@/components/posts/import/PostImportStatusBadge'
import PostImportSummaryChip from '@/components/posts/import/PostImportSummaryChip'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
@@ -296,10 +298,11 @@ const PostImportReviewPage: 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 items-center gap-2">
<SummaryChip label="全件" value={counts.total}/>
<SummaryChip label="登録対象" value={counts.submittable}/>
<SummaryChip label="要確認" value={counts.invalid}/>
<SummaryChip label="スキップ予定" value={counts.skipPlanned}/>
<PostImportSummaryChip label="全件" value={counts.total}/>
<PostImportSummaryChip label="登録対象" value={counts.submittable} badge="ready"/>
<PostImportSummaryChip label="要確認" value={counts.invalid} badge="error"/>
<PostImportSummaryChip label="スキップ予定" value={counts.skipPlanned}
badge="skipped"/>
</div>
</div>
@@ -354,37 +357,30 @@ const PostImportFooter = (
onBack: () => void
onSubmit: () => void },
) => (
<div
className="shrink-0 border-t bg-white/95 p-4 backdrop-blur
dark:border-neutral-700 dark:bg-neutral-950/95">
<div className="mx-auto flex max-w-6xl flex-col gap-3 md:flex-row
md:items-center md:justify-between">
<div className="flex flex-wrap items-center gap-2 text-sm">
<span>処理対象 {processableCount} 件</span>
<PostImportStatusBadge value="ready"/>
<span>登録対象 {creatableCount} 件</span>
<PostImportStatusBadge value="skipped"/>
<span>スキップ予定 {skipPlannedCount} 件</span>
<span>要確認 {invalidCount} 件</span>
</div>
<div className="flex flex-col gap-2 sm:flex-row">
<Button type="button" variant="outline" onClick={onBack}>
URL リスト入力へ戻る
</Button>
<Button
type="button"
onClick={onSubmit}
disabled={loading || processableCount === 0}>
取込を実行
</Button>
</div>
</div>
</div>)
const SummaryChip = ({ label, value }: { label: string
value: number }) => (
<div className="rounded-full border border-border bg-background px-3 py-1 text-sm">
{label} {value}
</div>)
<PageActionFooter
summary={
<>
<span>処理対象 {processableCount} 件</span>
<PostImportStatusBadge value="ready"/>
<span>登録対象 {creatableCount} 件</span>
<PostImportStatusBadge value="skipped"/>
<span>スキップ予定 {skipPlannedCount} 件</span>
<PostImportStatusBadge value="error"/>
<span>要確認 {invalidCount} 件</span>
</>
}
actions={
<>
<Button type="button" variant="outline" onClick={onBack}>
URL リスト入力へ戻る
</Button>
<Button
type="button"
onClick={onSubmit}
disabled={loading || processableCount === 0}>
取込を実行
</Button>
</>
}/>)
export default PostImportReviewPage
frontend/src/pages/posts/PostImportSourcePage.tsx
+51 -55
ファイルの表示
@@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet-async'
import { useNavigate } from 'react-router-dom'
import FieldError from '@/components/common/FieldError'
import Form from '@/components/common/Form'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
@@ -150,63 +151,58 @@ const PostImportSourcePage: FC<Props> = ({ user }) => {
<title>{`投稿インポート | ${ SITE_TITLE }`}</title>
</Helmet>
<div className="mx-auto max-w-4xl space-y-4 p-4">
<Form className="max-w-4xl p-0">
<PageTitle>投稿インポート</PageTitle>
<div className="rounded-lg border bg-white p-4 dark:border-neutral-700
dark:bg-neutral-900 md:p-6">
<div className="space-y-4">
<FormField label="URL リスト">
{() => (
<textarea
value={source}
rows={14}
aria-invalid={messages.length > 0 || sourceIssues.length > 0}
aria-describedby={sourceDescribedBy || undefined}
className={inputClass (
messages.length > 0 || sourceIssues.length > 0,
'font-mono text-sm',
)}
onBlur={() => {
savePostImportSourceDraft (source, message =>
toast ({
title: '入力内容を保存できませんでした',
description: message }))
}}
onChange={ev => {
editedRef.current = true
setSource (ev.target.value)
setSourceError (null)
setSourceIssues ([])
}}/>)}
</FormField>
<div id={messages.length > 0 ? SOURCE_ERROR_ID : undefined}>
<FieldError messages={messages}/>
</div>
<ul
id={SOURCE_ISSUES_ID}
className="space-y-2 text-sm text-red-700 dark:text-red-300">
{sourceIssues.map (issue => (
<li key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}>
<div>{issue.sourceRow} 行目: {issue.message}</div>
<div className="break-all font-mono text-xs">{issue.url}</div>
</li>))}
</ul>
<div className="flex items-center justify-between gap-3">
<div className="text-sm text-neutral-600 dark:text-neutral-300">
入力行数 {lineCount} / {MAX_ROWS}
</div>
<Button
type="button"
className="shrink-0"
onClick={preview}
disabled={loading}>
次へ
</Button>
</div>
</div>
<FormField label="URL リスト">
{() => (
<textarea
value={source}
rows={14}
aria-invalid={messages.length > 0 || sourceIssues.length > 0}
aria-describedby={sourceDescribedBy || undefined}
className={inputClass (
messages.length > 0 || sourceIssues.length > 0,
'font-mono text-sm',
)}
onBlur={() => {
savePostImportSourceDraft (source, message =>
toast ({
title: '入力内容を保存できませんでした',
description: message }))
}}
onChange={ev => {
editedRef.current = true
setSource (ev.target.value)
setSourceError (null)
setSourceIssues ([])
}}/>)}
</FormField>
<div id={messages.length > 0 ? SOURCE_ERROR_ID : undefined}>
<FieldError messages={messages}/>
</div>
</div>
<ul
id={SOURCE_ISSUES_ID}
className="space-y-2 text-sm text-red-700 dark:text-red-300">
{sourceIssues.map (issue => (
<li key={`${ issue.sourceRow }-${ issue.message }-${ issue.url }`}>
<div>{issue.sourceRow} 行目: {issue.message}</div>
<div className="break-all font-mono text-xs">{issue.url}</div>
</li>))}
</ul>
<div className="flex items-center justify-between gap-3">
<div className="text-sm text-neutral-600 dark:text-neutral-300">
入力行数 {lineCount} / {MAX_ROWS}
</div>
<Button
type="button"
className="shrink-0"
onClick={preview}
disabled={loading}>
次へ
</Button>
</div>
</Form>
</MainArea>)
}