このコミットが含まれているのは:
@@ -45,8 +45,7 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
|
||||
const { data: material, isError, isLoading } = useQuery ({
|
||||
queryKey: materialsKeys.show (id ?? ''),
|
||||
queryFn: () => fetchMaterial (id ?? ''),
|
||||
enabled: id != null,
|
||||
})
|
||||
enabled: id != null})
|
||||
const materialTitle = material
|
||||
? material.tag?.name ?? `素材 #${ material.id }`
|
||||
: ''
|
||||
@@ -60,8 +59,8 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
|
||||
setExportPath (material.exportPaths.legacyDrive ?? '')
|
||||
if (material.file && material.contentType)
|
||||
{
|
||||
setFilePreview (material.file)
|
||||
setFile (null)
|
||||
setFilePreview (material.file)
|
||||
setFile (null)
|
||||
}
|
||||
}, [material])
|
||||
|
||||
@@ -71,42 +70,40 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
|
||||
|
||||
const updateMutation = useMutation ({
|
||||
mutationFn: async () => {
|
||||
const formData = new FormData
|
||||
if (tag.trim ())
|
||||
formData.append ('tag', tag)
|
||||
if (file)
|
||||
formData.append ('file', file)
|
||||
if (url.trim ())
|
||||
formData.append ('url', url)
|
||||
formData.append ('export_paths[legacy_drive]', exportPath)
|
||||
const formData = new FormData
|
||||
if (tag.trim ())
|
||||
formData.append ('tag', tag)
|
||||
if (file)
|
||||
formData.append ('file', file)
|
||||
if (url.trim ())
|
||||
formData.append ('url', url)
|
||||
formData.append ('export_paths[legacy_drive]', exportPath)
|
||||
|
||||
return await updateMaterial (id ?? '', formData)
|
||||
return await updateMaterial (id ?? '', formData)
|
||||
},
|
||||
onSuccess: async data => {
|
||||
qc.setQueryData (materialsKeys.show (id ?? ''), data)
|
||||
await invalidateMaterialQueries ()
|
||||
toast ({ title: '更新成功!' })
|
||||
qc.setQueryData (materialsKeys.show (id ?? ''), data)
|
||||
await invalidateMaterialQueries ()
|
||||
toast ({ title: '更新成功!' })
|
||||
},
|
||||
onError: error => {
|
||||
applyValidationError (error)
|
||||
toast ({ title: '更新失敗……', description: '入力を見直してください．' })
|
||||
},
|
||||
})
|
||||
applyValidationError (error)
|
||||
toast ({ title: '更新失敗……', description: '入力を見直してください．' })
|
||||
}})
|
||||
|
||||
const suppressMutation = useMutation ({
|
||||
mutationFn: async (reason: string) =>
|
||||
await suppressMaterialFile (id ?? '', { reason }),
|
||||
await suppressMaterialFile (id ?? '', { reason }),
|
||||
onSuccess: async data => {
|
||||
qc.setQueryData (materialsKeys.show (id ?? ''), data)
|
||||
setFile (null)
|
||||
setFilePreview ('')
|
||||
await invalidateMaterialQueries ()
|
||||
toast ({ title: '抑止しました' })
|
||||
qc.setQueryData (materialsKeys.show (id ?? ''), data)
|
||||
setFile (null)
|
||||
setFilePreview ('')
|
||||
await invalidateMaterialQueries ()
|
||||
toast ({ title: '抑止しました' })
|
||||
},
|
||||
onError: () => {
|
||||
toast ({ title: '抑止に失敗しました' })
|
||||
},
|
||||
})
|
||||
toast ({ title: '抑止に失敗しました' })
|
||||
}})
|
||||
|
||||
const handleSubmit = () => {
|
||||
clearValidationErrors ()
|
||||
@@ -125,155 +122,153 @@ const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
{material && (
|
||||
<Helmet>
|
||||
<title>{`${ materialTitle } 素材照会 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>)}
|
||||
{material && (
|
||||
<Helmet>
|
||||
<title>{`${ materialTitle } 素材照会 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>)}
|
||||
|
||||
{isLoading ? 'Loading...' : isError ? (
|
||||
<p className="text-red-600 dark:text-red-300">
|
||||
素材の取得に失敗しました．
|
||||
</p>
|
||||
) : material == null ? (
|
||||
<p className="text-stone-700 dark:text-stone-300">
|
||||
素材が見つかりませんでした．
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<PageTitle>
|
||||
{material.tag
|
||||
? (
|
||||
<TagLink
|
||||
tag={material.tag}
|
||||
withWiki={false}
|
||||
withCount={false}/>)
|
||||
: materialTitle}
|
||||
</PageTitle>
|
||||
{isLoading ? 'Loading...' : isError ? (
|
||||
<p className="text-red-600 dark:text-red-300">
|
||||
素材の取得に失敗しました．
|
||||
</p>) : material == null ? (
|
||||
<p className="text-stone-700 dark:text-stone-300">
|
||||
素材が見つかりませんでした．
|
||||
</p>) : (
|
||||
<>
|
||||
<PageTitle>
|
||||
{material.tag
|
||||
? (
|
||||
<TagLink
|
||||
tag={material.tag}
|
||||
withWiki={false}
|
||||
withCount={false}/>)
|
||||
: materialTitle}
|
||||
</PageTitle>
|
||||
|
||||
{material.fileSuppressedAt && (
|
||||
<div className="mb-4 rounded border border-red-300 bg-red-50 p-3
|
||||
text-red-900 dark:border-red-800 dark:bg-red-950
|
||||
dark:text-red-100">
|
||||
<span>素材ファイルは抑止済みです。</span>
|
||||
{material.fileSuppressionReason && (
|
||||
<span> 理由: {material.fileSuppressionReason}</span>)}
|
||||
</div>)}
|
||||
{material.fileSuppressedAt && (
|
||||
<div className="mb-4 rounded border border-red-300 bg-red-50 p-3
|
||||
text-red-900 dark:border-red-800 dark:bg-red-950
|
||||
dark:text-red-100">
|
||||
<span>素材ファイルは抑止済みです。</span>
|
||||
{material.fileSuppressionReason && (
|
||||
<span> 理由: {material.fileSuppressionReason}</span>)}
|
||||
</div>)}
|
||||
|
||||
{(!material.fileSuppressedAt && material.file && material.contentType) && (
|
||||
(/image\/.*/.test (material.contentType) && (
|
||||
<img src={material.file} alt={material.tag?.name || undefined}/>))
|
||||
|| (/video\/.*/.test (material.contentType) && (
|
||||
<video src={material.file} controls/>))
|
||||
|| (/audio\/.*/.test (material.contentType) && (
|
||||
<audio src={material.file} controls/>)))}
|
||||
{(!material.fileSuppressedAt && material.file && material.contentType) && (
|
||||
(/image\/.*/.test (material.contentType) && (
|
||||
<img src={material.file} alt={material.tag?.name || undefined}/>))
|
||||
|| (/video\/.*/.test (material.contentType) && (
|
||||
<video src={material.file} controls/>))
|
||||
|| (/audio\/.*/.test (material.contentType) && (
|
||||
<audio src={material.file} controls/>)))}
|
||||
|
||||
<TabGroup>
|
||||
<Tab name="Wiki">
|
||||
{material.tag
|
||||
? (
|
||||
<WikiBody
|
||||
title={material.tag.name}
|
||||
body={material.wikiPageBody ?? undefined}/>)
|
||||
: (
|
||||
<p className="text-stone-700 dark:text-stone-300">
|
||||
タグ未設定の素材です．
|
||||
</p>)}
|
||||
</Tab>
|
||||
<TabGroup>
|
||||
<Tab name="Wiki">
|
||||
{material.tag
|
||||
? (
|
||||
<WikiBody
|
||||
title={material.tag.name}
|
||||
body={material.wikiPageBody ?? undefined}/>)
|
||||
: (
|
||||
<p className="text-stone-700 dark:text-stone-300">
|
||||
タグ未設定の素材です．
|
||||
</p>)}
|
||||
</Tab>
|
||||
|
||||
<Tab name="編輯">
|
||||
<div className="max-w-wl space-y-4 pt-2">
|
||||
<FieldError messages={baseErrors}/>
|
||||
<Tab name="編輯">
|
||||
<div className="max-w-wl space-y-4 pt-2">
|
||||
<FieldError messages={baseErrors}/>
|
||||
|
||||
<FormField label="タグ" messages={fieldErrors.tag}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<TagInput
|
||||
describedBy={describedBy}
|
||||
invalid={invalid}
|
||||
value={tag}
|
||||
setValue={setTag}/>)}
|
||||
</FormField>
|
||||
<FormField label="タグ" messages={fieldErrors.tag}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<TagInput
|
||||
describedBy={describedBy}
|
||||
invalid={invalid}
|
||||
value={tag}
|
||||
setValue={setTag}/>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="ファイル" messages={fieldErrors.file}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*,video/*,audio/*"
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid}
|
||||
onChange={e => {
|
||||
const nextFile = e.target.files?.[0]
|
||||
setFile (nextFile ?? null)
|
||||
setFilePreview (
|
||||
nextFile ? URL.createObjectURL (nextFile) : '')
|
||||
}}/>
|
||||
{(file && filePreview) && (
|
||||
(/image\/.*/.test (file.type) && (
|
||||
<img
|
||||
src={filePreview}
|
||||
alt="preview"
|
||||
className="mt-2 max-h-48 rounded border"/>))
|
||||
|| (/video\/.*/.test (file.type) && (
|
||||
<video
|
||||
src={filePreview}
|
||||
controls
|
||||
className="mt-2 max-h-48 rounded border"/>))
|
||||
|| (/audio\/.*/.test (file.type) && (
|
||||
<audio
|
||||
src={filePreview}
|
||||
controls
|
||||
className="mt-2 max-h-48"/>))
|
||||
|| (
|
||||
<p className="text-red-600 dark:text-red-400">
|
||||
その形式のファイルには対応していません．
|
||||
</p>))}
|
||||
</>)}
|
||||
</FormField>
|
||||
<FormField label="ファイル" messages={fieldErrors.file}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*,video/*,audio/*"
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid}
|
||||
onChange={e => {
|
||||
const nextFile = e.target.files?.[0]
|
||||
setFile (nextFile ?? null)
|
||||
setFilePreview (
|
||||
nextFile ? URL.createObjectURL (nextFile) : '')
|
||||
}}/>
|
||||
{(file && filePreview) && (
|
||||
(/image\/.*/.test (file.type) && (
|
||||
<img
|
||||
src={filePreview}
|
||||
alt="preview"
|
||||
className="mt-2 max-h-48 rounded border"/>))
|
||||
|| (/video\/.*/.test (file.type) && (
|
||||
<video
|
||||
src={filePreview}
|
||||
controls
|
||||
className="mt-2 max-h-48 rounded border"/>))
|
||||
|| (/audio\/.*/.test (file.type) && (
|
||||
<audio
|
||||
src={filePreview}
|
||||
controls
|
||||
className="mt-2 max-h-48"/>))
|
||||
|| (
|
||||
<p className="text-red-600 dark:text-red-400">
|
||||
その形式のファイルには対応していません．
|
||||
</p>))}
|
||||
</>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="参考 URL" messages={fieldErrors.url}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<input
|
||||
type="url"
|
||||
value={url}
|
||||
onChange={e => setURL (e.target.value)}
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid}
|
||||
className={inputClass (invalid)}/>)}
|
||||
</FormField>
|
||||
<FormField label="参考 URL" messages={fieldErrors.url}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<input
|
||||
type="url"
|
||||
value={url}
|
||||
onChange={e => setURL (e.target.value)}
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid}
|
||||
className={inputClass (invalid)}/>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="ZIP 出力パス" messages={fieldErrors.exportPaths}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<input
|
||||
type="text"
|
||||
value={exportPath}
|
||||
onChange={e => setExportPath (e.target.value)}
|
||||
placeholder="伊地知ニジカ/表情/泣き.png"
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid}
|
||||
className={inputClass (invalid)}/>)}
|
||||
</FormField>
|
||||
<FormField label="ZIP 出力パス" messages={fieldErrors.exportPaths}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<input
|
||||
type="text"
|
||||
value={exportPath}
|
||||
onChange={e => setExportPath (e.target.value)}
|
||||
placeholder="伊地知ニジカ/表情/泣き.png"
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid}
|
||||
className={inputClass (invalid)}/>)}
|
||||
</FormField>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="rounded bg-blue-600 px-4 py-2 text-white
|
||||
disabled:bg-gray-400"
|
||||
disabled={updateMutation.isPending}>
|
||||
更新
|
||||
</Button>
|
||||
{user?.role === 'admin' && !material.fileSuppressedAt && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleSuppress}
|
||||
disabled={suppressMutation.isPending}>
|
||||
ファイルを抑止
|
||||
</Button>)}
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
</TabGroup>
|
||||
</>)}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="rounded bg-blue-600 px-4 py-2 text-white
|
||||
disabled:bg-gray-400"
|
||||
disabled={updateMutation.isPending}>
|
||||
更新
|
||||
</Button>
|
||||
{user?.role === 'admin' && !material.fileSuppressedAt && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleSuppress}
|
||||
disabled={suppressMutation.isPending}>
|
||||
ファイルを抑止
|
||||
</Button>)}
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
</TabGroup>
|
||||
</>)}
|
||||
</MainArea>)
|
||||
}
|
||||
|
||||
|
||||
@@ -25,8 +25,7 @@ import type {
|
||||
MaterialIndexSort,
|
||||
MaterialIndexSuppression,
|
||||
MaterialIndexTagState,
|
||||
MaterialIndexView,
|
||||
} from '@/types'
|
||||
MaterialIndexView } from '@/types'
|
||||
|
||||
const MEDIA_KIND_LABELS: Record<Material['mediaKind'], string> = {
|
||||
image: '画像',
|
||||
@@ -34,8 +33,7 @@ const MEDIA_KIND_LABELS: Record<Material['mediaKind'], string> = {
|
||||
audio: '音声',
|
||||
file_other: 'その他ファイル',
|
||||
url_only: 'URL のみ',
|
||||
suppressed: '抑止済み',
|
||||
}
|
||||
suppressed: '抑止済み'}
|
||||
|
||||
const MEDIA_FILTER_LABELS: Record<MaterialIndexMediaKind, string> = {
|
||||
all: 'すべて',
|
||||
@@ -43,8 +41,7 @@ const MEDIA_FILTER_LABELS: Record<MaterialIndexMediaKind, string> = {
|
||||
video: '動画',
|
||||
audio: '音声',
|
||||
file_other: 'その他ファイル',
|
||||
url_only: 'URL のみ',
|
||||
}
|
||||
url_only: 'URL のみ'}
|
||||
|
||||
const SORT_LABELS: Record<MaterialIndexSort, string> = {
|
||||
created_at: '作成日時',
|
||||
@@ -53,8 +50,7 @@ const SORT_LABELS: Record<MaterialIndexSort, string> = {
|
||||
media_kind: '種類',
|
||||
file_byte_size: 'ファイルサイズ',
|
||||
version_no: 'バージョン',
|
||||
id: 'ID',
|
||||
}
|
||||
id: 'ID'}
|
||||
|
||||
|
||||
const setIf = (qs: URLSearchParams, key: string, value: string | null) => {
|
||||
@@ -67,8 +63,7 @@ const setIf = (qs: URLSearchParams, key: string, value: string | null) => {
|
||||
const parseOption = <T extends string> (
|
||||
value: string | null,
|
||||
allowed: readonly T[],
|
||||
fallback: T,
|
||||
): T => allowed.includes (value as T) ? value as T : fallback
|
||||
fallback: T): T => allowed.includes (value as T) ? value as T : fallback
|
||||
|
||||
|
||||
const fileSizeText = (bytes: number | null): string => {
|
||||
@@ -88,92 +83,88 @@ const materialTitle = (material: Material): string =>
|
||||
|
||||
const MaterialThumb: FC<{ material: Material }> = ({ material }) => (
|
||||
<div
|
||||
className={`flex aspect-square h-[180px] w-[180px] items-center justify-center
|
||||
overflow-hidden rounded-lg border text-center shadow-sm ${
|
||||
material.fileSuppressedAt
|
||||
? [
|
||||
'border-red-300 bg-red-50 text-red-900 dark:border-red-800',
|
||||
'dark:bg-red-950 dark:text-red-100',
|
||||
].join (' ')
|
||||
: [
|
||||
'border-stone-200 bg-white text-stone-900 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-100',
|
||||
].join (' ') }`}>
|
||||
className={`flex aspect-square h-[180px] w-[180px] items-center justify-center
|
||||
overflow-hidden rounded-lg border text-center shadow-sm ${
|
||||
material.fileSuppressedAt
|
||||
? [
|
||||
'border-red-300 bg-red-50 text-red-900 dark:border-red-800',
|
||||
'dark:bg-red-950 dark:text-red-100'].join (' ')
|
||||
: [
|
||||
'border-stone-200 bg-white text-stone-900 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
|
||||
{material.thumbnail
|
||||
? <img src={material.thumbnail} alt="" className="h-full w-full object-contain"/>
|
||||
: (
|
||||
<span
|
||||
className="px-2 text-2xl leading-tight"
|
||||
style={{ fontFamily: material.thumbnailFallbackKind === 'tag_name'
|
||||
<span
|
||||
className="px-2 text-2xl leading-tight"
|
||||
style={{ fontFamily: material.thumbnailFallbackKind === 'tag_name'
|
||||
? 'Nikumaru'
|
||||
: undefined }}>
|
||||
{material.thumbnailFallbackText}
|
||||
</span>)}
|
||||
{material.thumbnailFallbackText}
|
||||
</span>)}
|
||||
</div>)
|
||||
|
||||
|
||||
const MaterialCard: FC<{ material: Material }> = ({ material }) => (
|
||||
<article className="w-[180px] justify-self-center">
|
||||
<PrefetchLink to={`/materials/${ material.id }`} className="block">
|
||||
<MaterialThumb material={material}/>
|
||||
<div className="mt-2 w-[180px]">
|
||||
<p className="truncate text-sm font-medium text-stone-900 dark:text-stone-100">
|
||||
{materialTitle (material)}
|
||||
</p>
|
||||
<p className="truncate text-xs text-stone-600 dark:text-stone-300">
|
||||
{MEDIA_KIND_LABELS[material.mediaKind]} / {dateString (material.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
<MaterialThumb material={material}/>
|
||||
<div className="mt-2 w-[180px]">
|
||||
<p className="truncate text-sm font-medium text-stone-900 dark:text-stone-100">
|
||||
{materialTitle (material)}
|
||||
</p>
|
||||
<p className="truncate text-xs text-stone-600 dark:text-stone-300">
|
||||
{MEDIA_KIND_LABELS[material.mediaKind]} / {dateString (material.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</PrefetchLink>
|
||||
</article>)
|
||||
|
||||
|
||||
const MaterialListItem: FC<{ material: Material }> = ({ material }) => (
|
||||
<article
|
||||
className={`rounded-lg border p-3 shadow-sm ${
|
||||
material.fileSuppressedAt
|
||||
? [
|
||||
'border-red-200 bg-red-50 text-red-900 dark:border-red-900',
|
||||
'dark:bg-red-950 dark:text-red-100',
|
||||
].join (' ')
|
||||
: [
|
||||
'border-stone-200 bg-white text-stone-900 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-100',
|
||||
].join (' ')}`}>
|
||||
className={`rounded-lg border p-3 shadow-sm ${
|
||||
material.fileSuppressedAt
|
||||
? [
|
||||
'border-red-200 bg-red-50 text-red-900 dark:border-red-900',
|
||||
'dark:bg-red-950 dark:text-red-100'].join (' ')
|
||||
: [
|
||||
'border-stone-200 bg-white text-stone-900 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-100'].join (' ')}`}>
|
||||
<div className="flex gap-3">
|
||||
<MaterialThumb material={material}/>
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<div>
|
||||
<PrefetchLink
|
||||
to={`/materials/${ material.id }`}
|
||||
className="font-medium text-sky-700 underline underline-offset-2
|
||||
dark:text-sky-300">
|
||||
{materialTitle (material)}
|
||||
</PrefetchLink>
|
||||
{material.fileSuppressedAt && (
|
||||
<p className="mt-1 text-sm text-red-700 dark:text-red-200">抑止済み</p>)}
|
||||
</div>
|
||||
<dl className="space-y-1 text-sm text-stone-600 dark:text-stone-300">
|
||||
<div>
|
||||
<dt className="inline">種類: </dt>
|
||||
<dd className="inline">{MEDIA_KIND_LABELS[material.mediaKind]}</dd>
|
||||
</div>
|
||||
{material.fileByteSize != null && (
|
||||
<div>
|
||||
<dt className="inline">サイズ: </dt>
|
||||
<dd className="inline">{fileSizeText (material.fileByteSize)}</dd>
|
||||
</div>)}
|
||||
{material.url && (
|
||||
<div>
|
||||
<dt className="inline">URL: </dt>
|
||||
<dd className="inline break-all">{material.url}</dd>
|
||||
</div>)}
|
||||
<div>
|
||||
<dt className="inline">作成: </dt>
|
||||
<dd className="inline">{dateString (material.createdAt)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<MaterialThumb material={material}/>
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<div>
|
||||
<PrefetchLink
|
||||
to={`/materials/${ material.id }`}
|
||||
className="font-medium text-sky-700 underline underline-offset-2
|
||||
dark:text-sky-300">
|
||||
{materialTitle (material)}
|
||||
</PrefetchLink>
|
||||
{material.fileSuppressedAt && (
|
||||
<p className="mt-1 text-sm text-red-700 dark:text-red-200">抑止済み</p>)}
|
||||
</div>
|
||||
<dl className="space-y-1 text-sm text-stone-600 dark:text-stone-300">
|
||||
<div>
|
||||
<dt className="inline">種類: </dt>
|
||||
<dd className="inline">{MEDIA_KIND_LABELS[material.mediaKind]}</dd>
|
||||
</div>
|
||||
{material.fileByteSize != null && (
|
||||
<div>
|
||||
<dt className="inline">サイズ: </dt>
|
||||
<dd className="inline">{fileSizeText (material.fileByteSize)}</dd>
|
||||
</div>)}
|
||||
{material.url && (
|
||||
<div>
|
||||
<dt className="inline">URL: </dt>
|
||||
<dd className="inline break-all">{material.url}</dd>
|
||||
</div>)}
|
||||
<div>
|
||||
<dt className="inline">作成: </dt>
|
||||
<dd className="inline">{dateString (material.createdAt)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</article>)
|
||||
|
||||
@@ -190,9 +181,9 @@ const MaterialListPage: FC = () => {
|
||||
const tagState = query.get ('unclassified') === '1'
|
||||
? 'untagged'
|
||||
: parseOption<MaterialIndexTagState> (
|
||||
query.get ('tag_state'),
|
||||
['all', 'tagged', 'untagged'],
|
||||
'all')
|
||||
query.get ('tag_state'),
|
||||
['all', 'tagged', 'untagged'],
|
||||
'all')
|
||||
const mediaKind = parseOption<MaterialIndexMediaKind> (
|
||||
query.get ('media_kind'),
|
||||
['all', 'image', 'video', 'audio', 'file_other', 'url_only'],
|
||||
@@ -239,12 +230,10 @@ const MaterialListPage: FC = () => {
|
||||
direction,
|
||||
view,
|
||||
page,
|
||||
limit,
|
||||
}
|
||||
limit}
|
||||
const { data, isLoading, isError } = useQuery ({
|
||||
queryKey: materialsKeys.index (keys),
|
||||
queryFn: () => fetchMaterials (keys),
|
||||
})
|
||||
queryFn: () => fetchMaterials (keys)})
|
||||
const materials = data?.materials ?? []
|
||||
const totalPages = data ? Math.ceil (data.count / limit) : 0
|
||||
|
||||
@@ -289,214 +278,203 @@ const MaterialListPage: FC = () => {
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Nikumaru';
|
||||
src: url(${ nikumaru }) format('opentype');
|
||||
}`}
|
||||
</style>
|
||||
<title>{`素材一覧 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Nikumaru';
|
||||
src: url(${ nikumaru }) format('opentype');
|
||||
}`}
|
||||
</style>
|
||||
<title>{`素材一覧 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<PageTitle>素材一覧</PageTitle>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<PrefetchLink
|
||||
to={`/materials?tag_state=untagged&material_filter=${ materialFilter }`}
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
|
||||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||||
未分類素材
|
||||
</PrefetchLink>
|
||||
<PrefetchLink
|
||||
to="/materials/new"
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
|
||||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||||
新規素材を追加
|
||||
</PrefetchLink>
|
||||
<a
|
||||
href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
|
||||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||||
ZIP をダウンロード
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<PageTitle>素材一覧</PageTitle>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<PrefetchLink
|
||||
to="/materials/new"
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
|
||||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||||
新規素材を追加
|
||||
</PrefetchLink>
|
||||
<a
|
||||
href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
|
||||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||||
ZIP をダウンロード
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tagState === 'untagged' && (
|
||||
<PrefetchLink
|
||||
to={`/materials?material_filter=${ materialFilter }`}
|
||||
className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
|
||||
素材検索トップへ戻る
|
||||
</PrefetchLink>)}
|
||||
{tagState === 'untagged' && (
|
||||
<PrefetchLink
|
||||
to={`/materials?material_filter=${ materialFilter }`}
|
||||
className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
|
||||
素材検索トップへ戻る
|
||||
</PrefetchLink>)}
|
||||
|
||||
<form
|
||||
onSubmit={search}
|
||||
className="max-w-3xl rounded-lg border border-stone-200 bg-white p-4
|
||||
text-stone-900 dark:border-stone-700 dark:bg-stone-900
|
||||
dark:text-stone-100">
|
||||
<div className="space-y-3">
|
||||
<FormField label="検索">
|
||||
{({ invalid }) => (
|
||||
<input
|
||||
type="search"
|
||||
value={q}
|
||||
onChange={e => setQ (e.target.value)}
|
||||
placeholder="タグ名 / URL / ファイル名"
|
||||
className={inputClass (invalid)}/>)}
|
||||
</FormField>
|
||||
<form
|
||||
onSubmit={search}
|
||||
className="max-w-3xl rounded-lg border border-stone-200 bg-white p-4
|
||||
text-stone-900 dark:border-stone-700 dark:bg-stone-900
|
||||
dark:text-stone-100">
|
||||
<div className="space-y-3">
|
||||
<FormField label="検索">
|
||||
{({ invalid }) => (
|
||||
<input
|
||||
type="search"
|
||||
value={q}
|
||||
onChange={e => setQ (e.target.value)}
|
||||
placeholder="タグ名 / URL / ファイル名"
|
||||
className={inputClass (invalid)}/>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="タグ状態">
|
||||
{({ invalid }) => (
|
||||
<select
|
||||
value={tagStateInput}
|
||||
onChange={e => setTagStateInput (
|
||||
e.target.value as MaterialIndexTagState)}
|
||||
className={inputClass (invalid)}>
|
||||
<option value="all">すべて</option>
|
||||
<option value="tagged">タグあり</option>
|
||||
<option value="untagged">タグなし</option>
|
||||
</select>)}
|
||||
</FormField>
|
||||
<FormField label="タグ状態">
|
||||
{({ invalid }) => (
|
||||
<select
|
||||
value={tagStateInput}
|
||||
onChange={e => setTagStateInput (
|
||||
e.target.value as MaterialIndexTagState)}
|
||||
className={inputClass (invalid)}>
|
||||
<option value="all">すべて</option>
|
||||
<option value="tagged">タグあり</option>
|
||||
<option value="untagged">タグなし</option>
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="メディア">
|
||||
{({ invalid }) => (
|
||||
<select
|
||||
value={mediaKindInput}
|
||||
onChange={e => setMediaKindInput (
|
||||
e.target.value as MaterialIndexMediaKind)}
|
||||
className={inputClass (invalid)}>
|
||||
{Object.entries (MEDIA_FILTER_LABELS).map (([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
<FormField label="メディア">
|
||||
{({ invalid }) => (
|
||||
<select
|
||||
value={mediaKindInput}
|
||||
onChange={e => setMediaKindInput (
|
||||
e.target.value as MaterialIndexMediaKind)}
|
||||
className={inputClass (invalid)}>
|
||||
{Object.entries (MEDIA_FILTER_LABELS).map (([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="抑止状態">
|
||||
{({ invalid }) => (
|
||||
<select
|
||||
value={suppressionInput}
|
||||
onChange={e => setSuppressionInput (
|
||||
e.target.value as MaterialIndexSuppression)}
|
||||
className={inputClass (invalid)}>
|
||||
<option value="active">有効のみ</option>
|
||||
<option value="suppressed">抑止済みのみ</option>
|
||||
<option value="all">すべて</option>
|
||||
</select>)}
|
||||
</FormField>
|
||||
<FormField label="抑止状態">
|
||||
{({ invalid }) => (
|
||||
<select
|
||||
value={suppressionInput}
|
||||
onChange={e => setSuppressionInput (
|
||||
e.target.value as MaterialIndexSuppression)}
|
||||
className={inputClass (invalid)}>
|
||||
<option value="active">有効のみ</option>
|
||||
<option value="suppressed">抑止済みのみ</option>
|
||||
<option value="all">すべて</option>
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="作成日時">
|
||||
{() => (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DateTimeField value={createdFrom ?? undefined} onChange={setCreatedFrom}/>
|
||||
<span>〜</span>
|
||||
<DateTimeField value={createdTo ?? undefined} onChange={setCreatedTo}/>
|
||||
</div>)}
|
||||
</FormField>
|
||||
<FormField label="作成日時">
|
||||
{() => (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DateTimeField value={createdFrom ?? undefined} onChange={setCreatedFrom}/>
|
||||
<span>〜</span>
|
||||
<DateTimeField value={createdTo ?? undefined} onChange={setCreatedTo}/>
|
||||
</div>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="更新日時">
|
||||
{() => (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DateTimeField value={updatedFrom ?? undefined} onChange={setUpdatedFrom}/>
|
||||
<span>〜</span>
|
||||
<DateTimeField value={updatedTo ?? undefined} onChange={setUpdatedTo}/>
|
||||
</div>)}
|
||||
</FormField>
|
||||
</div>
|
||||
<FormField label="更新日時">
|
||||
{() => (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DateTimeField value={updatedFrom ?? undefined} onChange={setUpdatedFrom}/>
|
||||
<span>〜</span>
|
||||
<DateTimeField value={updatedTo ?? undefined} onChange={setUpdatedTo}/>
|
||||
</div>)}
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded bg-sky-600 px-4 py-2 text-white hover:bg-sky-700
|
||||
dark:bg-sky-500 dark:text-stone-950 dark:hover:bg-sky-400">
|
||||
検索
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="mt-4 flex flex-wrap gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded bg-sky-600 px-4 py-2 text-white hover:bg-sky-700
|
||||
dark:bg-sky-500 dark:text-stone-950 dark:hover:bg-sky-400">
|
||||
検索
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateQuery ({ view: 'card' })}
|
||||
className={`rounded-full border px-4 py-2 text-sm ${
|
||||
view === 'card'
|
||||
? [
|
||||
'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
|
||||
'dark:bg-sky-950 dark:text-sky-100',
|
||||
].join (' ')
|
||||
: [
|
||||
'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-100',
|
||||
].join (' ') }`}>
|
||||
カード
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateQuery ({ view: 'list' })}
|
||||
className={`rounded-full border px-4 py-2 text-sm ${
|
||||
view === 'list'
|
||||
? [
|
||||
'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
|
||||
'dark:bg-sky-950 dark:text-sky-100',
|
||||
].join (' ')
|
||||
: [
|
||||
'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-100',
|
||||
].join (' ') }`}>
|
||||
一覧
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateQuery ({ view: 'card' })}
|
||||
className={`rounded-full border px-4 py-2 text-sm ${
|
||||
view === 'card'
|
||||
? [
|
||||
'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
|
||||
'dark:bg-sky-950 dark:text-sky-100'].join (' ')
|
||||
: [
|
||||
'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
|
||||
カード
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateQuery ({ view: 'list' })}
|
||||
className={`rounded-full border px-4 py-2 text-sm ${
|
||||
view === 'list'
|
||||
? [
|
||||
'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
|
||||
'dark:bg-sky-950 dark:text-sky-100'].join (' ')
|
||||
: [
|
||||
'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
|
||||
'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
|
||||
一覧
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||||
<select
|
||||
value={sort}
|
||||
onChange={e => updateQuery ({ sort: e.target.value, page: '1' })}
|
||||
className={inputClass (false, 'w-auto')}>
|
||||
{Object.entries (SORT_LABELS).map (([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>))}
|
||||
</select>
|
||||
<select
|
||||
value={direction}
|
||||
onChange={e => updateQuery ({ direction: e.target.value, page: '1' })}
|
||||
className={inputClass (false, 'w-auto')}>
|
||||
<option value="desc">降順</option>
|
||||
<option value="asc">昇順</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||||
<select
|
||||
value={sort}
|
||||
onChange={e => updateQuery ({ sort: e.target.value, page: '1' })}
|
||||
className={inputClass (false, 'w-auto')}>
|
||||
{Object.entries (SORT_LABELS).map (([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>))}
|
||||
</select>
|
||||
<select
|
||||
value={direction}
|
||||
onChange={e => updateQuery ({ direction: e.target.value, page: '1' })}
|
||||
className={inputClass (false, 'w-auto')}>
|
||||
<option value="desc">降順</option>
|
||||
<option value="asc">昇順</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading && <p>Loading...</p>}
|
||||
{isError && (
|
||||
<p className="text-red-600 dark:text-red-300">素材一覧の取得に失敗しました．</p>)}
|
||||
{(!isLoading && !isError && materials.length === 0) && (
|
||||
<p>素材はありません．</p>)}
|
||||
{materials.length > 0 && (
|
||||
view === 'card'
|
||||
? (
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(196px,1fr))]
|
||||
justify-items-center gap-4">
|
||||
{materials.map (material => (
|
||||
<MaterialCard key={material.id} material={material}/>))}
|
||||
</div>)
|
||||
: (
|
||||
<div className="space-y-3">
|
||||
{materials.map (material => (
|
||||
<MaterialListItem key={material.id} material={material}/>))}
|
||||
</div>))}
|
||||
<Pagination page={page} totalPages={totalPages}/>
|
||||
</div>
|
||||
{isLoading && <p>Loading...</p>}
|
||||
{isError && (
|
||||
<p className="text-red-600 dark:text-red-300">素材一覧の取得に失敗しました．</p>)}
|
||||
{(!isLoading && !isError && materials.length === 0) && (
|
||||
<p>素材はありません．</p>)}
|
||||
{materials.length > 0 && (
|
||||
view === 'card'
|
||||
? (
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(196px,1fr))]
|
||||
justify-items-center gap-4">
|
||||
{materials.map (material => (
|
||||
<MaterialCard key={material.id} material={material}/>))}
|
||||
</div>)
|
||||
: (
|
||||
<div className="space-y-3">
|
||||
{materials.map (material => (
|
||||
<MaterialListItem key={material.id} material={material}/>))}
|
||||
</div>))}
|
||||
<Pagination page={page} totalPages={totalPages}/>
|
||||
</div>
|
||||
</MainArea>)
|
||||
}
|
||||
|
||||
|
||||
@@ -40,27 +40,26 @@ const MaterialNewPage: FC = () => {
|
||||
|
||||
const createMutation = useMutation ({
|
||||
mutationFn: async () => {
|
||||
const formData = new FormData
|
||||
if (tag)
|
||||
formData.append ('tag', tag)
|
||||
if (file)
|
||||
formData.append ('file', file)
|
||||
if (url)
|
||||
formData.append ('url', url)
|
||||
formData.append ('export_paths[legacy_drive]', exportPath)
|
||||
const formData = new FormData
|
||||
if (tag)
|
||||
formData.append ('tag', tag)
|
||||
if (file)
|
||||
formData.append ('file', file)
|
||||
if (url)
|
||||
formData.append ('url', url)
|
||||
formData.append ('export_paths[legacy_drive]', exportPath)
|
||||
|
||||
return await createMaterial (formData)
|
||||
return await createMaterial (formData)
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await qc.invalidateQueries ({ queryKey: materialsKeys.root })
|
||||
toast ({ title: '送信成功!' })
|
||||
navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
|
||||
await qc.invalidateQueries ({ queryKey: materialsKeys.root })
|
||||
toast ({ title: '送信成功!' })
|
||||
navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
|
||||
},
|
||||
onError: error => {
|
||||
applyValidationError (error)
|
||||
toast ({ title: '送信失敗……', description: '入力を見直してください．' })
|
||||
},
|
||||
})
|
||||
applyValidationError (error)
|
||||
toast ({ title: '送信失敗……', description: '入力を見直してください．' })
|
||||
}})
|
||||
|
||||
const handleSubmit = () => {
|
||||
clearValidationErrors ()
|
||||
|
||||
新しい課題から参照
ユーザをブロックする