このコミットが含まれているのは:
@@ -1,3 +1,4 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useParams } from 'react-router-dom'
|
||||
@@ -13,248 +14,254 @@ import MainArea from '@/components/layout/MainArea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { apiGet, apiPatch, apiPut } from '@/lib/api'
|
||||
import {
|
||||
suppressMaterialFile,
|
||||
fetchMaterial,
|
||||
updateMaterial,
|
||||
} from '@/lib/materials'
|
||||
import { materialsKeys } from '@/lib/queryKeys'
|
||||
import { inputClass } from '@/lib/utils'
|
||||
import { useValidationErrors } from '@/lib/useValidationErrors'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
import type { Material, Tag, User } from '@/types'
|
||||
|
||||
type MaterialWithTag = Material & { tag: Tag }
|
||||
import type { User } from '@/types'
|
||||
|
||||
type MaterialFormField = 'tag' | 'file' | 'url' | 'exportPaths'
|
||||
|
||||
|
||||
const MaterialDetailPage: FC<{ user: User | null }> = ({ user }) => {
|
||||
const { id } = useParams ()
|
||||
const qc = useQueryClient ()
|
||||
|
||||
const [exportPath, setExportPath] = useState ('')
|
||||
const [file, setFile] = useState<File | null> (null)
|
||||
const [filePreview, setFilePreview] = useState ('')
|
||||
const [loading, setLoading] = useState (false)
|
||||
const [material, setMaterial] = useState<MaterialWithTag | null> (null)
|
||||
const [sending, setSending] = useState (false)
|
||||
const [tag, setTag] = useState ('')
|
||||
const [url, setURL] = useState ('')
|
||||
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
|
||||
useValidationErrors<MaterialFormField> ()
|
||||
|
||||
const handleSubmit = async () => {
|
||||
clearValidationErrors ()
|
||||
const { data: material, isError, isLoading } = useQuery ({
|
||||
queryKey: materialsKeys.show (id ?? ''),
|
||||
queryFn: () => fetchMaterial (id ?? ''),
|
||||
enabled: id != null,
|
||||
})
|
||||
|
||||
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)
|
||||
useEffect (() => {
|
||||
if (!(material))
|
||||
return
|
||||
|
||||
try
|
||||
{
|
||||
setSending (true)
|
||||
const data = await apiPut<Material> (`/materials/${ id }`, formData)
|
||||
setMaterial (data)
|
||||
toast ({ title: '更新成功!' })
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
applyValidationError (e)
|
||||
toast ({ title: '更新失敗……', description: '入力を見直してください．' })
|
||||
}
|
||||
finally
|
||||
{
|
||||
setSending (false)
|
||||
}
|
||||
setTag (material.tag.name)
|
||||
setURL (material.url ?? '')
|
||||
setExportPath (material.exportPaths.legacyDrive ?? '')
|
||||
if (material.file && material.contentType)
|
||||
{
|
||||
setFilePreview (material.file)
|
||||
setFile (null)
|
||||
}
|
||||
}, [material])
|
||||
|
||||
const invalidateMaterialQueries = async () => {
|
||||
await qc.invalidateQueries ({ queryKey: materialsKeys.root })
|
||||
}
|
||||
|
||||
const handleSuppress = async () => {
|
||||
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)
|
||||
|
||||
return await updateMaterial (id ?? '', formData)
|
||||
},
|
||||
onSuccess: async data => {
|
||||
qc.setQueryData (materialsKeys.show (id ?? ''), data)
|
||||
await invalidateMaterialQueries ()
|
||||
toast ({ title: '更新成功!' })
|
||||
},
|
||||
onError: error => {
|
||||
applyValidationError (error)
|
||||
toast ({ title: '更新失敗……', description: '入力を見直してください．' })
|
||||
},
|
||||
})
|
||||
|
||||
const suppressMutation = useMutation ({
|
||||
mutationFn: async (reason: string) =>
|
||||
await suppressMaterialFile (id ?? '', { reason }),
|
||||
onSuccess: async data => {
|
||||
qc.setQueryData (materialsKeys.show (id ?? ''), data)
|
||||
setFile (null)
|
||||
setFilePreview ('')
|
||||
await invalidateMaterialQueries ()
|
||||
toast ({ title: '抑止しました' })
|
||||
},
|
||||
onError: () => {
|
||||
toast ({ title: '抑止に失敗しました' })
|
||||
},
|
||||
})
|
||||
|
||||
const handleSubmit = () => {
|
||||
clearValidationErrors ()
|
||||
updateMutation.mutate ()
|
||||
}
|
||||
|
||||
const handleSuppress = () => {
|
||||
const reason = window.prompt ('抑止理由を入力してください。')
|
||||
if (reason == null || reason.trim () === '')
|
||||
return
|
||||
if (!window.confirm ('素材ファイルを抑止します。表示と ZIP export から除外されます。'))
|
||||
return
|
||||
|
||||
try
|
||||
{
|
||||
const data = await apiPatch<Material> (
|
||||
`/materials/${ id }/suppress_file`,
|
||||
{ reason },
|
||||
)
|
||||
setMaterial (data)
|
||||
setFile (null)
|
||||
setFilePreview ('')
|
||||
toast ({ title: '抑止しました' })
|
||||
}
|
||||
catch
|
||||
{
|
||||
toast ({ title: '抑止に失敗しました' })
|
||||
}
|
||||
suppressMutation.mutate (reason)
|
||||
}
|
||||
|
||||
useEffect (() => {
|
||||
if (!(id))
|
||||
return
|
||||
|
||||
void (async () => {
|
||||
try
|
||||
{
|
||||
setLoading (true)
|
||||
const data = await apiGet<MaterialWithTag> (`/materials/${ id }`)
|
||||
setMaterial (data)
|
||||
setTag (data.tag.name)
|
||||
if (data.file && data.contentType)
|
||||
{
|
||||
setFilePreview (data.file)
|
||||
setFile (null)
|
||||
}
|
||||
setURL (data.url ?? '')
|
||||
setExportPath (data.exportPaths.legacyDrive ?? '')
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading (false)
|
||||
}
|
||||
}) ()
|
||||
}, [id])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
{material && (
|
||||
<Helmet>
|
||||
<title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>)}
|
||||
{material && (
|
||||
<Helmet>
|
||||
<title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>)}
|
||||
|
||||
{loading ? 'Loading...' : (material && (
|
||||
<>
|
||||
<PageTitle>
|
||||
<TagLink
|
||||
tag={material.tag}
|
||||
withWiki={false}
|
||||
withCount={false}/>
|
||||
</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>
|
||||
<TagLink
|
||||
tag={material.tag}
|
||||
withWiki={false}
|
||||
withCount={false}/>
|
||||
</PageTitle>
|
||||
|
||||
{material.fileSuppressedAt && (
|
||||
<div className="mb-4 rounded border border-red-300 bg-red-50 p-3 text-red-700">
|
||||
<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">
|
||||
<WikiBody
|
||||
title={material.tag.name}
|
||||
body={material.wikiPageBody ?? undefined}/>
|
||||
</Tab>
|
||||
<TabGroup>
|
||||
<Tab name="Wiki">
|
||||
<WikiBody
|
||||
title={material.tag.name}
|
||||
body={material.wikiPageBody ?? undefined}/>
|
||||
</Tab>
|
||||
|
||||
<Tab name="編輯">
|
||||
<div className="max-w-wl pt-2 space-y-4">
|
||||
<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 f = e.target.files?.[0]
|
||||
setFile (f ?? null)
|
||||
setFilePreview (f ? URL.createObjectURL (f) : '')
|
||||
}}/>
|
||||
{(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>
|
||||
|
||||
{/* 参考 URL */}
|
||||
<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="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
|
||||
disabled={sending}>
|
||||
更新
|
||||
</Button>
|
||||
{user?.role === 'admin' && !material.fileSuppressedAt && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleSuppress}>
|
||||
ファイルを抑止
|
||||
</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>)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,176 +1,328 @@
|
||||
import { Fragment, useEffect, useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Fragment, useEffect, useMemo, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
|
||||
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import TagLink from '@/components/TagLink'
|
||||
import FormField from '@/components/common/FormField'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import SectionTitle from '@/components/common/SectionTitle'
|
||||
import SubsectionTitle from '@/components/common/SubsectionTitle'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { API_BASE_URL, SITE_TITLE } from '@/config'
|
||||
import { apiGet } from '@/lib/api'
|
||||
import {
|
||||
fetchMaterials,
|
||||
fetchMaterialTagByName,
|
||||
parseMaterialFilter,
|
||||
} from '@/lib/materials'
|
||||
import { materialsKeys } from '@/lib/queryKeys'
|
||||
import { inputClass } from '@/lib/utils'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
import type { Material, Tag } from '@/types'
|
||||
import type { Material, MaterialFilter, MaterialTagTree } from '@/types'
|
||||
|
||||
type TagWithMaterial = Omit<Tag, 'children'> & {
|
||||
children: TagWithMaterial[]
|
||||
material: Material | null }
|
||||
const MATERIAL_FILTER_LABELS: Record<MaterialFilter, string> = {
|
||||
present: '素材あり',
|
||||
missing: '素材なし',
|
||||
any: 'すべて',
|
||||
}
|
||||
|
||||
|
||||
const MaterialCard = ({ tag }: { tag: TagWithMaterial }) => {
|
||||
const MaterialCard = ({ tag }: { tag: MaterialTagTree }) => {
|
||||
if (!(tag.material))
|
||||
return
|
||||
return null
|
||||
|
||||
return (
|
||||
<PrefetchLink
|
||||
to={`/materials/${ tag.material.id }`}
|
||||
className="block w-40 h-40">
|
||||
<div
|
||||
className={`w-full h-full overflow-hidden rounded-xl shadow
|
||||
text-center content-center text-4xl ${
|
||||
tag.material.fileSuppressedAt
|
||||
? 'border-2 border-red-300 bg-red-50 text-base text-red-700'
|
||||
: '' }`}
|
||||
style={{ fontFamily: 'Nikumaru' }}>
|
||||
{tag.material.fileSuppressedAt
|
||||
? <span>抑止済み</span>
|
||||
: (tag.material.contentType && /image\/.*/.test (tag.material.contentType))
|
||||
? <img src={tag.material.file || undefined}/>
|
||||
: <span>照会</span>}
|
||||
</div>
|
||||
to={`/materials/${ tag.material.id }`}
|
||||
className="block h-40 w-40">
|
||||
<div
|
||||
className={`h-full w-full overflow-hidden rounded-xl shadow text-center
|
||||
content-center text-4xl ${
|
||||
tag.material.fileSuppressedAt
|
||||
? 'border-2 border-red-300 bg-red-50 text-base text-red-900 ' +
|
||||
'dark:border-red-800 dark:bg-red-950 dark:text-red-100'
|
||||
: 'bg-white text-stone-900 dark:bg-stone-900 dark:text-stone-100' }`}
|
||||
style={{ fontFamily: 'Nikumaru' }}>
|
||||
{tag.material.fileSuppressedAt
|
||||
? <span>抑止済み</span>
|
||||
: (tag.material.contentType && /image\/.*/.test (tag.material.contentType))
|
||||
? <img src={tag.material.file || undefined}/>
|
||||
: <span>照会</span>}
|
||||
</div>
|
||||
</PrefetchLink>)
|
||||
}
|
||||
|
||||
|
||||
const MaterialListPage: FC = () => {
|
||||
const [loading, setLoading] = useState (false)
|
||||
const [tag, setTag] = useState<TagWithMaterial | null> (null)
|
||||
const MaterialList = ({ materials }: { materials: Material[] }) => (
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{materials.map (material => (
|
||||
<article
|
||||
key={material.id}
|
||||
className={`rounded-2xl border p-4 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'
|
||||
: 'border-stone-200 bg-white text-stone-900 dark:border-stone-700 ' +
|
||||
'dark:bg-stone-900 dark:text-stone-100'}`}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="font-medium text-stone-900 dark:text-stone-100">
|
||||
{material.tag?.name ?? '未分類素材'}
|
||||
</h2>
|
||||
{material.fileSuppressedAt && (
|
||||
<p className="mt-1 text-sm text-red-700 dark:text-red-200">抑止済み</p>)}
|
||||
</div>
|
||||
<PrefetchLink
|
||||
to={`/materials/${ material.id }`}
|
||||
className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
|
||||
照会
|
||||
</PrefetchLink>
|
||||
</div>
|
||||
{material.exportPaths.legacyDrive && (
|
||||
<p className="mt-3 break-all text-sm text-stone-600 dark:text-stone-300">
|
||||
{material.exportPaths.legacyDrive}
|
||||
</p>)}
|
||||
</article>))}
|
||||
</div>)
|
||||
|
||||
|
||||
const MaterialTagTreeView = ({ tag }: { tag: MaterialTagTree }) => (
|
||||
<>
|
||||
<PageTitle>
|
||||
<TagLink
|
||||
tag={tag}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={tag.material
|
||||
? `/materials/${ tag.material.id }`
|
||||
: `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
|
||||
</PageTitle>
|
||||
{(!tag.material && tag.hasMaterial !== true && tag.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={tag}/>
|
||||
|
||||
<div className="ml-2 overflow-x-auto pb-2">
|
||||
{tag.children.map (c2 => (
|
||||
<Fragment key={c2.id}>
|
||||
<SectionTitle>
|
||||
<TagLink
|
||||
tag={c2}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
|
||||
</SectionTitle>
|
||||
{(!c2.material && c2.hasMaterial !== true && c2.category !== 'meme') && (
|
||||
<div className="-mt-4">
|
||||
<PrefetchLink to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c2}/>
|
||||
|
||||
<div className="ml-2">
|
||||
{c2.children.map (c3 => (
|
||||
<Fragment key={c3.id}>
|
||||
<SubsectionTitle>
|
||||
<TagLink
|
||||
tag={c3}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
|
||||
</SubsectionTitle>
|
||||
{(!c3.material && c3.hasMaterial !== true && c3.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${ encodeURIComponent (c3.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c3}/>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</>)
|
||||
|
||||
|
||||
const MaterialSearchTop: FC<{
|
||||
materialFilter: MaterialFilter
|
||||
setMaterialFilter: (value: MaterialFilter) => void
|
||||
tagName: string
|
||||
setTagName: (value: string) => void
|
||||
}> = ({ materialFilter, setMaterialFilter, tagName, setTagName }) => {
|
||||
const navigate = useNavigate ()
|
||||
const location = useLocation ()
|
||||
const query = new URLSearchParams (location.search)
|
||||
|
||||
const handleSearch = () => {
|
||||
const qs = new URLSearchParams (location.search)
|
||||
if (tagName.trim ())
|
||||
qs.set ('tag', tagName.trim ())
|
||||
else
|
||||
qs.delete ('tag')
|
||||
qs.delete ('unclassified')
|
||||
qs.set ('material_filter', materialFilter)
|
||||
navigate (`/materials?${ qs.toString () }`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<PageTitle>素材集</PageTitle>
|
||||
|
||||
<section className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm
|
||||
text-stone-900 dark:border-stone-700 dark:bg-stone-900
|
||||
dark:text-stone-100">
|
||||
<div className="space-y-4">
|
||||
<FormField label="タグ名検索">
|
||||
{() => (
|
||||
<TagInput
|
||||
value={tagName}
|
||||
setValue={setTagName}/>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="素材状態">
|
||||
{({ invalid }) => (
|
||||
<select
|
||||
value={materialFilter}
|
||||
onChange={e => setMaterialFilter (e.target.value as MaterialFilter)}
|
||||
className={inputClass (invalid)}>
|
||||
{Object.entries (MATERIAL_FILTER_LABELS).map (([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSearch}
|
||||
className="rounded-full 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>
|
||||
<PrefetchLink
|
||||
to={`/materials?unclassified=1&material_filter=${ materialFilter }`}
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2
|
||||
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-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-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>
|
||||
</section>
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
const MaterialListPage: FC = () => {
|
||||
const location = useLocation ()
|
||||
const query = useMemo (() => new URLSearchParams (location.search), [location.search])
|
||||
const tagQuery = query.get ('tag') ?? ''
|
||||
const unclassified = query.get ('unclassified') === '1'
|
||||
const initialFilter = parseMaterialFilter (query.get ('material_filter'), 'present')
|
||||
|
||||
const [tagName, setTagName] = useState (tagQuery)
|
||||
const [materialFilter, setMaterialFilter] = useState<MaterialFilter> (initialFilter)
|
||||
|
||||
const {
|
||||
data: tag,
|
||||
isLoading: tagLoading,
|
||||
isError: tagError,
|
||||
} = useQuery ({
|
||||
queryKey: materialsKeys.byTagName (tagQuery, initialFilter),
|
||||
queryFn: () => fetchMaterialTagByName (tagQuery, initialFilter),
|
||||
enabled: tagQuery !== '' && !unclassified,
|
||||
})
|
||||
|
||||
const {
|
||||
data: unclassifiedData,
|
||||
isLoading: unclassifiedLoading,
|
||||
isError: unclassifiedError,
|
||||
} = useQuery ({
|
||||
queryKey: materialsKeys.unclassified ({ page: 1, limit: 50 }),
|
||||
queryFn: () => fetchMaterials ({ page: 1, limit: 50, unclassified: true }),
|
||||
enabled: unclassified,
|
||||
})
|
||||
|
||||
useEffect (() => {
|
||||
if (!(tagQuery))
|
||||
{
|
||||
setTag (null)
|
||||
return
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
try
|
||||
{
|
||||
setLoading (true)
|
||||
setTag (
|
||||
await apiGet<TagWithMaterial> (
|
||||
`/tags/name/${ encodeURIComponent (tagQuery) }/materials`))
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading (false)
|
||||
}
|
||||
}) ()
|
||||
}, [location.search, tagQuery])
|
||||
setTagName (tagQuery)
|
||||
setMaterialFilter (initialFilter)
|
||||
}, [initialFilter, tagQuery])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Nikumaru';
|
||||
src: url(${ nikumaru }) format('opentype');
|
||||
}`}
|
||||
</style>
|
||||
<title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Nikumaru';
|
||||
src: url(${ nikumaru }) format('opentype');
|
||||
}`}
|
||||
</style>
|
||||
<title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
|
||||
{loading ? 'Loading...' : (
|
||||
tag
|
||||
? (
|
||||
<>
|
||||
<PageTitle>
|
||||
<TagLink
|
||||
tag={tag}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={tag.material
|
||||
? `/materials/${ tag.material.id }`
|
||||
: `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
|
||||
</PageTitle>
|
||||
{(!(tag.material) && tag.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={tag}/>
|
||||
|
||||
<div className="ml-2 overflow-x-auto pb-2">
|
||||
{tag.children.map (c2 => (
|
||||
<Fragment key={c2.id}>
|
||||
<SectionTitle>
|
||||
<TagLink
|
||||
tag={c2}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
|
||||
</SectionTitle>
|
||||
{(!(c2.material) && c2.category !== 'meme') && (
|
||||
<div className="-mt-4">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c2}/>
|
||||
|
||||
<div className="ml-2">
|
||||
{c2.children.map (c3 => (
|
||||
<Fragment key={c3.id}>
|
||||
<SubsectionTitle>
|
||||
<TagLink
|
||||
tag={c3}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
|
||||
</SubsectionTitle>
|
||||
{(!(c3.material) && c3.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${
|
||||
encodeURIComponent (c3.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c3}/>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</>)
|
||||
: (
|
||||
<>
|
||||
<p>左のリストから照会したいタグを選択してください。</p>
|
||||
<p>もしくは……</p>
|
||||
<ul>
|
||||
<li><PrefetchLink to="/materials/new">素材を新規追加する</PrefetchLink></li>
|
||||
<li>
|
||||
<a href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}>
|
||||
すべての素材をダウンロードする
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</>))}
|
||||
{unclassified ? (
|
||||
<>
|
||||
<PageTitle>未分類素材</PageTitle>
|
||||
<div className="-mt-2 mb-4">
|
||||
<PrefetchLink
|
||||
to={`/materials?material_filter=${ materialFilter }`}
|
||||
className="text-sm text-sky-700 underline underline-offset-2
|
||||
dark:text-sky-300">
|
||||
素材検索トップへ戻る
|
||||
</PrefetchLink>
|
||||
</div>
|
||||
{unclassifiedLoading && <p>Loading...</p>}
|
||||
{unclassifiedError && (
|
||||
<p className="text-red-600 dark:text-red-300">未分類素材の取得に失敗しました．</p>)}
|
||||
{unclassifiedData && unclassifiedData.materials.length === 0 && (
|
||||
<p>未分類素材はありません．</p>)}
|
||||
{unclassifiedData && unclassifiedData.materials.length > 0 && (
|
||||
<MaterialList materials={unclassifiedData.materials}/>)}
|
||||
</>) : tagQuery ? (
|
||||
<>
|
||||
{tagLoading && <p>Loading...</p>}
|
||||
{tagError && (
|
||||
<p className="text-red-600">素材一覧の取得に失敗しました．</p>)}
|
||||
{(!tagLoading && !tagError && !tag) && (
|
||||
<p>該当する素材タグが見つかりませんでした．</p>)}
|
||||
{tag && <MaterialTagTreeView tag={tag}/>}
|
||||
</>) : (
|
||||
<MaterialSearchTop
|
||||
tagName={tagName}
|
||||
setTagName={setTagName}
|
||||
materialFilter={materialFilter}
|
||||
setMaterialFilter={setMaterialFilter}/>)}
|
||||
</MainArea>)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
@@ -11,7 +12,8 @@ import MainArea from '@/components/layout/MainArea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { apiPost } from '@/lib/api'
|
||||
import { createMaterial } from '@/lib/materials'
|
||||
import { materialsKeys } from '@/lib/queryKeys'
|
||||
import { inputClass } from '@/lib/utils'
|
||||
import { useValidationErrors } from '@/lib/useValidationErrors'
|
||||
|
||||
@@ -21,6 +23,7 @@ type MaterialFormField = 'tag' | 'file' | 'url' | 'exportPaths'
|
||||
|
||||
|
||||
const MaterialNewPage: FC = () => {
|
||||
const qc = useQueryClient ()
|
||||
const location = useLocation ()
|
||||
const query = new URLSearchParams (location.search)
|
||||
const tagQuery = query.get ('tag') ?? ''
|
||||
@@ -29,41 +32,39 @@ const MaterialNewPage: FC = () => {
|
||||
|
||||
const [file, setFile] = useState<File | null> (null)
|
||||
const [filePreview, setFilePreview] = useState ('')
|
||||
const [sending, setSending] = useState (false)
|
||||
const [tag, setTag] = useState (tagQuery)
|
||||
const [url, setURL] = useState ('')
|
||||
const [exportPath, setExportPath] = useState ('')
|
||||
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
|
||||
useValidationErrors<MaterialFormField> ()
|
||||
|
||||
const handleSubmit = async () => {
|
||||
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)
|
||||
|
||||
return await createMaterial (formData)
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await qc.invalidateQueries ({ queryKey: materialsKeys.root })
|
||||
toast ({ title: '送信成功!' })
|
||||
navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
|
||||
},
|
||||
onError: error => {
|
||||
applyValidationError (error)
|
||||
toast ({ title: '送信失敗……', description: '入力を見直してください．' })
|
||||
},
|
||||
})
|
||||
|
||||
const handleSubmit = () => {
|
||||
clearValidationErrors ()
|
||||
|
||||
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)
|
||||
|
||||
try
|
||||
{
|
||||
setSending (true)
|
||||
await apiPost ('/materials', formData)
|
||||
toast ({ title: '送信成功!' })
|
||||
navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
applyValidationError (e)
|
||||
toast ({ title: '送信失敗……', description: '入力を見直してください．' })
|
||||
}
|
||||
finally
|
||||
{
|
||||
setSending (false)
|
||||
}
|
||||
createMutation.mutate ()
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -153,7 +154,7 @@ const MaterialNewPage: FC = () => {
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
|
||||
disabled={sending}>
|
||||
disabled={createMutation.isPending}>
|
||||
追加
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
新しい課題から参照
ユーザをブロックする