素材管理（#99） (#303)
#99 #99 #99 #99 #99 #99 #99 #99 #99 #99 Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #303
This commit was merged in pull request #303.
This commit is contained in:
@@ -0,0 +1,12 @@
|
||||
import { Outlet } from 'react-router-dom'
|
||||
|
||||
import MaterialSidebar from '@/components/MaterialSidebar'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
|
||||
export default (() => (
|
||||
<div className="md:flex md:flex-1 md:h-[calc(100dvh-88px)]">
|
||||
<MaterialSidebar/>
|
||||
<Outlet/>
|
||||
</div>)) satisfies FC
|
||||
@@ -0,0 +1,182 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
import TagLink from '@/components/TagLink'
|
||||
import WikiBody from '@/components/WikiBody'
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import TabGroup, { Tab } from '@/components/common/TabGroup'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
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, apiPut } from '@/lib/api'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
import type { Material, Tag } from '@/types'
|
||||
|
||||
type MaterialWithTag = Material & { tag: Tag }
|
||||
|
||||
|
||||
export default (() => {
|
||||
const { id } = useParams ()
|
||||
|
||||
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 handleSubmit = 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)
|
||||
|
||||
try
|
||||
{
|
||||
setSending (true)
|
||||
const data = await apiPut<Material> (`/materials/${ id }`, formData)
|
||||
setMaterial (data)
|
||||
toast ({ title: '更新成功!' })
|
||||
}
|
||||
catch
|
||||
{
|
||||
toast ({ title: '更新失敗……', description: '入力を見直してください．' })
|
||||
}
|
||||
finally
|
||||
{
|
||||
setSending (false)
|
||||
}
|
||||
}
|
||||
|
||||
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 (new File ([await (await fetch (data.file)).blob ()],
|
||||
data.file,
|
||||
{ type: data.contentType }))
|
||||
}
|
||||
setURL (data.url ?? '')
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading (false)
|
||||
}
|
||||
}) ()
|
||||
}, [id])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
{material && (
|
||||
<Helmet>
|
||||
<title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>)}
|
||||
|
||||
{loading ? 'Loading...' : (material && (
|
||||
<>
|
||||
<PageTitle>
|
||||
<TagLink
|
||||
tag={material.tag}
|
||||
withWiki={false}
|
||||
withCount={false}/>
|
||||
</PageTitle>
|
||||
|
||||
{(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>
|
||||
|
||||
<Tab name="編輯">
|
||||
<div className="max-w-wl pt-2 space-y-4">
|
||||
{/* タグ */}
|
||||
<div>
|
||||
<Label>タグ</Label>
|
||||
<TagInput value={tag} setValue={setTag}/>
|
||||
</div>
|
||||
|
||||
{/* ファイル */}
|
||||
<div>
|
||||
<Label>ファイル</Label>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*,video/*,audio/*"
|
||||
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>))}
|
||||
</div>
|
||||
|
||||
{/* 参考 URL */}
|
||||
<div>
|
||||
<Label>参考 URL</Label>
|
||||
<input
|
||||
type="url"
|
||||
value={url}
|
||||
onChange={e => setURL (e.target.value)}
|
||||
className="w-full border p-2 rounded"/>
|
||||
</div>
|
||||
|
||||
{/* 送信 */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
|
||||
disabled={sending}>
|
||||
更新
|
||||
</Button>
|
||||
</div>
|
||||
</Tab>
|
||||
</TabGroup>
|
||||
</>))}
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
@@ -0,0 +1,166 @@
|
||||
import { Fragment, useEffect, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
|
||||
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import TagLink from '@/components/TagLink'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import SectionTitle from '@/components/common/SectionTitle'
|
||||
import SubsectionTitle from '@/components/common/SubsectionTitle'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { apiGet } from '@/lib/api'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
import type { Material, Tag } from '@/types'
|
||||
|
||||
type TagWithMaterial = Omit<Tag, 'children'> & {
|
||||
children: TagWithMaterial[]
|
||||
material: Material | null }
|
||||
|
||||
|
||||
const MaterialCard = ({ tag }: { tag: TagWithMaterial }) => {
|
||||
if (!(tag.material))
|
||||
return
|
||||
|
||||
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"
|
||||
style={{ fontFamily: 'Nikumaru' }}>
|
||||
{(tag.material.contentType && /image\/.*/.test (tag.material.contentType))
|
||||
? <img src={tag.material.file || undefined}/>
|
||||
: <span>照会</span>}
|
||||
</div>
|
||||
</PrefetchLink>)
|
||||
}
|
||||
|
||||
|
||||
export default (() => {
|
||||
const [loading, setLoading] = useState (false)
|
||||
const [tag, setTag] = useState<TagWithMaterial | null> (null)
|
||||
|
||||
const location = useLocation ()
|
||||
const query = new URLSearchParams (location.search)
|
||||
const tagQuery = query.get ('tag') ?? ''
|
||||
|
||||
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])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<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">
|
||||
{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="#">すべての素材をダウンロードする</a></li> */}
|
||||
</ul>
|
||||
</>))}
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
|
||||
import Form from '@/components/common/Form'
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
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 type { FC } from 'react'
|
||||
|
||||
|
||||
export default (() => {
|
||||
const location = useLocation ()
|
||||
const query = new URLSearchParams (location.search)
|
||||
const tagQuery = query.get ('tag') ?? ''
|
||||
|
||||
const navigate = useNavigate ()
|
||||
|
||||
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 handleSubmit = async () => {
|
||||
const formData = new FormData
|
||||
if (tag)
|
||||
formData.append ('tag', tag)
|
||||
if (file)
|
||||
formData.append ('file', file)
|
||||
if (url)
|
||||
formData.append ('url', url)
|
||||
|
||||
try
|
||||
{
|
||||
setSending (true)
|
||||
await apiPost ('/materials', formData)
|
||||
toast ({ title: '送信成功!' })
|
||||
navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
|
||||
}
|
||||
catch
|
||||
{
|
||||
toast ({ title: '送信失敗……', description: '入力を見直してください．' })
|
||||
}
|
||||
finally
|
||||
{
|
||||
setSending (false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
<title>{`素材追加 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
|
||||
<Form>
|
||||
<PageTitle>素材追加</PageTitle>
|
||||
|
||||
{/* タグ */}
|
||||
<div>
|
||||
<Label>タグ</Label>
|
||||
<TagInput value={tag} setValue={setTag}/>
|
||||
</div>
|
||||
|
||||
{/* ファイル */}
|
||||
<div>
|
||||
<Label>ファイル</Label>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*,video/*,audio/*"
|
||||
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>))}
|
||||
</div>
|
||||
|
||||
{/* 参考 URL */}
|
||||
<div>
|
||||
<Label>参考 URL</Label>
|
||||
<input
|
||||
type="url"
|
||||
value={url}
|
||||
onChange={e => setURL (e.target.value)}
|
||||
className="w-full border p-2 rounded"/>
|
||||
</div>
|
||||
|
||||
{/* 送信 */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
|
||||
disabled={sending}>
|
||||
追加
|
||||
</Button>
|
||||
</Form>
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
|
||||
import type { FC, FormEvent } from 'react'
|
||||
|
||||
|
||||
export default (() => {
|
||||
const [tagName, setTagName] = useState ('')
|
||||
const [parentTagName, setParentTagName] = useState ('')
|
||||
|
||||
const handleSearch = (e: FormEvent) => {
|
||||
e.preventDefault ()
|
||||
}
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
<title>素材集 | {SITE_TITLE}</title>
|
||||
</Helmet>
|
||||
|
||||
<div className="max-w-xl">
|
||||
<PageTitle>素材集</PageTitle>
|
||||
|
||||
<form onSubmit={handleSearch} className="space-y-2">
|
||||
{/* タグ */}
|
||||
<div>
|
||||
<Label>タグ</Label>
|
||||
<TagInput
|
||||
value={tagName}
|
||||
setValue={setTagName}/>
|
||||
</div>
|
||||
|
||||
{/* 親タグ */}
|
||||
<div>
|
||||
<Label>親タグ</Label>
|
||||
<TagInput
|
||||
value={parentTagName}
|
||||
setValue={setParentTagName}/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
Reference in New Issue
Block a user